Transcript Tutorial_07 - CarlPetersheim.us

Tutorial 7
Planning and
Creating a Flash
Web Site
Objectives
XP
• Review the structure of a Flash Web site
• 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
New Perspectives on Adobe Flash CS3
2
Objectives
XP
• Learn basic ActionScript 2.0 commands
• Use the Actions panel
• Load external image files into the Flash Player
using a movie clip
• Use the Behaviors panel
New Perspectives on Adobe Flash CS3
3
Understanding the Structure
of a Flash Site
XP
• 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: Adobe Dreamweaver or Flash
New Perspectives on Adobe Flash CS3
4
Understanding the Structure
of a Flash Site
New Perspectives on Adobe Flash CS3
XP
5
Creating a Navigation System
XP
• 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
New Perspectives on Adobe Flash CS3
6
SWF Files Loaded at Different
Levels
New Perspectives on Adobe Flash CS3
XP
7
Planning a Flash Web Site
XP
•
•
•
•
Identify the site’s goals and objectives
Determine the target audience
Develop the site’s contents
Create a storyboard, and design the navigation
system and the site pages
• Build the site and test it
New Perspectives on Adobe Flash CS3
8
Jackson’s Youth Sports Web Site
Outline
New Perspectives on Adobe Flash CS3
XP
9
Jackson’s Youth Sports Web Site
Storyboard
New Perspectives on Adobe Flash CS3
XP
10
Creating the Web Site’s Contents
XP
• 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
New Perspectives on Adobe Flash CS3
11
Creating the Web site’s Main
Document
XP
• 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
New Perspectives on Adobe Flash CS3
12
New Text Block on Banner
New Perspectives on Adobe Flash CS3
XP
13
Using a Flash Template to Create
Additional Web Pages
XP
• 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
New Perspectives on Adobe Flash CS3
14
Save As Template Dialog Box
New Perspectives on Adobe Flash CS3
XP
15
Using External Libraries
XP
• 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
panel
New Perspectives on Adobe Flash CS3
16
JSports External Library
New Perspectives on Adobe Flash CS3
XP
17
Team Names on Separate Lines
New Perspectives on Adobe Flash CS3
XP
18
Creating a Navigation Bar
XP
• 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 set of related buttons
New Perspectives on Adobe Flash CS3
19
Adding Animation to a Button
Frame
•
•
•
•
XP
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
New Perspectives on Adobe Flash CS3
20
Buttons on Navigation Bar
New Perspectives on Adobe Flash CS3
XP
21
Using ActionScript
XP
• Navigation system comprises of a set of buttons
• Button click causes Flash Player to load SWF files
• ActionScript instructions make buttons
operational
• ActionScript: programming language within Flash
• Two latest versions of ActionScript are versions
2.0 and 3.0
New Perspectives on Adobe Flash CS3
22
Using the loadMovieNum Action
XP
• 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);}
New Perspectives on Adobe Flash CS3
23
Using the Actions Panel
XP
• Adding a script without using Script Assist mode
– Select button instance on the Stage
– Open the Actions panel
– Type required code
– Click the Check syntax button
• A frame action is not controlled by an event
handler
New Perspectives on Adobe Flash CS3
24
Script Pane with the Event Handler
New Perspectives on Adobe Flash CS3
XP
25
Loading External Image Files
XP
• 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. Adobe Fireworks
– Save file with non-specific name, such as Photo1.jpg
– Ensure that image files are in same folder as SWF file
New Perspectives on Adobe Flash CS3
26
Using the loadMovie Action
XP
• 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
New Perspectives on Adobe Flash CS3
27
Assigning a Name to the Movie Clip
Instance
New Perspectives on Adobe Flash CS3
XP
28
Using the Behaviors Panel
•
•
•
•
XP
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
New Perspectives on Adobe Flash CS3
29
Adding a Behavior
New Perspectives on Adobe Flash CS3
XP
30
Photos Page Previewed in
The Web Browser
New Perspectives on Adobe Flash CS3
XP
31