Download presentation
Presentation is loading. Please wait.
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
Similar presentations
© 2025 SlidePlayer.com. Inc.
All rights reserved.