Improve company productivity with a Business Account.Sign Up

x
?
Solved

Combination jquery Cycle and Flash banner

Posted on 2010-09-14
8
Medium Priority
?
1,458 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: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
Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

 
LVL 14

Accepted Solution

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

Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Hi all! Recently there was EE question and the person wanted to have a multi-column textbox <div> selection, so as a first step to answer I provided a link but that was not complete with JavaScript selection, but had a good style sheet. So as a ques…
What is a Lightbox? A Lightbox is the effect you see when you click, for example, an image and the screen fades out and up pops the same image but in its full size dimensions. There are lots of Lightbox effects for jQuery. Problem is they are a…
In this tutorial viewers will learn how to create a basic shape tween animation in Flash including shape hints for smooth animation Open a new document in Flash: Draw a shape: Select another frame (how long you want the tween to be): Right click and…
The goal of the tutorial is to teach the user how to select the video input device. Make sure you have an input device that in connected and work and recognized by Adobe Flash Media Live Encoder and select it in the “video input” menu.

606 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