Images Macromedia Flash 8 - PART II

Macromedia Flash 8
Adobe Flash Professional is used to create content for the Adobe Engagement Platform (such as web applications, games and movies, and content for mobile phones and other embedded devices). Macromedia Flash is an industry leading tool that
supplies its users with animations, presentations, and mind blowing websites, while doing this at a constant low bandwidth. This may get you to asking some questions.Flash is commonly used to create
animation, advertisements, various web page components, to integrate video into web pages, and more recently, to develop rich Internet applications. Macromedia Flash player numbers indicate that it is used by more then 386 million people. This number translates to mean that if you have Flash in your website, over 97.4% of your online audience will be able to see it using the Macromedia Flash player.
Flash Basics Drawing & Modifying Lines and Shapes:- 1. Select the line tool (N) from the tools palette. 2. Now draw two intersecting lines with the Pencil Tool. Hold down the Shift key while drawing lines to vertical, horizontal, or 45 degrees. 3. Now when you move around the stage you will have a rectangle shape along with your cursor everytime. But when you go near a line the cursor changes to a curve. This means now you may click and drag the line to convert it into a curve. 4. After the curve comes besides your cursor and you click and drag you will convert that line to a curve. 5. Now position the arrow tool near the intersection as shown of the two lines. When the little right angle appears by the cursor, click and drag. 6. When you click and drag the intersection lines from the center you tend to move the center point and thus make a new shape. 7. Select the arrow tool take it to the end/top of a line you will see the little right angle coming again besides the cursor. Now when you click and drag you will drag that point and thus make a curve of that line. 8. Now your arrow tool also works as a selection tool. Whatever part you select you can cut it and move it. 9. Select the subselection tool. Now when you click the lines with the subselection tool you will get anchor points/nodes visible. Now you may play with these nodes-move them, delete them, make a curve etc. Flash Basics Using The Pencil Tool And Its Options:- 1. Select the pencil tool (Y) from the tools palette. 2. As soon as you select the pencil tool you will see many options coming up in theproperty panel. You can play with these options to enhance your drawing further. There you have many options. Starting with the width text box, it is used to specify the width of the pencil. It will give a warning if the number specified is not between 0.1 and 200 because the maximum width is 200. 3. Then there is the stroke color pop-up menu. You may select any color from the color palette and as you move over a different color, side by side the color code for that particular color will also be shown. 4. You can also select the smoothness you want for the pencil. This will be seen as soon as you have released the mouse button after making a drawing. 5. Then you have a pop-down menu for selecting what type of stroke style you want. You can select dotted, dashed etc. by the most used one and by default the solid type is selected. There are in total 6 types of stroke style but we also count hairline style. 6. Now on the tools panel also you have some options. There select ‘straighten’ and then draw. This will straighten all the drawings you make automatically. 7. Now you may draw and see. The left image shows you the drawing before the mouse button is released and the right shows you an image with the straightened effect. 8. Select the second option i.e ‘smooth’. This will make smooth all your drawings now on automatically. 9. Now you may draw and see. The left image shows you the drawing before the mouse button is released and the right shows you an image with the smoothened effect. Flash Basics Free Transform Tool:- 1. Make a shape you want to transform. 2. Now select the Transform tool (Q) and select the shape you have drawn. You will see nodes getting visible. 3. Position the cursor near a corner (not on it) and it changes into the rotation indicator.Click and drag to rotate then release the mouse. 4. Position the cursor between handles and it changes into the skew indicator. Click and drag to skew your object 5. Now move your cursor over a corner and then press Ctrl. You’ll see the cursor change to a tailless arrow. 6. Now without leaving the control button click and drag. You will see only that corner is moved. 7. The Alt, Ctrl, and Shift keys are transform modifiers. Experiment to discover how these keys work. Try holding down more than one modifier key at once for even more transformational options. Depending on the situation, you can often achieve more control using the Transform tool (Ctrl + T). Flash Basics Creating a symbol 1. Select the element you want to convert into a symbol and press F8 or right click on the object and click on convert to symbol. 2. A dialog box will open with three things-name, type, and registration. 3. Type the name you want to put for the symbol and then select what type of symbol you want it to be. 4. Registration is where you want the central anchor point to be for the element. 5. Click OK. You’ll see a bounding box coming around your element. This is an indication that it is a symbol. Flash Basics Creating a Polystar:- 1. Click on the rectangle tool for a second without releasing the mouse button until you get a pop down menu. 2. Select PolyStar Tool. At that very moment you will see the parameters in the property inspector changing. 3. In the properties panel click the options button. 4. Here in style select star or polygon according to the requirement. 5. Give the number of sides you want and then press OK. You can have maximum of 32 sides for both polygon and star. 6. For Star Point Size, enter a number between 0 and 1 to specify the depth of the star points. If you are drawing a polygon, leave this setting unchanged. (It does not affect the polygon shape.) 7. Click on the stage and drag to make your PolyStar or a star. For Animated Presentation Click here Flash Basics Drawing a circular edged box:- 1. Select the rectangle tool (R). 2. Click on the stage and drag to form a box then without releasing the mouse button go on pressing the down arrow key until you get the desired result. 3. The down arrow key will increase the corner radius and the up arrow key will decrease it. But if you go on pressing the Up arrow key you will get the original image back. 4. You can also double-click on the rectangle tool and then specify a corner radius in the rectangle settings dialog box before hand. 5. You can provide a maximum of 999 as corner radius. Note: - After drawing a circular edged box the default settings of corner radius for the rectangle tool changes to the amount you provided earlier. So now any shape you make with the rectangle tool will be made with that corner radius. If you want to change it back to the normal rectangle, you will have to provide the corner radius to Zero. Symbols Flash Symbols Symbols are the greatest strength of Flash. They allow reuse of graphics, buttons or movie clips without significantly increasing the file size. Flash stores all symbols in the movies' Symbols Library. Once an object is converted to a symbol, it is automatically placed in the library. Symbols can be dragged from the library and placed on the stage. This creates an Instance of the symbol. You can consider the Instance as a copy of the symbol. Further, Flash allows the properties of an Instance to be changed. For example, in case of Graphic symbols, the size, rotation, color, transparency and brightness of the symbol can be modified yielding a completely different shape. However, since the graphic information is a copy, the file size does not increase much. What is a Flash Symbol? 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. Importance of using Flash Symbols Using flash symbols is very crucial to the file size of your Flash movie. The Flash file size depends largely on the size of all the graphics and texts used in the movie (both symbols and non-symbols) - here the major advantage of using symbols is that a symbol's size is taken into consideration only once even if it is used a hundred times - this is the true power of Flash. Unused symbols in your library are not counted in the size of your movie. Important Tip: Get used to using symbols in flash right from the beginning and name them neatly for easy maintenance. It is a very tough job optimizing your file size if you don't use symbols from scratch! The Types of Symbols Flash contains usually three types of symbols but there is also an additional symbol i.e. the font symbol which is inactive. 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. The three symbols appear in the flash library similar to the three symbols the above image. Let's look at how to create these three types of flash symbols now. The importance of Symbols and how they work They key to making fast downloadable flash-files is understanding the three symbols, and what they can do. In the first versions of Flash, there were only two symbols: graphic and button. When Macromedia launched Flash 3, they introduced the Movie clip. The Movie Clip was extended further in Flash 4/5, and might be the most powerful symbol of them all, and when used together these three symbols can do incredible things. There is something called symbols in Flash, but why should you use them? Isn't it much easier to just draw the things you need on separate layers? Well, not quite so. Lets go through a simple example to understand the above given statements. Click the Drawing layer, and make a drawing of a face, or something more complex than a circle. When finished drawing, go to the Control menu and choose test movie. By default Flash will now open the document along with the Bandwidth Profiler (If it did not open, go to the View-menu and choose Bandwidth Profiler). The Bandwidth Profiler is a tool built into Flash that lets you see a visual representation of the data in your Flash-file. It can be used for many purposes. The Bandwidth Profiler tells that the file size of my drawing is 766 bytes (blue arrow). Let's assume I wanted a shadow beneath my drawing. To do this, click on the keyframe containing the drawing and copy it using the Edit-menu. Click the Shadow-layer, and choose "paste in place" from the Edit-menu. Use the arrow keys to nudge the shadow into a slightly different position than the drawing, and use the Bucket tool to fill the whole shape with Black color. Test the movie (Control menu -> test movie) and have a look at the new size. The size of my document almost doubled! It's now 1488 bytes in size. Now, let's try using symbols. Click the keyframe containing the graphics on the Shadow-layer and delete it. Then click the same keyframe on the Drawing layer. This will select all the contents of this layer. Open the Insert-menu; choose "Convert to symbol". In the dialog that appears, "Graphic"-symbol has already been selected for us. Name the symbol "Original drawing" and press the OK-button. Copy the symbol to the shadow layer, and choose Modify -> Instance. Press the Color Effect-tab and set Brightness to -100. Nudge the symbol for the shadow effect, and test the movie (Control menu -> test movie). The new size of this document is just slightly bigger than version 1, and it looks just like version two. This is why you should use symbols. If you don't convert anything that might be used more than one time into symbols, your flash-file will grow, grow, grow. This is also one of the best ways to tell if someone really knows how to use Flash vs. someone that has only been playing around with it... Graphic symbols and Movie Clips These two symbols may at first seem very alike, as they both may contain still graphics and animations. There is however a very big difference: Graphics can be displayed; Movie Clips can be both displayed and programmed. The biggest difference between a graphic and a Movie Clip is that the graphic is controlled by the timeline it's residing on (In this example, the main timeline). A Movie Clip's timeline is not affected by any other timeline than its own. Sounds difficult? Let's use a tractor for an example. A tractor consists of many parts moving independently or depending on each other. The engine can be running, even though the wheels are not turning. If it's going down a hill, the wheels can be turning without the engine running. The shovel can move up and down, the cassette player may be playing or not... All of these things are movements that have independent timelines, i.e. they can "animate" without any relation to each other. When do you use Movie Clip and when do you use Graphic? Well, the basic rule could be that a Movie Clip usually contains many graphic symbols, and it's very seldom the other way around. Here are some more rules: 1. Anything that is going to be used as an element in other symbols should be a Graphic. 2. Any symbol that will be triggered in any way (start animating, moving etc.) should be a Movie Clip. There will be times when you'll need to not follow these rules. If you need to avoid them to achieve an effect, you'll easier understand what to do if you know and follow these rules. The next lesson will tell you about "the Magic of Movie Clips", and how to use them in real life Icon Symbol Type Definition Example graphic Movie Clip A Movie clip allows you to use a graphic with separate frames for animation. That way, if you have an animation you want to use in more than one movie or something you want to keep from cluttering your timeline, you can separate out the frames involved in the movie clip onto the movie clip's independent timeline. Button A Flash button has four frames (corresponding to its four states) and extra variables that allow for use of certain Flash ActionScript verbs. Buttons can be clicked on, allowing for interactivity in your movies.  Graphic A Graphic is a static image or piece of text. A graphic itself only has one frame, but a graphic symbol can have a timeline with multiple frames, but these run in sync with the movie's Timeline. Graphics and graphic symbols can both use multiple layers. If you're looking to have a longer movie segment embedded within your overall scene, a movie symbol is a better choice. For Animated Presentation Click here Symbols Flash Graphic 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, called a graphic symbol. Graphic Symbols have only one frame in their timeline. The following steps will show you how to create movie clip symbol. 1. First create/import the object(s) to be converted into a movie clip. Import bitmaps onto the stage using Ctrl + R.  2. Select the object(s) and then press F8 or click on Modify menu >> Convert to Symbol. 3. Now give a name to your graphic symbol. This name will be seen over the timeline bar whenever you are inside the movie clip or you are in the editing mode. Graphic symbols are the simplest and most obvious type of symbol. When you create a Flash movie, you create objects on the Stage. Some objects may remain still, such as backgrounds. You animate other objects — after all, what is Flash for? Use graphic symbols for collections of static objects or for animation. You create graphic symbols to reduce the size of your file and to make it easier to add multiple copies of a graphic to your movie. Symbols are stored in the Library and are available to not only the movie in which you created them but also any other movie. Therefore, using symbols is a good way to store graphic images for use in Flash movies. You don't have to re-create the wheel. Flash ignores sounds or actions inside graphic symbols. Actions are the key to creating interactive movies. For that reason, turn animation into graphic symbols only when the animation is simple. Graphic symbols are always placed on the main Timeline of the movie. Symbols Flash Movie Clip Symbols Movie clip symbols are reusable pieces of flash animation – they are the most dynamic symbols, consisting usually 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 with ease - you can change their dimensions, position, color, alpha, and other properties and can even duplicate and delete them. Thus any object that needs to be controlled using flash ActionScript (no matter how simple or complex it might be) needs to be a movie clip with an instance name that is called in the ActionScript code. The following steps will show you how to create movie clip symbol. 1. First create/import the object(s) to be converted into a movie clip. Import bitmaps onto the stage using Ctrl + R. 2. Select the object(s) and then press F8 or click on Modify menu >> Convert to Symbol. 3. Now give a name to your movie clip symbol. This name will be seen over the timeline bar whenever you are inside the movie clip or you are in the editing mode. 4. You can also give an instance name to your movie clip symbol. By providing a name in the instance name text box in the property inspector/Panel. The symbol name and instance name can be same. But the most important of two is the instance name i.e. given in the properties inspector. It should be named properly. A movie clip is like a movie within a movie that you can manipulate by using interactive controls (also called actions, created with ActionScrip). Movie clips are crucial for complex animation and especially interactive animation. A movie clip doesn't take place on the main Timeline; instead, it has its own Timeline. For example, you can go to a movie clip at any time, play it, and then return to where you left off on the Timeline. You can also attach movie clips to buttons. Movie clips exist as symbols in a movie's library. When a symbol in the library is placed on the Stage an instance of the symbol is created. During the life of the movie an instance may change its color, position, and other properties. The symbol in the library acts as a template or initial design for the clip. Once on the Stage, the instance itself can be changed using different techniques, including the following: • Animating the clip on the stage's timeline using motion tweens • Attaching behaviors or event handlers to the clip • Altering the clip's properties using ActionScript in a timeline Whatever you do to each instance, the symbol in the library does not change; it remains as a template for creating other clips using ActionScript. Each instance of the symbol is unique in that it may have a particular state at one time. For example, one may be visible and another may not be. ActionScript classes and objects have a similar, though somewhat different, relationship to each other as movie clip symbols and instances. An ActionScript class defines the initial data (properties) and behaviors (methods or functions) of an ActionScript object. Instead of creating a movie clip symbol in the library using drawing tools, an ActionScript class is created by writing some code called a class definition. Instead of dragging a symbol onto the Stage, an instance of an ActionScript class is created using the new keyword within a script. Symbols Flash Button Symbols 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. The following steps will show you how to create movie clip symbol. 1. First create/import the object(s) to be converted into a movie clip. Import bitmaps onto the stage using Ctrl + R.  2. Select the object(s) and then press F8 or click on Modify menu >> Convert to Symbol. 3. Now give a name to your button symbol. This name will be seen over the timeline bar whenever you are inside the movie clip or if you are in the editing mode. 4. You can also give an instance name to your movie clip symbol. By providing a name in the instance name text box in the property inspector/Panel. The symbol name and instance name can be same. But the most important of two is the instance name i.e. given in the properties inspector. It should be named properly. Button symbols Buttons is simply a symbol that contains four frames (also referred to as "states"): Up, Over, Down and Hit. Buttons are used to start events in Flash-movies when the user clicks, moves the mouse over or drags the mouse across them. Up: is how your button will look like if the user is not doing anything and not moving the mouse over it. Over: is how your button will look like if the user moves the mouse over the button. Down: is the look of the button when it's clicked with the mouse Hit: defines which area of the button that will trigger the above 3 states There is often some confusion related to the Hit-field in the buttons. Let's use an example to show how it'll work in real-life. Only use the states you need in the buttons. All unnecessary frames will add to the total size of your movie. To keep the file-size down, make sure you don't draw directly into your buttons. Use Graphic symbols instead. Button symbols create buttons — those little graphics that you click in Web sites to take you to other places on the site or the Internet. In Flash, you can use buttons in the same way, but you can also use buttons to let viewers decide whether they want to see a movie — when they click the button, the movie starts. You can also use advanced scripting to create buttons that control interactive games and other viewer activities. However you want to use buttons, button symbols are the way to start. You can add movie clips and interactive controls to buttons. Tweenings Tweens in Flash Flash distinguishes tweened animation from frame-by-frame animation in the Timeline as follows: • Shape tweens are indicated by a black dot at the beginning keyframe; intermediate frames have a black arrow with a light green background. • Motion tweens are indicated by a black dot at the beginning keyframe; intermediate frames have a black arrow with a light purple background. • A dashed line indicates that the tween is broken or incomplete, such as when the final keyframe is missing. • A small ‘a’ on the keyframe means that there is ActionScript attached with the Keyframe. • A small white circle in a keyframe means it is an empty frame. Flash contains two types of tweens:- 1. Shape Tween -  Shape tween can be only given on shapes. They can be morphed and are mainly used to change one shape into another shape. It is basically distortion from one object to another. You create shape tweens by placing a drawing in one keyframe and a different drawing in another keyframe. It cannot be applied on grouped and symbols. The differences in the drawing are automatically filled in by the intervening frames when the first keyframe (the one on the left) is set as a shape tween. To set a keyframe, simply select the keyframe and select shape from the tween pop-down menu in the property inspector/panel. 2. Motion Tween - Motion tween can be only given on symbols i.e. movie clips, buttons and graphic. It is mainly used to animate. Motion tween is a frame coverage from one place to another and also operates on grouped objects. Motion tweens are the primary type used in animation. Rather than tweening shapes or creating morphs, motion tweens have a more complex array of tweens. No matter what type of format is used, none of the changes have the morphing characteristics seen in shape tweens. When the size of any of the format changes is continuous. Creation of Shape tween in Flash By tweening shapes, you can create an effect similar to morphing, making one shape appear to change into another shape over time. Flash can also tween the location, size, and color of shapes. Steps to follow: • Open a new flash file (Ctrl + N). New Document window will appear. Select General panel and choose Type: Flash Document. Press OK. • If your timeline window is not open, press (Ctrl + Alt + T). • Now you can see a single Layer called "Layer1" in your timeline Window. • Select the first frame. Now go to your working area and draw any object. To start off with, may be you can draw a circle. This is going to be your initial object. In the above demonstration, my initial object is a short line. • Select frame 20 and press F6 to insert a new keyframe. • Still keeping playhead on frame 20, delete the object present in your working area. Now draw a different object, may be a square. In the above demonstration, I have drawn a long line. • Select any frame between, 2 to 19 and select Shape from the tween pop-up menu in the Property inspector. Now your Layer will look something like the one shown below. • Now press (Ctrl + Enter) to view your motion tween A shape tween morphs one shape into another. Circles become squares, blue letters become yellow buttons. A shape tween can change the shape or color of any vector object. What Shapes can be Tweened? For a shape tween to take place, the objects being tweened must not be symbols. Until now, tweens required symbols. Shape tweening is opposite. You can’t shape tween a symbol. Flash cannot shape tween groups, symbols, text blocks, or bitmap images. If you want to apply shape tweening to any of these objects, you must first break them down by clicking: MODIFY-> BREAK APART Breaking Apart Text Before shape tweening text, it must be broken apart. If text has been converted into a symbol, it must be broken apart twice. The first breaking apart returns the text to its normal editable text state. Applying a Shape Tween To apply a shape tween, you’ll need two different keyframes, with two different objects. 1. Select or add a keyframe. 2. Draw or place an object. Remember that the object can not be a symbol. You can break apart a symbol by clicking MODIFY-> BREAK APART 3. Add another keyframe on the same layer. 4. Change or replace the object on the second keyframe. 5. Click the first keyframe in the animation sequence. On the Frame Panel, choose Shape Tween Shape Tweening Tips Would you like to move an object around while changing its shape? Are you interested in telling a story with stick figures? Are you looking for a cool rollover button effect that complements the look and feel of your site? Or how about a catchy transitional background, masking, or iris effect that captures your audience's attention while enabling you to change sceneries or reveal or hide the details of an object? You can do all this and more with shape tweens. Shape tweens are similar to motion tweens. You create a shape in a keyframe on the Timeline, and then you modify it or create a new shape in a subsequent keyframe and apply a shape tween. Flash will generate the frames in between these two shapes to create your animation. The key difference between shape tweening and motion tweening is that you can't apply shape tweens to groups or symbols; you first have to break them apart before you work with them. Shape tweening lets you change (or morph) the shape or color of one graphic into another. In addition to simple shapes and solid colors, you can also shape tween lines, gradients, and text. Creation of Motion tween in Flash What exactly is a motion tween? First, let's imagine that you place a box on the table. Now, imagine, that after 10 seconds, the box suddenly disappears and magically appears again a few inches to the right of where it had been originally. Pretty strange isn't it? Well, if you could rewind your past minute and watch it again, what will you see? You will see the box suddenly disappear and appear again in a different position with no cohesion or "animation" in the 10 seconds that elapsed. Here is where motion tweening comes in. With motion tweening, instead of the square disappearing and reappearing, you will instead see the square slowly moving itself to its new position - no disappearing acts at all! A motion tween, simply put, fills in the missing sequences between a starting position and the ending positions to create a full animation. Motion tween is nothing but tweening a Symbol's movement from one position to another. To implement Motion Tween all that you have to do is, provide Flash with Symbol's initial position and the end position. Rest is taken care by Flash. Isn't it really simple. Learn How to Tween: 1) First, launch Flash MX 2004. Once the program loads, you should see a new, blank area called your workspace. If you do not see anything resembling a white box, create a new animation by going to File | Flash Document. There, you should be all set! 2) Now, click on the Rectangle tool from the set of icons on the left. The Rectangle tool icon looks like the following image: 3) Once you have clicked the Rectangle tool icon, go to your drawing area, and draw a square by clicking your mouse and dragging - then releasing once you have a square. Try to ensure that your square is close to or hugging the left edge of your white drawing area: 4) After the square has been drawn, take a peek at your timeline. Your timeline is the large area toward the top with numbers and small, vertical boxes. Notice, that at Frame 1, there appears a solid dot: 5) The solid dot signifies that something substantial exists on that frame - Frame 1. In our case, the "something substantial" is the square you created! Now, look a little to your right and find the number 20. Right click directly at the box under the number label 20 and select "Insert Keyframe": 6) Once you select Insert Keyframe, you will see another black dot appear in Frame 20. Don't worry - that's a good thing! Now, make sure you select the keyframe on Frame 20 by clicking it with your mouse pointer. 7) With the keyframe selected, go down to your square again. Notice that your entire square is also selected. Now, press your Right arrow (on the keyboard) a few times to make it move a few centimeters from the right-most edge of your movie area: 8) Now, with your mouse pointer, click on Frame 1 of your movie in the timeline. Notice where the square is! It is on the left. Without hesitation, now click on Frame 20. Notice that the square is to the right. Click anywhere else on Frame 10, and notice the square finds its way back to its original, left position. 9) Enough of me chattering, It's time to motion tween! Now click any frame in between Frame 1 and Frame 20. Right click and select "Create Motion Tween:" 10) If everything worked out well, your highlighted frames will take on a purplish color with a large arrow leading from Frame 1 to Frame 20. Click anywhere on the timeline, and notice that you can "track" the square's position through its 20 frame journey. Tweening Motion Tweening What exactly is a motion tween? First, let's imagine that you place a box on the table. Now, imagine, that after 10 seconds, the box suddenly disappears and magically appears again a few inches to the right of where it had been originally. Pretty strange isn't it? Well, if you could rewind your past minute and watch it again, what will you see? You will see the box suddenly disappear and appear again in a different position with no cohesion or "animation" in the 10 seconds that elapsed. Here is where motion tweening comes in. With motion tweening, instead of the square disappearing and reappearing, you will instead see the square slowly moving itself to its new position - no disappearing acts at all! A motion tween, simply put, fills in the missing sequences between a starting position and the ending positions to create a full animation. Motion Tweens Require a Symbol in the start and end keyframes The one catch to motion tweening is that it can only be done to a symbol. You start with a symbol in the originating frame, and change it somehow in the ending frame. This means that whatever you want to apply a motion tween to must first be converted to a symbol. That's not hard to do -- you just have to remember to do it. To make a symbol, you simply select all the pieces on stage that you want to include in your symbol and press F8 (or choose Modify, Convert to Symbol). Then choose either Graphic or Movieclip as the symbol type, and give your symbol a name. Now you'll see that symbol in the library (open the library with Ctrl + L), and a copy of the symbol on stage. The copy on stage is referred to as an instance of the symbol. This tutorial will explain how to create a motion tween and help you understand more about motion tweens. Your animation, towards the end, will look a bit similar to the following animation: 1. Click on the Rectangle tool from the set of icons on the left. The Rectangle tool icon looks like the following image: 2. Once you have clicked the Rectangle tool icon, go to your drawing area, and draw a square by clicking your mouse and dragging - then releasing once you have a square. Try to ensure that your square is close to or hugging the left edge of your white drawing area: 3. After the square has been drawn, take a peek at your timeline. Your timeline is the large area toward the top with numbers and small, vertical boxes. Notice, that at Frame 1, there appears a solid dot: 4. The solid dot signifies that something substantial exists on that frame - Frame 1. In our case, the "something substantial" is the square you created! Now, look a little to your right and find the number 20. Right click directly at the box under the number label 20 and select "Insert Keyframe" or press F6. 5. Once you select Insert Keyframe, you will see another black dot appear in Frame 20. Now, make sure you select the keyframe on Frame 20 by clicking it with your mouse pointer. 6. With the keyframe selected, go down to your square again. Notice that your entire square is also selected. Now, press your Right arrow (on the keyboard) a few times to make it move a few centimeters from the right-most edge of your movie area: 7. Now, with your mouse pointer, click on Frame 1 of your movie in the timeline. Notice where the square is! It is on the left. Without hesitation, now click on Frame 20. Notice that the square is to the right. Click anywhere else on Frame 10, and notice the square finds its way back to its original, left position. 8. You may also play the movie at this point and see what kind of an output comes so that you get a picture of motion tween. 9. Click on Frame 1 and highlight all the frames between Frame 1 and Frame 20 or simply click on any frame between Frame 1 and Frame 20. While the frame(s) are selected, right click and select "Create Motion Tween:" 10. If everything worked out well, your highlighted frames will take on a purplish color with a large arrow leading from Frame 1 to Frame 20. Notice that before the motion tween, the box just vanished and appeared in a new position. Similarly, remember that the square between Frame 1 and Frame 20 just abruptly appeared at Frame 20 prior to the motion tween. With the motion tween applied though, notice that the abruptness was gone. The motion tween approximated the position the square or box would be during their quest, and made it more realistic - more animated. No more random disappearing and appearing acts. Tweening Guide Layer Tweening Motion Guide is nothing but moving your symbol in a predefined path such as curves or circles. Learn how to move Flash objects in circular, zig zag or curved paths using Flash motion guide. The special layer in Flash used with motion tween is the guide layer. Guide layers are used to draw a path for tweened objects to follow. In the first keyframe of a tween, the object is attached to the starting point of the guide, and in the second keyframe, it’s attached to the ending point. When the movie plays, the guided object will follow the line used in the guide layer, no matter how circuitous. Imagine the flight of a bumblebee buzzing among the flowers and a line the bee might follow. If you draw such a line, using the pencil, Bezier Pen, or Paintbrush tool, and then attach the bee object to that line, you’ll see the kind of crazy path of a bee. Guide Layers are always with an element. Guide layers are path for elements to move on. If you want to make a ball go in a circular path it will only be possible by the help of a guide layer. Guide layer are invisible paths in which you can make your element move. They appear just above the layer of the element you want to move. Moving an object along a path:- 1. Make the shape you want to move on a path. Convert it into a symbol by pressing F8. 2. Then at the bottom of the layers palette i.e. besides the timeline you will have three buttons-Insert Layer, Add Motion Guide and Insert Layer Folder. 3. Click on Add Motion Guide. You will see a guide layer appearing just above that layer. 4. Now go to the guide layer and create the path you want your image to move on by any tool. And then click on the snap to objects tool (magnet) in the tools palette. 5. Then select your element and drag it towards one end of the guide line made by you. You will see it will automatically stick to the end of the line. 6. Then Click on frame number 30 and press F6. 7. Select and drag your element to the other end of the guide line. 8. Now click on any frame between 1 and 30 and select motion tween in the properties palette. 9. Now test your movie by pressing Ctrl + Enter. Lets look at an another example to understand motion guide even better. The output of the example will be some what like the animation below. 1. Create a graphic symbol or drag a pre-existing graphic symbol from library onto the stage. Name the layer as "graphic". For this example I have imported a car image. 2. Right click on the "graphic" label and select "Add Motion Guide" from the pop-up window. 3. A new layer will appear on top of the "graphic" layer with the label "Guide:graphic" along with the guide icon. 4. Draw the path for your symbol in this new layer using pencil or line tool. For example: I drew a circle for my car. But make sure it has two ends i.e. make a small cut anywhere to get two ends. 5. Select frame 50 of guide layer and press "F5" to insert frames. 6. Now make sure that snap to objects is on. Then go to "Frame 1" of "graphic" layer and drag your symbol to one end of your path. While dragging, you will see a bubble on the symbol. Something like the one shown below. 7. Now go to "Frame 50" of "graphic" layer and press F6 to insert a new keyframe. 8. Now drag your symbol to other end of your path. Select any frame between 1 and 50 of your "graphic" layer. Right click and select "motion tween" from the pop-up menu. That's it, you are through. Press Ctrl + Enter to view your work. But the output will not be according to the way you want it. It can be done with the help of orient to path i.e. given as the next tutorial. For Animated Presentation Click here Tweening An Orient to Path 1. Import the image you want to move on a guide layer on to the stage and press F8 and make it into a symbol 2. Then at the bottom of the layers palette i.e. besides the timeline you will have three buttons-Insert Layer, Add Motion Guide and Insert Layer Folder. Click on Add Motion Guide. 3. When you click on Add Motion Guide you will see a guide layer appearing just above that layer. 4. Now go to the guide layer and on that layer create the path you want your image to move on by any tool. Make sure you don’t join the two ends i.e. always leave some gap between the two ends of you path. 5. Then click on the snap to objects tool (magnet) in the tools palette (by default it is on so do not switch it off). This will make your element stick to the path you made. 6. Then select your element and drag it towards one end of the guide line made by you. You will see it will automatically stick to the end of the line. 7. Now turn its head to the direction you want it to move. 8. Then Click on frame number 30 and press F6. And just above this layer on the guide layer press F5. 9. Select and drag your element to the other end of the guide line. Here you will not be able to recognize it because there is very less gap between the two end points. 10. Now click on any frame between 1 and 30 and select motion tween in the properties palette. 11. Now if you test your movie you will see that the element will move in the direction of the path we made but it will not be looking good because the element is still and is not turning on the turns. 12. So click on the first frame and check the box Orient to path in the properties panel. This orient to path makes your element turn in the direction of your path. 13. Now test your movie by pressing Ctrl + Enter. You will notice that the element moves in the direction of the path and also turns accordingly. Lets look at an another example to understand motion guide even better. The output of the example will be some what like the animation below. 1. Create a graphic symbol or drag a pre-existing graphic symbol from library onto the stage. Name the layer as "graphic". For this example I have imported a car image. 2. Right click on the "graphic" label and select "Add Motion Guide" from the pop-up window. 3. A new layer will appear on top of the "graphic" layer with the label "Guide:graphic" along with the guide icon. 4. Draw the path for your symbol in this new layer using pencil or line tool. For example: I drew a circle for my car. But make sure it has two ends i.e. make a small cut anywhere to get two ends. 5. Select frame 50 of guide layer and press "F5" to insert frames. 6. Now make sure that snap to objects is on. Then go to "Frame 1" of "graphic" layer and drag your symbol to one end of your path. While dragging, you will see a bubble on the symbol. Something like the one shown below. 7. Now go to "Frame 50" of "graphic" layer and press F6 to insert a new keyframe. 8. Now drag your symbol to other end of your path. Select any frame between 1 and 50 of your "graphic" layer. Right click and select "motion tween" from the pop-up menu. 9. Now go to the properties panel/inspector and check on the box Orient to path. This orient to path will make your element turn in the direction of your path. That's it, you are through. Press Ctrl + Enter to view your work. Now you will notice that the animation is working properly. The orient to path option made your car turn in the direction of the path and thus made it look more realistic. Tweening Easing in and Out You can also add some slow down and accelerating effects to your animation by using the easing in and easing out properties associated with motion tweening. Let's take our previous animation and let's add some easing in and easing out effects to it. The easing out and in slider can be found in the properties panel after you selected a keyframe on the main timeline Lets understand easing better with the following example:- 1. Make a ball (shape) and convert it into a symbol (preferably a movie clip). 2. Go to frame number 30 and press F6. 3. Now press F6 in frame number 15 and move your ball(symbol) upwards to give it a bouncing effect.. 4. Now select any one frame between 1 and 15 and give motion tween. Then select any frame between 15 and 30 and give motion tween again. 5. Now select the first frame and select ease in the properties panel and give it 100. 7. Now you may test your movie. The following example will help you understand the difference between the negative and positive values of ease. 1. Create a new 400 x 400 Flash document with a frame rate of 24. 2. Draw a basic circle and move it to the upper left corner of the scene and convert it into a movie clip symbol. 3. Create a motion tween on the first frame. 4. Now you are going to create 4 more keyframes and each time we are going to move the circle to a corner of our stage. Have a look at the pictures below. 5. You will notice that we don't place the last keyframe on frame 50 but on frame 49, we do that to avoid a 1 frame delay in the animation since frame 1 and frame 50 would display the circle at the same position for 2 frames. 6. Now give the appropriate easing in and out setting by selecting Frame Number 1, 15, 30 and 45 and giving 100, -100, 100, -100 respectively. A 100 will make the element move fast in the starting and then slow at the end whereas a -100 will make the element go slow in the beginning and faster towards the end. Tweening Shape Tweens Unlike a motion tween, a shape tween requires that you start and end with a native Flash shape, rather than a symbol. Flash uses the vector information of the shape (or shapes) in the start keyframe and the changed vector information of the shape in the end keyframe to construct intermediate frames. Shape tweens can be used to morph objects from one shape to another, or they can be used to quickly set up a tween when one shape, or a group of shapes, shifts position or size or color (without having to change the content to a symbol first). Shape tweens often don't work well when the shape in the start keyframe is very different (especially in number of vectors that define it) from the shape in the last frame. This tutorial will explain how to create a shape tween and help you understand more about shape tweens. Your animation, towards the end, will look a bit similar to the following animation: 1. Click on Frame1 and make a circle. Then click on Frame 15 and delete the circle and make a rectangle. Then click on Frame 30 and delete the rectangle and make a triangle. Then click on Frame 45 and delete the triangle and make a star. Then click on Frame 60 and delete the star and make a square. Then click on Frame 75 and delete the square and make a circle. 2. Once you have done that select any frame between all the keyframes and give shape tweening to all of them. Tweening Shape Hints Shape hints serves as guides for morphing from one shape to another. With the help of shape hints we can control the morphing of objects. Shape hints allow you to control the shape tweening. This means that you select certain points on the element you want to shape tween, and then select accordingly select the points on the element you want the tweening to end with. This way you are in charge of which points on the start object should become which on the end object. Shape hints contain characters to identify corresponding points on the start and end objects. You can add up to 26 different shape hints in a shape tweening. You can create Shape Tweens on any element. You just need to remember to break apart the element before doing so if it’s not a shape. Controlling Shape Tweens With Shape Hints When you set up a shape tween, you tell Flash what the first keyframe should look like and what the last keyframe should look like. Flash knows it has to get the animation from one shape to the other, but it doesn’t know how to get there, so it tries to take the path of least resistance. Sometimes the object will try to fold over itself instead of doing what you want it to do. If this happens, you can add shape hints. A shape hint tells Flash where a specific place in the object should start and end during the animation. A ten-frame animation of a shape tweened triangle might look like: Notice how the animation folds itself? Now we will add Shape Hint to this element and make it tween in a better precise manner. We’ll add a shape hint to keep the bottom left corner on the bottom. To Add a Shape Hint 1. Click the first frame in the animation sequence. 2. Click MODIFY-> SHAPE > ADD SHAPE HINT A shape hint, labeled "a" will pop into the middle of the object. 3. Drag the shape hint to a place in the object. Flash will pay attention to where you drag the shape hint. You are designating the area that you wish to control. Next, you will specify where you want that specific place on the shape top end up when the animation is finished. Shape hints work best if you place them in counterclockwise order beginning at the top left corner of the shape. 4. Click the next keyframe in the animation sequence. You’ll notice that another shape tween labeled "a" is already waiting for you when you get there. 5. Drag the shape hint. In step 3, we set the starting point for the lower left corner, now well need to set its ending point. In the following example, I dragged the shape hint into the corner. Now the animation will play correctly! Lets see another example Make sure Snap to Objects is enabled, and then create a square on Frame 1 of your Timeline. Now add an empty keyframe on Frame 24 and place a circle of similar size to the Stage. Add a Shape Tween to the frame span so it will morph from a square to the circle. Watch the animation and see how Flash morphs from one to the next. Now go to the first keyframe of the tween and press Ctrl + Shift + H. You'll see a small red circle with an "a" in it appear. This is called a shape hint. Press CTRL + SHIFT + H again. Drag the "b" circle up to the bottom-left corner of the square until it snaps in place. Drag the "a" to the bottom-right corner. Go to Frame 24 and drag the "b" to the top-right edge of the circle and the "a" to the top left. They should snap in place and turn green to indicate that they're set. When you replay the animation, you'll see that the same animation morphs in a whole new way. Flash matches the point of each shape hint on each keyframe to that of the next. This enables you to actually control the way your shapes animate. Add as many hints as you like and right-click any of them to remove one or all of them. It doesn’t get much more powerful than that. The original 20-frame tween and square showing shape hints Animation on Frame 7 after adjusting shape hints Animation on Frame 14 after adjusting shape hints Animation on Frame 20 after adjusting shape hints For Animated Presentation Click here Tweening Flash Tint Tweening With Tint Tweening you can change the color of an object. In this example you will learn how to change the color of an object. 1. Select Insert > New Symbol after you have opened up a new stage in Flash. To add Tint effects, the object must be a symbol. 2. Name the symbol "changecolor" and select the Graphic option in Behavior. Click OK. You will now be taken to the symbol generator part of the Flash program, though it will look just like what you have been used to working with - just notice the + sign in the middle of the stage - that is your first clue you are in the symbol generator. Here you create symbols. Symbols can be dragged to the stage of your movie after you have created them. 3. Select the Text tool from the toolbox. Choose a nice thick font - for this I used Comic Sans MS, Text > Size > 36 and Bold. 4. Click in the work area and write "West High School Panthers" - then use the arrow tool to move it to the middle of the work area 5. Jump back to the movie. Do this by clicking on scene 1 6. Insert the symbol you just created into the movie - to do this choose Window > Library. When the menu shows up, move it to the right side of your screen. Select the "changecolor" symbol and drag it into the middle of the Stage. 7. Insert a keyframe in Frame 15 and in Frame 30. 8. Go to Frame 15. Look to the bottom in the Properties section and locate Color. 9. Choose Tint from the drop down menu. A color map will show. Set the colors to R=255, G=0, B=0 or choose a red color from the color map. Make sure to slide the percentage bar all the way up to 100%. 10. Click on the Timeline any place between Frame 1 and Frame 15. Then right click and choose Create Motion Tween. 11. Click on the Timeline any place between Frame 15 and Frame 30. Then right click and choose Create Motion Tween. 12. Choose Control > Test Movie or just hit Enter to watch your movie. Notice that when you are in the Test Movie mode that the pencil line you drew doesn't show up... For Animated Presentation Click here