Lab 01: Assessment

Demo:

The instructor will show students how to fill out and submit the assessment survey as well as set up various accounts. The Instructor will then show students how to create and publish a fully functional animation. This animation demo should include:

1. All three types of symbols (graphic, button, and movie clip)
2. Nested symbols
3. Multiple layers
4. Easing
5. Alpha and color effects
6. Masks
7. Motion paths
8. Walk cycle or equivalent repeating motion
9. Repeating background

Drives, Sites, and Accounts:

Various materials will need to be accessed for this course. Although the lab instructor will touch on them briefly in class, students should take it upon themselves to make sure they have access to these materials. Make sure you can login and access the following resources. At some point you may wish to make bookmarks of these various CGT resources for future reference.

• CGT 353, G drive - "Submission" and "Handouts" folders
• Online Materials
  • Blackboard site - for grades
  • Safari Books Online
  • Lynda.com videos

Assessment Survey:

• Download the Excel spreadsheet template and rename it using the naming convention - Lastname_First Initial_353_assess.xls
• Fill out the form in the approporiate columns and save the file. Be as detailed as possible...
• Submit the spreadsheet to the G drive (G:\CG\CG353\Submissions.)

Interactive Animation Exercise:

The instructor should also demonstrate the proper method for organizing the graphics and symbols to enhance animation and organizational efficiency. These concepts include:

• Appropriate grouping and layering
• Registration points
• Proper use of nested symbols

Students should replicate the animation process created by the instructor in the allotted time, and use the required specifications listed above. Animations should be similar to the example below, the .swf of which should be submitted by the end of lab.

Instructions:

1. Create a quick graphic of a car (side view), without the wheels.

2. Create a separate graphic of a wheel.

3. Create a new movie clip, place instances of the wheels and car body on their own layers to make a car.

4. Animate the wheels to spin in the car movie clip.

5. Create a new graphic of a background for this car to drive across, make sure it is bigger than the flash screen.

6. Create a new movie clip, place the background image in it, and animate the background image moving to the left.

7. Place an instance of the car and background on their own layers in the main timeline.

8. Create a motion path with the pencil tool wherever you'd like the car to go.

9. Select the motion path and right-click then cut the path. The path should disappear.

10. On the car layer, extend the frames to frame 15 by right- clicking on frame 15 and choosing "insert frame."

11. Select one of the greyed frames in the car layer, right click, and select 'create motion tween'.

12. With frame 15 selected, move the frame where you'd like it to go. The car should now move...

13. Select one of the motion tweened frames and paste the motion guide you cut earlier. This should constrain the motion tween to the path. Reposition everything as you see fit.

14. In the tween panel at the bottom of the screen, place the ease a -100.

15. Select frame 15 of the car layer, click on the car. In the properties panel at the bottom, select 'alpha' in the color drop-down list; set the alpha to 25%. Below color, select 'multiply' for the blend mode.

16. Create a new movie clip with just a box of color on it.

17. Place this movie clip on a layer above the background, and stretch it so that it takes up most, but not all of, the screen.

18. Right click on the new layer's name, and select 'mask'

19. Create a new button symbol. Draw a simple button, with the word "start" on it.

20. Right click on over and select insert keyframe. Create a different version of the button for the over state.

21. Repeat step 19 for the down frame.

22. Insert a keyframe on the hit frame of the button. Create a box bigger than the button for its hit area.

23. Repeat 18 - 21 for a "stop" button.

24. Create a new layer above the car, and place the two buttons on it.

25. Click on the start button, and at the bottom in the properties panel in the <instance name> box name it "btnStart".

26. Do the same with the stop button to name it "btnStop"

27. Create a new layer above everything else. Double-click it and name it 'actions'

28. Select the first frame of actions and press F9 ( or select Window -> actions ), to get to the actionscript panel.

29. Type the following code:

this.btnStart.addEventListener( MouseEvent.CLICK, startAnimation );
this.btnStop.addEventListener( MouseEvent.CLICK, stopAnimation );

function startAnimation( e:MouseEvent ):void {
this.play();
}

function stopAnimation( e:MouseEvent ):void {
this.stop();
}

30. When you have finished, submit your final .swf to the g drive named lastname_firstname_L2.swf