Group memebers names Vikas Bhatol Arun Shubham Patidar Umesh Patidar

Adobe Flash (formerly called "Macromedia Flash") Is a multimedia and software platform used for authoring of vector graphics, animation, games and rich Internet applications (RIAs) that can be viewed, played and executed in Adobe Flash Player. Flash is frequently used to add streamed video or audio players, advertisement and interactive multimedia content to web pages, although usage of Flash on websites is declining.

The Flash application consists of four main areas:

Stage Timeline Toolbox Panels Property Inspector

Timeline
In addition to having height and width, movies have an added dimension of time. This is what the Timeline represents. Understanding how the Timeline works is critical to designing in Flash. Some movies play from start to finish and stop, some loop endlessly, and some start and stop when the user clicks a button or link. All of these methods of playback are oriented to the Timeline. Before we begin, if you are using Flash 5, go to Edit > Preferences and select the General tab. For Timeline Options enable Flash 4 Frame Drawing. The screen shots throughout the course were made with this option enabled. You might find this option helpful in understanding the timeline display. Flash MX and MX 2004 use this same timeline drawing method by default, therefore you don't need to select this option for these versions of Flash.

Frames
A frame is a moment in time. If the frame rate is set to 12 fps, each frame represents 1/12 of a second. Likewise, a span of 12 frames will take one second to play. The length of a movie is determined by the number of frames of content created.

Keyframe marks
A keyframe marks an important moment in time; for example, when an image appears on the Stage or when an object begins or ends a transition. We're going to morph the rectangle into a different shape. We have a starting keyframe so the next step is to add a keyframe at the end of the transition.

Layers Layers are like transparent sheets of acetate stacked one on top of the other. A new Flash movie has a single layer by default. You add more layers to organize the content of your movie. Layers allow you to separate different objects, making it easier to edit them without disturbing the contents of other layers. Another reason to use layers is that a tweened object must be isolated on a separate layer or it won't tween.

Layers

Panels
You've already seen two panels during these lectures: the Property Inspector panel and the Scene panel. The panels in Flash help you to view, organize and change elements of a movie. Here are some examples of how they are used. To display the dimensions and location of an object To mix custom colors and gradients To apply transparency and tints to objects A list of all the available panels can be found in Window > Panels. You can move, show, hide, and resize panels. Once you hit upon an arrangement of panels you like, you can create a custom layout for Flash and save it so you can recall it at any time.

There are following types of panels listed in the menu bar: 1. Color mixer that allows you to create new colors and fill the color in different style.

2. Transform that allows you to rotate and skew an object numerically.

3. Movie Explorer shows the content of the movie.

4. Color Swatches have the 216 web safe colors.

5. Library stores symbols that include graphics, buttons and movie clips.

Toolbox
There are a number of diverse drawing tools at your disposal to assist you in creating graphics for your Flash movies. We'll learn how to use the tools and how to apply color to the objects you create. Exploring the Toolbox The Flash Toolbox provides tools for selecting, drawing, and navigating around the Stage. It is divided up into four sections.

Tools - For Drawing, Adding text, Applying color to fills and strokes, and for selecting and modifying objects.
View - tools for scrolling and zooming in and out of the Stage and Work Area. Colors - for applying colors to text and shapes. Options - modifiers that provide additional capabilities to the tools.

Arrow Tool The Arrow tool (shortcut V) is the primary selection tool in Flash and it also can be used to modify lines and shapes. There is another arrow-shaped tool that's white beside it in the Toolbox. This is the Sub select tool Oval Tool You've used the Oval tool (O) so many times now that there isn't much to add. If you hold down the Shift key while drawing with the Oval tool, the result will be a perfectly round circle. There are no modifiers for the Oval tool.

Rectangle Tool Use the Shift key when drawing with the Rectangle tool (R) to draw perfect squares.

Line Tool The Line tool (N) lets you draw perfectly straight lines. Click and drag with the tool to create a line of the desired length. If you hold the Shift key while dragging the Line tool, the line will snap to increments of 45-degree angles. This tool has no modifiers.

Pencil Tool The Pencil tool (Y) is used to draw freeform lines by dragging the cursor along the Stage. It can be set to draw straight lines and smooth curves. The stroke width, style, and color can be set using the Stroke panel. We'll cover that at the end of the lecture.

Pen Tool and Subselect Tool The pen and Subselect tools made their debut in Flash 5. The Pen tool is used to construct straight lines and curves in open or closed shapes by placing anchor points that connect together. The points can be manipulated with the Pen and Subselect tools to adjust the type of point and the angle of curves. You can also add, delete and reposition points. These tools can also be used to manipulate shapes drawn with other tools such as the Oval or Rectangle tool.

The Pen tool can be accessed by clicking on it or by using the keyboard shortcut P. It has no modifiers. The Subselect tool can be accessed by clicking on it or by using the keyboard shortcut A. It has no modifiers. Brush Tool The Brush tool (B) draws as if you're using a paint brush. No stroke is applied. The fill colour is determined by the colour displayed in the Fill Colour button in the Toolbox or in the Fill panel.

Eraser Tool
The Eraser (E) provides a number of ways to erase lines and fills from a layer. It has no effect on grouped objects, symbols, and text.

Paint Bucket Tool

The Paint Bucket (K) fills enclosed areas with colour. It fills empty areas as well as changes the colour of areas already filled. The Paint bucket has a Gap Size modifier that can overlook gaps so that you can fill areas that aren't completely closed. With the Transform Fill modifier, you can adjust the size, direction and centre point of gradients. The Paint Bucket tool allows you to select multiple fills and change them simultaneously.

Ink Bottle Tool The Ink Bottle tool (S) changes the stroke colour, line width and line style. It isn't necessary to select strokes before applying the Ink Bottle so it makes it easy to change a number of strokes in quick succession. To use the Ink Bottle tool:

Dropper Tool The Dropper Tool has a keyboard shortcut of I which probably reflects the fact that it's also referred to as the Eyedropper Tool. It is used to copy colour and style attributes of lines and fills so they can be applied to other objects.

Hand Tool Using the Hand tool allows you to shift your view of the Stage and Work area. Once the Hand tool is selected, click on the Stage (or Work Area), hold down the mouse button and drag in any direction.
Lasso Tool: Its function is complementary to the Arrow Tool, since it can select any object in a free way (the Arrow Tool can only select objects or rectangular or square zones). In counterpart, the Lasso Tool can't select fillings nor objects (if we dont make the selection by hand).

Text Tool: It creates a text in the place where we click. Its properties will be shown in the next theme.

Adjusting Objects: It is used to make objects to "fit" with others, i.e. if it is possible, to intersect its borders, then objects seem to be "grouped". Smoothening: It softens the straight segments in less rigid lines. Straightening: It does the inverse work. It converts the rounded segments in more straight ones.

Rectangle and other tools On the same spot of the tools panel you got several tools. By default you will see the rectangle tool. To select another tool: hold the left mouse button down for while and then select the one you want. Rectangle tool (by default): Draw simple rectangles. In the parameter's panel you can define strokes and filling properties. Rectangle primitive tool: Lets you define additional properties like rounded corners Oval tool: Draw ovals Oval primitive tool: Define in addition other features, such as start/end angle, inner radius etc. Polystar tool: Define polygons and stars (there is a small pull-down menu in the properties panel that you should not overlook !) Below you can see a few drawings. The screen capture has been taken with the Polystar tool activated.

various drawings with the rectangle, oval, polystar tools

"Line" drawing Options

In the options section you can select different ways of drawing support. I.e. the straight icon looks like this: . Below is a screen-dump that demonstrates the difference between straight, freehand and smooth drawing.

The three pencil drawing modes (CS3, same principle)

Paint bucket tool The paint bucket tool works like the ink bottle tool. It has two purposes: Change colors of simple shapes (primitive drawings). Tip you can change the color of strokes by editing (double-click) Change color of fills (inside of a graphics object) Fill in empty areas (insides of drawings made with the pencil for example) Procedure first, deselect everything next, click on the paint bucket tool Select fill color (and style) Click on shape or fill (inside shape of a graphic object)

Filling a closed graphic with paint

Files Types in flash Flash uses the following file types and extensions: FLA Flash file. This is the "master" document file for a flash project, i.e. the source file you work with in the Flash authoring program. These files can only be opened with Flash not the Flash Player. To create the final product which is viewed by end users, export the appropriate file (usually SWF) from the FLA file.

FLV Flash Video. Supported from version 7, FLV files are the preferred format for delivering video clips via Flash.

SWF Flash delivery file the file that end users see. This is a compressed version of the FLA file which is optimized for viewing in a web browser, the standalone Flash Player, or any other program which supports Flash. This file type cannot be edited in Flash. SWT Flash template. This allows you to edit and replace information in a Flash movie file; for example, a Flash button in which you can replace the text, links, etc. SWC Flash element. These files have customisable parameters which allow you to perform various application functions.

Animation in flash Introduction to Flash Layers Think of layers as sheets of transparent paper arranged in a stack. Each layer is a separate thing, but when you have a stack of layers, each with drawings on them, they can create an entire scene. You can work on one layer without worrying about messing up the other layers. For instance, if you want to erase something on a layer, you can do it without worrying about erasing anything on other layers. Youll also find it easier to animate multiple characters if you put them on different layers.

Drawings on higher layers will cover drawings on lower layers, allowing you to create scenes with depth. This is probably easier to show than tell. Below, youll see four pictures. The first 3 represent individual layers. The final one shows them all combined, with Layer 1 on top, Layer 2 next and Layer 3 on the bottom. As you can see in the Combined image, the tree on Layer 1 covers the image on Layer 3. The same is true with the dog on Layer 2: because it is above Layer 3, the dog is in front of the wall.

Creating a New Layer There are three ways to create a new layer: Click on the Add Layer button (pictured below) Right-click (Ctrl-click) on an existing layer and select Insert Layer from the context menu Insert > Layer

Deleting a Layer
To delete a layer: 1.Select a layer (or layers) 2.Click the Delete Layer button or drag the layer on top of the Delete Layer button There must always be at least one layer in a Flash movie. Therefore, Flash won't allow you to delete a single remaining layer. Naming Layers To rename a layer, double-click on the layer name. The name field will turn blue, meaning that it's editable and will allow you type in a name of your choice. Press Enter (Return) when you're done or click elsewhere on the screen.

Show/Hide Layers To change the visibility of a layer or layers: Click the symbol in the Eye column to the right of the layer name to toggle between showing and hiding the layer. Click the Eye icon itself to show/hide all layers. Drag the cursor through the Eye icon column of multiple layers to change the visibility status of those layers. With the layer you want to remain visible selected, Alt-click (Option-click) in the Eye column for that layer to hide all other layers.

Lock/Unlock Layers To lock/unlock one or more layers: Click the symbol in the padlock column to the right of the layer name to toggle between locking and unlocking the layer. Click the padlock icon itself to lock/unlock all layers. Drag the cursor through the padlock column of multiple layers to change the lock status of those layers. With the layer you want to remain locked or unlocked selected, Alt-click (Option-click) in the padlock column for that layer to lock/unlock all other layers.

Symbols in Flash The Symbols come from objects that we've created using the tools that Flash 8 provides us. When transforming these objects into symbols, they are included in a library at the moment of creation that allows us using them on several occasions, either in the same or another movie.

To create a new Symbol To create a new Symbol go to: Insert > New Symbol (Ctrl F8)

In a Flash document, choose Insert > New Symbol (PC-Ctrl/F8).

Animation Flash Animation Animation is the process of creating movement or change over time. Some examples of Flash animation are moving an object from one place to another, fading an object in or out, changing an object's colour over time, or morphing an object's shape. Many of these properties can also be animated in combination.

Types of Animation There are two types of Flash animation: A frame-by-frame animation is created by placing different objects in each frame of the animation. A tweened animation is created by setting up the starting and ending points of an animation and letting Flash create the frames in between. Frame-By-Frame Animation Frame-by-frame animations are sometimes necessary when the required changes over time cannot be created using tweening. An example of this is an animation of a person walking. In each frame, the arm and leg movements will be different, requiring a separate graphic for each frame.

Creating a Frame-by-Frame Animation To create a frame-by-frame animation: 1. Click the layer on which you want to place the animation. 2. Add content to the first keyframe by using the drawing tools or importing an image. 3. Select the next frame and press F6 to make it a keyframe. The content from frame 1 will be copied into frame 2. 4. Modify the content in frame 2 to create the second increment of the animation. 5. Continue adding keyframes and modifying the content until your animation is complete.

If you don't want to copy over the contents of a previous frame when creating the next keyframe, press F7 to add a blank keyframe. View an example of a frame-by-frame animation.

This is what the Timeline looks like for the hand-writing animation. The Pencil tool was used to write out the word, adding a little bit more in each frame.

A tweened animation A tweened animation is created by setting up the starting and ending points of an animation and letting Flash create the frames in between. Motion Tweening Motion tweening changes the properties of an instance, group, or text block over a period of time. Properties that can be tweened include position, size, skew, and rotation. If the object being tweened is an instance, then its colour properties, including transparency, can also be tweened.

Tweens aren't restricted to moving from Point A to Point B, so to speak. You can set up numerous keyframes in between the start and end points to control the object with intermediate keyframes. When tweening movements, you don't have to move the object along a straight path if you use motion guides. The path can be curved or angled and even double over on itself. Tweens can be nested inside other tweens to create compound movements. As you can see, motion tweens provide infinite possibilities to add animation to your Flash movies.

Creating a Motion Tween Here are the steps for creating a basic motion tween: 1. Click the layer on which you want to place the tween. 2. Select the frame where the animation is to begin. If it's not already a keyframe, make it one by pressing F6 (Insert > Keyframe) or by right-clicking (Ctrlclicking) in the frame and selecting Insert Keyframe from the context menu. 3. Place an instance, group, or text block on the Stage. 4. Select the frame where you want the animation to end and insert another keyframe.

5. In the ending keyframe, do one or more of the following: o Move the object to another position. o Scale, rotate or skew the object. o If the object is an instance, use the Effects panel to alter the instance's brightness, tint and/or alpha. If the object is a text block, you can change its fill colour. 6. Right-click (Ctrl-click) between the two keyframes and select Create Motion Tween from the context menu.

Shape tween setup Before we can create our tween we are going to need the shapes that will be used to produce the tween effect. First, create a simple rectangle like the one we have below, in frame 1 of your timeline.

Inserting keyframes
Select frame 25 in the timeline window and insert a KeyFrame. Select frame 50 and insert another KeyFrame. Notice that there is a shaded area from frame 1 to 50. This is your "active" area and the animation is going to occur within this area.

Changing our shapes We want our shape to morph from one shape to another. For contrast let's have our red box morph into a blue circle. Select the middle frame, frame 25, and draw a big blue circle on top of the existing red box, so that it is completely covered. Using the Oval Tool in frame 25, hold shift, left-click and drag to create a large blue circle. Your stage should now look like this for frame 25.

Now insert another KeyFrame at frame 26. Left click any frame from 27-49 and once again select the Shape Tween from the Properties window.

Test the tween out From the Control menu choose Control < Test Movie. Your shape tween should look like our example. You can download our raw flash file if you would like to do so.

Thank you