Last day if class

SUMMAs

Publishing your final Flash projects
- you need to hand in the following files
1. Your FLA
2. A Mac based Projector file
3. Your project Published with a HTML file and SWF(s)
4. Hand in everything in a folder labeled with your name


FINAL REVIEW


Present your work in the Art schools Opening @ 1:30pm


Enjoy your break

In class Thursday Feb 4th

Work on your project!

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

.

Finished

We Are Done!

Congratulations! you can check out the finished pieces by clicking the Class Websites link on the right.

In Class Thur May 15th

Summa!

Work on your sites!

get it up online!

In Class Thur May 1st

Due today - all your content (imagery, sounds, video, text) should be collected and ready for Flash!

Work on your sites, ask questions.

In Class Tue Apr 29th

Lets take a look at your flow charts for your sites.

I want to see a folder with your content in it.

whats next:
* collect whatever else you need (this is an on going process)

* get your images ready for Flash
- you should size your images in Photoshop to the size you need in Flash
-- the PNG vs JPG vs Gif
- PNG - photoquality, small file size, transparency
- JPG - photoquality, smal file size
- GIF - transparency, 256 color limit (good for old school video game sprites)

* get your video ready
- size it for what you need in flash by using iMovie and exporting (sharing) the movie
- flash has a video import sequence , follow the steps

* get your audio ready
- iTunes can make you an mp3
- you can edit audio in iMovie

* get a basic template together for your site
- choose size & frame rate, make sure you use this size and FPS for all of your Flash documents
- remember to save as to back up and make copies!

In Class Thur Apr 24th

You Should have a basic idea for your site today.

lets look at making test flowcharts for your sites.
- consider how you are moving the collabrator thru the site.
- what order is image/info presented in? and why?
- what are the different possibilities?


Different forms of navigation.
culturerecycling
theyrule
sofake
popurls
musicovery
youtube

why do they navigate the way they do? what effect does it have on the collaborator's experience?

create 3 different possible flow charts for your site by Tue April 29th. you should also be collecting content (imagery, sounds, video, text) and should have at least 1/2 of what you need for the site

Deconstructing FLA's
- where to find them
--- web search, designers, web resources, me
- taking them apart
--- look for the actionscript, the little 'a' in the timeline and on symbols (buttons and movieclips)
--- things will be buried with-in symbols
--- look at symbol 'instance names'
* all symbols can have instance names that can then be called up by actionscript
--- try to figure out what the variables are
--- sometimes the programmer/designer will leave 'notes' to help you know what is going on in the script.
--- try changing something (don't forget to save a copy first)
--- discard what you do not need

In Class Tue Apr 22nd

Actionscript Review

Frame Actions:

var = ?
ex. var A1 = 10;

Button Actions:

on (release) {
}
ex. on (release) { gotoAndPlay(800);}

Button or Frame Actions:

stop();
ex. stop();

if (comparison) { statement }
ex. if(x == 10) {loadMovieNum("http://www.josephvonstengel.com", 60); }

loadMovieNum("url", level);
ex. loadMovieNum("http://www.josephvonstengel.com", 100);

unloadMovieNum(level);
ex. unloadMovieNum(70);

getURL("url", blank or self);
ex. getURL("http://www.culturerecycling.com", self);

gotoAndPlay(frame#);
ex. gotoAndPlay(69);

random(#);
ex. a = random(9)+1;
ex. x = random(50) - random(y);
ex. z = random(x)-y+10;



Lets look at examples:
theyrule
joes examples


How to backwards engineer an FLA