ActionScript 3 buttons
This movie has 4 button instances to control the movie timeline.
- playBtn plays the movie from wherever the timeline controller is sitting
- stopBtn stops the movie at the timeline point of the frame
- gotoStopBtn stops the movie and returns to the first frame of the movie
- gotoPlayBtn starts the movie at the first frame
This movie runs two movieclip instances that are tweened along a guideline.
This ActionScript is from Chapter 5 of the book Learning ActionScript 3.0: A Beginner's Guide, by Rich Shupe with Zevan Rosser (2007).
How to create the movie.
Create a movie with a tween in the main timeline, such as the one with the guideline in
Flash Guide Layer
- Create a new layer called Labels
- Click in the first keyframe of the Labels layer
- Open the Actions palette and type in a stop acton: stop();
- Click in the second frame of the Layer
- Hit F6 to make it a keyframe
- Type the word start in the property inspector for the first line to create a frame label, that will be the destination of the AcdtionScript
ActionScript
- Change the name of layer1 to Actions
- Click in keyframe 1 of the script layer
- Copy and paste the following ActionScript into the Actions Palette
top
// button navigation on timeline
stopBtn.addEventListener(MouseEvent.CLICK, onStopClick, false, 0, true);
playBtn.addEventListener(MouseEvent.CLICK, onPlayClick, false, 0, true);
gotoPlayBtn.addEventListener(MouseEvent.CLICK, onGotoPlayClick, false, 0, true);
gotoStopBtn.addEventListener(MouseEvent.CLICK, onGotoStopClick, false, 0, true);
function onStopClick(evt:MouseEvent):void {
stop();
}
function onPlayClick(evt:MouseEvent):void {
play();
}
function onGotoPlayClick(evt:MouseEvent):void {
gotoAndPlay("start");
}
function onGotoStopClick(evt:MouseEvent):void {
gotoAndStop("start");
}
Movie content
- You can add these buttons and ActionScript to any movie that has a timeline.
- Be sure to place the button layers above the layers with the movie content so they will be visible throughout the movie
Buttons to control the timeline
- Turn on the grid (View>Grid) to line up the buttons (you can turn off the visibliity of any layers with graphics so you can see the grid.
- Create a simple button symbol in the library
- Create a layer named buttons.
- Drag a button instance into keyframe 1 of the buttons layer.
- name the button instance stopBtn in the property inspector for the button
- Drag a second button instance onto the stage, line it up with the first, and give it the instance name playBtn
- Repeat for the third button, and name the button instance gotoPlayBtn
- Repeat for the fourth button, and name the button instance gotoStopBtn
Add the button text
- Create a new layer called btnText
- Select the type tool in the toolbox
- select a font style, font color that will contrast with the button color, and a font size that will fit on the button
- In keyframe 1 of the btnText layer, type play on the playBtn button instance.
- you can copy and paste in place three more copies of the button text.
- Move the button text copies to the other two buttons either with the direction arrows on the keyboard or the select tool
- Select the text tool, and change the button text to:
- Stop for the stopBtn instance
- Play at 1 for the gotoPlayBtn instance
- Stop at 1 for the gotoStopBtn instance
Test Movie
- Click Control>Test Movie to see if the movie works.
- Click the play button to start the movie from whereever it is.
- Click the stop button stops the movie at the point it is playing
- Click the play at 1 button to return control of the movie to the second movie frame (the location of the "start" frame)
- Click the stop at 1 button to stop the movie to the second movie frame
- If there are errors in the movie they will appear in the Output panel (Window>Output) which will automatically open up to show errors.
top
Publish the movie
- Click File>Publish Preview to create a web page with the HTML code to play the movie.
modify this HTML page & publish it
- open it up in Dreamweaver
- convert the page to XHTML 1.0 transitional (File>Convert>XHTML transitional 1.0) which will fix the opening tags and the script tags.
- Delete the <embed> tags within the <object> tags to make the HTML code XHTML valid.
- Save the HTML page
- View in the browser
- Test validation
- Be sure to upload the SWF file and the javascript file that Flash generates ("AC_RunActiveContent.js") into the same folder as the HTML file so that it can be found when the page loads.
top
insert Flash movie into an existing page
- copy and paste the contents of the <script> and <noscript> tags into another web page that is XHTML valid.
- Delete the <embed> tags within the <object> tags to make the HTML code XHTML valid.
- Copy and paste the contents of the two script tags from the HTML page generated by Flash and insert them within the <head> tags
- <script language="JavaScript" type="text/javascript">AC_FL_RunContent = 0;</script>
<script src="AC_RunActiveContent.js" language="JavaScript" type="text/javascript"></script>
- You need to add the language and type attributes (as in the above examples) to the script tags to make them XHTML valid
- Be sure to upload the SWF file the ActionScript is loading and the javascript file that Flash generates ("AC_RunActiveContent.js") into the same folder as the HTML file so that it can be found when the buttons are pressed.
top
top
Source:
This information and the SWF movie is drawn Chapter 5 from the excellent book Learning ActionScript 3.0: A Beginner's Guide, by Rich Shupe with Zevan Rosser (2007).
It is available in Safari books online through the Cal Poly Library.
Downloads for this book's examples are available on-line
Resources
top
