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.
|
Now a-days, clients and visitors are looking for more in a Flash website. One way to add an entire new dimension to your website is to add sound. This tutorial will show you how to build a one song sound controller for your website.
For an example of what you will be creating, press the Play button in the animation below:
 | sound example |
[ press 'play' ]
Supplied in this tutorial are a sound clip, various ActionScript, and two finished FLA files. Since cutting and pasting ActionScript does not aid much in the learning process, an explanation of the ActionScript is provided at the end. For more detailed explanations, please refer to the KirupaForum, and/or your ActionScript Dictionary (in Flash: Help > ActionScript Dictionary)
Steps to Create Animation
The following steps will guide you in creating the above sound animation:
First of all, you will need a sound loop to play. While generally it’s better to use a longer loop (say fifteen to thirty seconds), I have included a very short audio clip for you to play with.
Download it and unzip it. Please keep in mind that I didn’t make this clip, it came free with FruityLoops: Download Sound Loop Here.
Now that you have your audio file, fire up Flash. Create a new document (File > New) and change the dimensions of the movie to 700 pixels (width) by 15 pixels (height). You can modify the movie by pointing to Modify > Document.
We will begin by creating the play button. In the main timeline, name the current layer “buttons” (without quotes). On the stage, create some text. Type something descriptive like “Play” (without quotes) in the textbox.
Make sure the text type is Static Text. Select the text and make it into a button (F8 or Insert > Convert to Symbol…). Modify the button for your desired aspects.
In the main timeline, create a new layer. Name the layer “Actions” (without quotes). Click the first frame of this layer and bring up the Actions panel. Copy the following code in (code will be explained at the end of the tutorial):
stop();
Save the document (File > Save) as “sound” (without quotes).
Now click on the button we made back in step c. Bring up the Actions panel again (right-click on the button and select Actions), and copy the following code:
Replace [absolute location of movie] with the path of the directory where you saved the movie.
Example: C:/Program Files/Macromedia/Flash MX/kirupa
Example: http://www.yourwebsite.com/flash
Save the document again, and publish it.
We will now begin creating the playing sound and the stop button. With sound.fla still open, point to File > Save As…, and re-save the movie as “sound1” (without quotes).
After you have re-saved your movie (see above step), change the descriptive button on the stage to something like “Stop” (again without quotes). Add the following ActionScript to the button
Excellent, we’re almost done. Create a new layer below the Actions one. Name this new layer “loading” or something of this sort. Throw some text up there and a small animation to indicate that your movie is loading. Don’t make it too complex; you want this to load as soon as possible.
Select the second frame of the loading layer, and press F5 (or point to Insert > Frame). Find the fourth frame of the buttons layer and again press F5 or point to Insert > Frame.
Try to stick with me here, it’s not that confusing. In the Actions layer, select the first frame. Bring up the actions panel. Copy and paste the following code:
Ok, now select the second frame of the Actions layer. In the actions panel, paste this code:
gotoAndPlay(1);
Lastly, select the fourth frame of the Actions layer. This frame’s action should be a single stop() command:
Close the action panel and point to File > Import... Find the audio file you downloaded and unzipped earlier. Import it. Select the third frame of the Actions layer, and in the properties window find the sound dropdown box. In this box select the sound file you just imported. Set the loop to 9999. You may also want to add a fade in for grins.
Code Explanation
The following section explains the reasons behind the code added:
Also, I have provided the final FLA files for your perusal:
|
While a simple sound 'on' or sound 'off' button is acceptable, a volume slider is even better! A volume slider is a small bar that you can drag to increase or decrease the volume of any sound. In this tutorial, you will learn how to create just that.
The following animation is a good example of what you will be creating. Drag the horizontal slider to the right and press the Play arrow to hear the sound. Notice how the volume increases when you slide the slider to the right and decreases when you slide the slider to the left.
[ once the music loads, increase the volume and press the play arrow ]
Creating the Animation:
 | Download FLA and MP3 File |
_root.volume = ratio;
The entire section of code will now look like this with the code you added colored in blue:
this.ratio = 0;
dragger.onPress = function() {
this.startDrag(true, 0, 0, line._width, 0);
this.onEnterFrame = function() {
ratio = Math.round(this._x*100/line._width);
_root.volume = ratio;
};
};
dragger.onRelease = dragger.onreleaseOutside=stopDrag;
[ press the blue arrow to go to the main timeline ]
mySound.setVolume(_root.volume);
The last few lines of code in your Actions window should look similar to the following image:
[ copy and paste the line of code directly above the last bracket ]
ActionScript Explained
First, let us discuss how the sound gets played and the volume adjusted. The following section of code can be found on the slider movie clip:
onClipEvent (load) {
mySound = new Sound();
mySound.loadSound("sound2.mp3", false);
}
onClipEvent (enterFrame) {
downloaded = mySound.getBytesLoaded();
total = mySound.getBytesTotal();
if (downloaded != total) {
_root.dl = "downloading song...";
} else {
complete = 1;
_root.dl = "";
}
mySound.setVolume(_root.volume);
}
The orange colored code creates our sound object. In this tutorial, I am calling the sound object mySound. For information on dynamically loading a sound file, scroll to the bottom of the page from the following URL: http://www.kirupa.com/developer/mx/loading.htm
In the green section of code, the actual song is preloaded before being displayed. The total size of the sound file is determined using getBytesTotal(). The portion of the sound that has currently loaded is determined using getBytesLoaded().
By using an if statement, we can tell Flash to check if the portion of the sound file loaded does not equals the total file size of the sound file. If the song is still downloading, the if statement will tell a textbox 'dl' to display the text "downloading song...". If the song has loaded, a variable called complete is initialized to 1. You will see where this variable is used again.
In the blue portion of the code, setVolume() is used for the mySound sound object. The variable _root.volume carries a number between 0 and 100 as determined by the slider position (remember we set _root.volume = ratio inside the slider). When you combine all of the above you get the ability to control the volume of the sound.
Now, right click on the Play button on the stage and select Actions. The code you will see is:
on (release) {
if (_root.mySlider.complete == 1) {
_root.mySlider.mySound.start(0, 99);
}
}
The above code actually allows you to play the sound that was loaded in the slider movie clip. If the variable complete, located on the mySlider (slider) movie clip, equals 1, the song starts to play and loops 99 times before stopping. If you recall, in the preloader I discussed in the previous section, the variable complete was initialized to 1 after the song was loaded. I did not want the user to play the sound without having completely downloaded the song. The only way to ensure that would be to use an if statement that prevents the song from being played unless the value of complete = 1; which it will once the sound is loaded.
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.
|
Banner HUNTER
Banner MURI
Banner Leelou Blogs
Banner BLOGGER
Banner RPL Group
Banner I & Feed
Posts
All Comments
