COAP:COAP-2110/week3: Difference between revisions

The educational technology and digital learning wiki
Jump to navigation Jump to search
 
(8 intermediate revisions by the same user not shown)
Line 18: Line 18:
* 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], [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]]


; Mid-term exam preparation
; Mid-term exam preparation
See [[Help:COAP-2110/mid-term|mid-term preparation]]
See [[COAP:COAP-2110/mid-term|mid-term preparation]]


==== Classroom activities ====
==== Classroom activities ====


; Morph one letter into another
; 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)
* Put a big letter on the stage (about size = 150)
* Create a new empty key frame in the same layer
* Create a new empty key frame in the same layer
Line 46: Line 47:
Notice: Misplaced shape hints are in red. Good ones change color.
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 how to use these very special fonts.
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 ====
Line 54: Line 56:


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.


Line 64: Line 66:
* 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)
* 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. a use case that targets a given population.
* 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 confusion.


; 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 tweens must be made 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)
* 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.
* 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.
Line 81: Line 79:
; The document description
; The document description
Your xxx-xxx.fla file '''must''' include a document description. Make sure to define an objective.
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
* Use this documentation [[Help:COAP-2110/doctemplate|template]] (write the documentation with a text editor/notepad and then paste)
* Use this documentation [[COAP:COAP-2110/doctemplate|template]] (write the documentation with a text editor/notepad and then paste)

Latest revision as of 11: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)