Flash can create two types of tweened animation using timeline:
Motion Tween & Shape Tween
Creation of Motion/Shape tween using timeline is the basics of Flash.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. For example in the above demonstration, I have converted the pencil object to a Symbol. Provided Flash with its initial and the end position, intermediate tweening is done by Flash. Motion Tween animation is as simple as that :)Okay, you ready to learn how to create motion tween. All you have to do is just follow this tutorial step by step.Please note: 1. You need to have Flash Player 7.0 installed to view the Flash animation. 2. Flash MX 2004 must be installed in your system to download the .fla file.
Steps to follow:
Open a new flash file (Ctrl+N). New Document window will appearSelect 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. Import your image onto stage, upon which you would want to implement motion tween. File>Import>Import to Stage, or just press (Ctrl+R). Or you can even draw your own object, you can either choose Rectangular tool or Oval tool from the tool box and draw your desired shape.
Now select your object on the stage and press F8 to convert this image to a Symbol. Convert to Symbol window will pop-up. Name your Symbol what ever you like.Select Graphic behavior and press OK.Note: You can create motion tween only on symbols. So any object upon which you would want to implement motion tween, First convert the object to a Symbol.
Right now your Symbol is in frame1 of Layer1. Select frame 20 and press F6 to insert a new keyframe.
Still keeping playhead on frame 20, move your Symbol to any other position other than the present one.
Select any frame between, 2 to 19 and select Motion from the tween pop-up menu in the Property inspector. Now your Layer will look something like the one shown below.
Wednesday, April 9, 2008
Sunday, April 6, 2008
FLASH BASICS
HTML is ideal for creating static websites where text and images are placed at fixed positions. But it doesn't really support dynamic sites, where text, images, and animations are moving around on the screen.Traditionally, these effects were achieved with animated GIF images or java applets.
FLASH DRAWING
The drawing tools in Flash let you create and modify shapes for the artwork in your movies. For an interactive introduction to drawing in Flash, choose Help > Lessons > Drawing in your Flash program. The tools for painting are kept in the "Tools" bar, usually positioned at the left top of your Flash Screen..On the following pages we will guide you through the use of each of these tools, starting with the simplest.But before going through the different tools, we will look at the way Flash handle drawings.The most important thing to understand is the distinction between outlines and fills.When you draw a line there is no fill - only the outline.When you draw a rectangle (or a circle) you actually draw two things: The outline (border) and the fill. Unlike most other programs, Flash doesn't automatically combine these two into one object.
FLASH BUTTONS
The only object type in Flash, that can detect mouse events is the Button object.This means that there is only one way to make buttons with Flash: Creating a button object.This may sound a bit too simplified, but many are confused by the techniques behind the more sophisticated buttons, that we will cover later in this tutorial. Creating a button that changes upon mouseover-events is extremely simple. All you really have to do is to tell Flash how you want the button to look 1) in normal state, 2) when the mouse moves over the button and 3) when the user clicks the button.Once you've learned this 3-step technique you can create buttons in seconds.However, the buttons you create this way are: simple (that's why they're so easy to make anyway).If you want to create really fancy buttons you should use a slightly different technique based on movie clips.
THE THREE DIFFERENT OBJECT TYPESFlash handles three types of objects:
Graphics
Buttons
Movieclips
Graphics objectsYou probably allready noticed that when you edit Graphics objects you have the entire timeline available for it.This means that Graphics objects aren't limited to static elements. You can easily create looping animations - simply by creating Graphic objects that uses more than one frame in the timeline.Button objectsButtons are different from this. When you create a Button object you only have four frames in the timeline. One is for drawing the button in normal state. Another is for drawing the button when a mouse-over is detected. The third is for drawing the button as you want it to look when the user clicks the button. The last frame is used to specify which area you want mouse events to react to. That is: you can create a button that only reacts to mouseevents on certain areas of the drawing, - like the center of the button for example.Movie clip objectsThe final object-type: Movieclips, is similar to Graphics objects - on the surface.In both cases you can create entire animations that can be dragged onto your main movie. But while animations made as Graphics objects simply loops over and over you can control the Movieclips completely.
THE TRICK BEHIND FANCY FLASH BUTTONSYou can create more fancy buttons based on very simple programming. (You do not have to be a programmer to learn to do this!).Actions added to frames give complete access to controlling movieclips. This means that you can use "Play", "Stop", and "Goto Frame" commands on a movieclip, that is triggered when a certain mouse event is detected on a button.Now - if the button is invisible and placed on top of the movie clip it will work as if the movieclip itself was able to detect mouse events.
FLASH TWEENINGS
The term "Tweening" is derived from "in between".Sometimes you want to add an effect that is graduated over several frames. For example, moving a car from the left side of the movie to the right side.Instead of moving the car a little bit on each frame, you can simply:
position the car on the first frame,
then insert a keyframe where the car should stop
and finally tell Flash to tween between the two keyframes.Tweening simply means going from one keyframe to another while taking small steps for each of the ordinary frames in between.
FLA ARCHIVE
This is the place to get inspired.Browse through our FLA archive, when you find something you like, click the link to download the Flash source file (FLA).You can open the file in your Flash editor and see how we created the effects.
HTML is ideal for creating static websites where text and images are placed at fixed positions. But it doesn't really support dynamic sites, where text, images, and animations are moving around on the screen.Traditionally, these effects were achieved with animated GIF images or java applets.
FLASH DRAWING
The drawing tools in Flash let you create and modify shapes for the artwork in your movies. For an interactive introduction to drawing in Flash, choose Help > Lessons > Drawing in your Flash program. The tools for painting are kept in the "Tools" bar, usually positioned at the left top of your Flash Screen..On the following pages we will guide you through the use of each of these tools, starting with the simplest.But before going through the different tools, we will look at the way Flash handle drawings.The most important thing to understand is the distinction between outlines and fills.When you draw a line there is no fill - only the outline.When you draw a rectangle (or a circle) you actually draw two things: The outline (border) and the fill. Unlike most other programs, Flash doesn't automatically combine these two into one object.
FLASH BUTTONS
The only object type in Flash, that can detect mouse events is the Button object.This means that there is only one way to make buttons with Flash: Creating a button object.This may sound a bit too simplified, but many are confused by the techniques behind the more sophisticated buttons, that we will cover later in this tutorial. Creating a button that changes upon mouseover-events is extremely simple. All you really have to do is to tell Flash how you want the button to look 1) in normal state, 2) when the mouse moves over the button and 3) when the user clicks the button.Once you've learned this 3-step technique you can create buttons in seconds.However, the buttons you create this way are: simple (that's why they're so easy to make anyway).If you want to create really fancy buttons you should use a slightly different technique based on movie clips.
THE THREE DIFFERENT OBJECT TYPESFlash handles three types of objects:
Graphics
Buttons
Movieclips
Graphics objectsYou probably allready noticed that when you edit Graphics objects you have the entire timeline available for it.This means that Graphics objects aren't limited to static elements. You can easily create looping animations - simply by creating Graphic objects that uses more than one frame in the timeline.Button objectsButtons are different from this. When you create a Button object you only have four frames in the timeline. One is for drawing the button in normal state. Another is for drawing the button when a mouse-over is detected. The third is for drawing the button as you want it to look when the user clicks the button. The last frame is used to specify which area you want mouse events to react to. That is: you can create a button that only reacts to mouseevents on certain areas of the drawing, - like the center of the button for example.Movie clip objectsThe final object-type: Movieclips, is similar to Graphics objects - on the surface.In both cases you can create entire animations that can be dragged onto your main movie. But while animations made as Graphics objects simply loops over and over you can control the Movieclips completely.
THE TRICK BEHIND FANCY FLASH BUTTONSYou can create more fancy buttons based on very simple programming. (You do not have to be a programmer to learn to do this!).Actions added to frames give complete access to controlling movieclips. This means that you can use "Play", "Stop", and "Goto Frame" commands on a movieclip, that is triggered when a certain mouse event is detected on a button.Now - if the button is invisible and placed on top of the movie clip it will work as if the movieclip itself was able to detect mouse events.
FLASH TWEENINGS
The term "Tweening" is derived from "in between".Sometimes you want to add an effect that is graduated over several frames. For example, moving a car from the left side of the movie to the right side.Instead of moving the car a little bit on each frame, you can simply:
position the car on the first frame,
then insert a keyframe where the car should stop
and finally tell Flash to tween between the two keyframes.Tweening simply means going from one keyframe to another while taking small steps for each of the ordinary frames in between.
FLA ARCHIVE
This is the place to get inspired.Browse through our FLA archive, when you find something you like, click the link to download the Flash source file (FLA).You can open the file in your Flash editor and see how we created the effects.
Subscribe to:
Posts (Atom)