Restart Flash Movie with Slider Selection

Posted on 2012-09-10
Last Modified: 2012-09-27
Tricky item here.

I've adapted an image slider to play Flash movies in place of the slider images. This slider, called Anything Slider, is made to do this, so I'm not bending any rules of its functionality. It is built on a UL framework, using CSS & jQuery, and it works nicely, except...
Because of the UL structure, all the movies for each panel (there are 7), begin playing in the background as soon as the page loads, so that when a certain panel's turn comes around in the auto-play sequence, each movie will appear at some random point in its own loop instead of starting at the beginning when that panel slides into view.

There is a navigation bar that also allows for panels to be selected for view, interrupting the timed auto-play cycle.

My question comes in two parts: Is there a way to set this up so that an imbedded movie will not begin playing until the panel comes up in the auto-play cycle? Or, if nothing else, is there a way to attach a trigger to the navigation links so that when one is selected, the movie in the selected panel will reload on select?

This slider can be viewed at this url:
There are links on the page to the relevant CSS & JS pages.

Much thanks for all help.


BTW:  Some panels will appear to be only fade-swap photo videos, which they are. The first animated movie panel is the one titled 'Flash Design').
Question by:dcayce
    LVL 19

    Expert Comment

    If the movies are embedded, you can use the stop(); and play(); actionscript commands to control their timeline.

    For example, let's imagine one of the videos has the instance name (the name shown in the properties panel when it is selected) of 'video1' (without the quotes).

    From your main timeline you can do things like...


    to stop the video, and;

    to resume playback. You can even go back to the start of the movieclip by using

    video1.gotoAndPlay(1);// go back to frame 1 in 'video1' timeline

    If you want the videoclips to start paused, edit the movieclip (to enter its timeline), create a new layer and name it 'actions'. Select the first keyframe in that layer. Open the Actions panel (if it isn't already open) with function key F9, and type the code


    Then when you want the clip to play, from your *main* timeline use the code;

    replacing nameOfClip with whatever the instance name of that video is.
    LVL 11

    Accepted Solution

    First of all i would stop your videos within your flash file with a stop(); in the timeline and then controle the timeline with an ExternalInterface callback.

    You need a way to communicate between javascript and flash to controle your videos. This is accomplished by the ExternalInterface class in AS3.

    External Interface AS3

    At the End of the Animation of your anything slider pass the video id to call the related flash video with an ExternalInterface Call which would do a gotoAndPlay(1); on your flash video.

    For external interface to work you need to add this in your object tag:
    <param name='AllowScriptAccess' value='always'/> 

    Open in new window


    Author Closing Comment

    Great direction. Thanks!

    Featured Post

    Find Ransomware Secrets With All-Source Analysis

    Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

    Join & Write a Comment

    This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
    Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
    The viewer will learn how to dynamically set the form action using jQuery.
    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)

    754 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

    16 Experts available now in Live!

    Get 1:1 Help Now