1 / 11

Animate (= Flash) Demonstration – Unit 5 – ActionScript 3.0

Animate (= Flash) Demonstration – Unit 5 – ActionScript 3.0. Done So Far and Build Upon Name Keyframes Create Buttons send playhead to named keyframe. Step 0 – Download files, Launch Animate (= Flash), Create Document. Download Files

sotis
Download Presentation

Animate (= Flash) Demonstration – Unit 5 – ActionScript 3.0

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. Animate (= Flash) Demonstration – Unit 5 – ActionScript 3.0 • Done So Far and Build Upon • Name Keyframes • Create Buttons send playhead to named keyframe

  2. Step 0 – Download files, Launch Animate (= Flash), Create Document • Download Files • http://comminfo.rutgers.edu/~aspoerri/Teaching/InfoVis_ITI/videodemosFlash.htmland Files in Sakai > Resources > Animate (= Flash) • Launch Animate (= Flash) • Open File “Step0.fla” • Using Grid, Rulers and Guides • Rulers View > Rulers • Guides • View > Guides > Show Guides

  3. Done So Far – Create Project with Animated Buttons – Single Scene • Import Images • Convert Images to Graphic Symbols • “Insert > Convert to Symbol” • Create Movie Clip using “Insert > New Symbol” • Insert Graphic Symbol and Animate • Create Buttons • Insert Movie Clip in “Over” State • Create “UP” and “DOWN” Buttons • Create Navigation Bar in “Scene 1” and add ActionScript • Insert Keyframes in Timeline and Create Named Frames for Each Category and “Swap In” “Down” Button •  This Unit – Create Secondary Navigation and Named Frames

  4. Step 1 – Create Secondary Navigation Buttons – Single Scene • Create Button for Secondary Theme(s) • Insert Button symbol and specify appearance in Up, Over, Down columns. • Create "2nd nav" layer above navigation layer • Drag Button Instance to Stage • Name button instance ... e.g. "Bilbao_1" into keyframe = "Bilbao" • Control What is Visible Where • Insert "Blank Keyframe" in "2nd nav" layer at frames = "Gehry" etc • so that secondary navigtion for Bilbao theme is not visible there • and you can add secondary navigation for these themes later • using similar steps as for first primary theme. • Use same steps to create other buttons for secondary navigation • You know how to create the “DOWN” button so that the secondary navigation has a “you are here” indicator: • Select instance of UP button in labelled frame related to button • Swap in “DOWN” button

  5. Step 2 – Create Secondary Navigation Buttons – Single Scene • Make Button Instance Interactive • 1) Select named instance of secondary button in Frame = 1 • ActionScript 3.0 • 2) Open “Code Snippets” Window via “Window > Code Snippets” • 3) Select Timeline Navigations in left panel and • 4) Double-click on “Click to Go to Frame and Stop” • Use labeled frame: "Bilbao_1".

  6. Step 3 – Create Secondary Navigation Buttons – Single Scene • Organize Timeline with Labeled Frame • 1) In "Actions" layer at frame = 10, Insert "Blank Keyframe" and • 2) Name keyframe= "Bilbao_1" • 3) In Actions for "Actions" layer, add event listener for secondary button. • Why? Since we will insert keyframe at frame = 10 in "2nd nav" layer. • 4) Select layers "directions" and "2nd nav" at frame = 10 and Insert Keyframe so that can change content at frame 10 for layers. • 5) Change text in "directions" layer at frame 10 to "Bilbao_1 ..." • You can repeat Steps 1 - 5 for frame = 20 etc for other secondary themes and name frame = "Bilbao_2" etc. • Add Animation Instance in secondary theme • 1) Create layer above "directions" and name it "animation • 2) Create keyframe at frame = "Bilbao_1" in animation layer • 3) Drag animation from Library into this keyframe • 4) Insert "Blank Keyframe" in subsquentkeyframe to make sure that animation does NOT play there.

  7. Step 4 – Create Secondary Navigation Buttons – Single Scene • Further Organize Timeline with Labeled Frame • 1) In "Actions" layer at frame = 60, Insert "Blank Keyframe" and • 2) Name keyframe = "Gehry_1" • 3) In Actions for "Actions" layer, add event listener for secondary button. • Why? Since we will insert keyframe at frame = 60 in "2nd nav" layer. • 4) Select layers "directions" and "2nd nav" at frame = 60 and Insert Keyframe so that can change content at frame 60 for layers. • 5) Change text in "directions" layer at frame 60 to "Gehry_1 ..." • You can repeat Steps 1 - 5 for frame = 70 etc for other secondary themes and name frame = "Gehry_2" etc.

  8. Done So Far – Create Project with Animated Buttons – Multiple Scenes • Import Images • Convert Images to Graphic Symbols • “Insert > Convert to Symbol” • Create Movie Clip using “Insert > New Symbol” • Insert Graphic Symbol and Animate • Create Buttons • Insert Movie Clip in “Over” State • Create “UP” and “DOWN” Buttons • Create Navigation Bar in “Scene 1” and add ActionScript • Create Scene for Each Category and “Swap In” “Down” Button •  This Unit – Create Secondary Navigation and Named Frames

  9. Step 1 – Create Secondary Navigation Buttons – Multiple Scenes • 1) Create “Button” Symbol = “Part1” • 2) Create Button Background and Text • 3) Create Secondary Navigation Area in “Bilbao” SceneAdd the needed layers • 4) Add instance of “Part1” button to “Bilbao” scene and name it “Part1” • Use same steps to create other buttons for secondary navigation • You know how to create the “DOWN” button so that the secondary navigation has a “you are here” indicator: • Select instance of UP button in labelled frame related to button • Swap in “DOWN” button

  10. Step 2 – Create Secondary Navigation Buttons – Multiple Scenes • 1) Select “Part1” instance and name it • 2) Open “Code Snippets” Window via “Window > Code Snippets” • Select Timeline Navigations in left panel and • Double-click on “Click to Go to Frame and Play”and code will be added to frame in which selected and named instance is located • Customize Code: specify Frame e.g. “Part1” • function fl_ClickToGoToAndPlayFromFrame(event:MouseEvent):void{ gotoAndPlay("Part1");} • this code is added to “Actions” layer (which will be created if it not yet exists) • 3) Open Actions window and examine and customize code

  11. Step 3 – Label Keyframe – Multiple Scenes • 1) Select “Actions” layer • 2) Select frame = 20, Insert Keyframe and Name it “Part1” • 3) Add “stop ();” to “Actions” layer at frame = 20 • 4) Insert Keyframe at frame = 20 for all the other layers(all the content you want to remain visible) • Use same steps to create other labelled frames needed for secondary navigation • For other scenes: only need to add .addEventListener( code ); in “Actions” layer (make sure to assign correct instance names)

More Related