Wednesday, September 28, 2011
Saturday, September 24, 2011
Working with BUTTONS in Flash
Buttons are a very common element of any application. Be it an e-game, an online submission form, or even a page navigator, usually the buttons control the flow of the application. This post mainly deals with creation of button, and a hands-on example of it.
Why do we need buttons in our application?
Buttons are mainly "event dispatchers". A dispatched event always has some purpose and so does the click of a button. Some action is always associated with a button click. Let us take a very common example. All of us use google search engine very often. After typing our search words, we either press "Enter" key or press the "Search" button. What does this button do? The button notifies the engine that the search entries are done, so perform the next action, that is, output those results which match with our search keywords. So, button dispatches a click event here. Click event is one of the mouse events (that we have already discussed in one of our previous posts).
Steps to create a simple button:
1. Open flash IDE (CS3/CS4 or whatever is the latest version that we are using)
2. Select a text tool and write some text on the stage.
3. Right click on the text, select "Convert to Symbol"
4. Select Button from the drop-down and give some name to the symbol.
5. Give some instance name to this symbol.
6. Double click on this newly created button. You would observer that there are 4 frames in it namely "Up", "Over", "Down" and "Hit". These are default fields for any button. As the name suggests, all of them are button states. Notice that only the "Up" frame has some content in it.
7. Click on "Over" frame, press F6 key. A keyframe gets created with the content same as the "Up" frame. Change the text to distinguish between the two frames.
8. Similarly, create a keyframe in the "Down" state and keep a different text with a different color there.
9. The last frame "Hit" defines the hit area of the button which is sensitive to the mouse click, or the area of the button which we want to respond to any click.
10. Publish the file and you see a simple button, in hovered, hit, and released states. Your file, when published, would replicate the following:
Why do we need buttons in our application?
Buttons are mainly "event dispatchers". A dispatched event always has some purpose and so does the click of a button. Some action is always associated with a button click. Let us take a very common example. All of us use google search engine very often. After typing our search words, we either press "Enter" key or press the "Search" button. What does this button do? The button notifies the engine that the search entries are done, so perform the next action, that is, output those results which match with our search keywords. So, button dispatches a click event here. Click event is one of the mouse events (that we have already discussed in one of our previous posts).
Steps to create a simple button:
1. Open flash IDE (CS3/CS4 or whatever is the latest version that we are using)
2. Select a text tool and write some text on the stage.
3. Right click on the text, select "Convert to Symbol"
4. Select Button from the drop-down and give some name to the symbol.
5. Give some instance name to this symbol.
6. Double click on this newly created button. You would observer that there are 4 frames in it namely "Up", "Over", "Down" and "Hit". These are default fields for any button. As the name suggests, all of them are button states. Notice that only the "Up" frame has some content in it.
7. Click on "Over" frame, press F6 key. A keyframe gets created with the content same as the "Up" frame. Change the text to distinguish between the two frames.
8. Similarly, create a keyframe in the "Down" state and keep a different text with a different color there.
9. The last frame "Hit" defines the hit area of the button which is sensitive to the mouse click, or the area of the button which we want to respond to any click.
10. Publish the file and you see a simple button, in hovered, hit, and released states. Your file, when published, would replicate the following:
Once your button is created, you can associate multiple mouse events to it (as buttons actions are mostly mouse sensitive). The mouse events are already discussed in one of the earlier posts : Capturing Events in Flash : Part II - Creating Event Handlers
Tuesday, September 20, 2011
Frames and Frame Rates
Frames and animations are very closely related. All the animations happen in frames, or frames make the animation happen. Let us understand it like this:
I am sure all of us have watched at-least one cartoon movie. Cartoon movies have been there for like decades. Even before the time when the technological concept for animation was known to us, people have been watching them. Cartoon movies are full of animation, hence they are also called animated movies. But how were they made in those years? Animated movies were made on frames, not the flash frames, but the transparent sheets that we put under the projector machine and view on the screen. The artists use to sketch the cartoon frames on those transparent sheets, which were projected on big screens. All the movements of the cartoon characters were captured in those frames. The projector used to run the bundle of frames so fast, that it looked like a perfect animation.
Flash makes the life easy, as we can easily change any graphic image as we need. Each of these graphics are kept in successive frames, and once the file is run, we see an animation on our computer screens. The clarity of animation depends a lot on the frame rate at which we run it.
What is a Frame?
A frame, in a timeline, is the snapshot or drawing of the currently worked on instructions executed by the flash player. A frame can contain any flash symbol, it can contain action script code, and can even have a label name for the user's convenience.
There is something called Key frame. A key frame is any drawing that defines smooth transition between 2 points. The main use of key frames comes into picture with tweening effects (as explained in the older posts). If not tweening, then key frames with different pictures/graphics in a single row of a timeline can bring out a good animation.
What shall be the number of frames for a good animation?
To create an illusion of a motion we need to have a transition of the moving object from one point to another. It all depends on the intermediate frames, that how jerky or how smooth the transition happens. Usually, more number of intermediate frames give a smooth transition effect, as even the minute changes of the motion are depicted in each frame picture. This is true when we do not consider the frame rate for our animations (which is explained in the next section of this post).
Frame Rates
The frame rate determines how many frames are played per second. This value is measured in frames per second, commonly referred to as, fps. This is calculated with the formula below:
Frames Per Second = Number of Frames
-----------------------
Time in Seconds
The higher the fps value, faster is the animation played. Low values of fps usually cause slow and jerky animations. The frame rate solely depends on the kind of animation that we make. Keeping a higher frame rate for complex image animations makes the computer to do much work as compared to the work with lower frame rate. High frame rate for simple content doesn't cause any problems usually.
In earlier versions of flash the default fps rate was 12, but in the recent versions it is 24. Means 24 frames are played in every 1 second.
Modifying the fps values with the help of UI and programmatically
The most common way to set our own fps value is by changing the value in the Properties panel and making it global for our entire application. Check the screenshot below:
I am sure all of us have watched at-least one cartoon movie. Cartoon movies have been there for like decades. Even before the time when the technological concept for animation was known to us, people have been watching them. Cartoon movies are full of animation, hence they are also called animated movies. But how were they made in those years? Animated movies were made on frames, not the flash frames, but the transparent sheets that we put under the projector machine and view on the screen. The artists use to sketch the cartoon frames on those transparent sheets, which were projected on big screens. All the movements of the cartoon characters were captured in those frames. The projector used to run the bundle of frames so fast, that it looked like a perfect animation.
Flash makes the life easy, as we can easily change any graphic image as we need. Each of these graphics are kept in successive frames, and once the file is run, we see an animation on our computer screens. The clarity of animation depends a lot on the frame rate at which we run it.
What is a Frame?
A frame, in a timeline, is the snapshot or drawing of the currently worked on instructions executed by the flash player. A frame can contain any flash symbol, it can contain action script code, and can even have a label name for the user's convenience.
There is something called Key frame. A key frame is any drawing that defines smooth transition between 2 points. The main use of key frames comes into picture with tweening effects (as explained in the older posts). If not tweening, then key frames with different pictures/graphics in a single row of a timeline can bring out a good animation.
What shall be the number of frames for a good animation?
To create an illusion of a motion we need to have a transition of the moving object from one point to another. It all depends on the intermediate frames, that how jerky or how smooth the transition happens. Usually, more number of intermediate frames give a smooth transition effect, as even the minute changes of the motion are depicted in each frame picture. This is true when we do not consider the frame rate for our animations (which is explained in the next section of this post).
Frame Rates
The frame rate determines how many frames are played per second. This value is measured in frames per second, commonly referred to as, fps. This is calculated with the formula below:
Frames Per Second = Number of Frames
-----------------------
Time in Seconds
The higher the fps value, faster is the animation played. Low values of fps usually cause slow and jerky animations. The frame rate solely depends on the kind of animation that we make. Keeping a higher frame rate for complex image animations makes the computer to do much work as compared to the work with lower frame rate. High frame rate for simple content doesn't cause any problems usually.
In earlier versions of flash the default fps rate was 12, but in the recent versions it is 24. Means 24 frames are played in every 1 second.
Modifying the fps values with the help of UI and programmatically
The most common way to set our own fps value is by changing the value in the Properties panel and making it global for our entire application. Check the screenshot below:
As already mentioned earlier, the fps value in the latest version of flash have been kept 24, which is quite good to work with.
There may be a case when you might want to change the fps value dynamically or when you application is running. With AS 3.0 programming, we can easily access the frame rate. This is how the fps value is accessed in AS 3.0
stage.frameRate
Stage property can be accessed from anywhere, hence we can change the fps value whenever we want to.
stage.frameRate = 30;
We have a very common flash interview question, which talks about frame rates of our swf files.
The question says, that we have 2 swf files, A and B. A has frame rate of 20 and B has 30. B is loaded into A. How will it affect the frame rate of B.
The answer is very simple and obvious. Since B is loaded into A, A becomes the parent movie clip for B. So the global fps value for A now becomes the fps value for B as well. Hence B will also run at the same rate as A does, which is 20. This means, the file B will run at a slower rate in A, as compared to when running alone. If the fps values are reversed for A and B, and then B is loaded into A, then B would run at a faster rate (30 fps). So it all depends on the frame rate of the parent swf file.
However, it is very well possible to play the movie clip inside the parent movie clip retaining it's own frame rate. This can be achieved programmatically. Take an example, we have a parent movie clip which runs at 24 fps, there is another movie clip, B, which runs at 8 fps. When B is loaded into A, we want that B should run at it's own frame rate. We use a simple logic here. Divide the fps of A by fps of B. We get '3'. So, when A runs 3 frames, B should run 1 frame. Check the following piece of code:
frame_count = 0;
bMovie.stop( );
onEnterFrame = function( )
{
frame_count++;
if (frame_count >= 3 && bMovie._currentframe < bMovie._totalframes)
{
bMovie._currentframe++;
bMovie.gotoAndStop(bMovie._currentframe);
frame_count = 0;
}
}
stop( );
With the encounter of every new frame of the main movie, A, the counter "frame_count" will increment by 1. When the count reaches 3, the next frame of B is played.
Thursday, September 15, 2011
Difference between a Graphic and a MovieClip
Any flash symbol can be either of the following:
1. Button
2. Movie Clip
3. Graphic
Button will be part of later posts. This post mainly deals with movie clip and graphics. First let us understand the two.
Both movie clips and graphics can be used to create animations. However, there are many differences between them. A graphic is a static object but movie clips can be dynamically worked upon. Only movie clips can have instances and instance names. Consequently they can be uniquely identified using the code. Whenever any movie clip is accessed, a copy of it is created from the flash library and the animation is performed over it. This copy so created could be blurred, slightly distorted, skewed, or can have multiple differences from the original movie clip, but only during run-time. This is just to cut down the computer memory usage by keeping the size of the swf file small.
Lets analyze the first statement, that both these symbols can contain animations.
In a movie clip, the animation is done on and by the graphics only. Here, all the parts of any animating body can be controlled independently, as they are part of separate timelines and also because we can have timeslines inside the main timesline of the movieclip. But for the graphics, all the animations happen in a single timeline. This makes the graphics less dynamic.
In other words,
Put any graphic image in the first frame of the main timeline. Place this image with slight variation in the successive frames for, say, 25 frames. If you publish this file, you would see some animation running through frame 1-25. Try deleting 10 frames from this, and the animation runs through only first 15 frames. If we delete all other frames except the first, and then publish the file, we see a static image, with no animation. In all the above cases, the animation runs in loop, from 1st frame to the last, and then back to first frame.
Suppose we convert any symbol to a movie clip, no matter, how many frames we add or subtract from the main timeline, the movie clip runs in loop in its own time line.
1. Button
2. Movie Clip
3. Graphic
Button will be part of later posts. This post mainly deals with movie clip and graphics. First let us understand the two.
Both movie clips and graphics can be used to create animations. However, there are many differences between them. A graphic is a static object but movie clips can be dynamically worked upon. Only movie clips can have instances and instance names. Consequently they can be uniquely identified using the code. Whenever any movie clip is accessed, a copy of it is created from the flash library and the animation is performed over it. This copy so created could be blurred, slightly distorted, skewed, or can have multiple differences from the original movie clip, but only during run-time. This is just to cut down the computer memory usage by keeping the size of the swf file small.
Lets analyze the first statement, that both these symbols can contain animations.
In a movie clip, the animation is done on and by the graphics only. Here, all the parts of any animating body can be controlled independently, as they are part of separate timelines and also because we can have timeslines inside the main timesline of the movieclip. But for the graphics, all the animations happen in a single timeline. This makes the graphics less dynamic.
In other words,
The timeline of a Graphic Symbol instance is dependent on the timeline of the movie the instance is placed in.Let us try a fun example.
The timeline of a Movie Clip instance is independent of the timeline of the movie the instance is placed in.
Put any graphic image in the first frame of the main timeline. Place this image with slight variation in the successive frames for, say, 25 frames. If you publish this file, you would see some animation running through frame 1-25. Try deleting 10 frames from this, and the animation runs through only first 15 frames. If we delete all other frames except the first, and then publish the file, we see a static image, with no animation. In all the above cases, the animation runs in loop, from 1st frame to the last, and then back to first frame.
Suppose we convert any symbol to a movie clip, no matter, how many frames we add or subtract from the main timeline, the movie clip runs in loop in its own time line.
Wednesday, September 14, 2011
Subscribe to:
Posts (Atom)