In this tutorial, we will create the movie clips for each page of the Flash iOS app storybook and place them on the main Timeline in preparation for building the page navigation.

For those readers who created Phase One of the tutorials to make the animated intro for their storybook, place this fla file aside and start a new project file.

We will start at the beginning with a new Flash^R iOS app project file with a width of 1024, height of 768 and Frame Rate of 24 to 30. These dimensions are for a landscape layout. You can create a portrait layout by setting the width to 768 and the height to 1024. Refer to the first few tutorials in Phase One for how to start a new iOS project.

I am assuming that you have already created a Photoshop^R psd file for each page of your book. This file should contain the background graphic on the bottom layer. The individual design elements not included in the background layer should be on their own layers above. Refer to the first few tutorials in Phase One for how to prepare your Photoshop files.

If you haven't done so already, open each page's psd file into Photoshop and save the graphic on the bottom layer as a separate png file.

1. Select the bottom layer that contains the background graphic for the page.
   
   
2. From the Menubar, click Edit - Copy.
   
   
3. Start a new 1024 x 768 x 72 resolution image window.
   
   
4. Click Edit - Paste.
   
   
5. Save the new file as cover.png.
   
   
6. Repeat this for each page of your book, naming the png files sequentially (ie cover.png, page1.png, page2.png etc.).
   
   

Now we will build the cover page for the book in the new fla file.

1. On Frame 1 of the main Timeline, rename layer 1 to "pages".
   
   
2. Click File - Import - Import to Stage and select the cover.png file.
   
   
3. Right-click on the png and choose Covert to Symbol.
   
   
4. Set the Type of Movie Clip and select the checkbox for Export for ActionScript.
   
   
5. Name the symbol "cover".
   
   
6. In the Properties panel give it an Instance Name if "cover".
   
   

We will use the cover.png file on two frames and begin the first page of the book on Frame 3.

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.