Tujuan utama preloader sih sederhana: supaya orang yang mengakses halaman Flashnya itu tau kalau Flashnya sedang diload dulu. Bayangkan kalau tidak ada preloader, mungkin orang itu mengira halamannya kosong, padahal itu karena loading halaman Flashnya belum selesai. Akan lebih baik lagi kalau ada keterangan progress loading swf-nya. misalkan ada keterangan yang diload sudah sekian % (persen), atau sekian KiloByte dari sekian KiloByte, atau ada animasi yang merepresentasikannya (yang paling sederhana seperti progress bar), dll.

1. Buat File Flashnya

Kosongkan Frame 1 atau geser movie sebenarnya ke Frame 2 dst, karena di Frame 1 ini akan diisi untuk tampilan preloader. Kemudian, supaya animasi ‘progress bar’nya kelihatan (ngga tiba-tiba 100%) berarti file size Flashnya harus besar, jadi sengaja Saya masukkan file gambar yg sizenya 1MB di Frame 2, hehehe… (lagian ini kan buat dummy-nya aja).

Jadi begini, ketika Flashnya dijalankan movie akan berhenti di Frame 1 yg menampilkan progress loading file-nya, terus kalau udah selesai loadingnya, movie pindah ke Frame 2.

2. Buat Tampilan Preloadernya

Untuk latihan ini mah, buat yang sederhana aja dulu… jadi di tampilannya ada progress bar dan tulisan loading sekian %-nya. Pertama untuk progress bar-nya buat dulu movieclip (klik menu insert>new symbol>movieclip>beri nama). Kemudian copykan ke stage, di propertiesnya beri movieclip tersebut instance name yg unik (nama instance ini nanti akan dipanggil di actionscript, misalkan di Flash yg saya buat namanya mc_bar).

Kedua untuk tulisan loadingnya buat sebuah dynamic text, beri variable-nya (disini misalkan nama variabelnya teks_persentase).

Ketiga, berikan ActionScript di Frame 1 ini sebagai berikut:

stop(); //supaya berhenti di frame 1 ini

// deklarasi variabel (optional, ga perlu sebenarnya) :
var ukuranTerload:Number;
var ukuranTotal:Number;
var teks_persentase:String;

	/*	*************************************************
		// fungsi onEnterFrame berikut akan dieksekusi berulang2
		// selama movie ini masih berada di Frame 1
		// kemudian jika byte yg sudah diload = total byte
		// maka movie akan pindah ke Frame 2, gotoAndStop(2)
		***********************************************	*/

onEnterFrame = function()
{
	ukuranTerload = getBytesLoaded();
	ukuranTotal = getBytesTotal();
	teks_persentase = "Loading " + Math.round(1000*(ukuranTerload/ukuranTotal))/10 + "%";
	mc_bar._xscale = 100*ukuranTerload/ukuranTotal;
	if(ukuranTerload == ukuranTotal)
	{
		gotoAndStop(2);
	}
}

Introducing “2.5D”

Just because tweening in Flash is easy does not mean you can always rely on it for creating convincing animations. Don’t get me wrong: Tweening can be a great timesaver and can get the job done, as long as the job doesn’t require anything more than simple objects moving around the Stage.

But what if you could push the tweening method to give more realism to your character? What if you could harness its simplicity and make it work in ways not too many other Flash users have thought of? What if you have learned everything there is to know about tweening, go back to the first 10% of that knowledge, and take a left turn? Where would that take you?

In this lesson, I’m going to reveal a truly killer Flash animation technique that will actually create what some consider a convincing 3D effect. The cool thing is you never leave the Flash environment; you remain in the 2D realm. You are now in a dimensional limbo. If it’s still 2D but looks like 3D, then what exactly is it?

Welcome to the world of 2.5D animation.

Yup, 2.5D animation. I made that name up. I don’t claim to have invented this technique but so far the name, two-and-a-half D, may be mine.

Figure 28 shows my logo character from my website, www.mudbubble.com.

Figure 28. Isn’t he oh-so-cute?

Figure 29 demonstrates that I placed each symbol on its own layer. I have turned on the outlines feature so you can see how each part of the character’s body has been separated. This is very important because motion tweens require only one symbol per layer during the tween. If you try to have two different symbols on the same layer within the same motion tween, the tween will break.

Figure 29. Each symbol has its own layer

I have even taken the time to name each layer. Although this is not necessary, it does help to have layer names because, as your Timeline grows, you eventually start to scroll the Timeline more and more. It is also important when working in team environments where file sharing is common. You can never be too organized.

After your Timeline is set up, you can begin to apply motion tweens to your character. For this example, I animated only the symbols that make up the character’s head, so I made sure all other layers were locked to avoid making changes to the wrong layer or layers.

Turning Heads—Part 1

First I created my keyframes where I wanted the head to start and stop turning. Click and drag vertically from the top to the bottom layer and convert to keyframes (F6). Do this twice, keeping about 15 to 20 frames in between keyframes. In my example, I made keyframes on frames 15 and 30 (see Figure 30).

Figure 30. Getting ready to apply motion tweens

Keeping the playhead on the frame at which I wanted the character’s head turn to stop, I edited each of the symbols on the Stage using the Free Transform tool.

Follow my lead. I started with one of the eyes. You need to imagine the eyes wrapping around a sphere (the head). If this were truly a 3D object, one eye would get bigger as it comes closer towards you. It also wouldn’t be as egg-shaped, so making it wider is also a good idea. Because my character’s eye consists of three different symbols, I scaled them all at once by holding down the Shift key and selecting all three symbols (see Figure 31). Then I used the Free Transform tool to scale them at the same time. Don’t worry about being perfect at this point. You can always fine-tune your animation later. This is almost blind work, as you won’t know exactly how it will look until you apply the motion tweens.

Figure 31. Selecting the eye symbols

Let’s move on to the nose. Because the character is turning towards us, everything closest to us should move from right to left. If it were truly a 3D object, the nose would be sticking straight out from the head. To make this a little more convincing, I turned it slightly downwards as I moved the nose from right to left (see Figure 32). Don’t forget to scale it up a bit as it is also coming closer towards the viewer.

Figure 32. Modifying the nose

Next I moved the other eye over while scaling it larger and making it less of an oval shape and more circular. I also moved over both eyebrows and rotated them slightly while scaling them up (see Figure 33).

Figure 33. Modifying the other eye

At this point I applied motion tweens to each of the layers where I made these edits. It’s time to reveal what I have actually done and determine whether it needs further adjustments.

Don’t worry, there’s almost always a lot of tweaking to get this effect just right. Figure 34 illustrates the character’s head turn at this stage.

Figure 34. Turning the character’s head

View the file mudbubble_boy.swf to see the final animated effect (see Figure 35).

0)
{
if (navigator.plugins["Shockwave Flash"])
{
var plugin_version = 0;
var words = navigator.plugins["Shockwave Flash"].description.split(” “);

for (var i = 0; i = 6)
{
var plugin = navigator.plugins["Shockwave Flash"];
var numTypes = plugin.length;
for (j = 0; j
// –>
// –>
// –>
// –>
// –>
// –>
// –><br /> <div class=”static-messaging txtcenter”> <h2><img src=”/images/icons/alert.gif” mce_src=”/images/icons/alert.gif” width=”16″ height=”16″ alt=”Alert” />This content requires Flash</h2> <p>To view this content, JavaScript must be enabled, and you need the latest version of the Adobe Flash Player.</p> <p class=”caption”><a href=”/go/getflashplayer” mce_href=”/go/getflashplayer” target=”_top”>Download the free Flash Player now!</a></p> <p> <a href=”/go/getflashplayer” mce_href=”/go/getflashplayer” class=”noHover” target=”_top”><img src=”/images/shared/download_buttons/get_flash_player.gif” mce_src=”/images/shared/download_buttons/get_flash_player.gif” alt=”Get Adobe Flash Player” width=”112″ height=”33″ border=”0″ /></a> </div> <p>
Figure 35.

Final animated effect of the head turning Not a bad start, is it? With a few simple edits with the Free Transform tool, you can start to see the effect come to life. It’s not perfect but at this point it doesn’t have to be. You can continue to tweak the amount of scaling, positioning, and skewing of your elements until you achieve the desired effect.

Turning Heads—Part 2

Next I address the remaining assets of the character’s head to further emphasize his head turning. The most important part of this illusion is convincing the viewer that this flat, 2D object has volume and mass. You also need to trick the user’s eye into perceiving depth in the animation. You need to imagine this character as being built from a variety of 3D objects in space. If the character were truly turning his head in a 3D space, what is in the foreground would travel in the opposite direction from what is in the background. To help you imagine this, picture the earth spinning on its axis in space. The earth essentially spins counter-clockwise. This means the surface closest to us travels from right to left. The surface farthest from us travels from left to right. Let me apply this to my character’s head. Because the head symbol itself is simply a flat oval shape, all I really needed to do is skew it a little bit. I also chose to nudge it a little to the right. I did this because when someone turns to face you, you see more flesh to the right of the left eye. Also, because this head shape is farther back from the facial features, it should move slightly to the right a few pixels. Don’t over-exaggerate some of these movements. This is an effect best executed with many subtle movements rather than a few major changes. It’s the sum of its parts that make up the whole because several subtle animations complete the overall dramatic effect. Next I rotated the brim towards the right side of the character’s head (see Figure 36). Remember, objects farther back move in the opposite direction to objects in the foreground.

Figure 36. Rotating the brim of the hat

I also used the arrow keys to nudge the brim over to the right so it appears to be behind the character’s neck even more. The same principle applies to his hat. I skewed the hat to make it thinner while moving it over to the right a few pixels (see Figure 37).

Figure 37. Adjusting the hat

The ear got skewed a bit as well as it moved upward and to the left (see Figure 38).

Figure 38. Skewing the ear

Don’t forget the hair. I designed the hair as three individual symbols so they could be edited independently. As the head turns towards the viewer, I skewed them down towards the character’s eyes and made them shorter as if they were pointing towards the viewer a little more (see Figure 39). This is cheating the perspective a bit and can be difficult to achieve. There is a limit to how far you can skew and scale a symbol. Remember, this effect is better when used sparingly and in a subtle way. You can only push the envelope so far. Less is more.

Figure 39. Skewing the hair

Next I added some motion tweens to the rest of the layers to which I made edits. If you followed my lead so far, play back the results. Not too shabby, is it? You clearly can see his head turn as if it were a 3D object. Remember that most characters, if human, have two ears. To have the character’s second ear coming around the right side of his head, create a new layer below all other layers. Copy the existing ear and paste it to this new layer in a blank keyframe midway between the motion tweens (around Frame 22). Then select Modify > Transform > Flip Horizontal to flip it. Position the ear on the right side behind the head so it’s sticking out about half way. This is about as much of the ear you need to see (see Figure 40).

Figure 40. Positioning the second ear

Add a second keyframe on Frame 30 (where all the other keyframes reside) as shown in Figure 41.

Figure 41. Adding a second keyframe

Go back to the ear’s first keyframe and reposition the ear almost completely behind the head. I have converted some of the other layers to outlines so you can see the ear’s new position (see Figure 42).

Figure 42. Repositioning the second ear

Now just apply a motion tween. Play back your animation to see the ear reveal itself as the head “turns” towards you (see Figure 43). This small detail adds an enormous amount of realism to the head turn as it helps create the illusion of the head being a rounded sphere (this requires Flash Player 8).
0)
{
if (navigator.plugins["Shockwave Flash"])
{
var plugin_version = 0;
var words = navigator.plugins["Shockwave Flash"].description.split(” “);

for (var i = 0; i = 6)
{
var plugin = navigator.plugins["Shockwave Flash"];
var numTypes = plugin.length;
for (j = 0; j
// –>
// –>
// –>
// –>
// –>
// –>
// –><br /> <div class=”static-messaging txtcenter”> <h2><img src=”/images/icons/alert.gif” mce_src=”/images/icons/alert.gif” width=”16″ height=”16″ alt=”Alert” />This content requires Flash</h2> <p>To view this content, JavaScript must be enabled, and you need the latest version of the Adobe Flash Player.</p> <p class=”caption”><a href=”/go/getflashplayer” mce_href=”/go/getflashplayer” target=”_top”>Download the free Flash Player now!</a></p> <p> <a href=”/go/getflashplayer” mce_href=”/go/getflashplayer” class=”noHover” target=”_top”><img src=”/images/shared/download_buttons/get_flash_player.gif” mce_src=”/images/shared/download_buttons/get_flash_player.gif” alt=”Get Adobe Flash Player” width=”112″ height=”33″ border=”0″ /></a> </div> <p>

Figure 43. Final animated effect of the ear revealing itself during the head-turn

Feel free to scrub the Timeline and make adjustments to your symbols if something doesn’t feel quite right. This depends on how much of a perfectionist you are as well as on the complexity of your character. The boy character in this example is fairly complex, given the amount of objects I used in his design.

Custom Ease In/Ease Out Panel (Flash Professional 8 Only)

I’d like to add one more finishing touch to the head turn. As you know, motion tweens can look pretty static due to their constant rate of speed. They can look pretty jerky in their initial state. Thanks to a new feature in Flash Professional 8, however, you can add some “easing in and easing out” to make the transition softer. The trick is how to ease in and out inside of a single tween. The first step is to apply the motion tween. You can do this in one of two ways:

• Right-click the frames in between the two keyframes. From the pop-up menu, select Create Motion Tween.
• Select all layers with the selection tool by clicking and dragging, highlighting them all in black. From the Tween drop-down menu in the Property inspector, select Motion.

Notice the Edit button in the Property inspector (see Figure 44).

Figure 44. Click the Edit button to open the Custom Ease In/Ease Out panel.

Clicking this button opens the new Custom Ease In/Ease Out panel (see Figure 45).

Figure 45. New Custom Ease In/Ease Out panel

With the new Custom Ease In/Ease Out panel you have a lot more control over easing than you did with previous versions. The Custom Ease In/Ease Out panel displays a graph that represents the degree of motion over time. The horizontal axis represents the frames, while the vertical axis represents the percentage of change to the object. The graph’s curve dictates the rate of change of the object. When the curve is horizontal (no slope), the velocity is zero; when the curve is vertical, you don’t have any easing or delay to the objects’ movement. If you select the Use One Setting for All Properties check box, the current curve is applied to all properties (Position, Rotation, Scale, Color, Filters). If you deselect this check box, you can apply a separate curve to each of the properties, as follows:

• Position: Specifies custom ease settings for the position of an animated object on the Stage.
• Rotation: Specifies custom ease settings for the rotation of an animated object. For example, you can fine-tune how quickly or slowly an animated character turns around to face the user on the Stage.
• Scale: Specifies custom ease settings for the scale of an animated object. For example, you can customize the scale of an object more easily so it appears to be moving away from the viewer, then coming closer, and then moving away again.
• Color: Specifies custom ease settings for color transitions applied to an animated object.
• Filters: Specifies custom ease settings for filters applied to an animated object. For example, you can control the ease setting of a drop shadow that simulates a change in the direction of a light source.
• Play and Stop buttons: Lets you preview an animation on the Stage using all the current velocity curves defined in the Custom Ease In/Ease Out dialog box.
• Reset button: Lets you reset the velocity curve to the default, linear state.

Click the diagonal line once to add a new control point. You can precisely control the motion of an object by dragging the positions of the control points. Using frame indicators (represented by square handles), you click where you want an object to ease in or ease out (accelerate or decelerate). Clicking the handle of a control point (the square handles) selects that control point, and displays the tangent points (hollow circles) on either side of it. You can use the mouse or the keyboard’s keys to drag the control or tangent points to new positions. Tip: By default, the control points snap to a grid. You can temporarily turn this off by holding down the X key while dragging the control point. Clicking on the curve away from any control points creates a new control point to the curve. Clicking anywhere away from the curve and control points deselects the control point that is currently selected. To make an animation start gradually and end gradually, adjust the curve so it’s similar to Figure 46. I highly recommend experimenting by creating and editing control points and tangents and playing back your animation using the Stop and Play buttons in the lower left corner of the panel. It won’t be long before you have a good feel for the relationship between the curve and its effect on the animation.

Figure 46. Using this ease in/ease out path

Now play back your animation. Notice how the head-turn eases in and then out as it approaches its end. To animate the head turning back again to its original position, you only need to copy frames from Frame 1 and paste them after the tween you just created. Repeat the same procedure by adding a motion tween, and for easing in and out and you have a character that can turn its head back and forth in a cool way.

Applying Filters

Yes, the impossible is now possible in Flash. Flash 8 introduces graphic filters and blend modes, which the Flash community has accepted with open arms. You can now apply effects such as Drop Shadow, Blur, Glow, Bevel, Gradient Glow, Gradient Bevel, and Adjust Color to any movie clip instance. So have fun with your character by applying a drop shadow. The first thing to do is place your character in a movie clip symbol. In the Timeline, click and drag to select all frames across all layers. (Hint: start on Frame 1 in the upper left corner and drag diagonally to the last frame on the bottom layer.) This highlights your frames and layers in black. Select Edit > Timeline > Copy Frames (or press Ctrl+At+C) to copy the entire Timeline to the Clipboard. (You could also right-click anywhere on your highlighted frames and select Copy Frames from the context menu.) Now hold that thought until the next step. Open your Library (Ctrl+L) and from the upper right drop-down menu, select New Symbol > and then select Movie Clip behavior and click OK. You are now in Edit mode for this new symbol. Select the first frame of the Timeline and select to Edit > Timeline > Paste Frames (or press Ctrl+Alt+V) to paste your selection, as shown in Figure 47. (You could also right-click over Frame 1 and select Paste Frames from the context menu.)

Figure 47. Right-clicking Frame 1 and selecting Paste Frames

Return to the main Stage and create a new layer. Locate the movie clip symbol you just created in the Library and drag it to the Stage on this new layer (see Figure 48).

Figure 48. Dragging the movie clip to the Stage

Delete all other layers that contain your original character. At this point your Timeline should have one layer and one movie clip symbol containing your character animation. There are two kinds of shadows you can create. A standard drop shadow creates a shadow below the instance that is slightly offset from the original. This type of effect is often very flat and similar to a shadow cast against a wall or any other flat surface. It is not very convincing if you are trying to achieve a shadow cast on the ground. For a more realistic shadow effect, you need to add a few simple steps. Duplicate the movie clip instance and place it behind the original instance. (You can keep the duplicate on the same layer and arrange it behind the original instance, or paste it to a new layer below the original.) Select the duplicate instance and, in the Filters tab of the Property inspector, select Drop Shadow from the Plus (+) menu (see Figure 49). Next, adjust the strength level to around 45% and select Hide Object. This hides the movie clip object but reveals the Drop Shadow Filter properties. You can make further adjustments by setting Quality to Low, Medium, or High, or modifying the amount of blur, color, angle, or distance of the blur effect from the original graphic.

Figure 49. Drop Shadow filter applied to the duplicated movie clip instance

To prevent this effect from looking too much like a drop shadow against a flat wall behind the original object, use the Free Transform tool to skew the filtered movie clip instance. This technique requires some trial and error before you can apply it successfully. Squash and skew the instance until it looks as if the shadow is cast on a floor (see Figure 50). You may need to reposition the instance to make this look right.

Figure 50. Duplicated movie clip skewed with the Free Transform tool

Test the movie and see the effect come to life. When combining looping animations with several other looping animations, you can achieve some sophisticated visual results, as shown in Figure 51 (this requires Flash Player 8).
0)
{
if (navigator.plugins["Shockwave Flash"])
{
var plugin_version = 0;
var words = navigator.plugins["Shockwave Flash"].description.split(” “);

for (var i = 0; i = 6)
{
var plugin = navigator.plugins["Shockwave Flash"];
var numTypes = plugin.length;
for (j = 0; j
// –>
// –>
// –>
// –>
// –>
// –>
// –>

Figure 51. Examples of the 2.5D effect using the Drop Shadow filter

In this sample you can see how the drop shadow effect adds an exciting dimension to the animation. This animation is a series of movie clips containing looping animations of the boy and dog characters. In a future article I will explain how small animated loops can yield a lot of mileage to your movies.

I hope this article has helped you sharpen your Flash design and animation skills. There are several more animation techniques that you can achieve with Flash, such as full animation (often referred to as frame-by-frame), shape tweens, and image sequences from video or 3D animation programs. There are also a number of cool plug-ins available from other designers and animators that can help speed up your Flash workflow. Look for future articles that explore these techniques and tools.

Source : http://www.adobe.com/devnet/flash/articles/design_character_05.html

Cleaning Up Your Sketches

Every good design usually starts with the time-tested pencil and paper. I’ve had some of my most creative moments during long and boring management seminars and sometimes a doodle on a cocktail napkin can be the inspiration for a great character. Fact is, you never know when or where you’ll be inspired, so keep a pencil in your back pocket or behind your ear at all times.

You can sketch in Flash using any of the tools I already discussed. If you have drawings on paper you’d like to use as the basis for a Flash character, you’ll need a scanner to scan and save them as graphics files. Most scanners come with software that will make this process easy. Some of the more widely used graphic formats that Flash can import are PNG, GIF, JPEG, TGA, and TIFF.

After you import your sketch into Flash, think about how to break it apart into individual pieces. This is the hard part. This is a very conceptual process that depends ultimately on your style of animation and the style of your character.

Form follows function, if I may borrow a phrase from Volkswagen, and this is crucial to your characters’ design. You must visualize how you think your character might move, which ultimately dictates its overall design.

Figure 21 shows an example of a sketch, and then the finished product after redrawing it in Flash. This character was made entirely with the Oval and Rectangle tools. Notice how I used the original sketch as a reference, making subtle changes and adjustments as I fine-tuned the image, tracing it with the Flash drawing tools.

Figure 21. From sketch to Flash—my trademark character

After creating a blank keyframe (F7) next to your sketch, you can turn on the Onion Skin feature to see a ghost of your sketch. You can use any of the drawing tools to draw, using the onion-skinned sketch as your guide. As you can see in Figure 22, I used the Oval tool to create the head of the boy character. When creating body parts and various accessories for your character, try to imagine and then draw the entire shape. You must visualize your character as if it is truly a 3D object existing in space. Even though this is a two-dimensional format, thinking like a 3D artist can help you visualize how certain parts will be attached to others.

Figure 22. Character’s head defined by an oval shape

When you finish drawing an object of your character, copy and paste it to a new layer. I like to select it and convert it to a symbol at this time. You can also name your layers.

Saving Time Placing Symbols on Layers

I always convert my objects to symbols and name them with a simple yet descriptive naming convention. For example, head1, eye1, mouth_wide, and so on. However, I do not create names for my layers at this time because there’s a much easier and faster way. After all my symbols are created and named appropriately, I simply select them all (Ctrl+A) and copy (Ctrl+C) them. I now create a new layer and paste them in place (Ctrl+Shift+V). This places them all on one layer, yet still as separate symbols. Delete all your other layers so you end up with just the one layer containing all of your character symbols.

The next step is the coolest part. Select all again and then right-click over your character and select Distribute to Layers (see Figure 23).

Figure 23. Selecting all symbols, then right-clicking the character and selecting Distribute to Layers

Voilà! Flash has not only placed each symbol on its own layer but has named each layer based on their symbol names! Nice, huh?

Saving Time Through Good Document Management

Figure 24 is an example of what my Timeline may look like once my character has been designed and converted to symbols and ready for animating. If you want to edit the name of a layer, double-click the layer name and type in a new one. Giving layers a descriptive name based on the kind of object it contains is good practice in terms of Timeline and file management. This is especially important when working with more than one artist—and even more so when working within team environments.

Figure 24. Body parts and symbols for my trademark character in the Timeline

Since Flash MX (version 6), you’ve had the option to create layer folders. A layer folder is simply a new layer that acts like a folder to hold other layers. They can be expanded and collapsed. This is extremely useful when dealing with multiple layers for several characters. You can create a layer folder for each character and place all layers inside these folders, giving you the option to collapse them all except for the character you are working on (see Figure 25). This prevents endlessly scrolling through the Timeline and is a huge timesaver.

Figure 25. Saving time with layer folders

Another way to manage your Flash document is building an organized library. As I mentioned earlier, when you create or convert something to a symbol, it automatically becomes an object in the library of your movie. To open the library select Window > Library or press Ctrl+L. The library (see Figure 26) gives you a variety of information and options for each symbol contained in it. You can select each one by clicking a symbol name and view a thumbnail in the library preview window.

Figure 26. Library of my trademark character

If the symbol contains an animation within it, you also see a Stop and Play button in the upper right corner of the preview window. These buttons enable you to preview the animation within this preview window.

The upper right corner of the library contains a pop-up menu with several options (see Figure 27). You can create a new symbol, folder, font, or video. You can also rename a symbol, move symbols to folders, duplicate or delete a symbol, or edit and obtain the properties of a symbol.

Figure 27. Your library management options

Source : http://www.adobe.com

Working with Symbols

Symbols are the very essence of what makes Flash … well, Flash. You can make anything you draw or import into a symbol. And in almost all cases you should. Here’s why. When an object is converted into a symbol, it automatically becomes an item in the Flash document’s library. Every Flash document has its own library from which you can drag a symbol to the Stage. When you do, the object on the Stage is now referred to as an instance. No matter how many instances of a symbol reside on the Stage, Flash only needs to load it once. This is how Flash delivers streaming animations while maintaining small file sizes. It’s extremely efficient to reuse symbols as many times as possible. You can also apply effects to instances such as Scale, Tint, Alpha, and Brightness, and apply motion tweens in combination with one or more effects.

However, before I get too far ahead of myself, I’ll introduce you to symbols and their behaviors.

Create an object—anything, a simple shape will do. Select it (Ctrl+A) and then convert it to a symbol by choosing Modify > Convert to Symbol or pressing the F8 key. This opens the Convert to Symbol dialog box (see Figure 20).

Figure 20. Convert to Symbol dialog box

In the Convert to Symbol dialog box you can type a name for your symbol, select one of three behaviors, and determine the registration point of your object. The following list explains what each behavior is and what it means:

• Movie clip:

  Movie clips are dynamic, which means they can be targeted with ActionScript, the Flash programming language. They can have any number of layers and frames, but their timelines are independent of all other timelines. Think of a solar system: Each planet is a movie clip, looping endlessly and independently around a sun, which is your main Timeline.

• Button:

  Buttons have four states: Over, Up, Down, and Hit. These are represented as keyframes in a button symbol. You can place graphics in any of these states and then apply ActionScript to the instance of a button to add interactivity to your Flash movie.

• Graphic:

  Graphic symbols are very similar to movie clips with the exception that they are not dynamic and cannot be targeted with ActionScript. However, you can place a graphic symbol inside a movie clip symbol. Graphic symbols can have any number of frames and layers. The most important feature is that they will always be in sync with the main Timeline and each other. This is very important when trying to create time-based animations.

In this animation tutorial, I recommend using the Graphic behavior. This enables you to scrub the Timeline to see your animation play while inside the Flash authoring environment. Scrubbing refers to moving the playhead back and forth manually to play back the contents of the Timeline. Movie clip symbols do not play beyond Frame 1 of their contents unless you test your Flash movie (Ctrl+Enter) or export your movie as a SWF file.
Source : http://www.adobe.com/

Drawing in Flash

Macromedia Flash offers several drawing tools for creating cool characters and more. Each tool differs from the others and yields different stylistic results. Some tools create larger file sizes while other tools result in smaller files. As you become more familiar with these tools, you will learn to choose the tool that best suits the artistic style you want and any file size requirements you may have to abide by. It’s simply a trade-off between file size and download times and playback performance. In this section, I’ll take a look at each of the Flash drawing tools and discuss its pros and cons.

Brush Tool

The Brush tool, shown in Figure 1, is probably the most versatile of all the tools, especially when combined with a pressure-sensitive tablet.

Figure 1. Brush tool

Drawing with the Brush tool is the same as drawing with shapes. It’s the tool that feels the most natural when used due to the support of pressure sensitivity and tilt features. Wacom makes a series of popular tablets that differ in size, include a cordless and battery-free pen called a stylus, and work great with Flash. Since a Wacom tablet can work in conjunction with your existing mouse, or replace your mouse completely, its use goes far beyond that of Flash alone. Many digital designers use a tablet with any number of graphics editors and animation programs, including Adobe Photoshop, Adobe Illustrator, and Macromedia FreeHand. But fear not: If you do not currently own a tablet, you can still use the Brush tool with one exception—both the tilt and pressure sensitivity features will not be available.

If you do have a pressure-sensitive tablet installed, selecting the Brush tool will provide you with two subselections that affect your line quality. At the very bottom of the toolbox you will notice the pressure sensitivity and tilt options (see Figure 2). With one or both of these options selected, varied results occur when you use the Brush tool in Flash.

Figure 2. Pressure sensitivity and tilt options

Figure 3 shows what happens when you draw with the Brush tool. The result on the left is a shape—meaning, it has vector points on all sides. The more points an object has, the bigger the file size. I drew this particular shape using a pressure-sensitive tablet. Notice the tapered ends and inconsistent line weight that result with varied amounts of pressure applied to the stroke. I also drew the shape on the right with the Brush tool; in this case, however, I turned off the pressure sensitivity setting.

Figure 3. Shape drawn using the pressure-sensitivity setting turned on (left) and off (right)

The Brush tool offers several subselections to help you draw certain effects (shown in Figure 4):

• Paint Normal: Paints over lines and fills on the same layer
• Paint Fills: Paints inside a fill color and outside of a shape (on the Stage)
• Paint Behind: Paints behind existing fills and strokes
• Paint Selection: Enables you to paint inside a selected fill only
• Paint Inside: Keeps you from going outside the lines after you start painting inside a fill

Figure 4. Bush tool effects

Object Drawing

Object Drawing is a new feature in Flash 8. It enables you to draw shapes as individual objects that remain independent of each other. Gone are the days when you had to draw each shape on a separate layer to avoid one shape “cutting” into another. With Flash 8 you can simply turn Object Drawing on or off as a subselection of any of the drawing tools (Brush, Pencil, Pen, Oval, and Rectangle) under Options (see Figure 5). For those of you familiar with Macromedia FreeHand or Adobe Illustrator, this is a familiar and welcome addition to Flash.

Figure 5. Object Drawing subselection button

As you can see in Figure 6, drawing a shape over an existing shape without Object Drawing merges the shapes together, causing one to cut into the other. This is called Merge Drawing mode. This mode can be useful for cutting into shapes to create new shapes.

Figure 6. Merge Drawing mode

When you draw a shape in Object Drawing mode, it automatically becomes an Object Drawing and cannot be merged with other shapes. You can overlay Object Drawings without fear of cutting into them (see Figure 7). This is useful in situations where you may want to reposition objects or simply need to keep them independent.

Figure 7. Object Drawing mode

I created my trademark boy character (see Figure entirely with the mouse and the rectangle and oval tools. I never had to use my Wacom tablet in combination with the Brush tool. I could have easily chosen the Brush tool, but using the shape tools resulted in the ultra-clean line quality I was trying to achieve. Often times the Brush tool can create several unnecessary points that bloat file sizes and create headaches when trying to edit the shapes later on. For the boy graphic, I was looking for simple shapes and as small a file size as possible.

Figure 8. Character created using the shape tools

Pencil Tool

The Pencil tool, shown in Figure 9, is the perfect tool if you want a consistent line weight throughout your image and if you need to keep the file size as small as possible.

Figure 9. Pencil tool

Lines drawn with the Pencil tool consist of fewer vector points. A perfectly straight line has only two points, one on either end. A curved line has three points or more depending on the number of curves (see Figure 10).

Figure 10. Lines drawn with the Pencil tool

The Pencil tool also offers several line quality modes (see Figure 11):

• Straighten: This is a great option if you want to draw very straight lines by freehand. Even with a shaky hand, your lines will “snap” straight after you finish drawing your stroke.
• Smooth: If you use this option, your lines will automatically be smoothed while retaining the basic shape you intended to create.
• Ink: This option leaves your line quality unaffected. This is great for freehand or loose-style drawings.

Figure 11. Quality modes of the Pencil tool

Shape Tools

The shape tools—Oval and Rectangle—create primitive fills and strokes (see Figure 12). Holding down the Shift key in combination with a shape tool creates a perfect circle or square.

Figure 12. Shape tools: Oval and Rectangle

You can select the fill and stroke color through the Property inspector (see Figure 13). Clicking either swatch opens the color panel and enables you to edit the stroke or color choice.

Figure 13. Property inspector for the Rectangle tool

You can even specify no color for the stroke or fill by selecting the square with the red diagonal line through it (see Figure 14).

Figure 14. Select this square to draw without color

Pen Tool

To draw precise paths as straight lines or smooth, flowing curves, you can use the Pen tool (see Figure 15). Create straight or curved line segments and adjust the angle and length of straight segments and slope of curved segments.

Figure 15. Pen tool

With the Pen tool, you click to create points on straight line segments, and click and drag to create points on curved line segments. You adjust straight and curved line segments by adjusting points on the line. You can convert curves to straight lines and the reverse.

When creating curved lines you will notice that Flash creates tangent handles for each anchor point. The lines can be edited later with the subselection tool (White Arrow) by selecting an anchor and dragging the tangent handles (see Figure 16). Moving the handles in relation to the anchor point reshapes the curve.

Figure 16. Line segment drawn with the Pen tool and in the process of being edited with the subselection tool

Onion Skin Tool

The Onion Skin tool is located at the bottom of the Timeline panel (see Figure 17).

Figure 17. Onion Skin tool

When you select the Onion Skin tool, the application adds Onion Skin markers to the playhead indicator of the Timeline (see Figure 18). You can drag these markers to expand the number of frames before and after the current frame.

Figure 18. Onion skinning effect

Flash provides two flavors of onion skinning:

• Normal onion skinning: The current frame is shown in full color while the previous and future frames are dimmed progressively. This gives an impression of a series of drawings created on semi-transparent paper and then stacked on top of each other (see Figure 18).
• Onion skinning in outline mode: The current frame is shown in full color while previous and future frames are shown as outlines (see Figure 19). This is easier on the eyes when working with several different keyframes before and after the current frame.

Figure 19. Onion skinning in outline mode

Source : http://www.adobe.com

Contoh karakter animasi

Menggerakkan benda secara utuh bukanlah animasi yang sebenarnya karena tiap orang dapat melakukannya. Animasi adalah tentang membawa hidup sebuah karakter, karakter yang dapat merasakan, berpikir, dan juga bertindak seperti halnya manusia. Maka akan membuat penonton yang melihatnya merasakan, berpikir, dan juga bertindak.

Pengertian Animasi

Banyak pengertian tentang arti kata animasi yang telah ada dan menimbulkan berbagai pandangan tentang arti kata tersebut. Namun dalam pembuatan film kartun disini kata animasi dideskripsikan sebagai proses membuat dan memainkan kembali serangkaian gambar diam atau statis untuk mendapatkan sebuah ilusi pergerakan secara terus menerus.

Prinsip-prinsip Animasi

Antara akhir tahun 1920′an hingga akhir 1930′an animasi berkembang dari kesenangan yang baru menjadi sebuah bentuk seni dalam studio Walt Disney. Dimana setiap gambar, aksi menjadi lebih meyakinkan. Dan karakter yang muncul menjadi seperti tokoh yang sebenarnya. Penontonpun menjadi lebih antusias dan menjadikan banyak animator yang merasakan kepuasan pribadinya, namun bagaimanapun bagi Walt Disney bahwa tingkatan dari animasi dan keberadaan karakter itu saja tidak cukup untuk mengejar ide cerita yang baru. Karakter-karakter tersebut dibatasi oleh berbagai tipe dari aksi tertentu dan kepuasan penonton-pun tidak bertahan lama karena tidak sebanding dengan apa yang mereka lihat. Kenyataan ini menyadarkan Walt Disney bahwa tidak ada yang dapat secara sukses menganimasikan figur sebuah bentuk manusia atau bentuk yang menyerupai manusia. Sebuah pendekatan teknik menggambar baru sangat diperlukan untuk meningkatkan tingkatan animasi yang ditunjukkan dalam sebuah film kartun berjudul Three Little Pigs.
Walt Disney pun menyiapkan berbagai kelas bagi para animatornya dalam Chouinard Art Institute di Los Angeles dibawah instruktur dari Don Graham. Ketika kelas tersebut dibuka, kebanyakan dari mereka menggambar menggunakan formula pembuatan film kartun yang lama dari bentuk-bentuk standar, ukuran, berbagai aksi, dan gerak atau isyarat dengan sedikit atau bahkan tanpa referensi dalam sifat dasar sebuah karakter secara alami. Beranjak dari kelas inilah maka dikembangkanlah sebuah gaya dari penggambaran karakter figure manusia bergerak dan bentuk binatang. Para siswa mempelajari berbagai model seprti sebuah aksi film secara nyata, dan memutar berbagai aksi secra terus menerus. Analisis dari aksi-aksi tersebut manjadi demikian penting dalam pengembangan dari animasi tersebut. Beberapa animator mulai mengaplikasikan pelajaran tersebut dalam memproduksi animasi mereka, dimana ini membuatnya menjadi lebih menarik dan realistis. Beranjak dari pelajaran tersebut makan para animator Walt Disney secara terus menerus mencari cara yang lebih baik untuk dapat berkomunikasi dalam tiap karya yang dibuatnya.

Sedikit demi sedikit prosedur-prosedur tersebut dipisahkan dan dinamai, dianalisa serta disempurnakan, dan para animator baru-pun diajarkan berbagai kebiasaan ini. Hal inipun lambat laun menjadi prinsip dasar dari animasi tradisonal yang diantaranya adalah :

• Squash and Stretch : Yaitu menetapkan landasan dan penyusunan dari sebuah objek dengan merubah bentuk dari objek selama aksi berlangsung.
• Timing : Adalah membagi aksi untuk menentukan berat dan ukuran dari sebuah objek dan kepribadian dari karakter
• Anticipation : Yaitu mempersiapkan sebuah aksi.
• Staging : Yaitu menampilkan sebuah ide sehingga tidak hilang secara tidak disengaja.
• Follow Through and Overlapping Action : Adalah pengakhiran dari sebuah aksi dan membuat hubungan ke aksi berikutnya.
• Straight Ahead Action and Pose-To-Pose Action : Yang dimaksudkan adalah kedua perbedaan tersebut merupakan sebuah pendekatan dalam pembuatan sebuah animasi pergerakan.
• Slow In and Out : Yaitu jarak dalam inbetween frame untuk mendapatkan kehalusan dari pewaktuan / timing dan sebuah animsai pergerakan.
• Arcs : Adalah alur secara visual dari aksi guna mendapatkan pergerakan secara alami.
• Exaggeration : Bermaksud menekankan pada pokok dari sebuah ide melalui desain dan aksi karakter.
• Secondary Action : Yaitu aksi dari sebuah objek yang dihasilkan dari aksi objek lainnya.
• Appeal : Adalah pembuatan sebuah desain atau sebuah aksi yang dapat dinikmati oleh penonton.