Special Technology

Introduction Working with the tools Drawing Animating Action scripting which makes the movies interactive Working with video and Sound

Macromedia Flash movies are graphics, text, animation,

and applications for websites. They consist primarily of vector graphics, but they can also contain imported videos, bitmap graphics, and sounds.

Flash Movies can incorporate interactivity to permit input from

viewers, and you can create nonlinear movies that can interact with other web applications

Animate texts and graphics, including changing their color and visibility.

Create your own graphics or import graphics from another program, such as Free hand or fireworks

Design Web buttons, still animated, that link users to other pages of sites or perform other programmed actions

Add Sound and video to your website

Add interactivity to your site by enabling viewers to choose where to go and what to see or hear. You can also create forms to fill out and customize a site for each viewer.
Create a user interface, including scroll bars check boxes, list boxes, and forms.

The secret of animation in the flash, as in the movies, is that nothing really moves.

File types (Extension file)

Fla (flash)
source file, source document, root file, file to open

Swf
generate by fla, optimized version of fla, you can put up on the internet for everybody to see, embedded inside the HTML page

Html
swf files is place inside of an HTML page, acts as a container to hold a swf files, can control different aspect of swf files, it can control the placement swf file on the page

Exe
program application, stand-alone program, for Windows

Projector

for the Macintosh, not stand-alone program,

Different types of graphics

Bitmap graphics
Adobe Photoshop and macromedia fireworks can create bitmaps graphics. Comprise of small dots of color all align to each other, these dots are called pixels Advantage of bitmap graphics is you have ultimate control of every pixel in image Can apply nice effects and filters to that image
The file size tense to be quite large

Bitmaps Graphics
101010101000010101010101010101010

Computers store bitmap images, such as digital photos, using a code that indicates the state of each individual dot, or pixel, displayed on the screen. Bitmap graphics range from simple black-andwhite images to full-color photographic-quality images. The simples bitmap image is a MONOCHROME GRAPHIC.

Monochrome Graphics
It contains only the colors white an black. If the section of photo in a cell is black, the computer represents it with a 0 bit. If the cell is white, it represents 1 bit.

Different types of graphics

Vector graphics
Macromedia flash ,Adobe illustrator and Macromedia fireworks Comprise with mathematical points or vector points Less file size Easy to download from the internet Can increase or decrease the size of graphics with no lost in quality

Vector Graphics
101010101000010101010101010101010

It consists of set of instructions that recreates a picture. When you create a vector graphic, you draw lines and shapes in various colors. The computer then translate these lines and shapes into a set of instructions that can recreate your graphic It stores the instructions instead of actual picture. It requires much less storage space than a bitmap image. The vector graphic shown requires only 4,894 bytes of storage Filename extension - .wmf, .dxf, .mgx, .eps, and .cgm.

Vector and Bitmap graphics

Macromedia flash Interface

Title Bar Displays the name of the open file Menu Bar Displays Flash Menus and list commands when clicked Timeline Contains all the frames, layers, and scenes that make up a movie Drawing Toolbar Contains the basic tools you need to create vector graphics Panels Allow quick access to options for controlling and editing Flash movies

Work Area The area surrounding the Stage area. Anything placed on the work area does not appear in the movie

Stage or Movie Area Displays a movie or graphic in the Flash editor when open

Tools the tools panel includes all the tools that you need to create and edit graphics

Tools Select, draw and edit graphic objects and texts View Pan and Zoom Colors Specify the color of lines and fills Options Specify options for the buttons in the tools section

Tools
Arrow Free Transform Line Oval Pencil

Shortcut
V Q N O Y

Tools
Sub selection

Shortcut
A

Fill Transform F Lasso Rectangle Brush L R B

Ink bottle Eyedropper

Hand

S I
H

Paint Bucket Eraser

Zoom

K E
M,Z

Tabs

Menu bar

Timeline panel

Tool box

Graphics editing tools

View tool

Color tool

Stage

Tool option

Work area

Panels

Different Panels

Frames
Eye icon Lock icon Vector icon blank key frame (white circle) frame

Drawing and color Tools

Drawing with the pencil Modifying lines Oval and rectangle tool

Drawing with the pencil

Click on the pencil icon Choose stroke or a file Same as Pencil panel (Property Inspector) Interconnected with the pencil tool Option section :
straighten (can draw a straight line) smooth (smooth line) ink (WYSIWYG)

Modifying lines
Select the arrow tool Click on the object Stroke style Change and modify stroke
Ink bottle tool icon You can change the stroke, color etc
Drawing with the pen Click on the pen tool Click on the first dot called the vector point

Click and drag the second dot

Oval and rectangle tool

Oval
Click and hold the rectangle tool to see the PolyStar tool Hold down the shift key to make a perfect circle

Rectangle (same as oval)

If you press the down arrow or up arrow, you can specify the corner radius

PolyStar
Click on the option (below stage area)

Select star and number of sides

Exercise 1

1. Draw a circle in the stage 2. Make sure to group your drawing, if you continue with your animation without grouping it, you will get this message. To group, select the whole object and then Choose the Modify Menu and the Group or CTRL + G 3. In the Timeline, insert a new keyframe in the frame you would like your animation to end by right clicking on the frame and select the insert keyframe. 4. Click on frame 1 because this is where the first instance of the object is located 5. To make the ball rotate as it moves, click on the rotate pulldown list and select CW. 6. Click on frame 25 7. To test the movie while editing it, press Enter.

1. Select the object that it will be animated. In the timeline effects you have number of effects to choose from 2. Setup the effect by filling out the values and options. 3. You will notice that the timeframe was updated, and the values of the properties inspectors has changed also. 4. Run the movie

1. Create the first key frame 2. You can also animate graphics which you have imported in the Flash. 3. Click and select the frames between the First and Ending Frame. 4. In the Properties Inspector, choose Motion in the tween drop down list and click on the Snap checkbox to snap the object to the Motion Guide that you will prepare. 5. Right click on the layer you would like to implement a Motion Guide and click on Add Motion Guide. 6. Draw the path and where you wish the graphics would follow. You can use the pen or pencil tool or draw the path. 7. Click on the first keyframe of the animation layer; drag it to the beginning of the path. 8. Next, click on the last frame of the animation; drag it to the end of the path. 9. Press Ctrl + Enter.

1. Draw the object on your first keyframe 2. Insert a keyframe at the end of the animatiion 3. You can modify the object in the last keyframe or draw a new object on it. 4. Select the frames in between the first and end frame of the animation and select shape tween in the pull-down list. 5. To try the animation, you can press enter key or Ctrl + Enter to test the animation.

1. In this example, we will create a simple mask layer over a text. Type in a text in the Layer 1. 2. While selecting Frame 1, insert a keyframe to the desired ending of point of your animation. 3. Insert a new layer, and draw a shape on this layer. 4. Insert another keyframe on the ending point of the animation. Animate the mask layer like you did with tween animation. 5. Right click on the top layer and select the Mask