COAP:COAP-2110/week3: Difference between revisions
(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 | ; 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- | * 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 | 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. ( | * 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 | ; 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 | ||
; 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 | * The shape tweens must be made by yourself. | ||
* You '''must''' fill in a little '''document description''' (see below) | |||
* You '''must''' fill in a '''document description''' | |||
* 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 '' | * Insert it with menu ''File->File Info ....'' | ||
* Enter a title and description | * Enter a title and description | ||
* | * 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)
- Topics: Being organized
- Handout: Flash layers tutorial
- 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
- Topics: align, stack, combine, break objects
- Handout: Flash arranging objects tutorial
- Colors, gradients and filters
- Previews: Colors
- Handout: Flash colors tutorial
- Bitmap tracing (optional)
- Preview: flash-cs3-tracing-parameters.html
- Handout: Flash bitmap tracing tutorial
- Shape tweening
- Previews: Simple shape morph, flash-cs6-shape-tween-dragon-egg.html, Simple shape and motion morph, traced bitmaps morph, flash-cs3-shape-hints.html, Shape tweening in motion, Shape tweening in motion 2
- Handout: Flash shape tweening tutorial
- Mid-term exam 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)