Flash Design for eLearning

1. Flash Design for eLearning ASTD Jacksonville - eSIG Chuck Belinski PRYORity Training and Development

2. Session Goal • Create a reusable structure for creating presentation and training modules. • Setup a Flash file • Create a Layout • Create Navigation* (*switched order for instruction) • Add Content* • Add Frame Labels • Create a Menu

3. Flash Interface and Key Concepts • The Timeline, Stage, Toolbar, Properties Panel, and Library • The Stage - where your visual elements will appear • The Timeline - like a music score, read left to right by time • Frames - like frames of a movie or pages of a book • Keyframes - a frame in which something different happens • ActionScript - programming code that adds functionality

4. Walk-through of : myCourse

5. Getting Started • Open Flash • New File • Layout Setting • Publish Settings • Save file: • myCourse.fla

6. Set Our Work Area • Add Additional Frames • Add Additional Layers • Name the Layers • Create our Background • Create our Instructional Area

7. Begin to Add Instructional Content • Add a Heading • Add the Title Text • Add a Graphic to the Library • File/Import/Import to Library • Add a Title Page Graphic • Preview Our Course (Command/Control+Enter)

8. Introduction to ActionScript • Flash plays all the frames in our movie, we do not want that. • Add a “stop” command to the timeline. • Select the “actions” layer • Open the Actions Panel (F9, alt-F9, or Window+Actions) • Type: stop(); • Preview Our Course

9. Add Some Content • Add new Keyframes to the Content Layer (F6) • Delete any left over items from the previous keyframe • Add the text for the Menu Page • Copy and Paste the text for the Instructional Pages • (using NASA_Missions.rtf)

10. Add Navigation • Add our Navigation Buttons • Window/Common Library/Buttons • Classic Buttons/Playback • gel Left, gel Right, gel Stop • gel Left - name “back_btn” • gel Right - name “forward_btn” • gel Stop - name “menu_btn”

11. Create our Navigation ActionScript • First Frame - Actions • Just below the “stop();” code // code for forward button forward_btn.onRelease = function(){ nextFrame(); } • Also add code for: “back_btn” and “prevFrame”

12. Add Frame Labels • Select Frame 2 of the “Labels” Layer • Add a Keyframe (F6) • In the Properties Panel, add the Frame Label “menu” • Frame 3 - name label “sec1” • Frame 4 - name label “sec2” • Frame 6 - name label “sec3”

13. Add the Menu Buttons • On the Menu Page (Frame 2 - content layer) • Drag 3 “gel Stop” buttons from the library to the stage. • Align them with the section heading text • Name the buttons; “sec1_btn”, “sec2”_btn, and “sec3_btn”.

14. Add the Menu Actionscript • Frame 2 - Actions Layer //Menu Button Coding sec1_btn.onRelease = function(){ gotoAndStop("sec1"); } sec2_btn.onRelease = function(){ gotoAndStop("sec2"); } sec3_btn.onRelease = function(){ gotoAndStop("sec3"); }

15. Try and create the code yourself! • First frame - actions layer • The button name is " menu_btn " • We want it to react to something " .onRelease" • When the button is released, we want it to perform something " = function(){ " • What is that something " gotoAndStop("menu"); " • And to close our function " } ".

16. Add Some Additional Graphics • The library contains some graphics, add them to the appropriate pages. • Publish Your Course: • File/Publish Settings… • Flash Tab - select Flash and HTML • Press the “Publish” button.

17. For More Information: • Chuck Belinski • PRYORity Training and Development • 117 Centre Street, Suite #7 • Fernandina Beach, Florida 32034 • 904-491-5007 • chuck@pryoritytraining.com