Exercise : Animated Navigation Structure in Animate (= Flash)

Slides:



Advertisements
Similar presentations
INTRODUCTION TO ADOBE FLASH CS4
Advertisements

© Anselm Spoerri Lecture 7 Meaning –Guiding Principles for Term Project Mechanics –Interactivity Recap –Simple and Disjointed Rollovers and Image Map –Navigation.
© Anselm Spoerri Lecture 11 Flash –Build Flash Website with Animated Navigation Structure –Decide on Overall Navigation Layout, Import Images & Organize.
Create slices and hotspots Create links in Web pages Create rollovers from slices Create basic animation Add tweening symbol instances to create animation.
Introduction to Macromedia Flash 8
Frame(GIF) and Vector Animation. Two Applications for Creating Animations 1.Photoshop – GIF Animation 2.Flash – Vector Animation.
1 Flash Programming Introduction Script Assist. 2 Course Description This course concentrates on the teaching of Actionscript, the programming language.
Chapter 17 Putting It All Together. Viewing the Preloader To view the preloader, 1.CTRL-Enter to test the movie. 2.View > Simulate Download.
Chapter 3 Working with Symbols and Interactivity.
XP Tutorial 5 Buttons, Behaviors, and Sounds. XP New Perspectives on Macromedia Flash MX Buttons Interactive means that the user has some level.
BUILDING RICH MEDIA ELEMENTS. Design Decisions Based on Design Specification  Following the design specification will ensure that the application is.
Exercise : Animated Navigation Structure in Flash 1.Develop Answers to “What did you learn in ITI program?” “What do you have to offer?” “What are your.
1 Flash Basics by Dr SC Li. 2 File Types  In general, Flash 5.0 generates 3 types of files:  ???.fla  Flash ’ s working file  ???.swf  Flash movie.
Flash II MIS439 Eva Tao March 19, 2007 Source:
Flash MX II. Flash MX – Tweened Animation There are two methods for creating an animation sequence in Flash –Frame-by-frame animation –Tweened animation.
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 Buttons library Edit a button instance.
Advanced Level Course. Site Extras Site Extras consist of four categories: Stationeries Site Trash Designs Components.
© 2011 Delmar, Cengage Learning Chapter 3 Working with Symbols and Interactivity.
© 2012 Adobe Systems Incorporated. All Rights Reserved. Copyright 2012 Adobe Systems Incorporated. All rights reserved. ® INTRODUCTION TO FLASH ANIMATION.
Copyright © 2003 Pearson Education, Inc. Chapter 3, Slide 1 by Michael Kay The Web Wizard’s Guide to Flash.
® Copyright 2008 Adobe Systems Incorporated. All rights reserved. ® ® 1 INTRODUCTION TO ADOBE FLASH CS3.
® Copyright 2010 Adobe Systems Incorporated. All rights reserved. ® ® 1 INTRODUCTION TO ADOBE FLASH PROFESSIONAL CS5.
Creating a Logo – Lesson 3 1 Creating a Logo Lesson 3.
XP Tutorial 4 Special Animations. XP New Perspectives on Macromedia Flash MX Special Layers for Animation Animation Using a Motion Guide Layer.
Creating Buttons – Lesson 71 Creating Buttons Lesson 7.
Adobe Flash CS3 Revealed Chapter 3 - WORKING WITH SYMBOLS AND INTERACTIVITY.
Frame, Timeline and Vector Animation. Purposes of Animation Capture viewers attention –exampleexample Explain a system or process –exampleexample Set.
2006 Adobe Systems Incorporated. All Rights Reserved. 1 INTRODUCTION TO ADOBE FLASH CS3.
Motion Tweening – Lesson 81 Motion Tweening Lesson 8.
Introduction to Flash Animation CS 318. Topics Introduction to Flash and animation The Flash development environment Creating Flash animations  Layers.
Flash CS 5 Interface BY NSCHEWCZYK | ©2012. MENU BAR A bar at the top of the window. It lists menu options including: File, Edit, View, Insert, Modify,
Distributed Multimedia Programming Week – 4A Buttons Movie Clips.
© Anselm Spoerri Lecture 10 – Related: Part 1 Flash –Build Flash Website with Animated Navigation Structure –Decide on Overall Navigation Layout, Import.
Building the Events Components– Lesson 111 Building the Events Components Lesson 11.
1 Flash Basics Exercise Guide Making Animated Text  1.1 Open Flash 5.0 working environment frame 1  1.2 Highlight frame 1 of the first layer Insert.
Adding Text and Navigation to the Home Page – Lesson 51 Adding Text and Navigation to the Home Page Lesson 5.
Tutorial 3 Creating Animations. XP Objectives Learn the different elements of animation Create frames and layers Organize frames and layers using the.
Flash Develop Rich Internet Content and Applications –Design motion graphics or build data-driven applications Flash Document = “.fla” filename extension.
© Anselm SpoerriDigital Media Production Digital Media Production Digital Media Production Anselm Spoerri PhD (MIT) Rutgers University
Video in Macromedia Flash (Optional) – Lesson 121 Video in Macromedia Flash (Optional) Lesson 12.
CIS 205—Web Design & Development Flash Chapter 3 Appendix on Using Buttons.
Open a new Flash File Action Script 2.0. Create a button like you did last lesson and name it Click to Play.
Web Site Development - Process of planning and creating a website.
Flash Concepts and Demos - Overview Recap Unit 2 –Buttons (Simple Text and Animated Button) –Gradient Tool –ActionScript (stop, getURL) –Embed Flash Movie.
XP Tutorial 3 Creating Animations. XP New Perspectives on Macromedia Flash MX Elements of Animation Layers are used to organize the content of.
Flash 1. Document Properties Set frame rate and dimensions of project Set frame rate and dimensions of project (default width=550 and height=400)
© Anselm Spoerri Lecture 10 Flash –Recap –Key Concepts, Components & Tools –Demonstration –Buttons: Simple Text Button | Animated Button –Gradient Tool.
Integrating Components and Dynamic Text Boxes with the Animated Map– Lesson 101 Integrating Components and Dynamic Text Boxes with the Animated Map Lesson.
CIS 205—Web Design & Development Flash Chapter 3 Working with Symbols and Interactivity.
Flash Demonstration – Unit 3 Create Multi-Part Animation –Animate Images –Fade-in and Fade-out Text –Add Interactivity to Instance of MovieClip –Animated.
Flash Slideshow with Fade Transition Slideshow #1-Themed Images Slideshow #2-Instructional Images.
Prof. Anselm SpoerriMultimedia Production Rutgers Lecture 11 Flash –Build Flash Website with Animated Navigation Structure –Decide on Overall.
 Motion Tween allow us to move a shape on the stage from one place to another.  In order to use motion tween, the shape to be moved must be converted.
Creating a movie clip.
Tutorial 3 Creating Animations.
Tutorial 3 Creating Animations.
Adding Buttons, Actions, and Sounds
Flash Interface, Commands and Functions
Macromedia Flash Tutorial
Computer presentation
CT1514 Flash-2.
INTRODUCTION TO ADOBE FLASH CS4
Chapter Lessons Create shape-tweened animations Create a mask effect
INTRODUCTION TO FLASH ANIMATION
Working with Symbols and Interactivity
Develop Rich Internet Content and Applications
Flash Concepts and Demos - Overview
Flash Demonstration – Unit 5 – ActionScript 3.0
Exercise : Animated Navigation Structure in Flash
Presentation transcript:

Exercise : Animated Navigation Structure in Animate (= Flash) Develop Answers to “What did you learn in ITI program?” “What do you have to offer?” “What are your passions?”  Develop Major Themes Choose Active Words to Represent Major Themes and Categories Decide on Overall Navigation Layout Create Animated Navigation Buttons Up_Button – whose “Down” state matches states of Down_Button Add Interactivity using ActionScript Create “Scene” for Each Category / Theme

1. “Learned in ITI program?” and “To Offer?” Review Classes Taken Key Concepts Key Learning Experiences What could be of interest to an Employer? How can you showcase Your understanding Ability to communicate effectively Your passions Your portfolio

2. Choose Words for Major Themes Active, Short Words Provide “Sense of Direction” 3. Decide on Overall Navigation Layout Vertical versus Horizontal Allocate Space for Animated Buttons 4. Create Animated Navigation Buttons Decide how to Visualize Different States “UP”, “OVER”, “DOWN” Size / Color / Style of “Text” Color / Size of “Background” Find and Import Image(s) suitable for Primary Categories Animate (= Flash) Projects by ITI Students Link to Previous Projects

Animate (= Flash) Concepts and Demos - Overview Build Project with Animated Navigation Structure Unit 4 Decide on Overall Navigation Layout, Import Images & Organize Assets Create Animations for Navigation Buttons Create "UP" Buttons Create "Down" Buttons Make Button Instance Interactive Create Scenes and Swap in “Down” Button

Animate (= Flash) Demonstration – Unit 4 Decide on Overall Navigation Layout, Import Images & Organize Assets Create Animations for Navigation Buttons Create "UP" Buttons Create "Down" Buttons Make Button Instance Interactive Create Scenes and Swap in “Down” Button

Step 0 – Download files, Launch Animate (= Flash), Create Document http://comminfo.rutgers.edu/~aspoerri/Teaching/InfoVis_ITI/videodemosFlash.html Launch Animate (= Flash) Create Animate (= Flash) Document and Set its Properties File > New Modify > Document or use Property Inspector Frame Rate = 15 Dimensions = 640 x 480 Background color = White 800 x 600 Using Grid, Rulers and Guides Rulers View > Rulers Guides View > Guides > Show Guides

Step 1 – Overall Navigation Layout and Organize Assets Decide on Overall Navigation Layout 1) Create layers for "background", "navigation", "stage" ... 2) Create Guides for Navigation Text and Images Import Images for Navigation 1) Resize to fit allocated space (or "create to spec" in image editing program). 2) Convert images into Graphic Symbols. Organize Assets 1) Open "Library" window. 2) Click on "Folder" icon to create folders for "Images", "Buttons" ...

Step 2 – Create Animations for Navigation Buttons 1) Create "Movie" symbol using "Insert > New Symbol". 2) Drag "Graphic Symbol“ onto Stage of Animation (creates instance) 3) Add keyframes. 4) For each keyframe, apply effects (select instance on stage to apply Alpha effect). 5) Animate by applying "tweening" 6) Select last keyframe, open "Actions" window (can use Right-Click) and type "stop ();" (so that the animation does loop). Make sure "Frame" is selected by checking "Actions for ..." the heading in top left corner.

Step 3 – Create "UP" Buttons 1) Insert "Button" symbol. 2) Create layers and guides for text and animation. 3) "UP" state - create text (and possibly background shape) 4) "OVER" state - insert keyframe, modify text, add animation. 5) "DOWN state - insert (empty) keyframe, modify text and add static graphic by selecting animation and using "Swap" in the Property Inspector; want graphic to line up with end state of animation. 6) "HIT" state - define "hotspot" for button (in addition to shapes in other states).

Step 4 – Create "Down" Buttons Use "Duplicate Symbol" to Create Buttons 1) Select "Button" symbol, Right-Click, select "Duplicate" and name it. 2) Replace text in the keyframes for the different states. 3) Use "Swap" to replace animation and position appropriately. Create "Down" Buttons 1) Use "Duplicate Symbol" to create "Down" button and name it. 2) Update states: "down" and "up" become identical (use "Copy Frames" and extra layer for swapping if needed). 3) "Over" should also contain static image as in "Up" state and the same text color as in "Up" state.

Step 5 – Make Button Instance Interactive – Single Scene Using ActionScript 3.0 and Design Project in single "Scene 1". Make Button Instance Interactive 1) Select instance of button in "Scene 1" and name it 2) Open “Actions” Window via “Window > Actions” 3) Open “Code Snippets” Window via “Window > Code Snippets” Select Timeline Navigations in left panel and Double-click on “Click to Frame and Stop” and code will be added to frame in which selected and named instance is located Customize Code: specify Frame e.g. “Bilbao” function fl_ClickToGoToAndStopAtFrame(event:MouseEvent):void { gotoAndStop("Bilbao");} this code is added to “Actions” layer (which will be created if it not yet exists)

Step 6 – Make Button Instance Interactive (cont.) – Single Scene Select Button Instance 1) Select instance of button (and name it). 2) Open “Actions” Window via “Window > Actions” 3) Open “Code Snippets” Window via “Window > Code Snippets” Select Timeline Navigations in left panel and Double-click on “Click to Go to Frame and Stop” and code will be added to frame in which selected and named instance is located Customize Code: specify Frame e.g. "Gehry", "Meret" or "Dance"

Step 7 – Create Labeled Frames – Single Scene Organize Timeline with Labeled Frame 1) In "Actions" layer at frame = 50, Insert "Blank Keyframe" and 2) Name keyframe = "Gehry" 3) In Actions for for "Actions" layer, add event listeners for buttons Example: Bilbao.addEventListener(MouseEvent.CLICK, fl_ClickToGoToAndStopAtFrame); in "Scene 1" 4) Select ALL the layers below Actions layer at frame = 50 and Insert Keyframe so that all content is visible until frame 50 and you can edit it at frame 50 if you want to. 5) Change text in "directions" layer at frame 50 to "Gehry ..." Repeat Steps 1 - 4 for frame = 100, 150 for other primary themes and name frame = "Meret" etc

Step 8 – Swap in “Down” Button – Single Scene Create "You are here" Indicator 1) At frame = 1, select instance of Bilbao button 2) In Properties panel, click on "Swap ..." and select DOWN version of the Bilbao button. Repeat Steps 1 - 2 for frame = 50, 100, 150 for other primary themes and swap in the respective DOWN button.

Step 5 – Make Button Instance Interactive – Multiple Scenes Using ActionScript 3.0, Open "Scene" Window 1) "Scene 1" - name it "Bilbao". Make Button Instance Interactive 1) Select instance of button in "Scene 1" and name it 2) Open “Actions” Window via “Window > Actions” 3) Open “Code Snippets” Window via “Window > Code Snippets” Select Timeline Navigations in left panel and Double-click on “Click to Go to Scene and Play” and code will be added to frame in which selected and named instance is located Customize Code: specify Scene e.g. “Bilbao” use gotoAndStop function fl_ClickToGoToScene(event:MouseEvent):void{ MovieClip(this.root).gotoAndStop(1, "Bilbao");} this code is added to “Actions” layer (which will be created if it not yet exists)

Step 6 – Make Button Instance Interactive (cont.) – Multiple Scenes Select Button Instance 1) Select instance of button (and name it). 2) Open “Actions” Window via “Window > Actions” 3) Open “Code Snippets” Window via “Window > Code Snippets” Select Timeline Navigations in left panel and Double-click on “Click to Go to Scene and Play” and code will be added to frame in which selected and named instance is located Customize Code: specify Scene e.g. "Gehry", "Meret" or "Dance“ change to gotoAndStop Code will be added in “Actions” layer

Step 7 – Create Scenes and Swap in “Down” Button – Multiple Scenes Create "actions" Layer 1) Insert layer called "actions" (if it has not already been created) 2) Select first keyframe and open "Actions" window. 3) Type "stop ();" (on the 1st line) Open "Scene" Window to Duplicate Scenes 1) Open "Scene" window. 2) Click the "Duplicate Scene" icon in the bottom right. 3) Name the duplicate consistent with scenes referenced in the ActionScripts associated with the different buttons. For ActionScript 3.0: make sure only addEventListeners are included Bilbao.addEventListener( code ); Gehry.addEventListener( code ); Meret.addEventListener( code ); Dance.addEventListener ( code ); Remove other function code scenes other than the 1st scene Insert "Down" Button for Each Scene 1) Select button related to selected scene. 2) Use "Swap" in Property Inspector and select "Down" button.

Recap – How to create Animated & Interactive Button 4. Button UP = BUTTON Symbol OVER State 3. Animation = MOVIE Symbol 2. Bitmap Symbol = GRAPHIC Symbol Import Bitmap To Change Alpha  Select Instance of Symbol Animation Stops  Add “stop ()” to last keyframe Navigation Select instance of Button and attach ActionScript Save Time  Use “Duplicate” and Modify