Interactive Multimedia - Beta

Week 1

Orientation

Orienatation Slides (.pdf)
Activity 1.1: Email The Instructor
Send your instructor an email with the following
Name
Where are you from
Flash and or ActionScrip Experience
Expectations / What do you expect to learn?
Special Interests

Send email to sager.joshua@pti.edu Make sure to set the SUBJECT LINE for ALL SUBMISSIONS to start with INTMM: For example INTMM: Email Activity

This Activity is worth 5 points.

Class Policies

  • Syllabus & Competency Profile
  • Late work Policy
  • Attendance
  • Most of your work will be submitted via the web server

Software Basics

Orientation to Flash Inteface (.pdf)

Please review these screencasts for an introduction to the Flash Interface and basic drawing capabilities.

Flash Interface Tour (.flv) Drawing Shapes (.flv)
1.2 - Basic Drawing

Download the basic drawing starting file.

Complete each task and submit.

To submit, email the .fla as an attachment. DON'T WORRY about the .html or the .swf files. This activity is worth 25 points.

Week 2

Final Project

Timeline

Introduction to the timeline
Tools and keyframes
2.1 - Timeline Worksheet
Download the Timeline Worksheet (.doc)

Turn in a copy to your instructor. This worksheet is worth 15 points.

Frame by Frame Animation

Frame By Frame Animation (.pdf)
2.2 - Frame by Frame Animation

Student Examples

Create a 150 frame animation using basic drawing tools in flash using type and shape. It must be creative and tell a story.

Submit .fla, .swf, and .html to your web server. Email link to .html to your instructor. This activity is worth 10 points

Motion Tweens

Motion Tween (.pdf)
Create a symbol
Create a motion tween
Create keyframes via stage and timeline
Remove tweens
Modify tween path
Motion presets
Basic Tweens Screencast (.flv)
2.3 - Basic Motion Tween
Download motion tween starting file (.fla)

To submit, email the .fla as an attachment. This is worth 25 points.

Final Project - Concept

Choose a topic for your final project: a single concept that your interactive will teach to children. Don't tackle too much. Email me your concept

Retired Topics - These topics are off limits.
PB & J
Tie your shoes

Send the topic to me via an email for approval. This is worth 10 points.

Week 3

Principles of Animation

12 Principles of Animation
Principles in Practice (.swf)
Principles in Practice (.fla)

Animation Examples

2.4 - Animated Principles
  • Create an animation(s) demonstrating each of the following principles: Squash & Stretch, Anticipation, & Secondary Action least once.
  • Submit a written statement describing how you used each of the previously listed animation principles.
  • Email a link to the index.html AND attach a word document with the written requirments for this project.

To submit email the .fla and .doc as an attachment. This is worth 30 points.

Motion Editor

Supplimental Practice Easing File (.fla)
Introduction to motion editor
Assign Easing to animated track
Create custom easing
Motion Editor Screencast (.flv)
Activity 2.5 - Easing
Download in the Easing Activity Starting File (.fla).
Re-create each of the animations using motion tweens, principles of animation, and easing curves.

To submit upload the .swf, and .html to your web server. This is worth 30 points. Email a link to the .html file.

Famous Quote

Next week we will be working with type in our animations in the Famouse Quote project. To get started you will need to track down a quote between 8 - 20 words long.

Submit the famous quote via email for approval.

This is worth 10 points.

Week 4

Specialized Animation Topics & Techniques

Free Sound Resource

Free Audio and Sound Effects
3.1 - Famous Quote - First Draft

Student Examples

Create a 5 to 10 second kenteic type animation of an approved famous quote. The document should be 800 X 600 at 24 fps.

Prepare a document explaining elements of your animation

Font selection, color, shapes, and other illustrations are critical to capturing the essence of what the quote means or represents. The type must be legible and the animation should be paced so the quote can be read easily.

Rules

  1. No more than 3 words per text box
  2. Two words must be animated to describe what the word means.
  3. Submit a written statment as to HOW the animation relates to the meaning of the work
  4. Use Each of the following principles: Squash & Stretch, Anticipation, Follow Through, Overlapping Actions, Secondary Action, & Easing at least once.
  5. Submit a written statement describing how you used each of the previously listed animation principles
  6. Upload the .fla, .swf, .html files
  7. Email a link to the index.html AND attach a word document with the written requirments for this project

Famous Quote Rubric (.xls)

This in class activity is worth 15 points. We will do an in class critique of your work. The final draft is worth 100 points.

Final Project - Lesson Plan First Draft

Prepare a lesson plan outlining each of your three lessons and create one multiple choice quiz question. The question should have at least 4 options. One correct answer and three incorrect answers.

This is an example of what I would like to see:

My interactive will teach the user about basic subtraction.
Lesson 1 will explain how to subtract one single-digit number from another.
Lesson 2 will explain how to subtract one single-digit number from a larger number, resulting in a negative number.
Lesson 3 will explain how to subtract one double-digit number from another.
The final quiz will ask the student to choose the correct answer for "43 minus 21".

This Activity is worth 10 points. Submit your lesson plan via email to your instructor.

Week 5

3.2 - Famous Quote - FINAL

Download the animation explination document and fill it out

Implement any corrections, suggestions, and changes from the in class critique. A copy of the specs for the project are posted below.

Student Examples

Create a 5 to 10 second kenteic type animation of an approved famous quote. The document should be 800 X 600 at 24 fps.

Prepare a document explaining elements of your animation

Font selection, color, shapes, and other illustrations are critical to capturing the essence of what the quote means or represents. The type must be legible and the animation should be paced so the quote can be read easily.

Rules

  1. No more than 3 words per text box
  2. Two words must be animated to describe what the word means.
  3. Submit a written statment as to HOW the animation relates to the meaning of the work
  4. Use Each of the following principles: Squash & Stretch, Anticipation, Follow Through, Overlapping Actions, Secondary Action, & Easing at least once.
  5. Submit a written statement describing how you used each of the previously listed animation principles
  6. Upload the .fla, .swf, .html files
  7. Email a link to the index.html AND attach a word document with the written requirments for this project

Famous Quote Rubric (.xls)

This Activity is worth 100 points. Upload your .html and .swf to the course web server. Send a link to the .html file for submission.

Final Project - Lesson Plan - FINAL

Corrections are just a part of our process. Please make any corrections to your first draft and resubmit your lessons for final approval.

This Activity is worth 10 points. Submit your lesson plan via email to your instructor.

Week 6

Introduction to Basic ActionScript

	stop()

	var frame:int

	stage.addEventListener(MouseEvent.MOUSE_MOVE, onMove)

	function onMove(e:MouseEvent){
	//frame= mouseY/stage.stageHeight*100
	frame= mouseX/stage.stageWidth*100
	
	gotoAndStop(frame)
	}
Introduction to Actions Window
Writing Actions
Code
Basic Rules for writing Code
Basic Actions
stop()
play()
goToAndPlay()
goToAndStop()
nextFrame()
prevFrame()
Event Driven Actions
Button Events
Registering Event Listeners
Functions
Using Buttons
Button states
The importance of the hit state
	// Stop Button Example Code

	stop_btn.addEventListener(MouseEvent.CLICK, onStop)

	function onStop(e:MouseEvent){
	stop()
	}
4.1 - Button Control

Watch the bee example (.swf) demonstrate a basic knowledge in ActionScript and Animation.

  1. Create an animation on the main timeline that's at least 48 frames at 24 fps. Make the animation creative and appealing (you can do better than the example below!). You may do an animation that might get used in your final project. This is to demonstrate a basic knowledge in ActionScript and Animation.
  2. Coding ActionScript 3.0 by hand, set up buttons to let the user:
    1. stop the animation at any point
    2. resume playing the animation from wherever it stopped.
    3. step the animation backward one frame at a time.
    4. step the animation forward one frame at a time.
  3. You must have the actions control the Main Timeline's playback head.
  4. Show good interaction design: design your buttons to visually suggest their purpose (you can do better than the example below!).
  5. Give buttons rollovers and user-friendly hit states (notice the gap in the buttons below are still part of the Hit state)
  6. Have a code comment for each button.
  7. Submit your FLA (and SWF if you use any fonts) so I can see the code. If you do not submit the FLA, I can't grade it, and the assignment is not considered submitted.

To Submit upload the .swf and .fla files via email to your instructor. This activity is worth 30 points.

Week 7

Interactive Presentations and Techniques

Creating a Non Linear Presentation
Sections / Pages / Sub Pages
Techniques
Frame Labels
Setting up Transitions
Rules, Tips, and Tricks for Animating Transitions
Advanced Timeline Techniques
Creating nested Timelines
Controlling nested Timelines with ActionScript

Site Structure

Site Structure (.flv) Transitions (.flv)
6.1 - Site Structure
Create a Portfolio website - See Example (.swf)
Use ActionScript 3.0 and Frame Labels to put several pages on the Main Timeline.
Create at least 3 pages
Each page should have a transition

This activity involves you setting up a multiple-page site structure. It is the same technique you would use for your final project.

Keep these things in mind
The main focus is the functionality of the buttons, code, and timeline structure.
Your secondary focus should be quick but creative transitions for each page.
Interface should be functional and pleasant-looking, but do not spend time making the interface visuals impressive. However, you should arrange and align elements, and avoid loud colors.

To Submit upload the .swf and .html files to thw web server and email the web link to your instructor. This activity is worth 50 points.

Week 8

Interface Design

Typography for Web Design by Samantha Warren (.pdf)
Final Project: Interface Deisign

It's time to start production on your final project. We will start by designing our interfaces for the final project.

  1. Create a Comp of your interface. Make a comp for a lesson of your choice.
  2. The page is to be done in Photoshop, Illustrator, or In Design.
  3. Stage size is 960x 600.
  4. You will be evaluated on all good layout design principles: contrast, repetition, alignment, proximity, use of site title and page title, typography, etc.
  5. Set up universal navigation, with at least one button Over state, functional and appealing. You'll need buttons for Home, Lesson 1, Lesson 2, Lesson 3, Test, Credits (you may rephrase these).
  6. Bring a color print of your interface for next weeks Lecture.
  7. You will be presenting your interface design AND telling us HOW you will animate the lesson. You may use storyboards, sketches, or other visuals to describe how the lesson will be animated.

This activity is worth 25 points.

Week 9

Animated Lesson
  • Animate one of your lessons for the final project.
  • Use animation as a way to teach or demonstrate your lesson
  • We will have an in-class critique.

This activity is worth 25 points.

Week 10

Review for Exam

Exam Review Game (.html) Exam Review Document (.doc)
Recommended Study List
Alter the Stage size and frame rate
Draw shapes of all kinds; circles, squares, triangles, stars and polygons.
Create and style type
Create a site structure
Create buttons with rollovers
Create frame labels
Write code to make button clicks go to frame labels
Animate using tweens
Demonstrate squash and stretch, anticipation, follow through, overlapping action, easing, and secondary action
Demonstrate an animation nested in a movie clip
Publishing
Final Exam - Rules

Download this image. You will need it for the exam.

Rules and Procedures
You may use any notes, or homework as reference
No break til done
Get stuck? Move on try everything
Try for partial credit
Finish by EOC
When done, give back instructions, backup to U:, clear off D:, take break, return & work on final project.

Week 11

Final Project - Multipage Interactive

Create a multi-page interactive that would be delivered on the web, to teach a concept of your choice to children 12 and under. This is to demonstrate a basic knowledge in interaction, ActionScript and animation.

Rubric for Final project

Specs

  • Stage Size 960 x 600
  • Consistent visual style that would appeal to target audience (children)
  • Main page welcoming user and stating the goal of the interactive
  • 3 lessons (each one page or more) that each presents 4-8 sentences of text and an animation that helps illustrate what the text discusses. Text information is formatted in a consistent and interesting manner.
  • A Test page that presents one question and several clickable answers. Clicking an answer results in an animation with text feedback; a correct answer gives a more rewarding animation.
  • Animated transitions at "start" of each page, showing new content appearing.
  • Consistent, easy-to-learn navigation: same set of buttons every page.
  • Buttons need rollovers and sensible hit states
  • Sound: add appropriate, subtle button click sounds, and other sound as appropriate (not just your favorite song).
  • Credits page: mention yourself, and all sources where you obtained media (not just google).
  • Bug free: no errors
  • Deliver on CD-R or DVD-R with .html, .swf, and .fla on the disc. Don't foget project files, images, assets, and fonts.

Project Structure:

Every student will structure his/her project based on the flowchart below.

Wavy-bottom boxes represent pages. Capsule shapes are parts of the process, not pages. Diamonds represent decisions the user must make, not pages. Page count will therefore be at least 8 pages.

Flow Chart Example (.gif) (.vsd)

Resources

  • Final Project Interface Design (.jpg)
  • Final Project Sample (.fla) (.swf) [This is for review and deconstrution. Any attempt to copy any materials from this sample is considered cheating]