We will continue to work on the first screen for the Flash^R storybook application. We will import the graphics, the png files that we have created, for this screen.

Open your project fla file. You will have one layer (layer1) on the Timeline and one frame on this layer. We will import the png graphics into the first frame.

1. From the menu, click File - Import - Import to Stage. Choose the background layer png file. Rename layer1 to "bgLayer". Lock this layer.
   
   
2. Add a new layer to the Timeline and import the book cover png. Rename the layer to "cover". Lock this layer.
   
   
3. Add a new layer and import the evergreen.png file. Rename the layer to "evergreen". Lock this layer.
   
   
4. When Flash imported the pngs, it aligned the images to the upper left corner. We can use the Storyboard as our guide to reposition the design elements as needed.
   
   

We now have tree layers in the Timeline - each containing a design element. You will also see that the original pngs files are listed in the Flash Library panel. As we build our app, we will accumulate many png files. Let's create a new folder in the Flash Library (click the New Folder icon at the bottom of the Library panel) and name the folder "pngs". Drag the png files into this folder.

Our first step will be to reduce the size of the book cover and place it in the correct position.

1. Unlock the cover layer and select the cover png graphic. Right click and choose Convert to Symbol.
   
   
2. Set the type to Movie Clip and the Registration Point to Left Center.
   
   
3. Name the movie clip "cover".
   
   

Using the Free Transform tool, click on the book cover on the stage. Hold down the Shift key on your keyboard and drag inward to make the cover smaller. Next, rotate the book until it is in the position indicated in the storyboard.

First Xmas Ornament Animation

Because we don't know when the user will click on the book to open it, we need the ornament's animation to repeat until the reader does click. That will cause the Timeline to move to the next frame. Therefore, the ornament animation will continue as long as the Timeline remains on Frame 1.

1. From the menu, click Insert - New Symbol. In the dialog box, name the symbol "redOrn" and set the Type to Movie Clip.
   
   
2. This will take you "inside" the red ornament movie clip. You are now in edit mode and you have a new Timeline with the default Layer 1. You will notice that everything on the stage is gone. This indicates that you are in the edit mode for the red ornament. This is also indicated by the links at the top which now show Scene 1 - redOrn.
   
   
3. Rename Layer 1 to "redOrn".
   
   

Next →

IMPORTANT: These app development tutorials are written with the Flash novice in mind. You will need to optimize your app beyond what is covered in these tutorials before finalizing your app for the app store.

Copyright 2018 Adobe Systems Incorporated. All rights reserved. Adobe product screen shot(s) reprinted with permission from Adobe Systems Incorporated. Adobe, Photoshop, Photoshop Album, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Contribute, Captivate, Flash Catalyst and Flash Paper is/are either [a] registered trademark[s] or a trademark[s] of Adobe Systems Incorporated in the United States and/or other countries.