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.