COAP:COAP-2110

The educational technology and digital learning wiki
Jump to navigation Jump to search

<pageby nominor="false" comments="false"/>

Introduction

This is a revised sample template for a introductory Flash course. It is based on my Webanimation (Flash) COAP 2110 courses at Webster University, Geneva. The actual syllabi were different.

Course level learning outcomes (roughly)
  1. Know the organization and tools of the Macromedia CS3 Flash Desktop
  2. Create simple drawings
  3. Manipulation of graphics (e.g. envelope transforms, color gradients)
  4. Creating and using layers
  5. Frame-by-frame, motion and shape animations
  6. Use of embedded movie clips
  7. Incorporating non-Flash media files (graphics, sound and video)
  8. Simple interactivity in Flash, e.g. use of buttons, button components and some action script
Teaching materials
  • Flash tutorials in this wiki (lecture notes)
  • Veer, E.A. Vander and Chris Grover (2007). Flash CS3: The Missing Manual. ISBN 0596510446 - 527 pages.
  • Flash Tutorials on the Internet
Reference and overviews

Program

We shall introduce 1-2 new topics per week. For the first 6 weeks we will assign mini-projects that will help you to learn the most important techniques.

Week 1

Theme: Simple drawing and frame-by-frame animation

Elements of the Flash Desktop
Creating simple Drawings

Topics: Stage size, Drawing modes, Selecting objects, Drawing and painting tools, Erasing and alignment, Colors, Adding text

Simple use of Layers
Importing clipart and textures
Frame-by-frame animation

Help:COAP-2110/project1

Week 2

Theme: Motion animation and embedded movie clips

Introduction to motion animation
Symbols and embedded movie clips

Help:COAP-2110/project2

Week 3

Theme: Transformation of graphics and morphing

Layers (again)
Transformation of objects
  • Topics: Simple transformation (scaling, rotating, skewing, distorting), envelope transformation of a shape with either the select tool, envelope transforms or the sub-selection tool.
  • Handout: Flash object transform tutorial
Arranging objects
Colors and gradients
Shape tweening

Help:COAP-2110/project3

Week 4

Theme: Basic interactiviy

Introduction to buttons and some ActionScript

Help:COAP-2110/mid-term

Help:COAP-2110/project4

Week 5

Theme: Using sound and the button component

Discussion
  • Some past homework
  • mid-term exam and term projects
  • planning of term projects, the design process
  • What do we mean by "quality?"
  • The Term project
Flash components, in particular the button component
Sounds
Term projects
  • Objectives must be defined

Help:COAP-2110/project5

Week 6

Theme: Importing and augmenting videos

Flash Video topics

Help:COAP-2110/project6

Week 7

Theme: Special effects, masks and more interactivity

Special effects
Mask and masked layers
Interactivity
Publishing on a web site (Wednesday)
  • Copy all the files *.swf *.js *.html and resources (e.g. sound or video)
  • Fix the generated HTML
  • You also may modify some publish settings
Term projects
  • Final advice

Help:COAP-2110/project7

Week 8

Presentation of term projects

Each student will present his/her term project (unless the class is too big) You will have to show the application on the teacher's machine and the projector. There is no need to prepare slides but be prepared to answer questions !

Final exam COAP 2110

The final exam will focus on interactivity and animation. You will receive a *.fla file to complete/repair. It will be similar in spirit to the mid-term exam.

Handouts

Prepare for the following subjects

(1) Mid-term exam requirements
(2) Buttons
  • Using library *.fla buttons (just change the label)
  • Making your own buttons from simple (!) drawings (including drawings for the different button states)
  • Using button components (label, change of width)
(3) Videos and Sound
  • Sound embedded into the timeline
  • Videos embedded into the timeline
  • Simple use of the video component
(4) ActionScript
  • Simple event handling functions and registration of mouse click events

Example code: 

// timeline moving
forward_btn.addEventListener(MouseEvent.CLICK,forward);
function forward(event:MouseEvent) { gotoAndStop(2); }

// Play an embedded movie clip
start_button.addEventListener(MouseEvent.CLICK,start_kite);
function start_kite(event:MouseEvent) {
	kite.play();
}

You then should be able to master following simple ActionScript "instructions":

  • Change the visibility of an object on the stage
  • Move an object
  • Play and stop an embedded movie clip
  • play and stop the animation in the timeline
  • Move the user around in the timeline

Example code for object manipulation 

cat.visible = true;
cat.visible = false;

cat.x = 100;
cat.y += 50;

movie_clip.stop();
movie_clip.play();

Example code for timeline animations 

gotoAndPlay(12);
gotoAndPlay("robot");
gotoAndStop(12);
gotoAndStop("cat_anim");

stop();
start();

(5) Basic inverse kinematics

  • (to be confirmed)

Do not forget to revise the subjects from the previous exam (basic drawing and animation principles) !

Not covered in the exam

  • ActionScript program flow (e.g. complicated if and switch statements, loops, etc.)
  • Special effects
  • Classic motion tweens
  • Video captions and Video cue points
  • Loading of external sources other than video.
  • Keypress events

Preparation examples

Warning: The final will be similar in spirit, however we will not test classic motion tweens !

Preparation example 2007

You can try to solve the 2007 exam, i.e. solve the following problems:

  • Frame 1 (home): Buttons should not lead you to frame 1 (home), but to the various other keyframes. Also add your name.
  • Frame 2 (Sailing): (a) Play the tween animation of boat with the 'what's going on here' button. (b) BONUS Point: Create and play a motion animation of a plane.
  • Frame 3 (Driving): (a) Create an animation that will start moving the car from right to left and slightly forward too (i.e. keep it on the road). To animate the car edit the 'old car' symbol and make it a motion tween. Then link it to the what's going on here button (b) BONUS Point: Do something with the yellow car.
  • Frame 4 (Island): (a) Make the trees visible when the user clicks on the what's going on button. (b) BONUS point: Improve the frame-by-frame animation of the big tree.
  • Frame 5 (Rocket): (a) Write code that will launch the rocket. (b) BONUS: Do something with the snakes

Tip: For starters, you can navigate with the little button on top right. Do not edit layer one !

Now get the *.fla source file from here:

action-script-button-anim-problem.fla

Instructions are also inside the *.fla file (play it):

action-script-button-anim-problem.html

A good enough solution is also available:

Source *.fla: action-script-button-anim-solution.fla
HTML+SWF: action-script-button-anim-solution.html
Directory: http://tecfa.unige.ch/guides/flash/ex/action-script-3-intro/

Preparation example 2008

This work through example has instructions embedded inside the fla file. Better and alternatively also may read the series of screen copies and that include the instructions http://tecfa.unige.ch/guides/flash/ex/exams2008/final-coap2110-2008-handout.pdf

http://tecfa.unige.ch/guides/flash/ex/exams2008/final-coap2110-2008-SOLUTION.swf

Solution:

http://tecfa.unige.ch/guides/flash/ex/exams2008/ (directory)
final-coap2110-2008-SOLUTION.fla

Preparation example 2010

Solution:

Other information

  • All materials are allowed (e.g. books, handouts, web pages)
  • Use of communication tools is strictly forbidden (no chat, no mail, etc.). No talking between students. Offenders may get an F.

Help:COAP-2110/term project

Index of Homework and templates

Templates:

New series - individual files (2008):

Old homework series (2007):

Retrieved from "https://edutechwiki.unige.ch/mediawiki/index.php?title=COAP:COAP-2110&oldid=19178"