g
Printer Friendly Version

editor  
BellaOnline's Flash and Animation Editor
 

Building the Overlay Page Flash Storybook App

We will continue to work on the settings menu overlay page for the FlashR storybook app. In this tutorial, we will assemble the elements on the page.

  1. Now we will add two more layers to the Timeline. Our first layer will be a folder. Let's put all the elements for the settings menu on layers in this folder. Click on the pages layer and then on the folder icon to create a folder. You will see a new folder added just above the pages layer. Rename the folder "setMenu". The second layer will contain all the ActionScript for the main Timeline. Let's put this layer at the top of the stack and name it "actionsMain".

    We now have four layers and one folder on the Timeline.

    actionsMain
    setTogBtn
    folder - setMenu
    pages

  2. Inside the setMenu folder that we added to the Timeline layers we will add more layers for the background image for the settings menu overlay page and the png images that we will turn into buttons for the following links. Add six new layers inside the folder and give them the following names.

    indexBtn
    musicBtn
    creditsBtn
    moreAppsBtn
    websiteBtn
    setMenuBg

  3. Then import each corresponding png image to its layer and convert the png to a movie clip with a Name and Instance Name same as the layer name. Now that we are getting several png images in the Library, we should create a png folder to contain all of them.

    LayerLinked ToName of Movie ClipInstance Name
    indexBtn
    musicBtn
    creditsBtn
    moreAppsBtn
    websiteBtn
    setMenuBg
    Link to index page
    Link to toggle background music
    Link to credits page
    Link to advertising page
    Link to external website
    Background Image
    indexBtn
    musicBtn
    creditsBtn
    moreAppsBtn
    websiteBtn
    setMenuBg
    indexBtn
    musicBtn
    creditsBtn
    moreAppsBtn
    websiteBtn
    setMenuBg


  4. All of the elements for the settings menu overlay page are now on the stage. Position the button movie clips as needed over the background image. This will be the way the page will appear when it displays over the top of what's currently on the stage.

← Back | Next →


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 © 2013 Minerva WebWorks LLC. All rights reserved.


BellaOnline Editor