xp tutorial 7 creating a flash web site. xp new perspectives on macromedia flash 82 objectives plan...

XP

Tutorial 7

Creating a FlashWeb Site

2

XP

New Perspectives on Macromedia Flash 8

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

XP


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

XP


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

XP


Quick Facts Page on Flash Version of Mars Site

6

XP


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

XP


SWF Files Loaded at Different Levels

8

XP


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

XP


Jackson’s Sports Web Site Outline

10

XP


Jackson’s Sports Web Site Storyboard

11

XP


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

XP


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

XP


New Text Block on Banner

14

XP


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

XP


Selecting a Flash Template

16

XP


Save As Template Dialog Box

17

XP


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

XP


Opening an External Library

19

XP


Team Names on Separate Lines

20

XP


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

XP


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

XP


Buttons on Navigation Bar

23

XP


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

XP


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

XP


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

XP


Action Panel Elements

27

XP


On Event Handler Added to Script Pane

28

XP


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

XP


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

XP


Assigning a Name to the Movie Clip Instance

31

XP


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

XP


Adding a Behavior

33

XP


Photos Page Displayed In The Web Browser