Printer Friendly Version

BellaOnline's Flash and Animation Editor

Cover Graphic for Flash iOS Storybook App

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 FlashR 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 PhotoshopR 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.

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


Flash and Animation Site @ BellaOnline
View This Article in Regular Layout

Content copyright © 2013 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.

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

BellaOnline Editor