blog.webmastersdesk.com » FLASH

CREATING ANIMATIONS

Administrator — Mon, 29 Aug 2005 01:12:19 +0000

So far, our discussion revolved around various components that are needed for creating quality animations. We are proceeding now to the actual part of the problem: How to create animations or Tweens etc. In the next few paras, I will be explaining the answer to this query; by giving lots of animation examples.

Example # 1 :- Conversion from Rectangle to Circle (Without Tweening)

ïƒ˜ Create a new Flash document. (File > New > Flash Document).
ïƒ˜ On the first frame, draw a rectangle. The frame will be converted to the key frame.
ïƒ˜ Press F6. This will copy the first frameâ€™s state into the second one. Drag the frame, on which the second Key Frame is placed, to any frame number you want: Say 20. (The greater the number of frames in between, the greater is your animationâ€™s length).
ïƒ˜ On the second key frame, Delete Rectangle and draw a circle.
ïƒ˜ Donâ€™t select any sort of â€œCreate Motion Tweenâ€ for now.
ïƒ˜ Execute file (Ctrl + Enter) to see the results.
ïƒ˜ Result: A Rectangle appears which lasts for a while. Then a Circle appears for an instant and then this sequence loops back.

Example # 2:- Conversion from Rectangle to Circle (With Shape Tweening)
The steps in the first example display a quick conversion of Rectangle into circle. At the last frame, it only converts itself to circle. How to do a smooth conversion from Rectangle to Circle. After making a new file, follow these steps:

ïƒ˜ Make a new symbol whose type is Graphic. Draw a Rectangle on this graphic.
ïƒ˜ In the same way, make a new graphic symbol and draw a circle on it.
ïƒ˜ Make a Symbol and set its type as Movie Clip.
ïƒ˜ On the first frame, drag the first graphic from Library into this clip.
ïƒ˜ Select the rectangle of the graphic and Press Ctrl + B to convert it into shape object instead of the graphic one.
ïƒ˜ Insert a Blank key frame on any next frame (Right Click > Insert Blank Key Frame) and drag the circle Graphic on this frame.
ïƒ˜ Select the circle on the graphic and Press Ctrl + B.
ïƒ˜ Select all the frames in between plus the two key frames.
ïƒ˜ Right Click and Select â€œCreate Motion Tweenâ€.
ïƒ˜ But this will not solve our problem!!!
ïƒ˜ Go to the first key frame and Press Ctrl + B after selecting the object.
ïƒ˜ Go to the second key frame. Delete the object there and drag the circle graphic again. Press Ctrl + B on this object as well.
ïƒ˜ Go to the Property Inspector.
ïƒ˜ In the Tween drop down menu, select Shape.
ïƒ˜ Drag this movie clip from Library to the stage (Scene 1)
ïƒ˜ A light green arrow pointing to the last frame will verify your working.
ïƒ˜ Execute the file or Publish it (File > Publish Settings/Publish) to see the results.
ïƒ˜ Result: A Rectangle smoothly converts into the circle.

Though there are other easy ways as well, this practice was intended to make you familiar in working with Graphics or Movie Clips.

NEXT: Creating animations part two >

TIME LINE (Part Two)

Administrator — Sun, 28 Aug 2005 01:47:53 +0000

Using Symbols: – A symbol can be a graphic, movie clip or a button. You can use:
ïƒ˜ Graphic symbols for static images and to create reusable pieces of animation that are tied to the main Timeline.
ïƒ˜ Button symbols to create interactive buttons that respond to mouse clicks, rollovers, or other actions.
ïƒ˜ Movie clip symbols to create reusable pieces of animation. Movie clips have their own multiframe Timeline that is independent from the main Timeline.
All of these options are available when you create a new symbol in a Flash document. The main benefit symbols offer is that they can be reused; thereby reducing the file size. Each symbol that we make becomes part of that documentâ€™s library (Library can be accessed by Ctrl + L). To use it again, drag it from Library. The dragged symbol becomes the Instance of the parent one. You can change the attributes of this instance. A change in parentâ€™s attribute will change all the instances while the reverse is not possible. Each symbol has its own timeline and you can insert key frames here as well.

Working with Text: – You can create static text, text whose contents and appearance you determine when you author the document. You can also create dynamic text fields, which display text that updates dynamically during runtime, and input text fields, which allow users to enter text for forms or other purposes.
You can select the following attributes for text: font, point size, style, color, tracking, kerning, baseline shift, alignment, margins, indents, and line spacing by using the Property Inspector (Ctrl + F3 to open it).

Also, you can put URL to the text. To do so, follow these steps.

ïƒ˜ On the stage (or in a movie clip), Select the Text tool and write something.
ïƒ˜ Using the selection tool, Select the text block (DONâ€™T select the text).
ïƒ˜ Enable the option â€œRender Text as HTMLâ€ in the property inspector.
ïƒ˜ In the property inspector, give the URL name. For example , mailto: 1630@nu.edu.pk or http://www.nu.edu.pk
ïƒ˜ Run your program to see the effects.

NEXT: Creating animations >

TIME LINE

Administrator — Wed, 24 Aug 2005 17:08:16 +0000

The timeline controls the animationâ€™s content in frames or/and layers. There are three main components of the timeline: Layers, Frames and the play head.
Frames: – In Flash, every animationâ€™s time is divided into frames. On every frame, there can be a different animationâ€™s position/appearance.

Layers: – The concept of layers in Flash is derived from its literal meaning. Layers are like strips stacked on top of each other. The layer on the top hides all the other layers below it (unless masking is done. See masking details below)

Play head: – When the animation runs on Flash, it runs as per defined by its frames. We see the animation defined from frame # 1 until the last frame defined. The play head indicates the current frame that is being displayed.

Using Frames: – First, Let me differentiate Frames with Key Frames as we will be using these terms together. Suppose your animation consists of 10 ms, it can be divided into five frames. Thus, a frame:
â€¢ Exhibits the specific state of an object
â€¢ Displays this state for some specified time.

A key frame is a frame in which you define a change in an animation. When you define two key frames such that the first one has a different object state (than the second one), Flash tweens or fills in the frames between the two key frames. For example, if you draw a circle on the first key frame while a rectangle on the next key frame which is 10 frames apart, Flash ensures a smooth conversion of the circle into rectangle.
The order in which frames and key frames appear in the Timeline determines the order in which they are displayed. You can see the complete description of frames at: See Frames Description.

Using Layers: – As discussed before, you can draw as many objects on one layer without affecting the objects on the other layers. You can also prioritize your layers to select which objects will appear at the top.
See the left part of the above image. There are four layers in it. The first layer â€œActionsâ€ is without any folder. The next three are in the folder named â€œFolderâ€. The â€œGuideâ€ layer is guided layer. On the top, there are three icons. The eye icon shows which layers can be displayed on your stage. If you click on the box next to the layer name in the eye column, that layer will not be displayed as long as you are editing the other layers. The next is the Lock option. Choosing it will lock (prevent) a particular layer for editing the layer objects. Below to the layers are three icons. The first one is â€œInsert Layerâ€: Clicking on it will create a separate layer. Double click this layer to choose its name. The next one is â€œGuided Layerâ€ icon. Clicking here will create a guided layer. The last one is â€œInsert Folderâ€: Choosing this option will create a folder in which you can put the other layers. Folders can be prioritized in appearance in the same way as layers do.

NEXT: Time line overview part two >

Tool Bar Overview

Administrator — Mon, 22 Aug 2005 00:47:03 +0000

SHORT DESCRIPTION OF THE TOOLS IN THE TOOL BAR (THAT APPEARS LEFT ON YOUR SCREEN)

The tool bar is divided into four sections. The first one contains tools for drawing,

Selection Tool: – This tool will be used to select shapes/animations/meshes/Outlines.

Pencil Tool: – To draw freeform lines and shapes as if drawing with a real pencil, you use the Pencil tool.

Pen Tool: – To draw precise paths as straight or curved lines, you use the Pen tool.

Line, Oval, and Rectangle tools: – To draw basic geometric shapes, you use the Line, Oval, and Rectangle tools.

Brush Tool: – To create brush like strokes as if painting with a brush, you use the Brush tool.

Paint Bucket and Ink Bottle tools: – To change the stroke and fill attributes of existing objects, you can use the Paint Bucket and Ink Bottle tools in the toolbar or the Property inspector

Using these Tools:-

Selection Tool: – Select this tool. Single click on a shape will select its mesh (Shape minus its boundary). A double click after this tool will select the whole shape (mesh and its outline).

Pencil Tool: – When you select this tool, an icon appears in the last section of the tool bar: Options section. Clicking this icon will reveal three options for you:

1) To draw straight lines by selecting the â€œStraightenâ€ option.
2) To draw smooth curved lines by using â€œSmoothâ€ option.
3) To draw free hand lines using the â€œinkâ€ option.

Pen Tool: – When you draw with the Pen tool, you click to create points on straight line segments, and click and drag to create points on curved line segments. You can adjust straight and curved line segments by adjusting points on the line.

Line, Oval, and Rectangle tools: – Select the respective tool for drawing. Drag on to the stage. You can press Shift key while dragging to use alternate options.

There are various other things that need to be explored in the tool bar. I will recommend seeing Flash Help yourself if you want to be familiar with all the features.

NEXT: Time line overview >

Learn Flash

Administrator — Sun, 21 Aug 2005 01:45:03 +0000

ABOUT MACROMEDIA FLASH
Flash is an amazing tool that allows you to create simple animations as well as complex interactive web applications. You can add pictures, sound, and video to media rich your applications. Flash includes many features that make it powerful but easy to use, such as drag-and-drop user interface components.
When you author in Flash you work in a Flash document, a file that, when saved, has the file extension .fla. When you are ready to deploy your Flash content, you publish it, creating a file with the extension .swf. The Flash Player runs the SWF file.

Before moving further, I am writing short descriptions of what appears before you when you run Flash. Note that this entire tutorial is based on the interface FLASH MX 2004 provides.

Content:
1. Tool bar overview
2. Time line overview
3. Creating animations

NEXT: Tool bar overview >