Solved

Combination jquery Cycle and Flash banner

Posted on 2010-09-14
8
1,444 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
Forrester Webinar: xMatters Delivers 261% ROI

Guest speaker Dean Davison, Forrester Principal Consultant, explains how a Fortune 500 communication company using xMatters found these results: Achieved a 261% ROI, Experienced $753,280 in net present value benefits over 3 years and Reduced MTTR by 91% for tier 1 incidents.

 
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

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Requirements JQuery 1.6+ HTML CSS Introduction This article was inspired by an EE question (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28372511.html) on how to make a page show some balloons animate up a page…
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
The goal of the tutorial is to teach the user how to how to load their YouTube profile onto Flash Media Live Encoder.
The goal of the tutorial is to teach the user what frame rate is, how to control it and what effect it has on the video.

756 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