Tutorial 7 Planning and Creating a Flash Web Site

Tutorial 7

Planning and Creating a Flash

Web Site

XPXPObjectives• 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

XPXPObjectives• 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


XPXPUnderstanding 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


XPXPUnderstanding the Structure of a Flash Site


XPXPCreating 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


XPXPSWF Files Loaded at Different Levels


XPXPPlanning a Flash Web Site• 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


XPXPJackson’s Youth Sports Web Site Outline


XPXPJackson’s Youth Sports Web Site Storyboard


XPXPCreating 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


XPXPCreating 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


XPXPNew Text Block on Banner


XPXPUsing 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


XPXPSave As Template Dialog Box


XPXPUsing 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 panel


XPXPJSports External Library


XPXPTeam Names on Separate Lines


XPXPCreating 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


XPXPAdding 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


XPXPButtons on Navigation Bar


XPXPUsing 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


XPXPUsing 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);}


XPXPUsing 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


XPXPScript Pane with the Event Handler


XPXPLoading 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


XPXPUsing 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


XPXPAssigning a Name to the Movie Clip Instance


XPXPUsing 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


XPXPAdding a Behavior


XPXPPhotos Page Previewed in The Web Browser
