COAP:COAP-2110/week4: Difference between revisions
Jump to navigation
Jump to search
m (using an external editor) |
m (→Homework 4) |
||
| (23 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
=== Week 4 === | === Week 4 - Monday [[Help:COAP-2110| COAP 2110]] === | ||
Theme: Basic interactivity | Theme: Basic interactivity | ||
; Introduction to buttons and some ActionScript | ; Introduction to buttons and some ActionScript | ||
* Topics: Button frame-by-frame animation, creating | * Topics: Button frame-by-frame animation, customizing buttons, creating your own buttons, creating buttons from bitmaps, etc. | ||
* Previews: [http://tecfa.unige.ch/guides/flash/ex/buttons-intro/flash-cs3-simple-slide-show.swf Simple slide show], [http://tecfa.unige.ch/guides/flash/ex/buttons-intro/flash-cs3-rocket-launcher.swf Rocket launcher], [http://tecfa.unige.ch/guides/flash/ex/buttons-intro/flash-cs3-simple-menu-site.html Menus with buttons], [http://tecfa.unige.ch/guides/flash/ex/buttons-intro/flash-cs3-image-map.html Image maps with pictures], [http://tecfa.unige.ch/guides/flash/ex/buttons-intro/flash-cs3-button-animation.html Buttons with animation] | * Previews: [http://tecfa.unige.ch/guides/flash/ex/buttons-intro/flash-cs3-simple-slide-show.swf Simple slide show], [http://tecfa.unige.ch/guides/flash/ex/buttons-intro/flash-cs3-rocket-launcher.swf Rocket launcher], [http://tecfa.unige.ch/guides/flash/ex/buttons-intro/flash-cs3-simple-menu-site.html Menus with buttons], [http://tecfa.unige.ch/guides/flash/ex/buttons-intro/flash-cs3-image-map.html Image maps with pictures], [http://tecfa.unige.ch/guides/flash/ex/buttons-intro/flash-cs3-button-animation.html Buttons with animation] | ||
* Handout: [[Flash button tutorial]] | * Handout: [[Flash button tutorial]] | ||
* Rocket example: [http://tecfa.unige.ch/guides/flash/ex6/buttons-intro/flash-cs6-rocket-launcher-as3.fla flash-cs6-rocket-launcher-as3.fla] | |||
==== | == Wednesday == | ||
* Using component buttons (easier than "Flash" buttons) | |||
* Creating slide shows (timeline navigation) with buttons | |||
* Previews: [http://tecfa.unige.ch/guides/flash/ex/buttons-intro/flash-cs3-simple-menu-site.html Menus with buttons], [http://tecfa.unige.ch/guides/flash/ex/components-intro/flash-cs3-simple-slide-show-menu.html Slide show with component button menu] | |||
* Simple menu-based fla code: [http://tecfa.unige.ch/guides/flash/ex/components-intro/flash-cs3-simple-slide-show-menu-fewcode.fla flash-cs3-simple-slide-show-menu-fewcode.fla] | |||
* Handout: [[Flash component button tutorial]] | |||
== Homework 4 == | |||
'''For those who already turned in 3 homework''' and wish to have a break: I suggest skipping this one. I will not test button creation in the final. Do homework 5 which is more important. | |||
; Assignment | ; Assignment | ||
* Create a really complex button and that includes well done graphics and/or animations. | |||
* In addition, create one minor variant of the same button. To do so: ''duplicate'' then rename the button you created first (right-click in the library). | |||
* Try to produce nice graphics. I will grade the artwork a bit tougher than for homework 2 ! | |||
<!-- | |||
# '''Option B''': Create an application where the user can navigate on the timeline, e.g. a slide show of pictures or a portfolio of prior work or a "story". Then create a Flash file that includes: | # '''Option B''': Create an application where the user can navigate on the timeline, e.g. a slide show of pictures or a portfolio of prior work or a "story". Then create a Flash file that includes: | ||
#* At least '''four buttons''' that you can place either on single frames, extend over several frames or over the whole timeline. These buttons should position the playhead (i.e. the user) in a new frame. In other words, these buttons must allow the user to move from frame to other frames. | #* At least '''four buttons''' that you can place either on single frames, extend over several frames or over the whole timeline. These buttons should position the playhead (i.e. the user) in a new frame. In other words, these buttons must allow the user to move from frame to other frames. | ||
#* To make this work, you must add a stop() instruction to the script layer of each "start" keyframe. | #* To make this work, you must add a stop() instruction to the script layer of each "start" keyframe. | ||
--> | |||
; Reuse of homework | ; Reuse of prior homework | ||
* If you wish you can use your previous homework (in any way you like), e.g. include each animation as swf file in a different frame. But this is by no means an obligation nor does it have an influence on grading. | * If you wish you can use your previous homework (in any way you like), e.g. include each animation as swf file in a different frame. But this is by no means an obligation nor does it have an influence on grading. | ||
; Submission date and format | ; Submission date and format | ||
* To be returned by Monday, at start of week | * To be returned by Monday, at start of week 6 lesson | ||
* Use the following Flash file name project4-''familyname''-''firstname''.fla, e.g. | * Use the following Flash file name project4-''familyname''-''firstname''.fla, e.g. | ||
:''project4-miller-joe.fla'' | :''project4-miller-joe.fla'' | ||
| Line 29: | Line 41: | ||
; 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). | ||
* There is no restriction on the subject, e.g. you can create any "slide show" you want or | <!-- | ||
design any crazy button you like. | * There is no restriction on the subject, e.g. you can create any "slide show" you want or design any crazy button you like. | ||
* For the slideshow (only) you can take either buttons from the library or make your own. | * For the slideshow (only) you can take either buttons from the library or make your own. | ||
--> | |||
* You must fill in a '''document description''' using the same template as in homework 1. | * 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. | ||
* 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) | * 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) | ||
; Evaluation criteria | ; Evaluation criteria | ||
Same as before ( | Same as before (including late submission policy). You can examine the grading rubric in the world classroom. | ||
; The document description | ; The document description | ||
Your p4-xxx-xxx.fla file '''must''' include a document description. | Your p4-xxx-xxx.fla file '''must''' include a document description. | ||
* Enter a title and description | * Enter a title and description | ||
* See the [[ | * See the [[COAP:COAP-2110/doctemplate|template]] | ||
== Homework 5 == | |||
* It is due on Monday week 6 | |||
* See the [[COAP:COAP-2110/week5|Week 5]] program | |||
== Event listeners in AS3 compared to JavaScript == | |||
This is '''completely off-topic''' (do not read if you are not familiar with JavaScript) | |||
The event model and adding Event handlers follows the same logic in AS3 and in Modern JavaScript, based on DOM 3. Of course, JavaScript is not ActionScript since they refer to a completely different "domain", e.g. an HTML element is not the same as a movie clip. Read: | |||
* [https://developer.mozilla.org/en-US/docs/DOM/element.addEventListener element.addEventListener] (Mozilla manual) | |||
* [http://www.howtocreate.co.uk/tutorials/javascript/domevents DOM events] (How to create, JavaScript tutorials) | |||
* [http://www.quirksmode.org/dom/events/index.html Event compatibility tables] (Quirksmode) | |||
Latest revision as of 14:17, 6 February 2013
Week 4 - Monday COAP 2110
Theme: Basic interactivity
- Introduction to buttons and some ActionScript
- Topics: Button frame-by-frame animation, customizing buttons, creating your own buttons, creating buttons from bitmaps, etc.
- Previews: Simple slide show, Rocket launcher, Menus with buttons, Image maps with pictures, Buttons with animation
- Handout: Flash button tutorial
- Rocket example: flash-cs6-rocket-launcher-as3.fla
Wednesday
- Using component buttons (easier than "Flash" buttons)
- Creating slide shows (timeline navigation) with buttons
- Previews: Menus with buttons, Slide show with component button menu
- Simple menu-based fla code: flash-cs3-simple-slide-show-menu-fewcode.fla
- Handout: Flash component button tutorial
Homework 4
For those who already turned in 3 homework and wish to have a break: I suggest skipping this one. I will not test button creation in the final. Do homework 5 which is more important.
- Assignment
- Create a really complex button and that includes well done graphics and/or animations.
- In addition, create one minor variant of the same button. To do so: duplicate then rename the button you created first (right-click in the library).
- Try to produce nice graphics. I will grade the artwork a bit tougher than for homework 2 !
- Reuse of prior homework
- If you wish you can use your previous homework (in any way you like), e.g. include each animation as swf file in a different frame. But this is by no means an obligation nor does it have an influence on grading.
- Submission date and format
- To be returned by Monday, at start of week 6 lesson
- Use the following Flash file name project4-familyname-firstname.fla, e.g.
- project4-miller-joe.fla
- ... I must be able to distinguish these files and we want to avoid overwriting.
- 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).
- 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.
- 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)
- Evaluation criteria
Same as before (including late submission policy). You can examine the grading rubric in the world classroom.
- The document description
Your p4-xxx-xxx.fla file must include a document description.
- Enter a title and description
- See the template
Homework 5
- It is due on Monday week 6
- See the Week 5 program
Event listeners in AS3 compared to JavaScript
This is completely off-topic (do not read if you are not familiar with JavaScript)
The event model and adding Event handlers follows the same logic in AS3 and in Modern JavaScript, based on DOM 3. Of course, JavaScript is not ActionScript since they refer to a completely different "domain", e.g. an HTML element is not the same as a movie clip. Read:
- element.addEventListener (Mozilla manual)
- DOM events (How to create, JavaScript tutorials)
- Event compatibility tables (Quirksmode)