In class Mon Feb 1st

Project 3 is Due by the end of class today!

* you need to have links to the following blogs on your flash piece. you can get the URL's at

http://www.hartwickdigital.com

ART116

ART213

ART216

ART316

ART317

ART250

Project 4 Assigned

First Up , Show n' Tell (yes for real)

More Action Script

Controlling a Symbol (Movie Clip = MC)

* first you need to give your MC an 'instance name' or you can control a SWF you call up with loadMovieNum by its 'level'

* the top left corner of the stage is at x=0, y=o

* x measures the right to left position of the MC

* y measures the top to bottom position of the MC

new script

_x = controls the position of the X coordinate of the MC on the stage

_y = controls the position of the Y coordinate of the MC on the stage

ex.

_level99._x = 50;

_level99._y = -24;

_xscale = size of the X axis in comparison to the original MC

_yscale = size of the Y axis in comparison to the original MC

ex.

fighterA._xscale = 60;

fighterA._yscale = 60;

_alpha = changes the opacity of the MC

ex.

balloon._alpha = 30;

Lets look at some Examples:

- The Ameba

- Font Wars

In Class Thur Jan 28th

Show n Tell

Font Wars

work on project 3

In Class Tue Jan 26th

Show and Tell

Show me what you found!

Structures of Experience

Other Structures

* Create a flowchart for your site for Proj 3 by Thur

Check out the FLA for the above site.

Using Action script

Script so Far

Stop();

gotoAndPlay( frame # );

gotoAndStop( frame # );

getURL("URL", window);

loadMovieNum("URL", level);

unloadMovieNum(level);

on (Release) { do something }

var

if ( something == something) { do something }

StopAllSound();

New Script

random(number);

Math.random(number);

ex.

c = random(100) * 100 - 5;

trace("text" + variable);

ex.

trace("variable c = " + c);

* Remember Actionscript goes on Buttons and Key Frames ONLY!

A vs C

Work on Project

In class Mon Jan 25th

Show and Tell

This weeks Flash examples are going to be presented by you!

Pathways of Experience through Interactive Structures

also known as Interface Design

* How you create the structure of the site influences the context of the experience for the end user ( the colaborator)

Structures of Experience

Other Structures

Check out the FLA for the above site.

Using Action script

Script so Far

Stop();

gotoAndPlay( frame # );

gotoAndStop( frame # );

getURL("URL", window);

loadMovieNum("URL", level);

unloadMovieNum(level);

on (Release) { do something }

var

if ( something == something) { do something }

StopAllSound();

New Script

random(number);

Math.random(number);

ex.

c = random(100) * 100 - 5;

trace("text" + variable);

ex.

trace("variable c = " + c);

* Remember Actionscript goes on Buttons and Key Frames ONLY!

A vs C

Work on Project

In Class Fri Jan 22th

Flash Examples

Joshua Davis

Zefrank

Spikything

Flashface

intenionallies

speakerson

Review Project 1 and Project 2

Project 1 Flash Site

Quick Image Viewer

* Variables

example..

var a = 1; (declares the variable and sets it to 1)

a = a + 1;

a = a - ( b + 10);

name = "Bob";

hit = "Hit";

* ' If ' statement

example..

if ( a >= 20) { gotoAndPlay(2); }

if ( name == "Bob") { loadMovieNum("bob.swf", 40); }

In Class Thur Jan 21st

image by Olav Rokne

yes it is awesome click here to se more.

Importing

- Video

- Audio - MP3's work best

Nesting Symbols

Masks

Transitions

Building a multi-level website with SWF's

- where you put it, is where it shows up!

- need help lining things up, try a screen shot (shift+apple+4)

Work on Project 1 & 2

Project 1 & 2 Due @ 3:00 pm today (thursday). Hand in your images and animations on your USB thumbdrive.

.

In Class Tue Jan19th

Review

FPS = Frames Per Second

120 frames at 12 FPS = 10 seconds of animation

Import

You can import JPGs, GIFs and PNG24's into flash

You want the images your bringing into Flash to be as close to the size they need to be as possible

Resolution of all screens is 72 dpi

Review 4 Animation styles in Flash

- Frame by Frame - anything goes

- Shape Tween - requires a shape

- Motion Tween - requires a symbol

- Motion Path - requires a symbol

* you can turn any 'Shape' into a 'Symbol' by selecting the Shape and clicking 'Convert to Symbol'

* Symbols can be either Movie Clips or Buttons

* Symbols are stored in the 'Library' (found under 'Window')

Buttons

- React to the movement of the cursor

- Contain: UP, OVER, DOWN and HIT frames

- May contain Actionscript

Actionscript

- Stop();

- gotoAndPlay('frame #');

- gotoAndStop('frame #');

- on (release) { 'what ever you want to do' }

NEW ACTIONSCRIPT

- getURL("url", window);

- loadMovieNum("url", level);

- unloadMovieNum(level);

In Class Mon Jan18th

Examples

Story of Stuff

Home on the Range

Project 1 & 2 Due Thursday Jan 21st

Motion Path, the 4th Animation Style

1) Create a Symbol on a layer

2) Click the 'Add Motion Guide' button

3) Select a frame on the Guide layer that matches the fame of your Symbol and create a Key frame

4) Using the Pencil tool draw the path you want the symbol to follow on the Guide layer

5) Attach the Symbol to the beginning of the line

6) Select a Frame as an end point on the Symbol's layer and create a key frame

7) Insert a Frame on the Guide Layer that matches the last frame on the Symbol layer

8) Attach the Symbol to the end of the path

9) Insert a Motion Tween on the Symbol's layer

Good Luck!

Buttons Symbols

- Up - How the button looks Normally

- Over - How the button looks when the cursor is over top of it

- Down - How the button looks when the button is pressed while over top of it.

- Hit - The area sensitive to cursor.

Basic Actionscript

- Timeline Actions

--- look under 'Global Functions' --> 'Time Line Control'

- Button Actions

--- look under 'Global Functions' --> 'Movie Clip Control'

Both can use 'Global Functions' --> 'Browser/Network'

Controlling the Timeline

On the Timeline

- Stop();

- gotoAndPlay("frame #");

- gotoAndStop("frame #");

ie.... gotoAndStop(134);

On Buttons

- on (release) {"what you want to do"};

ie... on (release) {    gotoAndPlay(1);     }

In Class Fri Jan 15th

Flash Animation Examples

.

.

.

.

30 second Bunnies

.

VS Birds Animation

.



Flash Basics Day 3

Color Mixer

Creating a 'Symbol'
- Graphic
- Movie Clip
- Button

Flash Animation

1) Frame by Frame - shape or symbol
2) Shape Tween - shape only
3) Motion Tween - symbol only
4) Motion Path - symbol only



Project 2



Work on Project

In Class Thur Jan 14th

.

.

Flash Examples

.

Jackson Pollack

99 rooms

the GTI project

Flash Earth

Youtube

Mauricio Guimara Portfolio

Magnivate Interactive Boutique

Monoface

Moodstream

Basics of Flash Day 2

the Lasso Tool

- fluid selection tool

the Text Tool

- Manipulating text

Modify --> Group & Ungroup

- grouping and ungrouping of shapes

Modify --> Break Apart

Modify --> Arrange

- the ability to change the position of a group relative to another group in a layer

File --> Import

- Images

- Audio

- Video

Tracing an image

Modify --> Bitmap --> Trace bitmap

Window --> Library

- this is where all your images, audio, video and symbols are kept for a project.

File --> Export

- movie - MOV

- image - JPG

File --> Save As

- creates a FLA

File --> Publish

- creates a web ready SWF (and HTML)

In Class Tue Jan 12th

Flash Examples

Photoshop Basics

- New, Open, Save, Save As, Save For Web

Digital Image File Formats acceptable by Flash.

.JPG - Photorealistic, Small File Size

.GIF - Limited to 256 colors, can contain Transparency

.PNG - Photorealistic (kinda) and can contain Transparency

- Image --> Image Size, Canvas Size, Image Rotation

- Image --> Adjustments

- Tools

Filters (mostly) Suck! Be weary of using them

Basics of Flash

* Strokes and Fills (based on Points)

- Stage

- Timeline

- Options

- Menu Bar

-- File --> Open, Save, Save As

-- View --> Rulers, Grids, Guide, Snapping

-- Modify --> Document (size matters)

-- Window -->

- Tools

-- Selection Tool

-- Line Tool

-- Lasso Tool

-- Pen Tool

-- Oval Tool

-- Rectangle Tool

-- Pencil Tool

-- Brush Tool

-- Ink Bottle

-- Paint Bucket

-- Eye Dropper

-- Eraser

-- Hand Tool

-- Zoom Tool

-- Fill and Stroke Colors

Project 1 Assigned

Drawing!

Just Do It and see what Happens

Work on Project

First Day

Welcome to Digital Art & Design III, Interactive Media.

For the next 4 weeks this class will consider, research and create Interactive Media through the use of Macromedia Flash MX.

You are looking at the class blog! This blog is the virtual focal point of the class. Most all information about the class can be found here including the syllabus, project details, reference materials and daily updates on what will be covered in class. You have to check this website ON A DAILY BASIS if you wish to pass this class.

We will loosely be following the schedule below:

Week 1 - Mac Basics, Digital Image Basics, Photoshop Basics, Basics of Flash; Drawing, Animation, Image Manipulation, Import/Export

Week 2 - Web sites in Flash; Symbols, Transitions, Buttons, Basic Action Script

Week 3 - You Don't Want to Know!

Week 4 - Final Flash Projects

YOU NEED A USB THUMBDRIVE!!!!!!!!

Today in class

- Examples of Flash in Action

- Lab Fee $100

- Intro to the Mac

-- Questions?

-- Whats Where?

-- Files & Folders

--- Folder Views

--- Making a New Folder

-- Drag & Drop

-- 'Trash' and 'Emptying the Trash'

--- Ejecting USB thumb drives and CD/DVD's

Digital Imaging Basics

- DPI = dots per inch

-- 'Dots' are 'Pixels' also measured as PPI (pixels per inch)

- Screen Resolution is 72 Dpi. You can literally hold up a magnifying glass and a ruler and count 72 dots with in an inch.

- Your projects will be created in Pixels

Screen sizes

old school:

smallest - 800 x 600

medium - 1024 x 768

large - 1280 x 1024

new school (wide screen):

small - 800 x 400, aspect ratio 10:6

medium - 1280 x 800/1200x768, aspect ratio 16:10/16:9.5

large - 1680 x 1050, aspect ratio 16/10

larger - 1900 x 1200, aspect ratio 16:9.5

pixel dimensions of popular electronic equipment
- Classic TV = 320x240
- DVD = 720 x 480 (720 x 534)
- HDTV1080i = 1920 x 1080
- HDTV720i = 1280 x 720
- Youtube Traditional = 320 x 240

- Youtube Current = (most any wide screen size)
- PSP = 480 x 272
- iPod = 320 x 240

.