| Macromedia Flash |
|
| Introduction of Macromedia Flash |
|
| Introduction |
|
| Flash is a program by Macromedia for creating interactive, animated online content. Animated simply means "to have movement" -- Flash content does not have to be a cartoon. It is commonly used to mimic software interface elements such as scroll bars, drop-down menus, buttons, and navigational systems. The term "Flash" has also come to mean the actual files created using Macromedia’s program of the same name. |
|
| Getting to know the Flash authoring environment makes you more effective and efficient as you create movies. You'll get to know the parts of the Flash window, which include theToolbar, Timeline, Stage, panels, and Property Inspector. |
|
| The Toolbar, also known as the Tools panel, contains tools that you can use to draw, paint, select, and modify artwork. The Timeline represents the overall structure of a Flashdocument and controls the content. The Timeline consists of layers, frames, and scenes that make up a Flash document. Layers are like transparent sheets stacked on top of one another. Each layer can contain different images that appear on the Stage. A frame displays content at a specific moment on the Stage. The order in which frames appear in the Timeline determines the order in which they appear in the document. As you play a document, the playhead moves through the Timeline displaying the current frame with each layer on the Stage. If a project requires many animation sequences with hundreds of frames, you can organize the animations into scenes to make them easier to work with and manage. Below the Timeline is the Stage, which provides a place to compose the content for individual frames. Panels are windows that allow you to view, organize, and change elements and related options in a document. The Property Inspector is a specialize panel that allows you to change object specific attributes and options. |
|
| With Macromedia Flash MX Professional 2004, you can author, preview, publish, and validate content for Flash Lite. |
|
| Flash MX Professional 2004 uses two versions of the Flash Player for authoring: the Flash MX Professional 2004 test movie player and the stand-alone player. Whenever you select the Control > Test Movie or Control > Test Scene menu commands in Flash MX Professional 2004, the test movie player is started. You can use the stand-alone player to view an existing Flash SWF movie after it has been published. Once you have set the publish settings for Flash Lite, you can preview SWF files using the test movie player and additional information, warning, and error messages will be displayed to let you know if there is any violation of Flash Lite rules and syntax. This helps you determine how to make the content Flash Lite compatible. |
|
| Click here to know how to start Micromedia Flash |
|
|
|
|
|
| Macromedia Flash |
|
| Flash movies |
|
| A movie clip is a symbol which (generally speaking) resides in the library, with one or more instances of it on stage. |
|
| The content in a movie clip can be anything from a single shape in a single frame to multiple layers containing content (often including other movie clips) changing over many frames. |
|
| Additional important things to remember about movie clips: |
|
| • Every movie clip instance has its own timeline, its own playhead, and its own functions and variables. |
| • Every movie clip instance also has its own name, which may be assigned by you in the properties panel, or will be assigned by Flash otherwise. If you want to control a movie clip instance with action script, you need to give it an instance name. |
| • The main timeline of a Flash movie can also be treated as a movie clip instance (and controlled in the same way as a movie clip instance, with some exceptions). Its name is_root. It can also be accessed with the name _parent by a movie clip sitting in one of its frames. |
|
| _root is an absolute address; it always refers to the main timeline of the movie. _parent is a relative address; it is a way of addressing a movie clip's containing movie clip (timeline), regardless of where they both fall in the overall hierarchy of movie clips in the movie. A relative address is always preferable because of its flexibility. Even if the published movie is subsequently loaded into a movie clip in another movie (eg, for preloading purposes), all relative (_parent-based) addresses remain valid, but _root is no longer the same. |
|
| • When a movie clip instance is encountered in the frame of a timeline (ie, when the playhead gets to a frame holding a movie clip instance), the movie clip's playhead will begin playing immediately and will continue to play unless told to do otherwise, or unless the playhead of the timeline it's in reaches a frame where the movie clip doesn't exist. Ideally, a movie clip is placed in a single frame of a timeline, or in a frame which has a stop action in it (in another layer named 'actions'). The stop action stops the main movie, but the playhead of the movie clip continues to play. |
| • A movie clip always runs at the same frame rate as the main timeline. |
|
| Here is a list of properties of movie clips that you can alter with action script. |
|
| Property | Discription |
| _alpha | transparency (100=opaque, 50 = 50% translucent, 0=invisible) |
| _x | horizontal pixel position of the movie clip's registration point, within the movie clip's containing timeline (0=left edge, 5 = 5 pixels to the right of the container's left edge, -10 = 10 pixels to the left of the container's left edge) |
| _y | vertical pixel position of the movie clip's registration point, within the movie clip's containing timeline (0=top, 5 = 5 pixels down from the top of the container) |
| _xscale | movie clip's width, as a percentage of its actual width (eg, set to 25 to make movie clip one quarter the width it was when first placed on stage). Scaling is done relative to clip's registration point |
| _yscale | movie clip's height, as a percentage of its actual height (eg, set to 50 to make movie clip half as tall as it was when first placed on stage). Scaling is done relative to clip's registration point |
| _visible | movie clip's visibility (true = showing, false = hidden) |
| _rotation | movie clip's rotation around its registration point, in degrees clockwise, relative to its original orientation. |
| (color) | there is no property for changing the color, but you can set the color by creating a color object for the movie clip and using setRGB to set the clip's color |
| The next property in the table is not settable, but is useful for finding out what frame of the movie clip the play head is currently in |
| _currentframe | not settable, but can be read to see what frame the movie clip's play head is in |
|
|
| Click here for animated presentation. |
|
|
|
|
|
| Macromedia Flash |
|
| Flash Toolbars |
|
| The menu bar at the top of the Flash application window displays menus with commands for controlling Flash functionality. The menus include File, Edit, View, Insert, Modify, Text,Commands, Control, Window, and Help. |
|
| The edit bar, at the top of the Timeline, contains controls and information for editing scenes and symbols, and for changing the magnification level of the Stage. |
|
| The tools in the Tools panel let you draw, paint, select, and modify artwork, as well as change the view of the Stage. |
|
| Additional important things to remember about movie clips: |
|
| • The tools area contains drawing, painting, and selection tools. |
| • The view area contains tools for zooming and panning in the application window. |
| • The colors area contains modifiers for stroke and fill colors. |
| • The options area displays modifiers for the currently selected tool. Modifiers affect the tool's painting or editing operations. |
|
| Click here for animated presentation. |
|
|
|
|
|
| Macromedia Flash |
|
| Symbols |
|
| A symbol is a reusable object used/created in Flash. A Symbol can be reused throughout your movie or imported and used in other movies. There are three types of symbols:Graphics, Buttons, and Movie clips. |
|
| A copy of a symbol used in the movie is called an Instance, which can have its own independent properties (like color, size, function, etc.) different from the original symbol. All symbols used in a flash movie are stored in the Library from where you can drag-and-drop new instances of the symbols into your movie. When a symbol is edited all of its instances get updated, but changing the properties, effects or dimensions of an instance of a symbol does not affect the original symbol or other instances. |
|
| The three types of Symbols |
|
| Graphic symbols |
|
| are reusable static images that are used mainly to create animations. Any drawn vector/plain text/imported bitmap (photo), or combinations of these, can be converted into a single controllable object: as a graphic symbol. They have only one frame in their timeline. |
|
| Button symbols |
|
| are used for timeline navigation - They add interactivity to the movie and respond to mouse clicks, key press or rollovers/rollout, and other actions. You define the graphics associated with various button states (Up/Over/Down/Hit), and then assign actions to the instance of a button. They have 4 frames in their timeline - one each for the up, over and down states, and one to define the hit area of the button. |
|
| Movie clip symbols |
|
| are reusable pieces of flash animation - consisting of one or more graphic/button symbols - thus they are flash movies within your flash movie. They have their own non-restricted Timeline (any number of layers and frames - just like the main timeline) that plays independent of the main movie's Timeline. The best thing about using movie clips is that you can control them from actionscript - you can change their dimensions, position, color, alpha, and other properties and can even duplicate and delete them. |
|
 |
|
| Click here for animated presentation. |
|
|
|
|
|
| Macromedia Flash |
|
| Animation in Flash |
|
| While working in Flash you will find it necessary to create simple animation sequences. |
|
| In Flash, animation can be done in four basic ways: |
|
• Motion Tween
• Shape Tween
• Frame-by-Frame Animation
• Guided Motion Tween |
|
|
| Creating Motion Tween |
|
| 1. Draw a vector using any of the drawing tools in Flash, say a small circle and convert it into a symbol (F8) by selecting the Graphic option and name the symbol say 'ball'. |
| 2. Click the 20th frame in the Timeline and insert a frame (F5). |
| 3. Now right-click the 20th frame in the Timeline and select Create Motion Tween (or Motion option from the Tween panel of the Properties inspector) and insert a Key Frame (F6). |
| 4. Select the 10th frame and insert a Key frame (F6) and move the ball to a different position say, above the current position to create a motion sequence (automatically tweened by Flash). |
| 5. Save your work and test the Movie (Ctrl + Enter). That's it you have created simple animation using Motion Tween. |
|
 |
|
| Use the Color Panel of the Properties inspector to reduce the Alpha value from 100 to 32 for the 1st and last frames to produce Simple Alpha Tweening as shown in the Example. |
|
| Click here for animated presentation. |
|
|
| Creating Shape Tween |
|
| 1. You can create Shape Tweened animations using Shape option from the Tween panel of the Properties inspector. Draw a vector using any of the drawing tools in Flash, say a small circle and remove its border. |
| 2. Click the 10th frame in the Timeline and insert a Key Frame (F6). Now draw another shape say a diamond using the rectangle tool without a border. |
| 3. Now right-click on any frame in between these two Key Frames and select Shape option from the Tween panel of the Properties inspector. |
| 4. Save your work and test the Movie (Ctrl + Enter). That's it you have learnt how to create Shape Tween in Flash. |
|
 |
|
| Only vectors can be Shape Tweened (Not for Symbols). Note both the Tweens have different colors along the Timeline as shown above. Make sure that the line is smooth without being broken to ensure correct Tweening. |
|
 |
|
| Click here for animated presentation. |
|
|
| Frame-by-Frame Animation |
|
| 1. Create a vector/plain text using any of the drawing tools in Flash, say a text with 'Animation' typed as shown in the example and break it using Break Apart (Ctrl + B) to separate the alphabets as shown below: |
|
 |
|
| 2. In Frame-by-Frame animation we create the object for each frame so as to produce an animation sequence. |
| 3. Insert Keyframe (F6) and move the alphabets so as to produce an animation sequence. |
| 4. Repeat the above step as far as desired to create Frame-by-Frame animation as shown in the example. |
| 5. Save your work and test the Movie (Ctrl + Enter). That's it you have created an animation using Frame-by-Frame animation. |
|
 |
|
|
| Creating a Guided Motion Tween |
|
| 1. Create a vector/plain text using any of the drawing tools in Flash, say a text with 'Flash' typed and break it using Break Apart (Ctrl + B) as done in the previous example and put each alphabet in different layers and name the layers as shown in the picture below. |
| 2. Insert a guide layer by right-clicking the topmost layer and select 'Add Guide Layer' (Insert-->Timeline-->Motion Guide), draw any path using the pencil tool in the guide layer as shown in the example. |
| 3. Now create Motion tween by selecting the object in the 1st frame and snapping its registration point to one end of the path. |
| 4. Snap the object in the last frame to the other end of the path in the guide layer. |
| 5. Repeat the same for all the objects (alphabets) by snapping their registration points to the path in the guide layer. |
| 6. Save your work and test the Movie (Ctrl + Enter). That's it you have learnt how to create motion along a guided path. |
|
 |
|
| Click here for animated presentation. |
|
|
|
|
|
| Macromedia Flash |
|
| Guide Layers |
|
| Motion Guides are paths drawn by you that your objects will follow. However, Motion Guides only work with Motion Tweens. Remember that. Let's say you wanted to animate an a bird flying in a curving path. You can do this by using a Motion Guide. |
| You can drag horizontal and vertical guides from the rulers onto the Stage when the rulers are displayed. You can move guides, lock guides, hide guides, and remove guides. You can also snap objects to guides, and change the guide color and snap tolerance (how close objects must be to snap to a guide). Flash allows you to create nested timelines. Draggable guides appear on the Stage only when the Timeline in which they were created is active. |
| You can clear all the guides in the current editing mode--document-editing mode or symbol-editing mode. If you clear guides in document-editing mode, all the guides in the document are cleared. If you clear guides in symbol-editing mode, all the guides in all symbols are cleared. |
|
|
| Click here for animated presentation. |
|
|
|
|
|
|
|
|
|
|
|
0 comments: