Flash Web Navigation

In this assignment, we’ll make a Flash nav bar that will be embedded on all your secondary pages. First we will create a Flash file and then output a file that can be read by browsers with the Flash Player plug-in. Flash files (FLA’s) create output files called SWF’s or “swiffs” and at the same time output an HTML page that has code we can embed into each Web page. Since the Home page has different addressing to other pages, it needs its own FLA and SWF files, and these can be easily modified from the FLA you’ll make first.

Just a note: you'll learn just enough Flash in this excercise to be dangerous … probably it's wise to save copies of your FLA as you try new things — some of which may end … um …less than optimally. Remember to e-mail me if you get stuck.

Open a Flash Document

  1. Open Flash
  2. The “Properties Inspector” should be open at the bottom of the “Stage” or work area. If it is not, go Window > Properties.
  3. In the Properties Inspector, click on button named “size”: The Document Properties dialogue box pops up. Ruler units should be in pixels and the frame rate should be 12 fps.
  4. Set size to 600px width and 175px height, and background to black (#000000) and close box.

Now your basic movie shape is ready. When you embed the resulting movie as an object tag (<object></object>) it should be in a master table that has a cell that is 600px wide at the top of the page.

Quick Flash Basics

    First, 3 important things about Flash:
  1. it has vertical layers that work the same way as Photoshop layers …
  2. it has a timeline that plays “frames” in “runtime”, kind of like horizontal layering …
  3. and the weirdest: you create "master shapes" in a Library that are called “symbols” and what’s on the stage are copies of these, called “instances.”

Open / Follow Button Tutorial

From here follow the online tutorial at the URL below to create buttons. IGNORE THE REST OF THE ASSIGNMENT about the animated buttons. Go to:
http://www.dreamhand.net/depts/edu/flash/buttons/button_demo.html

Copy Buttons, and Script with URL Instructions

Once you’ve made your first button, it resides in the Library (Window > Library).

  1. Open the Library, if it is not open, and locate your button symbol.
  2. Click and drag the symbol to the stage: in the Properties Inspector, it will be noted as “instance of (your button name)”
  3. Find the Actions Panel (Window > Devlopmental Panels > Actions).
  4. Click on a button: the actions will now be written for that button – MAKE SHURE THE TOP OF THE PANEL SAYS Actions: Button !!!
  5. Program each button in the Actions Panel entry area using the code below and your own page URLs.

Here's how the code fits together using the "getURL" method:

on (event?) {
    getURL (URL, window=FrameTarget );
}

That's where an "event" means something that happens in the computer's world, like a user moving his mouse over an object, or pressing or releasing the mouse button; where "URL" is the file location; where the window info is something like "_blank", which opens a new browser window on click. Here's a working example:

on (release) {
getURL("http://www.dreamhand.net","_blank");
}

Output Your SWF file and HTML file and Embed on Your Pages

If you don't want to use your own pages to embed your new Flash nav array, create two new ones in Dreamweaver to show me that you did the assignment and that it's working.

  1. Make sure you know where your FLA is located: Flash will create your new files in that folder.
  2. Go: File > Publish Settings and select.
  3. In the dialogue box, make sure the boxes for "Flash (.swf)" and "HTML (.html) are checked.
  4. Click "Publish": now check your FLA folder and see that .swf and .html files have been created.
  5. PUT & KEEP THE SWF IN THE SAME FOLDER as the pages it will load on!!!
  6. In Dreamweaver, open the new HTML file Flash made.
  7. Locate the the object tags (<object>,</object>); this is the code that launches the SWF movie that is your new nav bar.
  8. Copy the object tags to your pages on which the navigation SWF will load.
  9. Test the pages in a brwser: if they don't load right, probably you need to go back and work with the address in the "getURL" scripting.