Solved

Combination jquery Cycle and Flash banner

Posted on 2010-09-14
8
1,447 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
  • 2
8 Comments
 
LVL 14

Expert Comment

by:Dushyant Sharma
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
WordPress Tutorial 4: Recommended Plugins

Now that you have WordPress installed, understand the interface, and know how to install new parts, let’s take a look at our recommended plugins.

 
LVL 14

Accepted Solution

by:
Dushyant Sharma 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
 
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

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)
This Micro Tutorial will teach to how to utilize bit rate in Adobe Flash Media Live Encoder.

623 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