PART 1 | ANIMATING IN FLASH

HISTORY OF FLASH>Flash is the standard file format for delivering interactive visually rich content and animation on the web. File formats?

>Raster | bitmaps (ever color & every pixel) |large file size = large download time. most of web static images are raster.bmp, .gif, .jpg

>Vector | cmyk | Mathematical small and fast....Web download is everything. Anytime you can build something in Flash…do it!

>Flash is the main tool for delivering vector graphics and vector-based animations on the web

>supports subsets of html and css (traditional technologies of web design) The culmination gives you much finer control of quality of image and text.

>Also improved on the programming language called ACTIONSCRIPT (Now using 3.0)

>ACTIONSCRIPT - a programming language that flash uses to add flexibility and complexity to your movie and then this scripting is able to pass it back and forth from the server to the site with greater ease. FLASH CS3)

>If working on flash CS4 and going to flashCS3, YOU MUST SAVE DOWN. (SAVE AS > FLASH CS3)

Stage- 1. Where all the action takes place

Properties Panel 1. Best friend, will always change depending on tool selection2. Click on workspace to access default version of properties panel

Panels1. Window> Panels2. Default Setting3. Minimize Panels, Floating Panels, Draggable Handle, 4. Save Panel Layout5. Workspace accessible below timeline

ToolBar1. Divided into 4 sections

a. Selectionb. Mark Makingc. Modifyd. Move Stage

2. Notice options always change in ‘options’ below tool bar

3. Be aware of property panel | it is tool dependent4. When you see a triangle in tool>signifies there is a flyout

EX. SELECT TOOL | Draw a circle | move circle (stroke is effected) try grouping >MODIFY>GROUP | otherwise double click to see pin dots

a. Now use select tool to draw a invisible rectangle around object. b. easy to miss all! c. object drawing is similar to illustrator>groups everything as you

draw. Access by selecting on toolbar

EX. DRAW RECTANGLE

5. Color control panel | eyedropper tool | hex colors | gradients (must select in color panel (stroke/fill) | color's transparency

a. gradient transform tool | Color Panelb. Swatch panel | create a new swatch (click paint bucket icon in

blank part of panel| swatch panel options

6. Line tool | Custom line preferences | Play with manipulating edges | INK BOTTLE=customizing strokes | properties panel | merging options

7. Stroke hinting = the crispest lines possible

8. Rectangle tool | Polygon tool | options | Primitive

9. ERASER | options 5 modes | Faucet (quick erase)

10.Pen Tool | dragging = bezzier | clicking = straight lines | click first point to complete circle

11.Pencil | Preference box and options (straighten, smooth and ink)

12.Paint brush | Four Mode Options | Normal, Fills Behind, Selection, Paint Inside

13.Free transform tool | Press function while drag will show you ghostly outline of older image.

a. Four options down in tool bar. Envelope allows to transform.

14. Pen Tool | dragging = bezzier | clicking = straight lines | click first point to complete circle

a. Direct Select Tool | get closer when go over point turns into white triangle..then select bezzier curves

Working with Text

15. Text Tool | WORd WRAP | Properties panel> must say static text (for now) | point size | tracking | font \ URL designation | anti-alias for read.

16. vertical vs. horizontal text

17. Preferences | TOOLS>Check Spelling | MODIFY >break apart (same as create outlines in illustrator)

Modifying Simple Graphics

18. Transform tool on toolbox | look through options below |

19. Transform panel | window>transform

20. Transform Visually > look for grabber

23. Modify Transform > flipping, rotating and Skewing

24. Distort graphics symmetrically | can do this through properties panel

Timeline

25. Timeline | Frame =grey Numbered Segments | 26. Layers ---Purpose | Label | Move Around | Insert | Trash | Folder27. Key frame | A fixed point in time represented by visual content

a. Nothing will change unless you add another keyframe F6

PART II

REVIEW OF TIMELINE1. add layer, delete layer, folders, change the layer name, hide layers,

lock layers, outline of layers, drag to change order of layers2. a layer is activated when it is selected and highlighted = will always go

on this layer3. You can copy and paste objects on different layers all onto one

layer>just hold down the shift key4. Underneath timeline| you may view …current frame, frame rate,

elapsed time.5. Frame view | can be adjusted in upper right corner on timeline. If you

want a closer look at timeline/keyframes6. Key frame- represents an event occurring on timeline. A CHANGE!7. Blank key frame – empty locations on the timeline that are ready to

have content placed in them.8. Playhead- red rectangle with a long red line-indicates current frame

you are viewing.

FRAME BY FRAME ANIMATION- a tradional way to animate- each time a key frame exists, it’s time for new content- you can either modify current content or create new content in

the new key frame

- you can drag key frames out to make time lapse longer

WHAT DO SHAPE TWEENS DO?1. tween shapes of objects2. tween the color3. tween a position of a object.4. tween the transformation

ONION SKINNING (in-class exercise)Play with the free transform tool (works similar to photoshop, illustrator, etc.)Modify onion markers

1. will lock the onion skinning span where it is until you unlock it again or manually drag the start or end onion skin markers.

TIME LINE TIPS1. click to the right of the layer name to select all frames on the layer2. you can click and drag certain key frames to move.3. to duplicate key frames click, drag, and hold down option key. Same

thing as adding new keyframe4. To reverse: Modify>Timeline>Frames>Reverse (won’t see anything in

timeline, but will notice during playback.

EXERCISE 1: SQUARE INTO A CIRCLE1. draw a black circle2. Insert new key frame on frame 15 (should have 15 frames of

just a circle)3. In frame 15 draw a large black square OVER THE CIRCLE4. click timeline anywhere in between two keyframes. 5. open properties panel and select shape from the TWEEN

drop-down menu.6. deselect timeline and you’ll notice it is a pale green color

where shape tween exists.7. if you click the onion skin outlines button (just below

timeline) you will see a render of the animation.8. control>test movie or apple enter = .swf9. TO MAKE A SMOOTHER TRANSITION10.select frame 1 > copy frame (apple c or control copy)11.click on frame 30 > insert blank key frame (hold down mouse

for options) MUST BE BLANK = empty white circle12.Use edit>paste in place (shift + copy + v) to insert original

circle into frame.13.click in timeline between frames 15-30 and choose SHAPE

TWEEN from properties menu.14.SHOULD BE SMOOTHER. 15.click on frame 15 and drag square a little way off to the side

so you can see transition.

EXERCISE 2: IRREGULAR SHAPES

1. new document | change fps from 12 to 30 (properties panel)2. select oval tool (black fill red stroke)3. set stroke to 4 (properties panel)4. use the oval tool to draw a big circle5. insert a key frame on frame 206. with the circle selected, click frere transform tool and choose

envelope modifier.7. Drag the points around the shape and change the overall

shape of the circle.8. Click any frame in between and select SHAPE TWEEN.9. Insert a keyframe at 40 > Use the distort modifier on the

shape on frame 40 to create new version of shape.10.Select keyframe between 20 –39 and select SHAPE TWEEN

from properties.11.Select all frames (edit>timeline>copy frames OR click to

right of layer name and apple c)12.insert a BLANK keyframe on frame 4113.PASTE the frames in using (EDIT > TIMELINE > COPY

FRAMES)14.Select all frames from 41-80 & select

MODIFY>TIMELINE>REVERSE FRAMES15.TEST MOVIE

SHAPE TO TEXT TWEEN1. New Document 2. Text tool type IN BIG BLOCK LETTERS “this is my first”3. Frame 30>insert new keyframe4. with frame 30 selected highlight the text with text tool delete

it and then type “text tween”5. move it to the right hand of stage6. Use the selection tool to select text field that you just created

a. MODIFY>BREAK APART menu option to break text into separate letters.

7. With all letters selected again MODIFY > BREAK APART (breaks them into graphics)

8. Now, Do same thing with text in frame 1 (remember to do it twice).

9. click between two frames to create a shape tween.

REVIEW MODIFY SHAPES1. double click to select entire object2. pin dots represent that shape is an object that can be modified.3. you can easily modify with the curve or corner pt. Just by moving your

cursor over shape4. hold down shift key to select more objects5. you can also drag with the selection tool to select

6. if already selected click to deselect7. you can easily delete and add anchor points with the pen tool8. When working with a few objects on the same layer and you don’t want

them to overlap Modify>group to self-contain | Modify >ungroup9. To edit a group: edit>edit selected10.Align palette> Window align

REVIEW HOW TO EDIT TEXT1. look on page 140 of text for more in depth coverage2. Modify> break apart (one time) = single letter text box3. Modify>break apart(two times) = raw shapes/you will see pin dots

REVIEW OF TIMELINE9. add layer, delete layer, folders, change the layer name, hide layers,

lock layers, outline of layers, drag to change order of layers10.a layer is activated when it is selected and highlighted = will always go

on this layer11.You can copy and paste objects on different layers all onto one

layer>just hold down the shift key12.Underneath timeline| you may view …current frame, frame rate,

elapsed time.13.Frame view | can be adjusted in upper right corner on timeline. If you

want a closer look at timeline/keyframes14.Key frame- represents an event occurring on timeline. A CHANGE!15.Blank key frame – empty locations on the timeline that are ready to

have content placed in them.16.Playhead- red rectangle with a long red line-indicates current frame

you are viewing.

SLIDESHOW IN FLASH1. Create 3 layers

i. Actionsii. Buttonsiii. Animation

2. Create a slideshow button that will exist on frame 1 of button layer3. Convert to a button and give instance name of next_btn4. Frame 1 > INSERT the following code on actions layer

stop();

next_btn.addEventListener(MouseEvent.CLICK, nextMovie);

function nextMovie(event){gotoAndPlay(2);

}

5. Frames 2-20 create animation > give shape or motion tween6. Repeat code for frame 20 of action layer

stop();

next_btn.addEventListener(MouseEvent.CLICK, pageTwo);

function pageTwo(event){gotoAndPlay(21);

}

7. Continue until slideshow is complete.

Timeline will look something like this:

VIDEO IN FLASH

1. Open new flash Document>import to stage2. Save file in the same folder as your working interactive folder 3. Progressive Download4. Select a skin or no skin5. Export as a swf.6. This automatically produces a .flv (flash video file) for your video7. Open up interactive site > insert new layer>label video8. In appropriate place in timeline>insert a blank keyframe9. Open up components panel>Pull out FLV playback onto stage10.In parameters panel>search for the source of the flv

INSERTING FLASH MEDIA1. File>Insert Media>.swf2. All options are down on properties panel> Can see image play from

properties.3. Have the option to make transparent opaque or window

TYPOGRAPYunits.HTML

1. Review Font families2. Units of measurement

a. Fixed-fixed size (does not change based on other elementsb. Relative-Change based on viewers preference.

3. Points-use only for print. Does not look good on screen. 4. Em- most common uses. Relative to nearest parent font size5. Ex- Equal to ex size of a particular font. Not consistent because all

typefaces look different.6. Percentage – Very similar to ems. Sizes text to percentage of default

value.7. Pixels – FIXES at this size - don’t scale well on mobile devices

1. CSS styles>Paragraph style>Double click2. Change Bottom line to 16 pixels>test movie3. Keep open browser window4. Change Bottom line to 1 em5. Tools>options>Content>16 pixels is usually default

FONT SIZINGFontsizing.html

1. Give as much control to user | Relative text allows for this2. Body tag can help certain types of rendering – Particularly with Internet

explorer.a. Which has a difficult time rendering ems whose parent tag is not

a percentage.3. Double click>Body tag4. CSS Properties panel>Add Property>Font Size>Hit Tab>100%5. Opera has trouble rendering 100%6. Change to 100.01%- cross browser compatability 7. HI>Font-Size > 1.4 em8. Put cursor in paragraph on html document>Create new CSS rule9. Self-populates because cursor was in rule10.CHOOSE THIS DOCMENT ONLY>OK11..85 em (85% of default font size)12.Now need to create same rule for H213.In CSS Styles panel>Select H1>Right Click>Duplicate14.H2>change to 1.2em15.Do the same thing for H3>change to 1 em

LEADING – LINE HEIGHT Lineheight.hml

1. Calculated to relative font size | Use relative type2. User adjusts texts size, but line height does not change based. Can be

problematic3. Show two different examples below:4. Each grid is 10px5. Body tag>change font size to 62.5%. 6. Browser is set to 16px>resets this to 10px

7. H1>Font size> 3 ems>Heading is approximately 30 pixels tall 8. Add property>line-height> (can always grab from pull down)>type in

1 em.9. Go to paragraph rule>Change font size to 1 em (text that is 10px tall)10.Line-height 140% _ 140% of text size.11.Need more space than print type (140%) is standard12.Save file>Highlight all line-heights and trashcan>let’s talk about

inheriting13.Go to Body style in CSS panel>add line-height property>2 ems (save

and preview in browser- Keep it up to compare)14.Now use something other than ems15.Change line-height to 2 >unit of measurement>multiple> 16.2 times the amount of value17.Em=calculated value passed down to other elements. Look at

heading>not good18.Multiple makes it equal through all elements19.When dealing with Inheritance paragraphs-better to use a multiple

VERTICAL MARGINS – OPEN Verticalmargins.html

1. effect typography and layout2. Vertical margins collapse3. Create new compound CSS rule4. H1, h2, h3, h4, h5, h6, p, blockquote, ul, ol, dl, address

5. Insert block properties (see image below)

6. New css rule>Compound selector, h1, h2>This document only>OK7. Box model>deselect same for all>Margin >top>1.2 ems, Bottom 0

(see image below)8. This allows to have more space above heading and less below. Clears

out paragraph rule

9. New Css Rule>Tag>p>Give block element attributes of (see image below)

10.Gives even spacing between each of our lines in the paragraph

9. New Css Rule>Tag>Block Quote>Uncheck margin same for all (see image below)10. Percentage controls horizontal inset of block quotes | Gives extra spacing around block quotes.

Vertical margins give you more control so typography looks and behaves how you want it to.

BACKGROUND IMAGES | index.html

1. Have a lot of power. Each Any element can have a background applied to it.

2. Dreamweaver has no swatch panels.

3. Most browsers do not print background images>No alt text can be given to a background.

4. Open up background.html5. CSS panel>Double click Body element>Browse to find

background>Click OK6. Now lets put in a background image for the header7. CSS Panel find the element (see image below) > Double Click

8. In Background>Image>Browse to find Header_skyline.jpg>OK9. CSS PANEL> Double click on this element (see image below)

10.For Background Browse to find> Skullicon_gif > DEFAULT IS TO TILE11.View>PageStyle>No Style12.Default is to tile13.X_repeat [horizontal]14.Y_repeat [vertical]15. Try tiling the skyline that exists in the header in the body

element. Replace exisiting background16. Experiment playing with using different values in your property

menua. top left, bottom right, top, 10px 30 px, etc.. Keep it at left center