1. Creating a Flash Web Site
Tutorial 7
Creating a Flash Web Site

2. Objectives Plan and create a Flash Web site
Create a Flash template and use the template to create Flash documents
Work with external libraries
Create a navigation bar with complex buttons
Load external SWF files into the Flash Player using levels

3. Objectives (continued)
Learn basic ActionScript commands
Use the Actions panel
Load external image files into the Flash Player using a movie clip
Use the Behaviors panel

4. Structure of a Flash Site
Items included in HTML documents (Web pages)
Text, graphics, hyperlinks, Flash multimedia elements
Flash Web site may consist entirely of SWF files
SWF files are referenced from an HTML document
Referenced SWF files play in Flash Player plug-in
Navigation features in a Flash Web site
Navigate SWF files using buttons or other graphics
URL of Web page does not change as SWF files change
Developer tools: Macromedia Dreamweaver or Flash

5. Quick Facts Page on Flash Version of Mars Site

6. Using Levels Navigation options in a Flash Web site
Click a button to play current SWF file in Flash Player
Click a button to load another SWF file in Flash Player
An SWF file plays on top of another using levels
Home page is usually loaded at level 0
Other SWF files can be loaded at higher levels; e.g., 1
SWF file properties at level 0 trump those at higher levels
Newly loaded SWF file replaces another at the same level
Sample: Leslie’s Salad and Sandwich Shop Web site

7. SWF Files Loaded at Different Levels

8. Planning a Flash Web Site for Jackson’s Sports
Flash Web sites developed like non-Flash Web sites
Flash Web site development process
Determine the goals and objectives of the Web site
Determine the site’s contents
Design the site pages and develop a storyboard
Storyboard: diagrams relationship among site pages
Jackson’s Sports is the client in Tutorial 7
Task: design and implement a Flash Web site

9. Jackson’s Sports Web Site Outline

10. Jackson’s Sports Web Site Storyboard

11. Creating the Web Site’s Contents
First step: create a home page for the Web site
Home page elements: background, banner, navigation
Other pages have components related to their focus
Pages will be uniform in size and background
Provides consistent viewing experience for the user
Documents will play on top of main document

12. Creating the Web site’s Main Document
Components for Jackson’s Sports Web site banner
Text displaying the store’s name
A background picture
Animation using the store name text
Text block regarding the support of youth sports
Specifications for background
Use a rectangle to cover area not covered by banner
Rectangle will be colored with a gradient fill

13. New Text Block on Banner

14. Creating Additional Pages Using a Flash Template
Templates: pre-built documents aiding development
Advantages: consistency, flexibility, speed, quality
One way to create a document based on a template
Open New Document dialog box and click Templates tab
Select a template and click OK
Flash developers can create their own templates
Create a document and then save it as a template
A template will be used for the Jackson’s Sports site

15. Selecting a Flash Template

16. Save As Template Dialog Box

17. Using External Libraries
External library has symbols from another document
Opening a document’s library as an external library
Point to Import on the File menu
Click the Open External Library and select target FLA file
Add external library symbols to Stage or library
Using external libraries for Jackson’s Sports site
Add external baseball and basketball symbols to template
After template is completed, page construction begins

18. Opening an External Library

19. Team Names on Separate Lines

20. Creating a Site’s Navigation Bar
Navigation buttons used in a Flash Web site
Analogous to hyperlinks in a non-Flash Web site
SWF files are loaded into the Flash Player when clicked
Created like buttons used to control an animation
ActionScript specifies which SWF file to load
Navigation bar: a group of related buttons
Navigation bar for Jackson’s Sports Web site
Four buttons labeled Home, Services, Teams, and Photos

21. Adding Animation to a Button Frame
Rollover effect: visual cue emphasizing click event
Animations can also serve as visual cues
Animations are added to Up, Over, or Down frames
Adding an animation to the home button
Animation will be a motion tween of a small circle
Animation will be added to the Over frame
Other buttons will be derived from the Home button

22. Buttons on Navigation Bar

23. Using ActionScript Navigation system comprises a set of buttons
Button click causes Flash Player to load SWF files
ActionScript instructions make buttons operational
ActionScript: programming language within Flash
Add actions using Actions panel or Behaviors panel

24. Using the loadMovieNum Action
Format: loadMovieNum(“filename.swf”, level)
Parameter 1: name of SWF file to be loaded
Parameter 2: level number at which file will be loaded
Example: loadMovieNum(“Services.swf”, 1)
Services page will be loaded at level 1
Event handler determines when to execute an action
Example: button click-release event loads a movie
Code: on (release) {loadMovieNum(“Services.swf”, 1);}

25. Using the Actions Panel
Adding a script without using Script Assist mode
Select button instance on the Stage
Expand the Actions panel
Ensure that the Script Assist button is not selected
Select actions from the Actions panel
Coding buttons for Jackson’s Sports Web site
Add the on event handler with the release parameter
Include loadMovieNum action within the event handler
A frame action is not controlled by an event handler

26. Action Panel Elements

27. On Event Handler Added to Script Pane

28. Loading External Image Files
Images may be stored within or external to FLA file
Advantage to storing an image externally
External file can be replaced without FLA document edits
Preparing external images
Use image-editing program; e.g. Macromedia Fireworks
Saving file with non-specific name, such as Photo1.jpg
Ensure that image files are in same folder as SWF file
Jackson’s Sports Photos page uses external images

29. Using the loadMovie Action
loadMovie action: loads image into a movie clip
Image file needs to be in the standard JPEG format
Format: movieclip.loadMovie(“filename”)
Behaviors panel: an alternative to Actions panel
Including two pictures in the Photos page
Items needed: movie clip, new set of buttons, actions
Utilize loadMovie action within buttons
Use Behaviors panel to add loadMovie action

30. Assigning a Name to the Movie Clip Instance

31. Using the Behaviors Panel
Behaviors: pre-written ActionScript code
Behaviors can be used to control an object
Behaviors are assigned to movie clips, video, audio
Assigning a behavior to an object
First select the object
Display the Behaviors panel
Click Add Behavior button to open the behaviors menu
Select behavior and then select appropriate options

32. Adding a Behavior

33. Photos Page Displayed In The Web Browser