Art 451 Forever!
Syllabus | Assignments | Links

Creating a Flash interface for a website:

Laying out your layers :

  1. Create the 4 layers as shown below. The navigation layer will include the navigation and title that will be visible on all the "web pages". Remembering that in multimedia authoring programs that you navigate through the timeline instead of navigating through separate files. Note that the home/index page has the purple content on it, but that the links and contact layers are currently empty of content (look at hallow white dot on timeline).
    layers
  2. Since frame 1 will contain the home/index content, then you need to insert a keyframe elsewhere on the timeline for the links "page". I aribitarily picked frame 10. (If you forget to insert a keyframe, your links content will be placed on the only available default keyframe on frame 1 along with the home content which is not what you want. If you do this, you can drag the keyframe to frame 10.)
    insert keyframe
  3. After putting the LINKS content on that page on that keyframe, go to the naviagation panel and insert a frame as shown. This will bring the navigation content all the way up to frame 10. We will later move this to frame 20 so that it is also visible for the CONTACT page. (Do not insert a keyframe as this will add a new instance of the navigation content. Only add a keyframe if you want the navigation to change although you will still have two copies in the end.)
    insert frame
  4. This is what you should have by now. Feel free to continue adding layers and moving the navigation farther on the timeline if you have more "pages".
    webpage
  5. At this point, if you test the movie it plays like an animation. So we need to put a stop action on frame 1. Since this happens automatically, we need to do a frame script. Make a new layer for actions and right-click on frame 1 and choose actions. Then type stop(); or double-click stop from the right menu.
    actions
  6. This will keep the site on frame 1, but now you cannot see the rest of the pages. Now we need to make some object scripts. Select your HOME text or HOME image that will be your button to go to the home page. Click F8 or go to MODIFY>CONVERT TO SYMBOL and name your button accordingly and choose the button type.
    home button
  7. Now do not double-click on the button unless you wish to modify the text or make over and down states. Right-click on the button and choose Actions. (If you do not see actions, you may have accidently double-clicked on it and are now in the symbol. Go back to Scene 1 (the main scene) and try again.)
  8. Type the following: Since we are going to make the home button go to and stop at frame 1, we put 1 in the parathesis. Also note the on handler (on(release)) that tells flash when it should go to frame 1. In this case, it will go to and stop at frame 1 when you release the mouse button.
    go to frame 1
  9. Make the other buttons into button symbols and make them go to the appropriate frame. The following is assigned to the LINKS button and goes to frame 10. Since the buttons are all on the one keyframe and are spanning from frame 1 to 20, they all contain the same code since they are the same button on all views. Therefore, they will always act as their script says they should.
    go to frame 10
  10. Test your movie and everything should work. Feel free to contact me or look at the fla file (FlashInterface.fla) if you have any problems.
contact : gutierrez.52@osu.edu