INSERTING FLASH MEDIA



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 selection

2. Click on workspace to access default version of properties panel

Panels

1. Window> Panels

2. Default Setting

3. Minimize Panels, Floating Panels, Draggable Handle,

4. Save Panel Layout

5. Workspace accessible below timeline

ToolBar

1. Divided into 4 sections

a. Selection

b. Mark Making

c. Modify

d. Move Stage

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

3. Be aware of property panel | it is tool dependent

4. 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 Panel

b. 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 | Folder

27. 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 TIMELINE

1. add layer, delete layer, folders, change the layer name, hide layers, lock layers, outline of layers, drag to change order of layers

2. a layer is activated when it is selected and highlighted = will always go on this layer

3. You can copy and paste objects on different layers all onto one layer>just hold down the shift key

4. 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/keyframes

6. 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 objects

2. tween the color

3. 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 TIPS

1. click to the right of the layer name to select all frames on the layer

2. 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 keyframe

4. To reverse: Modify>Timeline>Frames>Reverse (won’t see anything in timeline, but will notice during playback.

EXERCISE 1: SQUARE INTO A CIRCLE

1. draw a black circle

2. 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 CIRCLE

4. 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 = .swf

9. TO MAKE A SMOOTHER TRANSITION

10. 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 circle

12. 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 circle

5. insert a key frame on frame 20

6. 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 41

13. PASTE the frames in using (EDIT > TIMELINE > COPY FRAMES)

14. Select all frames from 41-80 & select MODIFY>TIMELINE>REVERSE FRAMES

15. TEST MOVIE

SHAPE TO TEXT TWEEN

1. New Document

2. Text tool type IN BIG BLOCK LETTERS “this is my first”

3. Frame 30>insert new keyframe

4. 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 stage

6. 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 SHAPES

double click to select entire object

1. pin dots represent that shape is an object that can be modified.

2. you can easily modify with the curve or corner pt. Just by moving your cursor over shape

3. hold down shift key to select more objects

4. you can also drag with the selection tool to select

5. if already selected click to deselect

6. you can easily delete and add anchor points with the pen tool

7. When working with a few objects on the same layer and you don’t want them to overlap Modify>group to self-contain | Modify >ungroup

8. To edit a group: edit>edit selected

9. Align palette> Window align

REVIEW HOW TO EDIT TEXT

look on page 140 of text for more in depth coverage

1. Modify> break apart (one time) = single letter text box

2. Modify>break apart(two times) = raw shapes/you will see pin dots

REVIEW OF TIMELINE

9. add layer, delete layer, folders, change the layer name, hide layers, lock layers, outline of layers, drag to change order of layers

10. a layer is activated when it is selected and highlighted = will always go on this layer

11. You can copy and paste objects on different layers all onto one layer>just hold down the shift key

12. 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/keyframes

14. 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 FLASH

1. Create 3 layers

i. Actions

ii. Buttons

iii. Animation

2. Create a slideshow button that will exist on frame 1 of button layer

3. Convert to a button and give instance name of next_btn

4. 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 tween

6. 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:

[pic]

VIDEO IN FLASH

1. Open new flash Document>import to stage

2. Save file in the same folder as your working interactive folder

3. Progressive Download

4. Select a skin or no skin

5. Export as a swf.

6. This automatically produces a .flv (flash video file) for your video

7. Open up interactive site > insert new layer>label video

8. In appropriate place in timeline>insert a blank keyframe

9. Open up components panel>Pull out FLV playback onto stage

10. In parameters panel>search for the source of the flv

INSERTING FLASH MEDIA

1. File>Insert Media>.swf

2. All options are down on properties panel> Can see image play from properties.

3. Have the option to make transparent opaque or window

TYPOGRAPY

units.HTML

1. Review Font families

2. Units of measurement

a. Fixed-fixed size (does not change based on other elements

b. 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 size

5. 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 click

2. Change Bottom line to 16 pixels>test movie

3. Keep open browser window

4. Change Bottom line to 1 em

5. Tools>options>Content>16 pixels is usually default

FONT SIZING

Fontsizing.html

1. Give as much control to user | Relative text allows for this

2. 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 tag

4. 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 em

8. Put cursor in paragraph on html document>Create new CSS rule

9. Self-populates because cursor was in rule

10. CHOOSE THIS DOCMENT ONLY>OK

11. .85 em (85% of default font size)

12. Now need to create same rule for H2

13. In CSS Styles panel>Select H1>Right Click>Duplicate

14. H2>change to 1.2em

15. Do the same thing for H3>change to 1 em

LEADING – LINE HEIGHT

Lineheight.hml

1. Calculated to relative font size | Use relative type

2. User adjusts texts size, but line height does not change based. Can be problematic

3. Show two different examples below:

4. Each grid is 10px

5. 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 standard

12. Save file>Highlight all line-heights and trashcan>let’s talk about inheriting

13. 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 ems

15. Change line-height to 2 >unit of measurement>multiple>

16. 2 times the amount of value

17. Em=calculated value passed down to other elements. Look at heading>not good

18. Multiple makes it equal through all elements

19. When dealing with Inheritance paragraphs-better to use a multiple

[pic]

VERTICAL MARGINS –

OPEN Verticalmargins.html

1. effect typography and layout

2. Vertical margins collapse

3. Create new compound CSS rule

4. H1, h2, h3, h4, h5, h6, p, blockquote, ul, ol, dl, address

5. Insert block properties (see image below)

[pic]

[pic]

6. New css rule>Compound selector, h1, h2>This document only>OK

7. 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

[pic]

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

[pic]

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.

[pic]

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.html

5. CSS panel>Double click Body element>Browse to find background>Click OK

6. Now lets put in a background image for the header

7. CSS Panel find the element (see image below) > Double Click

[pic]

8. In Background>Image>Browse to find Header_skyline.jpg>OK

9. CSS PANEL> Double click on this element (see image below)

[pic]

10. For Background Browse to find> Skullicon_gif > DEFAULT IS TO TILE

11. View>PageStyle>No Style

12. Default is to tile

13. X_repeat [horizontal]

14. Y_repeat [vertical]

15. Try tiling the skyline that exists in the header in the body element. Replace exisiting background

16. Experiment playing with using different values in your property menu

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

................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download