COAP:COAP-2110/week3: Difference between revisions

The educational technology and digital learning wiki
Jump to navigation Jump to search
Line 23: Line 23:


; Shape tweening
; Shape tweening
* Previews: [http://tecfa.unige.ch/guides/flash/ex/shape-tweening-intro/flash-cs3-shape-tweening-intro.swf Simple shape morph], [http://tecfa.unige.ch/guides/flash/ex/shape-tweening-intro/flash-cs3-shape-tweening-tear.swf Simple shape and motion morph], [http://tecfa.unige.ch/guides/flash/ex/shape-tweening-intro/flash-cs3-shape-picture-morphing.swf traced bitmaps morph], [http://tecfa.unige.ch/guides/flash/ex/shape-tweening-intro/flash-cs3-shape-tweening-hints.swf flash-cs3-shape-tweening-hints.swf], [http://tecfa.unige.ch/guides/flash/ex/shape-tweening-intro/flash-cs3-shape-tweening-in-motion.html Shape tweening in motion], [http://tecfa.unige.ch/guides/flash/ex/shape-tweening-intro/flash-cs3-shape-tweening-in-motion2.html Shape tweening in motion 2]
* Previews: [http://tecfa.unige.ch/guides/flash/ex/shape-tweening-intro/flash-cs3-shape-tweening-intro.swf Simple shape morph], [http://tecfa.unige.ch/guides/flash/ex6/shape-tweening-intro/flash-cs6-shape-tween-dragon-egg.html flash-cs6-shape-tween-dragon-egg.html], [http://tecfa.unige.ch/guides/flash/ex/shape-tweening-intro/flash-cs3-shape-tweening-tear.swf Simple shape and motion morph], [http://tecfa.unige.ch/guides/flash/ex/shape-tweening-intro/flash-cs3-shape-picture-morphing.swf traced bitmaps morph], [http://tecfa.unige.ch/guides/flash/ex/shape-tweening-intro/flash-cs3-shape-hints.html flash-cs3-shape-hints.html], [http://tecfa.unige.ch/guides/flash/ex/shape-tweening-intro/flash-cs3-shape-tweening-in-motion.html Shape tweening in motion], [http://tecfa.unige.ch/guides/flash/ex/shape-tweening-intro/flash-cs3-shape-tweening-in-motion2.html Shape tweening in motion 2]
* Handout: [[Flash shape tweening tutorial]]
* Handout: [[Flash shape tweening tutorial]]



Revision as of 18:18, 22 January 2013

Week 3 COAP 2110

Theme: Transformation and arrangement of graphics, colors, filters 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, gradients and filters
Bitmap tracing
Shape tweening
Mid-term exam preparation

See mid-term preparation

Classroom activities

Morph one letter into another
  • Look at this example first.
  • Put a big letter on the stage (about size = 150)
  • Create a new empty key frame in the same layer
  • Add a new letter
  • Align the two (use the Edit multiple frames tool in the timeline
  • Add a shape tween
Add shape hints
  • Hit CTRL-SHIFT-H to create a shape hint
  • Move it to the border of a shape until it snaps
  • Repeat in the second keyframe, i.e. tell where the point should go
  • Add other shape hints if needed.

Notice: Misplaced shape hints are in red. Good ones change color.

If you don't like letters, try webdings or windings. Read webdings and wingdings in order to learn about these very special fonts. Under Windows:

  • Program Menu -> Accessories -> System tools -> Characters (or something similar) allows to to copy/paste these letters.

Homework 3 - Week 3

Assignment

Think about a simple shape animation that you would like to create, e.g. something that could evolve into a comic strip, a splash page, a moving logo, an explanatory animation, etc. The shape animation could concern for example moving objects (inside), backgrounds of scenes or a logo.

Then create a Flash file that includes:

  • At least two shape tweened objects or a traced bitmap picture that is morphed or a motion animation of a shape tweened object. (Basically, I just want you to do at least one shape tween plus something else).
  • At least a color change and a form change (i.e. at least one object must change its form and its color)

These tweens can be made in the main time line (in different layers) or inside embedded movie clips.

Reuse of prior homework
  • If you wish you can reuse prior homework (in any way you like). But this is by no means an obligation nor does it have an influence on grading.
Tip
  • In many cases you want to tween through several stages and then back to the original.
  • Put each animation in a different layer (you may even use several layers for the animation of one complex set of shapes)
  • Create something with an objective in mind, i.e. imagine a use case that targets a given population.
Submission date and format
  • To be returned by Monday, at start of week 4 lesson
Other constraints
  • Reuse of objects: 1/3 must be drawn by yourself, max. 1/3 imported but customized, max. 1/3 imported as is. (So you also can do everything by yourself).
  • The shape tweens must be made by yourself.
  • The bitmap trace must be made by yourself.
  • You must fill in a little document description (see below)
  • Homework projects are individual. If you work with others, make sure that the individual projects differ, i.e. the "reuse of objects" criteria above apply.
The document description

Your xxx-xxx.fla file must include a document description. Make sure to define an objective.

  • Insert it with menu File->File Info ....
  • Enter a title and description
  • Use this documentation template (write the documentation with a text editor/notepad and then paste)