Web Development

Flash for the Interface Designer

Create a Sample Site

Download Exercise Files

New File

• Import Files
• Set stage colour, size and frame rate

Add Background

• Add an image and name the layer
• Fit and size Background with Align & Size to Stage
• Crop Background by breaking apart the JPG through Modify Menu
• Lock the Background layer and start a new layer called foreground

Add forground elements

• Create a square with no border and convert to a graphic Symbol.
• This will become a reusable component anytime any rectangle is needed.
• Create a header, footer and sidebar areas as wanted for the interface.
• Add a logo or other interface elements.

Add Navigation Elements

• New Layer add navigation Text
• New Layer add navigation Buttons

Add Content

• Add a Layer Folder and name it Content.
• Add layers for each page of the site.
• Add new keyframes to be used as each page in the site.
• By spacing the content out we can fade content in and out between pages.
• Add content to each page.

Contact Page

• Add contact informtation
• Easily add mailto: hyperlink or any form of external hyperlink using the Properties panel.

About Page

• Add a blurb about the site, add images if interested.

Gallery Page

• Add gallery thumbnails to act as links to larger images.

Marker & Action Layers

• New layer and use labels to mark sections of the site in the timeline
• New layer and add stop(); action to each page start in the timeline.

Add Navigation Interactivity

• Select each page label and icon and convert to a button Symbol
• Add action Script to each button to navigate to labeled frames in the timeline.
  • Use Frame Numbers (5) or frame labels ("label")
  • on (release) { gotoAndStop("Contact"); }
  Edit buttons by double clicking and create roll-over and active effects.

Add Gallery Interactivity

• In the gallery, you could easially use the thumbnail images to load external images in new windows in the browser using the hyperlink

Loading pages with Flash Buttons

• Create a button, open the action palette and add the code.
• on (release) { getURL("http://www.boomcity.biz/help.html", _blank);

Using Buttons as Image loaders

• This technique explores loading the gallery images by simply rolling over their thumbnail.
• Convert a Thumbnail into a button.
• Edit the button states by double clicking it.
• In over and down states add a keyframe and insert a frame.
• Insert the full sized gallery image into that keyframe, it will extend to the down state

Duplicate Symbols and Swapping

• To easily create the other gallery buttons, duplicate the original in the library,
• Name it for the next button
• Edit the the button by double clicking
• Swap the images for the new ones
• Edit the the button states and enlarged gallery image as needed
• Repeat for each button.