Presentation is loading. Please wait.

Presentation is loading. Please wait.

Tutorial 7 Planning and Creating a Flash Web Site.

Published byFerdinand Byrd Modified over 9 years ago

Similar presentations

Presentation on theme: "Tutorial 7 Planning and Creating a Flash Web Site."— Presentation transcript:

1 Tutorial 7 Planning and Creating a Flash Web Site

2 XP 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 New Perspectives on Adobe Flash CS32

3 XP 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 New Perspectives on Adobe Flash CS33

4 XP 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 New Perspectives on Adobe Flash CS34

5 XP Understanding the Structure of a Flash Site New Perspectives on Adobe Flash CS35

6 XP 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 New Perspectives on Adobe Flash CS36

7 XP SWF Files Loaded at Different Levels New Perspectives on Adobe Flash CS37

8 XP Planning 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 New Perspectives on Adobe Flash CS38

9 XP Jackson’s Youth Sports Web Site Outline New Perspectives on Adobe Flash CS39

10 XP Jackson’s Youth Sports Web Site Storyboard New Perspectives on Adobe Flash CS310

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 New Perspectives on Adobe Flash CS311

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 New Perspectives on Adobe Flash CS312

13 XP New Text Block on Banner New Perspectives on Adobe Flash CS313

14 XP 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 New Perspectives on Adobe Flash CS314

15 XP Save As Template Dialog Box New Perspectives on Adobe Flash CS315

16 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 panel New Perspectives on Adobe Flash CS316

17 XP JSports External Library New Perspectives on Adobe Flash CS317

18 XP Team Names on Separate Lines New Perspectives on Adobe Flash CS318

19 XP 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 New Perspectives on Adobe Flash CS319

20 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 New Perspectives on Adobe Flash CS320

21 XP Buttons on Navigation Bar New Perspectives on Adobe Flash CS321

22 XP 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 New Perspectives on Adobe Flash CS322

23 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);} New Perspectives on Adobe Flash CS323

24 XP 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 New Perspectives on Adobe Flash CS324

25 XP Script Pane with the Event Handler New Perspectives on Adobe Flash CS325

26 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. 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 CS326

27 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 New Perspectives on Adobe Flash CS327

28 XP Assigning a Name to the Movie Clip Instance New Perspectives on Adobe Flash CS328

29 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 New Perspectives on Adobe Flash CS329

30 XP Adding a Behavior New Perspectives on Adobe Flash CS330

31 XP Photos Page Previewed in The Web Browser New Perspectives on Adobe Flash CS331

Download ppt "Tutorial 7 Planning and Creating a Flash Web Site."

Similar presentations

Tutorial 7 Planning and Creating a Flash Web Site.

Tutorial 7 Planning and Creating a Flash Web Site.
Upon completion of this unit, you should be able to:

Upon completion of this unit, you should be able to:
Tutorial 6 Creating Special Effects with Graphics and Gradients.

Tutorial 6 Creating Special Effects with Graphics and Gradients.
Chapter 6 Preparing and Publishing Applications. Chapter 6 Lessons 1.Publish movies 2.Reduce file size to optimize a movie 3.Create a preloader 4.Publish.

Chapter 6 Preparing and Publishing Applications. Chapter 6 Lessons 1.Publish movies 2.Reduce file size to optimize a movie 3.Create a preloader 4.Publish.
© 2011 Delmar, Cengage Learning Chapter 13 Preparing Graphics for the Web.

© 2011 Delmar, Cengage Learning Chapter 13 Preparing Graphics for the Web.
Fireworks MX. 2 Lesson 1a—Create Slices & Hotspots n Fireworks allows you to add animation (behaviors) already written in ___________. n However, users.

Fireworks MX. 2 Lesson 1a—Create Slices & Hotspots n Fireworks allows you to add animation (behaviors) already written in ___________. n However, users.
Create slices and hotspots Create links in Web pages Create rollovers from slices Create basic animation Add tweening symbol instances to create animation.

Create slices and hotspots Create links in Web pages Create rollovers from slices Create basic animation Add tweening symbol instances to create animation.
Saving a Word Document as a Web Page

Saving a Word Document as a Web Page
Macromedia Dreamweaver 4 Advanced Level Course. Add Rollovers Rollovers or mouseovers are possibly the most popular effects used in designing Web pages.

Macromedia Dreamweaver 4 Advanced Level Course. Add Rollovers Rollovers or mouseovers are possibly the most popular effects used in designing Web pages.
© 2010 Delmar, Cengage Learning Chapter 6: Preparing and Publishing Movies.

© 2010 Delmar, Cengage Learning Chapter 6: Preparing and Publishing Movies.
Chapter 9 Introduction to ActionScript 3.0. Chapter 9 Lessons 1.Understand ActionScript 3.0 2.Work with instances of movie clip symbols 3.Use code snippets.

Chapter 9 Introduction to ActionScript 3.0. Chapter 9 Lessons 1.Understand ActionScript Work with instances of movie clip symbols 3.Use code snippets.
Chapter 11 Adding Media and Interactivity. Flash is a software program that allows you to create low-bandwidth, high-quality animations and interactive.

Chapter 11 Adding Media and Interactivity. Flash is a software program that allows you to create low-bandwidth, high-quality animations and interactive.
© 2011 Delmar, Cengage Learning Chapter 11 Adding Media and Interactivity with Flash and Spry.

© 2011 Delmar, Cengage Learning Chapter 11 Adding Media and Interactivity with Flash and Spry.
Chapter 3 Working with Symbols and Interactivity.

Chapter 3 Working with Symbols and Interactivity.
Chapter 4 Dreamweaver: Part II The Web Warrior Guide to Web Design Technologies.

Chapter 4 Dreamweaver: Part II The Web Warrior Guide to Web Design Technologies.
Chapter 15 Video. Importing Video Into Flash Once you import video into Flash MX 2004, you can control it using behaviors and very basic ActionScript,

Chapter 15 Video. Importing Video Into Flash Once you import video into Flash MX 2004, you can control it using behaviors and very basic ActionScript,
XP Tutorial 5 Buttons, Behaviors, and Sounds. XP New Perspectives on Macromedia Flash MX 2004 2 Buttons Interactive means that the user has some level.

XP Tutorial 5 Buttons, Behaviors, and Sounds. XP New Perspectives on Macromedia Flash MX Buttons Interactive means that the user has some level.
© Cheltenham Computer Training 2001 Macromedia Dreamweaver 4 - Slide No 1 Macromedia Dreamweaver 4 Advanced Level Course.

© Cheltenham Computer Training 2001 Macromedia Dreamweaver 4 - Slide No 1 Macromedia Dreamweaver 4 Advanced Level Course.
Tutorial 6 Working with Bitmaps and Gradients, and Publishing Flash Files.

Tutorial 6 Working with Bitmaps and Gradients, and Publishing Flash Files.
Tutorial 5 Making a Document Interactive. XP Objectives Explore the different button states Add a button from the Button library Create a button Learn.

Tutorial 5 Making a Document Interactive. XP Objectives Explore the different button states Add a button from the Button library Create a button Learn.

Similar presentations

Ads by Google