Flash is one of those wonderful programs that can be put for a plethora of uses. But one of the most common things people want to be able to do with it is make cartoons and animations. There's a lot of ways to do this, but I'm going to show you a very simple, scripting free way of bringing some characters to life.
[ you'll be making something similar to what is shown above ]
Steps to Create Animation
Before we begin our animation, we need a character. This little guy below is one that I quickly drew using a similar process to that described in another tutorial, Line Art In Flash. He looks a little bit lost, bless him. Let's call him Dexter.
[first draft of character]
At the moment, Dexter is just a collection of lines and fills, and not much good for animating. What we need to do is break up the character into his component parts (ouch!), and save them all as Library items.
Of course, the easiest way to do this is to simply draw each body part on a different layer as you go. That way, you can see how the fit together in relation to each other, get the sizes right etc etc. But if you've already drawn the character, then you'll just have to get your mouse dirty, get in there and pull poor Dexter to pieces. Select the lines and fills that make up a body part (say the head) then cut and paste into a new symbol. In a lot of case, you may find that a piece isn't complete, where it intersected with other areas. If that happens, then you just add some more lines and complete the part.
[individual symbols]
You can see from the picture above that Dexter is now split up into sections. Notice that although we only had one original eye image, I've duplicated the symbol and made three more versions, each with the lids closing. We need this to make him blink. I've also made a short movie clip for the mouth, containing a couple of lines / states for a talking mouth. A little tip for arms - make sure that the registration point is located at the 'shoulder' joint of the image. This makes it easier when you come to rotate them.
Make sure you have all your symbols saved in the library, and a clear Stage. Now, we can begin to create a small animation.
[your eyes go in this order]
[layer structure]
[animation timeline]
And that's the basic principle. It's very handy to make a small collection of body parts (not literally, I do mean Flash images here) in your library. Draw various positions of arms, so you'll always have the one you need on hand. Different expressions can be made by using different mouths and eyes, so have a good selection of these too.
Certain motions (like the watch checking) can be put into small clips, then re-used as and when you need them, so you can build up a collection of mini movie actions too.
Add more characters, backgrounds, anything you like. Here's the .fla file for the basic movie (including a selection of other characters for you to break up) ready for you to animate and warp to your hearts' desire.
|
In my spare time, I often browse through the threads located in the "best of" forum in the kirupaForum. An interesting effect that I discovered during my random scavenger hunts was a vibration effect posted by suprabeener.
I modified the effect slightly by adding some extra features, and the following animation shows you the result of my modification:
[ the vibration effect ]
Here's How:
This tutorial, as you may presume, will help you to create the vibration effect above. I will also take care to explain the code behind this effect so that you can hopefully create a cooler animation on your own:
[ draw a small circle ]
[ copy and paste the above code ]
[ give the circle the instance name circle ]
for (var i = 0; i<25;>
[ copy and paste the above code ]
The Code Explained
As mentioned earlier, the following few sections will help you to better understand why the code causes the circle to vibrate, change shape, change location, and change transparency.
Let's start with the major lines code in the onClipEvent(load):
//movie width/height
height = 200;
width = 300;
The above variables represent the height and width of your movie. If your movie's width and height are not 300 pixels wide by 200 pixels tall, you must change the values to represent your movie's dimensions.
//------------------------//
//makes everything random //
//------------------------//
this._x = Math.round(Math.random()*width);
this._y = Math.round(Math.random()*height);
var temp = this._alpha=Math.random()*100;
this._xscale = this._yscale=temp;
The first two lines place your circle movie clip in a random location on your movie. Notice the appeareance of the width and height variables in the first and second lines. Those variables help to keep the randomness of the Math.random() confined to the dimensions of your movie.
In the third line, I declare a variable called temp, and I initialize the temp variable to the value of this._alpha which equals a random number up to 100. Instead of spanning this line over several lines, I found a common value (the variable temp) and combined everything into one line. Nothing too complicated I hope!
In the fourth line, I set the scale of the circle equal to the value of the variable temp declared in the previous line. Since Flash MX does not have (as far as I know) a _scale property, I have to use both the horizontal and vertical scale properties: _xscale and _yscale. Both of those properties are set to the same value of temp so you don't have a skewed circle with a different horizontal/vertical stretch.
//setting initial position
cx = this._x;
cy = this._y;
These lines of code set the initial x and y position of the movie clip. You will see later that these variables act like an anchor that tell the vibration effect where it's source is.
Now, we venture to the chaotic code of onClipEvent(enterframe):
//causes the object to be offset
this._x = cx+(1+Math.random()*5);
this._y = cy+(1+Math.random()*5);
The two lines are largely responsible for creating the vibration effect. The current position of the movie clip is set to its initial position as determined by cx and cy in the load event. With the initial position solidly anchored, the x and y positions are offset by the value of whatever the output of 1+Math.random()*5 is.
|
A very cool defect I notice on older movies and films is the film grain effect caused by the aging of the actual film reels. While most would consider that to be a flaw, I take the converse of that view and think it is a really nifty effect. After all, one person's perception of a flaw is another person's idea for a Flash MX 2004 tutorial.
The following animation shows the film grain effect (or defect?) applied to a picture from Easter Island:
[ the film grain effect ]
The tutorial isn't too complicated, but it does require one to pay attention to minor details to help make a really convincing film grain effect. Here's how:
[ select the Ink option for the Pencil Tool]
[ random dots and dashes ]
 | Drawing the Vertical Lines | |
| ||
Well that's all there is to this effect. Adding an actual image would make the effect stand out even more. If file size is no concern, you may even want to incorporate actual video files.
I have provided the source files for your use:
 | download fla |
Ever wanted to pause at the best bit in your animation? Or maybe let the viewer pause, and look in detail at your well crafted animation? Well in this tutorial, I shall be showing you how to add a Pause, and play button into your animation!
[This is what you will be creating]
How To Make It Happen
[ Try to stay only within the animations layer for your designs]
[*If you are not following the .FLA File , You should create two buttons called Play and Pause]
- on (press) {
- stop();
- }
- on (press) {
- play();
- }
Congratulations! You have just incorporated buttons into your animation!
The Theory
What this does, is it tells the animation to stop on it's current frame. OnRelease tells us that, when the button is released, it will do the next command. The next command is Stop(); which tells it to stop on the current frame.
This tells the movie to play again. As explained above, OnRelease tells the button that, once it is released, it should do the next command. Play(); tells the animation that it can start to run again.
 | Note | |
| ||
You can download the final source also:
 | Download ZIP |
It seems everywhere you look now has some form of complex button. Most buttons that have an animation when rolled over and an animation when you roll out are done with some form of this concept that I intend to share with you.
If you understand basic Flash concepts and just a smidgen of Actionscript, you will catch on in no time.
Before we get started, take a look at what will be created. It may not look like much, but from this one simple concept, sites like " The Life Aquatic" movie site are possible.
[ an example of what you will create ]
Here is How
Create a new Flash document.
Open up the document properties by pressing ctrl+j (cmd+j on Mac) and change the stage size to 100x100. Change the Frame Rate to 30.
Rename layer 1 on the main timeline to complexButton. The main timeline should now look like this:
Create a new movieclip by pressing ctrl+F8 (cmd+F8 on Mac). Name it mc_complex.
Double click mc_complex in the library to edit the symbol. Select the Oval Tool(o) and make a 30x30 circle on the stage. In the properties panel set the x and y values for that circle to 0.
Double click the circle to select the Fill and Stroke. Press F8 to convert it to a symbol so we can tween it. Make it into a graphic symbol and name it gr_circle:
Still editing the mc_complex movieclip select frame 15 and press F6. This inserts a keyframe. Resize the circle a little bigger than what is there. I went with 40x40.
Right click on any frame between the two keyframes on the timeline and select Create Motion Tween.
Create a new layer and call it actions. Insert a blank keyframe(F7) on frame 15. The timeline for mc_complex should now look like this:
Select the first frame of the actions layer. Type this code in the actions panel:
- //stop();
- this.onEnterFrame = function(){
- if(rewind == true){
- prevFrame();
- }
- }
- this.onRollOver = function(){
- rewind = false;
- play();
- }
- this.onRollOut = function(){
- rewind = true;
- }
- this.onRelease = function(){
- getURL("http://www.kirupa.com","_blank");
- }
Select frame 15 of the actions layer, Type this code in the actions panel
- stop();
Navigate back to the root timeline. Put an instance of mc_complex from the library onto the stage.
Save the flash document and test your movie(ctrl + enter). There you have it, a button that animates on rollover and on rollout.
Now lets look at the code:
- stop();
- this.onEnterFrame = function(){
- if(rewind == true){
- prevFrame();
- }
- }
The first stop command just stops the movieclip from playing (so the animation doesnt loop). What the onEnterFrame event handler is doing is checking to see if rewind is set to true. If it is, the animation plays backwards until it reaches a stop.
- this.onRollOver = function(){
- rewind = false;
- play();
- }
The onRollOver event handler does two things, it sets rewind to false so that the onEnterFrame event handler doesn't execute the prevFrame script. The other thing the onRollOver does is play the animation. So when you roll over the button, rewind gets set to false, then the animation plays and you see the button grow until the playhead hits the stop command on frame 15.
- this.onRollOut = function(){
- rewind = true;
- }
- this.onRelease = function(){
- getURL("http://www.kirupa.com","_blank");
- }
This last chunk of code is rather simple. When you roll out of the button, rewind gets set to true. So now the onEnterFrame will execute the prevFrame (becuase rewind is equal to true) until it reaches a stop. The onRelease event is where you place your code for when the button is clicked.
|
While scanning through the various threads in the Flash MX 2004 forum, there was a question asking whether it was possible to tile a background in Flash. This tutorial is an extension of the answer I wrote for that question, and I think there are some interesting concepts in the code that may benefit you in more applications beyond simple background duplication.
The following is an example of a small background image automatically tiled using some ActionScript in Flash:
[ an example of what you will create ]
Here's how:
[ pattern courtesy of squidfingers ]
[ the Convert to Symbol dialog box ]
[ enter square in the Identifer field for your tile movie clip ]
[ copy and paste the above code into your Actions window ]
ActionScript Explained
Let's take a look at the code and what causes our image to tile. There are some interesting concepts that you might find useful for other uses beyond just tiling!
- tileBG = function () {
I create a new function, and I call it tileBG. Notice that the function takes in no arguments.
- tile_width = 34;
- tile_height = 34;
In the tile_width and tile_height variables, make sure to enter the width and height of your background tile. In our case, the tile graphic was conveniently 34 pixels wide by 34 pixels tall.
- x_max = Math.round(Stage.width/tile_width);
- y_max = Math.round(Stage.height/tile_height);
In the above two lines, I determine the total number of tiles that will be needed to cover the stage horizontally (x_max) and vertically (y_max). I do that by dividing the total width and height of our stage by the width and height of your background tile. I use Math.round() to round our values to the nearest whole number.
- for (x=0; x<=x_max; x++) {
- for (y=0; y<=y_max; y++) {
- bg = _root.attachMovie("square", "bg"+x+y, this.getNextHighestDepth());
- bg._x = tile_width*x;
- bg._y = tile_height*y;
- }
- }
The two for loops conduct the horizontal and vertical sweep for creating our grid that will contain our background tiles. Let's arbitrarily set x_max to be = 3, and y_max to be 4. First, x is set to zero. For x = 0, the for loop for the y runs all the way until y <= y_max. Then x is set to 1, and the y loop runs again. The loops run until x <= x_max or, occasionally.
A good way to picture this would be to imagine the x value representative of the top row of a puzzle. For each x piece laid, a series of y pieces go straight down and fill up all the vertical spaces below the x piece. That process goes until you reach the end of your puzzle and can't lay any more x pieces.
That is similar to our code above. You will lay pieces symbolic of our background tile until you reach the edge of our stage.
- bg = _root.attachMovie("square", "bg"+x+y, this.getNextHighestDepth());
In this line, I invoke our background tile by using the attachMovie function combined with our movie's linkage identifier, square. The attachMovie function called to a target (_root for us) takes in the following three arguments: the movie clip's identifier, the new movie clip's name, and the movie clip's depth.
For the depth, I use the getNextHighestDepth() function. It automatically places newly attached or created movies at one depth higher than the elements around it. You could use an arbitrary value incremented by x or y, but if you are working on a large animation with lots of dynamically created "stuff" occupying precious depths in your timelines, letting Flash keep track of the depths sounds like a good thing to do.
One last thing to note is that I am storing our newly attached movie clip in the variable bg.
- bg._x = tile_width*x;
- bg._y = tile_height*y;
Since bg represents our newly attached movie clip, I can use the _x and _y properties to specify the horizontal and vertical position of our bg movie clip. tile_width*x ensures that each subsequent image is shifted over by x. The same is true in the code used for shifting our movie clip in the vertical position.
Wrapping Up
If you want to learn more about grids, Pom's tutorial on grids and senocular's tutorial on isometric grids should help you out immensely.
You may be wondering, why go through the hassle of tiling an image when you could just take a screenshot of the tiled background, save it as an image, and then just import that one large image as opposed to tiling one small image dynamically in Flash!
You can create photo thumbnail galleries where each square in the grid is actually a small preview of a larger picture. For a project I was working on at MIT, I used the grid as a representation of a larger map to use as a minimap. Almost all of senocular's Isometry tutorials involve manipulations of the basic grid.
What I hope to convey through this tutorial, is that grids allow you to divide your stage area into small parcels of pixels that you can manipulate and use to your will. I have provided the source zip file that contains a working FLA of my example.
| | download source files |
Nothing says "This person knows their gradient fills" like shiny orbs.
You've created them in Photoshop now create nice shiny (vector based) glass orbs in Flash!
![[here is (roughly) what you'll end up with]](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_uOCk_EWQIMkH0Nc0Fiv77N8agtr8GtLf8iruYhqH4u4klikNKN1w4eMLhh6Bx58nVP1cHXmFTh3jxDqLCAH2hM7RVkHBr_Bs4UVKc4taB-4wWVr4L6m3qnXiR6XFSYnA=s0-d)
[here is (roughly) what you'll end up with]
Enough Chit Chat show me how.
[ The colours I used ]
[ use the colour mixer to perfect your fill ]
Now select the "Fill Transform Tool" and click on your lovely gradient fill.
Use the rotate fill handle to rotate the gradient fill until the dark shade is at the top and the light shade is at the bottom.
[ rotate the fill until it looks something like this ]
[ set up your second gradient fill ]
This should create the shadow around the edge of your Orb.
[ hopefully you'll have something like this! ]
Make another copy of the circle by selecting the second filled circle and copying it (Ctrl+C). Then create a new layer and "Paste it in Place" onto the new layer (Ctrl+Shift+V).
Select this new fill, go to the Colour Mixer window and select radial fill from the drop down menu. Set up the fill so that it blends from white with 100% Alpha value in the centre to white at 0% Alpha at the edges.
[ the final gradient fill part I! ]
Select the "Fill Transform Tool" and move the fill vertically upwards so that it's centre touches the top of the circle.
[ the final gradient fill part II! ]
Select this fill and use the Transform window to shrink the fill horizontally by about 6%. Now use the cursor keys to move the fill down a few pixels.
And hey presto a shiny orb to impress your friends and family with!
[ the end result! ]
Banner HUNTER
Banner MURI
Banner Leelou Blogs
Banner BLOGGER
Banner RPL Group
Banner I & Feed
Posts
All Comments
![[The colours I used]](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_srHU5dH_W1JkTz-xejfmUiCcBRftVttYSjlWre0GN30ErG80WYaqX-p5PKzs_Xg1GDv-SyrzO9jJEu5_UGN67Suc4PVJ9-bZXvO1H_cHrW_SJDH-EPpv1_=s0-d)
![[use the colour mixer to perfect your fill]](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_vXaYTvpcVttTWrhqX4qOO11V1rDG_BvbVj2DDygEOfRtp1AcKRA0mvC9rMt9PTKydsbUeXZFnGfn4hYzjux_gpyTK5Va6z0myg5Eb4f6jX8mUu3I_Zxus3=s0-d)
![[rotate the fill until it looks something like this]](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_sZlikxs6QO13DASU4hytSNJq979NdMNwXT_vM3PGyI_BRanwKKOZJLBVLqRUQvBm_YC7OKl4yfPIlQQRa2K0JO9pp75bYoE83wkbFw6EHwVGCJmkD3icKh=s0-d)
![[set up your second gradient fill]](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_tQ6TRJxS8EHuhvlBCmjsDhjdeMi3mbyoyVpSu0shtW8SKK3e4aEn02CRsH01J-GLc2IaSmj-i-YW-xa9sz8iSQXexhyODRquQsnl5icrI4clrf7jbmV5s=s0-d)
![[hopefully you'll have something like this!]](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_uZ9Ehtov24JHZjOiFw-vyLKZyOmGHhHkXEfMDbrPIsQHAHmr_vBogCdyOiGye2HqL9qngGYYuK1g08U6RGwGz80tP45tZ7cwfn97qCSaHyf6kSrvA0QOsl=s0-d)
![[the final gradient fill part I!]](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_vb63Z3dOp2GgFO7k_qaZQ_otm5fBCml6nN-m5PmXZ8xZeI9X47hSca85by5DAwgzn0tnsqUEsDsoOAxq3dfN0ZNyGAzkUKiD6wLy2PbmrzCQWOojG876IE=s0-d)
![[the final gradient fill part II!]](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_tE3RlwRCjDMW_BqseoP9cQtDotBFnjGgI50hw9CM1Q1mIU4DYkEDNtrCsE-WLN7rJJJIj45MjI7Bfh23QogrGpAji3H2mntnL-BAFRuWFFOJHR0XVSw4c=s0-d)
![[the end result!]](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_vMwIZ8dnxoFBf3u0MQ9uFzkBuNxfgDPEh-3FDYuINZDNKDpDW_iVNFtAJjLz_82pgeMNSQubzJKJ_XCQAXoP1f3XIjvNX1qmTxltrdPXgqTRHTiBgAsZex=s0-d)
