COAP:COAP-2110/week7: Difference between revisions

The educational technology and digital learning wiki
Jump to navigation Jump to search
mNo edit summary
 
(29 intermediate revisions by the same user not shown)
Line 1: Line 1:
=== Week 7 ===
=== Week 7 - [[Help:COAP-2110| COAP 2110]]===
Theme: Special effects, masks and more interactivity


; Special effects
Topics: Term projects, Animation (3D, IK, masks) and more interactivity
* Timeline special effects (short summary)
* Previews: [http://tecfa.unige.ch/guides/flash/ex/special-effects/flash-cs3-special-timeline-effects-2.html flash-cs3-special-timeline-effects-2.html]


; Mask and masked layers:
== Monday ==
* Previews: [http://tecfa.unige.ch/guides/flash/ex/special-effects/flash-cs3-mask.html flash-cs3-mask.html].
 
* Handout: [[Flash special effects tutorial]] (not handed out, print it or see chapter 6 of the textbook)
; Term projects
* Discussion, Advice


; Interactivity
; Interactivity
* Previews:
* Previews: [http://tecfa.unige.ch/guides/flash/ex/embedded-movie-clips/kite-movie.html kite-movie.html] -  [http://tecfa.unige.ch/guides/flash/ex6/action-script-3-intro/actionscript3-simple-object-manipulation.html Cat manipulation] - [http://tecfa.unige.ch/guides/flash/ex6/action-script-3-intro/actionscript3-simple-object-manipulation-buttons.html Remote cat manipulation] - [http://tecfa.unige.ch/guides/flash/ex/drag-and-drop-intro/flash-cs3-drag-and-drop-matching-3.html Drag and drop edutainment]
[http://tecfa.unige.ch/guides/flash/ex/embedded-movie-clips/kite-movie.html kite-movie.html] -  [http://tecfa.unige.ch/guides/flash/ex/action-script-3-intro/actionscript3-simple-object-manipulation.html Cat manipulation] - [http://tecfa.unige.ch/guides/flash/ex/action-script-3-intro/actionscript3-simple-object-manipulation-buttons.html Remote cat manipulation] - [http://tecfa.unige.ch/guides/flash/ex/drag-and-drop-intro/flash-cs3-drag-and-drop-matching-3.html Drag and drop edutainment]
* Handout: [[Flash embedded movie clip tutorial]] (recall).
* Handout: [[Flash embedded movie clip tutorial]] (already handed out).
* Handout: [[ActionScript 3 interactive objects tutorial]] (contains longer AS code useful for homework 7, ActionScript option)
* Handout: [[ActionScript 3 interactive objects tutorial]]
* Handout: [[Flash drag and drop tutorial]] (for CS minors only, contains longer AS code)
* Handout: [[Flash drag and drop tutorial]] (not distributed, contains longer AS code)
 
* Handout: [[Flash games tutorial]] (only contains a half-finished example)
(2) Object manipulation
* Play with the "cats" examples, get:
: [http://tecfa.unige.ch/guides/flash/ex6/action-script-3-intro/actionscript3-simple-object-manipulation.fla actionscript3-simple-object-manipulation.fla]
: [http://tecfa.unige.ch/guides/flash/ex6/action-script-3-intro/actionscript3-simple-object-manipulation-buttons.fla actionscript3-simple-object-manipulation-buttons.fla]
* Cats example for computer science majors (more difficult, but more elegant):
: [http://tecfa.unige.ch/guides/flash/ex6/action-script-3-intro/actionscript3-simple-object-manipulation2.fla actionscript3-simple-object-manipulation2.fla]


; Publishing on a web site (recall)
; Publishing on a web site (recall)
* Copy all the files *.swf *.js *.html and resources (e.g. sound or video) that are loaded dynamically via components or ActionScript code to the server. You don't have to copy objects that sit in the library.
* Copy both the *.swf and *.html files. Also copy resources to server, e.g. sound or video that are loaded dynamically via components or ActionScript. You don't have to copy objects that sit in the library.
* You also may fix the generated HTML file
* You also can adapt the generated HTML file
* You may modify some publish settings.
* You may modify some publish settings.


; Term projects
== Wednesday ==
* Final advice
 
Main topic: Animation and term project work
 
; Motion presets
* Motion presets are pre-configured motion tweens using all kinds of effects (path, fade in/ou, transforms, ...)
* Get the panel from menu ''Window-> Motion Presets''
* Create or select a symbol on the stage, then select a preset from the panel. You then can adapt it in the same way as would edit your own tweens ....
* Tell us your favorite and try to understand how it was done.
 
; 3D animation of 2D objects
* Short demo: Rotation is just another transformation you can apply to symbol instances. Rotating around z means around the in/out axis, etc.
* I suggest using rather the Transform panel than the 3D rotation tool in the tools panel.
 
; Inverse kinematics
* Handout: [[Flash inverse kinematics tutorial‎‎]]
 
; Mask and masked layers
* Previews: [http://tecfa.unige.ch/guides/flash/ex/special-effects/flash-cs3-mask.html flash-cs3-mask.html].
* Handout: [[Flash mask layers tutorial]]
 
; Buttons and manipulation of embedded clips
* Short recall of principles on demand only (!)
* Faisal: Looping video [[Flash_augmented_video_tutorial#Manipulating_the_video_component_with_ActionScript]]
 
; Classroom activities
 
(1) Mask layers
* Create a mask layer. As a background you either could import a simple bitmap file (a photograph) or use one of your previous Flash files
 
(2) Play with motion presets and 3D motion effects. Also explore 3D transforms in keyframes
 
(3) Create a bone structure using symbols.
 
(4) Work on your term projects
 
(5) Revise control of Clips (catch-up activity for those who missed classes)
* Create a clip on the scene
* Create an animation on its own timeline (Edit the symbol)
* Create a button that stops the animation and another that plays it
* Create 2 buttons that hide/show it
* Create a button that moves it
* Create a button that changes its size.
* All these functions include only one line of ActionScript.


==== Homework 7 - week 7 ====
=== Homework 7 - week 7 ===


; Assignment
; Assignment
Create a flash application. Please '''choose''' from one of the two following options:
Create a flash application. Please '''choose''' from one of the two following '''options''':
# Create a Flash animation that includes at least '''two special effects''', i.e. built-in timeline effects or mask layers.
 
# Create a Flash animation that uses some ActionScript instructions. I require at least 2 "constructs" that are different from timeline navigation. It is not enough to use gotoAndPlay(), gotoAndStop(), stop (), etc. For example, you can play flash movies with "play()" or change properties of objects on the stage, e.g. change their position or hide/unhide these.
'''Option A''': Create a Flash animation that includes at least ''two of the following'': built-in timeline effects, mask layers, 3D transforms, or a bone structure.
 
'''Option B''': Create a Flash animation that uses some ActionScript instructions. I require at least 2 "constructs" that are different from timeline navigation (gotoAndPlay(), gotoAndStop(), stop (), etc. ). For example, you can play flash movies with "play()" or change properties of objects on the stage like their position or visibility. Recommended for exam preparation...


; Reuse of prior homework
; Reuse of prior homework
Line 38: Line 85:
; Submission date and format
; Submission date and format
* To be returned by Monday, at start of week 8 lesson
* To be returned by Monday, at start of week 8 lesson
* Use the following Flash file name ''familyname''-''firstname''.fla, e.g.
:''miller-joe.fla''
:... I must be able to distinguish these files and we want to avoid overwriting.


; Other constraints
; Other constraints
Line 46: Line 90:
* There is no restriction on the subject, e.g. you can do a slide show or motion/shape/frame animations.
* There is no restriction on the subject, e.g. you can do a slide show or motion/shape/frame animations.
* You can import sound and video from any source (so the 1/3 rule doesn't apply for these).
* You can import sound and video from any source (so the 1/3 rule doesn't apply for these).
* You must fill in a '''document description''' using the same template as in homework 1.
* You must fill in a '''document description''' using the [[COAP:COAP-2110/doctemplate| same template]] as usual.
* 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.
* If you reuse old homework, make sure that certain errors are fixed (e.g. use only a single non-editable object in a motion tween). Also get rid of unused tween objects in your library. These are most often indicators of badly done tweens. Finally, try to improve the aesthetics of your drawings.
* Your *.fla should be error free. No broken tweens, no strange tween objects in your library, etc.
* Your *.fla should be error free. No broken tweens, no strange tween objects in your library, etc.


; Evaluation criteria - bonus and malus points
; Evaluation criteria
As usual
* As usual (see the rubric in the worldclassroom)
 
== Links ==
 
=== ActionScript for programmers ===
 
The manual (also available through the Actions panel, in principle)
* [http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/index.html?filter_flashplayer=11.6# ActionScript® 3.0 Reference for the Adobe® Flash® Platform]
** [http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/display/MovieClip.html Movie clip]
 
=== Special effects ===


; The document description
* [http://www.adobe.com/devnet/flash/learning_guide/graphic_effects.html Graphic Effects] An Adobe page that links to several tutorials explaining various principles and tricks ....
Your xxx.fla file '''must''' include a document description.
* Insert it with menu ''Modify->Document''
* Enter a title and description
* See the [[Help:COAP-2110/doctemplate|template]]

Latest revision as of 14:45, 27 February 2013

Week 7 - COAP 2110

Topics: Term projects, Animation (3D, IK, masks) and more interactivity

Monday

Term projects
  • Discussion, Advice
Interactivity

(2) Object manipulation

  • Play with the "cats" examples, get:
actionscript3-simple-object-manipulation.fla
actionscript3-simple-object-manipulation-buttons.fla
  • Cats example for computer science majors (more difficult, but more elegant):
actionscript3-simple-object-manipulation2.fla
Publishing on a web site (recall)
  • Copy both the *.swf and *.html files. Also copy resources to server, e.g. sound or video that are loaded dynamically via components or ActionScript. You don't have to copy objects that sit in the library.
  • You also can adapt the generated HTML file
  • You may modify some publish settings.

Wednesday

Main topic: Animation and term project work

Motion presets
  • Motion presets are pre-configured motion tweens using all kinds of effects (path, fade in/ou, transforms, ...)
  • Get the panel from menu Window-> Motion Presets
  • Create or select a symbol on the stage, then select a preset from the panel. You then can adapt it in the same way as would edit your own tweens ....
  • Tell us your favorite and try to understand how it was done.
3D animation of 2D objects
  • Short demo: Rotation is just another transformation you can apply to symbol instances. Rotating around z means around the in/out axis, etc.
  • I suggest using rather the Transform panel than the 3D rotation tool in the tools panel.
Inverse kinematics
Mask and masked layers
Buttons and manipulation of embedded clips
Classroom activities

(1) Mask layers

  • Create a mask layer. As a background you either could import a simple bitmap file (a photograph) or use one of your previous Flash files

(2) Play with motion presets and 3D motion effects. Also explore 3D transforms in keyframes

(3) Create a bone structure using symbols.

(4) Work on your term projects

(5) Revise control of Clips (catch-up activity for those who missed classes)

  • Create a clip on the scene
  • Create an animation on its own timeline (Edit the symbol)
  • Create a button that stops the animation and another that plays it
  • Create 2 buttons that hide/show it
  • Create a button that moves it
  • Create a button that changes its size.
  • All these functions include only one line of ActionScript.

Homework 7 - week 7

Assignment

Create a flash application. Please choose from one of the two following options:

Option A: Create a Flash animation that includes at least two of the following: built-in timeline effects, mask layers, 3D transforms, or a bone structure.

Option B: Create a Flash animation that uses some ActionScript instructions. I require at least 2 "constructs" that are different from timeline navigation (gotoAndPlay(), gotoAndStop(), stop (), etc. ). For example, you can play flash movies with "play()" or change properties of objects on the stage like their position or visibility. Recommended for exam preparation...

Reuse of prior homework
  • If you wish you may reuse artwork and animations from previous homework (in any way you like). But this is by no means an obligation nor does it have an influence on grading. However, make sure to improve drawing, animation, navigation etc. if you didn't get a top grade for previous work.
Submission date and format
  • To be returned by Monday, at start of week 8 lesson
Other constraints
  • Reuse of artwork and movie clips: 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).
  • There is no restriction on the subject, e.g. you can do a slide show or motion/shape/frame animations.
  • You can import sound and video from any source (so the 1/3 rule doesn't apply for these).
  • You must fill in a document description using the same template as usual.
  • 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.
  • Your *.fla should be error free. No broken tweens, no strange tween objects in your library, etc.
Evaluation criteria
  • As usual (see the rubric in the worldclassroom)

Links

ActionScript for programmers

The manual (also available through the Actions panel, in principle)

Special effects

  • Graphic Effects An Adobe page that links to several tutorials explaining various principles and tricks ....