Solved

Combination jquery Cycle and Flash banner

Posted on 2010-09-14
8
1,439 Views
Last Modified: 2012-08-13
I have implemented jQuery Cycle to a page, http://jquery.malsup.com/cycle/
Now I wonder if its possible to add a .swf to one of the slides and while the flash finishes playing have the cycle paused.
Is this possible?
If its not possible is there a similar cycle plugin that works with flash that I should look into?
Thank you in advance.



 
0
Comment
Question by:ShopSetup
  • 3
  • 3
  • 2
8 Comments
 
LVL 14

Expert Comment

by:ddsh79
ID: 33670415
I believe you can set a javascript variable from the flash which will tell the javascript about the time of flash. Once done the javascript animation can move ahead. You can use check the variable with settimeout. This is just an idea, may be you can develop something out of it.
0
 
LVL 15

Expert Comment

by:StealthyDev
ID: 33670503
You can use flash interaction APIs to start a Flash object and then check whether the object is playing or not..

See: http://www.coldfusionmx.com.br/support/flash/publishexport/scriptingwithflash/scriptingwithflash_03.html

Warm Regards.
0
 

Author Comment

by:ShopSetup
ID: 33677358
Thanks to both of you for your reply.
I Found this on how to pass and get variables between flash and Javascript, http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/flash/external/ExternalInterface.html

Is this the way to go?

Added a swf to a slide in Cycle, running it with swfobject and from what I can notice the flash doesn't play in the background when its not showing. Animation starts when slide loads. Not really sure if this is just a lucky coincidence.... Anyone know?

So now I need to figure out :

- How to pause the slideshow on a slide with a specific ID attached to it.
( From the demos I only see how to pause the animation when user clicks on a button)
- How do  I continue with the slideshow after SWF has finished playing.



0
 
LVL 14

Accepted Solution

by:
ddsh79 earned 250 total points
ID: 33679320
try using WMODE="transparent" (or ="opaque") parameters to send it to background.

It would not be a good idea to stop the slideshow else it will start from the beginning once the flash stops so you should pause it instead of stop.

To pause  the slideshow, you 'll have to give specific id or class and will have to tweak the cycle plugin to stop on the arrival of particular id or class. The simple command to pause the slideshow is $('#slideshow').cycle('pause');

You may also find a way to capture the event like change of display to be used for pausing the animation. This will save you from tweaking the plugin.

To continue the slideshow after SWF has finished playing you need to call a javascript function at the end of SWF.

0
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
LVL 15

Expert Comment

by:StealthyDev
ID: 33679521
0
 

Author Comment

by:ShopSetup
ID: 33679576
Thanks once again for answering my questions.
Think I need to be more specific.

What I need is getting pointed in the right direction howto accomplish the following:

In my Cycle I have 4 slides. Slide 1-2 have html content (img + header),
Slide 3 is a SWF and slide 4 is html content.

Slide 3 have id="#ad". When cycle loads the div with id "ad" I want it to pause the slideshow
and start the flash.
Last frame in teh timeline of the flash banner in the end of the flash I need to have flash telling jQuery Cycle to $('#slideshow').cycle('play');

Thank you in advance.
0
 
LVL 15

Assisted Solution

by:StealthyDev
StealthyDev earned 250 total points
ID: 33680363
@Author: I am here to give you an abstract Idea.

Whenever the slide is changed, a function, "timeoutFn" will be called if you use JQuery-cycle plugin.
In that function you can call:
Plugin.cycle('pause');
FlashObject.Play();

After starting the flash object start a timer (setInterval) to look for the flash object to stop playing using (FlashObject.IsPlaying())
Once FlashObject.IsPlaying() is false, use Plugin.cycle('resume');

Note: for flash interaction:
http://www.permadi.com/tutorial/flashjscommand/
http://www.coldfusionmx.com.br/support/flash/publishexport/scriptingwithflash/scriptingwithflash_03.html

Regards.
0
 

Author Comment

by:ShopSetup
ID: 33687053
Thank you both for your answers.
Have some more testing to do but think I accomplished it finally.

What I did was added a class to my flash div in the cycle.
After every transition I call a function where I check if the div have a specific class.
If true I pause Cycle using Plugin.cycle('pause');

swf starts playing and when done I use ExternalInterface to resume the cycle.

Thank you ddsh79 and senthurpandian for pointing me in the right direction.
0

Featured Post

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

Introduction Got endorsements from your clients?  Great!  There is almost nothing better than word-of-mouth advertising.  But how can you do that on the internet?  Sure you can make a page for endorsement quotations and list them all, but who is …
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
In this tutorial viewers will learn how to create a basic motion tween animation in Flash Open a new document in Flash: Draw/import an image: Press CTRL + F8 to convert it into a graphic symbol: Select a frame (how long you want the tween to last): …
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

708 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now