Tutorial 7 Planning and Creating a Flash Web Site

1
Tutorial 7Planning and Creating a Flash Web
Site
2
Objectives

• 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

3
Objectives

• 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

4
Understanding the 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 Adobe Dreamweaver or Flash

5
Understanding the Structure of a Flash Site
6
Creating a Navigation System

• 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

7
SWF Files Loaded at Different Levels
8
Planning a Flash Web Site

• Identify the sites goals and objectives
• Determine the target audience
• Develop the sites contents
• Create a storyboard, and design the navigation
  system and the site pages
• Build the site and test it

9
Jacksons Youth Sports Web Site Outline
10
Jacksons Youth Sports Web Site Storyboard
11
Creating the Web Sites 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 sites Main Document

• Components for Jacksons Sports Web site banner
• Text displaying the stores 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
Using a Flash Template to Create Additional Web
Pages

• 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

15
Save As Template Dialog Box
16
Using External Libraries

• External library has symbols from another
  document
• Opening a documents 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

17
JSports External Library
18
Team Names on Separate Lines
19
Creating a 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 set of related buttons

20
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

21
Buttons on Navigation Bar
22
Using ActionScript

• 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

23
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)

24
Using the Actions Panel

• 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

25
Script Pane with the Event Handler
26
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. Adobe Fireworks
• Save file with non-specific name, such as
  Photo1.jpg
• Ensure that image files are in same folder as SWF
  file

27
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

28
Assigning a Name to the Movie Clip Instance
29
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

30
Adding a Behavior
31
Photos Page Previewed in The Web Browser