Free Flash Tutorials	Home • Food • Mates • Members • Tutorials • Forum • Buy Templates • Contact Us

Tutorial - Web Page Controls Flash Movie

Free Tutorial

The aim of the tutorial is to learn how to control a Flash Movie from an HTML web page using JavaScript.

Example: Download the Flash file Int 123a

Go to A Specific Frame Number On the Main Time Line: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

Play First Movie    Stop First Movie

Go to A Specific Frame Label In The Second Movie Clip: a b c d e f g h i j k l m n o p q r s t

Start Third Movie    Stop Third Movie

Move Forth Movie Forward One Frame    Move Forth Movie Backward One Frame

Example of controlling a Flash Movie with JavaScript:

Example: Int 123b: To see a more complex example of HTML links controlling a number of Flash Movies click here

Step One: Creating the Flash Movie

1. Open a new: Flash Movie
2. Create a several animated: Movie Clips
3. Drag these Movie Clips out of the Library and place them on the: Main Stage

   Cross Ref: If you do not know how to create an animated Movie Clip and place it on the Main Stage, you may wish to look at one of the following tutorials: Tween within Tween or Symbol: Movie Clip or Graphic

4. In the Property Inspector give each one its own: Instance Name
5. Export the Flash Movie. File > Export > Export Movie (Short Cut Key: Ctrl + Shift + Alt + S)

   Note: Do not use spaces in the file name.

6. Before you save and close your Flash Movie, check the width and height: Modify > Document (Short Cut Key: Ctrl + J)

Step Two: Creating the Web page

1. Open your favourite web editor such as Dreamweaver.
2. Create a new web page.
3. Save this page to an appropriate folder: Save
4. Place the Flash Movie (swf file) file (that you created in step 1.5 above) in the same folder as your web page.

   Note: You may need to use My Computer, or some similar file management program to do this.

5. Using the code edit mode (or Windows Note Pad) in your web editor, add your Flash Movie to your web page by using the code below:
   
   <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" id="example" name="example" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="xxx" height="xxx">
   <param name="movie" value="YourMovieName.swf">
   <param id="example" value="example">
   <param name="example" value="example">
   <param name="quality" value="high">
   <embed src="YourMovieName.swf" id="example" name="example" swliveconnect="true" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="xxx" height="xxx"></embed>
   </object>
   

   Note: You must use the code above or it will not work.

6. Now change the XXX values for the width and height values of your Flash Movie.
7. Then replace YourFileName with the file name of your movie.

   Note: Be careful because this is case sensitive, also never use spaces for file names that are used on the web.

8. Now to control your flash movie you can use any of the following methods:

To play a Movie Clip:

<a href='javascript:example.TPlay("_level0/InstanceNameOfMC")'>Play First Movie</a>

Note: Replace InstanceNameOfMC with the Instance Name of the Movie Clip you want to control

To stop a Movie Clip:

<a href='javascript:example.TStopPlay("_level0/InstanceNameOfMC")'>Stop First Movie</a>

To go a specific frame number:

<a href='javascript:example.TGotoFrame("_level0/InstanceNameOfMC", "NumberOfFrame")'>Stop First Movie</a>

To go a specific frame label:

<a href='javascript:example.TGotoLabel("_level0/InstanceNameOfMC", "NameOfLabel")'>Stop First Movie</a>

To move one frame forward in a Movie Clip:

<a href='javascript:example.TGotoFrame("_level0/InstanceNameOfMC", example.TCurrentFrame("_flash0/InstanceNameOfMC")+1)'>Forward one frame</a>

Move one frame back in a Movie Clip:

<a href='javascript:example.TGotoFrame("_level0/InstanceNameOfMC", example.TCurrentFrame("_flash0/InstanceNameOfMC")-1)'>Backward one frame</a>

Load an external Movie into the main Movie:

<a href='javascript:example.TLoadMovie("1", "NameOfExsternalMovie.swf")'>Load External Movie</a>

Note: You can change the value 1 to whatever level you want to load the Movie into.

Cross Ref: For more information about loading external Movies into a base Movie using Levels see: Loading Movies into Levels or Movie Clips

Clear the external Movie you loaded into your main Movie:

<a href='javascript:example.TLoadMovie("1", "")'>Clear External Movie</a>

Note: Use the same number as you did when you loaded the Movie.

Know Issues:

1. Use "_level0 " when referring to just the main time line and "_level0/InstanceNameOfMC" when referring to a Movie Clip. The InstanceNameOfMC is whatever the Instance Name of the Movie Clip is, in the Property Inspector, in Flash (you need to type in the Instance Name). You must give each Movie Clip an instance name that is individual and unique. Do not use spaces with Instance Names and do not start the name with a number.
   
   
2. Sometimes when using the go to frame label or number, you may need a play(); action script code on that label or frame, as the Movie might not always automatically play when going to a different frame and label. However most of the time it should be okay. You can use something like this:
   
   
   Go to and play or stop at a specific frame label or frame number:
   
   <a href='javascript:example.TGotoAndPlay("_level0/InstanceNameOfMC", "NameOfLabelOrFrameNumber")'>Goto And Play Method</a>
<a href='javascript:example.TGotoAndStop("_level0/InstanceNameOfMC", "NameOfLabelOrFrameNumber")'>Goto And Stop Method</a>

Note: I have never been able to get these methods work! So it may or may not be possible to use these above methods. Please give any feedback on the forum, and I will update this tutorial: Forum

For more tutorials on controlling Flash with JavaScript see the site Index:    A - Z Index