g Text Version
Beauty & Self
Books & Music
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
News & Politics
Religion & Spirituality
Travel & Culture
TV & Movies

Bored? Games!
Take a Quiz
Rate My Photo

Natural Living
Folklore and Mythology
Distance Learning

All times in EST

Full Schedule
g Flash and Animation Site

BellaOnline's Flash and Animation Editor


Programming the Start Button - Flash Storybook

We have decided to use an invisible button to start our FlashR storybook application but just how will this work. In the last tutorial, we created the invisible button over the book graphic. Now we will add a little ActionScript to tell Flash what to do when the button is clicked. It will simply tell Flash to go to the next frame (Frame 2) and on that frame we will begin a tween animation to rotate and enlarge the book to full screen.

We will start by adding the ActionScript to Frame 1 of the actions layer.

  1. Click on Frame 1 of the actions layer and open the actions panel (Window - Actions). Add the code below.


    startButton.addEventListener(MouseEvent.CLICK, goBegin)
    function goBegin (evt) {
    startButton.removeEventListener(MouseEvent.CLICK, goBegin)

    The stop() code tells Flash to stop on Frame 1 of the Timeline to play the animation for the ornaments and start the music. Flash will stay on this frame until the button is clicked and then it will read the rest of the code.

    We have added an Event Listener to the startButton that will call the goBegin function when the button is clicked. The goBegin function will remove the Event Listener from the startButton and move the Timeline to Frame 2. So let's start working on what happens starting on Frame 2 which is the tween animation for the book.

    We already have an instance of the book on the stage but it is on a layer below the ornament and the evergreens. This was necessary because the ornaments needed to move. When the book opens, it will cover the entire stage and hide the ornaments and evergreens. In order to do this, the book cover much be on a layer above the ornaments and evergreen layers. So, let's create a new layer for this.

  2. Close the actions panel and return to the Main Timeline. Add a new layer to the Timeline, just under the Buttons layer, named "cover2".

  3. Add a Keyframe to Frame 2 of this new layer.

  4. Drag a second instance of the cover movie clip from the Library and onto the stage but this time we won't reduce the size. Position the cover so that the X and Y positions are 0.0 in the Properties panel. While in this panel, give this movie clip an instance name "cover2".

  5. You will notice that we can still see the invisible buttons on top of the book cover. We don't need these buttons any longer. Add a Keyframe to Frame 2 of the buttons layer. Select both the buttons and click Edit - Clear to remove them from the stage.

  6. Go back to the cover2 layer and Right-click on the cover2 movie clip and Create Motion Tween. Drag the tween span to end on Frame 30.

  7. Go to the last frame of the tween span and add a Keyframe. This will set the book cover at full size for the end frame of the tween animation.

  8. Go back to Frame 2 and use the Free Transform tool to reduce the size of the book cover and rotate it until it is in the same position as the first book cover on the layer below.

  9. We don't need the first instance of the book cover movie clip from this point on. On the ending frame of the tween animation (Frame 30) and on the cover layer (the lower layer containing the book cover) add a Keyframe. Select the book cover and click Edit - Clear to remove the first instance of the cover movie clip from the stage.

  10. Because all the layers below the new cover2 layer will be hidden, we can remove the movie clips from these layers. On Frame 30 of each layer (purpleOrn, greenOrn, redOrn, evergreens and wood) add a Keyframe and click Edit - Clear.

  11. Test the movie

Here is the Timeline at this point.

A Note About Instance Names: We discussed earlier that an instance name helps Flash identify movie clips and that each instance name must be unique. When using more than one instance of a movie clip, as we are with the cover movie clip, I use the same name but add an incremental number to the end.

Join us in the Digital Art and Design forum. | Join us in the Flash forum.

Add Programming+the+Start+Button+%2D+Flash+Storybook to Twitter Add Programming+the+Start+Button+%2D+Flash+Storybook to Facebook Add Programming+the+Start+Button+%2D+Flash+Storybook to MySpace Add Programming+the+Start+Button+%2D+Flash+Storybook to Del.icio.us Digg Programming+the+Start+Button+%2D+Flash+Storybook Add Programming+the+Start+Button+%2D+Flash+Storybook to Yahoo My Web Add Programming+the+Start+Button+%2D+Flash+Storybook to Google Bookmarks Add Programming+the+Start+Button+%2D+Flash+Storybook to Stumbleupon Add Programming+the+Start+Button+%2D+Flash+Storybook to Reddit


RSS | Related Articles | Editor's Picks Articles | Top Ten Articles | Previous Features | Site Map

For FREE email updates, subscribe to the Flash and Animation Newsletter

Past Issues

Printer Friendly
tell friend
Tell a Friend
Email Editor

Content copyright © 2015 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact Diane Cipollo for details.


g features
Subtle Animation Website Trends

Wix Editor - Background Video

Video on Wix Websites

Archives | Site Map


Past Issues

Less than Monthly

BellaOnline on Facebook

| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2016 Minerva WebWorks LLC. All rights reserved.

BellaOnline Editor