Programming the Start Button - Flash Storybook

We have decided to use an invisible button to start our Flash^R 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.

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

stop();

startButton.addEventListener(MouseEvent.CLICK, goBegin)
function goBegin (evt) {
startButton.removeEventListener(MouseEvent.CLICK, goBegin)
gotoAndPlay(2);
}

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.
Close the actions panel and return to the Main Timeline. Add a new layer to the Timeline, just under the Buttons layer, named "cover2".
Add a Keyframe to Frame 2 of this new layer.
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".
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.
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.
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.
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.
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.
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.
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.

	Diane Cipollo BellaOnline's Flash and Animation Editor