COAP:COAP-2110/week3: Difference between revisions

The educational technology and digital learning wiki
Jump to navigation Jump to search
 
(14 intermediate revisions by the same user not shown)
Line 1: Line 1:
=== Week 3 ===
=== Week 3 [[Help:COAP-2110| COAP 2110]] ===
Theme: Transformation of graphics and morphing
Theme: Transformation and arrangement of graphics, colors, filters and morphing


; Layers (again)
; Layers (again)
Line 14: Line 14:
* Handout: [[Flash arranging objects tutorial]]
* Handout: [[Flash arranging objects tutorial]]


; Colors and gradients
; Colors, gradients and filters
* Previews: [http://tecfa.unige.ch/guides/flash/ex/colors-intro/flash-cs3-colors-intro.html Colors]
* Previews: [http://tecfa.unige.ch/guides/flash/ex/colors-intro/flash-cs3-colors-intro.html Colors]
* Handout: [[Flash colors tutorial]]
* Handout: [[Flash colors tutorial]]


; Bitmap tracing
; Bitmap tracing ('''optional''')
* Preview: [http://tecfa.unige.ch/guides/flash/ex/tracing-intro/flash-cs3-tracing-parameters.html flash-cs3-tracing-parameters.html]
* Preview: [http://tecfa.unige.ch/guides/flash/ex/tracing-intro/flash-cs3-tracing-parameters.html flash-cs3-tracing-parameters.html]
* Handout: [[Flash bitmap tracing tutorial]]
* Handout: [[Flash bitmap tracing tutorial]]


; 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]
* 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]]


; Mid-term exam preparation
; Mid-term exam preparation
See the week 4 program
See [[COAP:COAP-2110/mid-term|mid-term preparation]]
 
==== Classroom activities ====
 
; Morph one letter into another
* Look at [http://tecfa.unige.ch/guides/flash/ex/shape-tweening-intro/flash-cs3-shape-hints.html 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 ====
==== Homework 3 - Week 3 ====


; Assignment
; 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.  
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:
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. (Bascially, I just want you to do at least two things).
* At least two shape tweened objects '''or''' a traced bitmap picture that is morphed '''or''' a motion animation/frame by frame 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)
* 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.
These tweens can be made in the main time line (in different layers) or inside embedded movie clips.


; Reuse of homework 1
; 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.
* 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
; Tip
* In many cases you want to tween through several stages and then back to the original.
* 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
; Submission date and format
* To be returned by Monday, at start of week 4 lesson
* To be returned by '''Monday''', at start of week 4 lesson
* Use the following Flash file name ''project3-familyname-firstname''.fla, e.g.
:''project3-miller-joe.fla''
:... It helps me to distinguish these files and we want to avoid overwriting.


; Other constraints
; 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).
* 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 tween must be made by yourself.
* The shape tweens must be made by yourself.
* The bitmap trace (only if you choose to create just a trace and a shape tween) must be made by yourself.
* You '''must''' fill in a little '''document description''' (see below)
* You '''must''' fill in a '''document description''' using the same template as in homework 1.
* 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.
* 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
; The document description
Your xxx-xxx.fla file '''must''' include a document description.
Your xxx-xxx.fla file '''must''' include a document description. Make sure to define an objective.
* Insert it with menu ''Modify->Document''
* Insert it with menu ''File->File Info ....''
* Enter a title and description
* Enter a title and description
* See the usual [[Help:COAP-2110/doctemplate|template]]
* Use this documentation [[COAP:COAP-2110/doctemplate|template]] (write the documentation with a text editor/notepad and then paste)

Latest revision as of 10:20, 30 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 (optional)
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/frame by frame 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.
  • 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)