Heather Shaw
Assistant Professor, Graphic Design
Curry College
hshaw0609@curry.edu
heathershawdesign.com
Sarah Smith
Instructional Technologist
ssmith0707@curry.edu
almyraonline.com/blog
enCode / deCode / reCode
Intro. to Interactive Media Workshop
Thursday, July 22 — Friday, July 23
Prepared for the Higher Education Press (HEP) Beijing, China
Part Three: reCODE
Participants reinterpret the folding book constructions to create a motion-based and/or interactive prototype. The books are analogue constructions for exploring concepts related to motion, behaviors, and user interaction. This portion of the workshop is also team-based—involving the development and design of a sketch prototype in two days.
01: Overview / Objectives
Participants will “recode” their book constructions to become dynamic prototypes. The books become paper prototypes for interactive thinking, such as motion, sound, behaviors, and user interaction This includes:
- Structuring and organization of complexity in content
- Literacy and proficiency across multiple types of media (static, temporal, haptic)
- Paper and interactive prototyping
02: Lecture Part Three: reCODE
Introductory lecture presenting student work that shows how the book constructions can be “recoded” into motion and/or interactive prototypes.
03: Tutorials
- Getting started
- Creating graphic symbols
- Creating a simple animation
- Animation properties
- Working with keyframes
- Creating movie clips
- Creating buttons
- Making buttons interactive
- Overview and vocabulary
- Building a basic website
- Scripting basic properties
- Fade
- Rotation
- Scale / Move
- Toggle Visibility
04: Glossary
Workspace Fundamentals
Actions panel |
contains all code for a Flash movie |
Graphic |
represents a graphic object in the library |
Library |
Holds all the symbols for the movie, such as Graphics, MovieClips, and Buttons. Similar to a “cast of characters.” |
Properties |
Contextual menu defining certain characteristics of the movie; for instance, the stage size + color, font sizes, transparency of graphics, etc. |
Stage |
The space where the animation takes place |
Toolbar |
This is where all the drawing and text tools live. |
Timeline |
Animation timeline. Keyframes define certain aspects of your animation. |
Movie Clip |
An object in the library that has it’s own timeline. |
Animation Fundamentals
Ease |
adds realistic “physics” to an animation by slowing or speeding it up at certain frames. |
Frame rate |
the number of frames per second (FPS) set for the movie. Standard films run at 30 fps, many web animations use 15 fps. |
Keyframe |
define the starting and ending points of motion. It also defines the timing of the movement. |
Instance |
each time a symbol is used in a movie. |
Scrub |
red marker on timeline, allows user to watch animation by moving it across the timeline. Called “scrubbing.” |
Symbol |
refers to a Graphic, MovieClip, or Button. |
Tween |
motion that happens “between” keyframes
X, Y Coordinates: X Y axis: numerical position of an object on the stage. |
Actionscript Fundamentals
Instance name |
An instance of an object on the timeline that has been given a name in the properties box. This allows actionscript to talk to specific objects on the timeline. |
Event |
a happening (such as a mouse click) |
Listener |
waits for the “event” to happen (such as a mouse click). |
Function |
a block of code that tells flash to do something based on the event. (for instance, play something, move somewhere on the timeline, etc.) for instance, the code stop(); is an example of a built-in function. |
05: Shortcuts
command + return: test movie
opt + F9: actions panel
fn + opt + F9: actions panel (for mac laptops)