Manipulating Shapes Using Bone Tool in Flash CS4

Bone Tool in Flash CS4 can be used in various ways to create IK effects with animations, but also you can use this powerful tool to manipulate shapes. Here is quick tutorial on how to do it.

Create new Flash AS3 file. Go to Insert - new symbol or CTRL+F8 to create new movie clip. Give it some name or leave default, it doesn't matter.

Select Polystar Tool and draw single pentagon shape on Stage. Now, select Bone Tool from tool box or press X on keyboard. You will create 5 bones all starting from the center of pentagonal shape all the way to shape vertices like image shows.

Now, you have noticed new Armature layer and that's what will work on next. We have to introduce some new armature positions, so right click on frame 10 and select insert pose. Use selection tool (V) to move bones around. Continue to do same thing on frames 20, 30, etc.

Finally when you think you have enough changes, move for another 10 frames and insert another pose. Now, you can actually copy and past different poses with right click on specific armature frame, but you will need a lot of patience to make this operation work. Paste first pose onto last armature frame.

When you are done, go back to do Scene 1 and from library drag and drop movie clip instance on the Stage. That's it, test your movie.

This is just one simple example on how to use bone tool to manipulate shapes in Flash CS4, but that's enough for you see how incredible effects can be achieved with just playing around with new Flash tools.

*_*

New Blog with free flash clocks

If you are not first time here you probably know about few free Flash clocks I published earlier like:

Analog Clock Worldmap or
Classic Blue Clock

I have finally managed to establish new blog for my clocks collection (currently I have around 20 of them) and I have excellent domain for it Flash2nd.com. For now I have published only few of them and not the best ones, but first ones I made. Some of them are even two years old!

My plan is to publish one new clock each day for at least next 3 months, but we'll see how that goes. Feel free to download any of them (or all), leave comments and make suggestions. This is very work-in-progress blog, so nothing spectacular yet.

Thanks for support.



*_*

Flash gravity example (black hole simulation)

Have you ever wondered how it looks like when black hole or some other massive gravity object bends space-time fabric? Me too. I don't know why, maybe I watch Discovery too much.

Anyway, here is small Flash example (experiment) which allows you to see gravity in action. You can do 2 things here, move gravity object around the Stage (grey circle) and turn gravity on /off.

Here is actionscript code for single line. Just add more lines and that's it.

onLoad = function() {
 var gravity = false;
 g_txt.text = "gravity: OFF";
}
onEnterFrame = function() {
 createEmptyMovieClip("line0", 0);
 line0.lineStyle(0, 0xFFFFFF);
 line0.moveTo(100, 50);
 
 if(gravity) {
  line0.curveTo(point1._x, point1._y, 500, 50);
  g_txt.text = "gravity: ON";
 } else {
  line0.curveTo(100, 50, 500, 50);
  g_txt.text = "gravity: OFF";
 }
}
switch_mc.onRelease = function() {
 if(gravity) {
  gravity = false;
 } else {
  gravity = true;
 }
}

movie example




*_*

Create Flash Banner Using FuseKit Simple Tutorial

Animating multiple objects in AS2.0 projects can be real pain. To make things ease, many open source libraries exists out there. One of them (and probably most popular one) is The Fuse Kit.

In order to finish this Flash banner tutorial, you need to download FuseKit code and add new classpath if you use Flash Authoring Tool. From main menu choose Edit _ Preferences _ ActionScript _ ActionScript2.0 setting. Than click + sign and enter path to FuseKit code. When done, you are ready to make your banner.

step 1

Create new document with dimensions 468 px width and 60 px height, which is full banner dimensions. I have background color set to #333333 and 18 fps.

step 2

You will create 3 new movie clips: problem_mc, solution_mc and company_mc. Graphic isn't that important, you can draw what ever you want, but just as reference here are dimensions for my graphics (shown below): problem_mc (75px width and 25px height), solution_mc (200px width and 18px height) and company_mc (383px width and 26px height). Place instances of movie clips like on image below and name them: 'problem1' lower left, 'problem2' lower middle, 'problem3' lower right, 'problem4' upper left and upper right instance should be named 'problem5'. Another two instances are 'solution' and 'company'.

step 3

Open Actions panel for Frame 1 and enter single line of code:
#include "banner_code.as"
Save your document.

step 4

When done, create new ActionScript file 'banner_code.as' and enter next code:

import com.mosesSupposes.fuse.*;
ZigoEngine.simpleSetup( Shortcuts, PennerEasing, Fuse );

var f:Fuse = Fuse.open();
f.label = "animation";

Fuse.openGroup();
problem1.tween("_y, _rotation", [45, "-360"], 0.5, "easeInExpo");
problem2.tween("_y, _rotation", [45, "-360"], 0.75, "easeInExpo");
problem3.tween("_y, _rotation", [45, "-360"], 1, "easeInExpo");
problem4.tween("_y, _rotation", [17, "360"], 1.5, "easeInExpo");
problem5.tween("_y, _rotation", [17, "360"], 2, "easeInExpo");
Fuse.closeGroup();

Fuse.addCommand("delay", 2);

Fuse.openGroup();
solution.tween("_x", 345, 1.5, "easeOutBack");
solution.tween("_y", 25, 1.5, "easeOutBack");
Fuse.closeGroup();

Fuse.addCommand("delay", 2);

Fuse.openGroup();
company.tween("_x", 234, 0.75, "easeOutQuint");
company.tween("_y", 25, 0.75, "easeOutQuint");
problem1.tween("_y", 100, 0.5, "easeInExpo");
problem2.tween("_y", 100, 0.5, "easeInExpo");
problem3.tween("_y", 100, 0.5, "easeInExpo");
problem4.tween("_y", 100, 0.5, "easeInExpo");
problem5.tween("_y", 100, 0.5, "easeInExpo");
solution.tween("_x", 700, 0.5, "easeInExpo");
Fuse.closeGroup();

Fuse.close();

f.start();

Test your movie.

Here is what code does. First two lines we set FuseKit to be available. Fuse open and close lines are start and end code for fuse sequence. Labeling the fuse isn't necessary here. We have 3 groups of tweens and small delays between them. First group is for problem_mc instances. We change their y position and rotation in different time intervals and in that way instances are 'falling' one after another. Second group changes solution_mc position and finally third group moves all instances so in the end we have only company_mc on Stage.

This is very simple tutorial on how to create flash banner using FuseKit in only 4 easy steps. To further improve this technique, take a look at FuseKit documentation to see what is available.

DOWNLOAD banner example

*_*

Flash Platform Books

Every once and a while when I come across some Flash Platform related book I have this habit to post about it, just as a self reference thing, but as time passes I realized how there were lots of this reviews on my blog.

However, I also noticed how learning from a book can be hard sometimes. This doesn't have to apply to everyone, off course, it is probably an individual thing, but quality of the book is also important. There are many 'reference-kinda' books out there with lists of thing you can do, basic programming techniques descriptions within 800+ pages you can read for days or even weeks and not learn much.

For me personally, best ones are real life examples tutorials, concrete knowledge which you can implement and expand right away. This kind of books I would buy any day.


Here is the list of Flash Platform books related reviews or mentions including Adobe AIR and Flex:

Flash CS4 for dummies

The ActionScript 3.0 migration guide

Beginning Adobe AIR

Creating mashups with Adobe Flex and AIR

Flex for developers

AIR for JavaScript developers (free ebook)

Learning Flash CS3 Video

Learning ActionScript 3.0 - beginners guide

Flash XML applications

Essential ActionScript 3.0

*_*