Installing FreeSpin3D is straightforward. Download the extension for your flash version (it support Flash CS3 and CS4 now). Double click and it will install via the Adobe Extension manager. After installation, you will find a FreeSpin3D component in the component panel and a FreeSpin3D’s panel. You can start using FreeSpin3D by drag the component from the component panel to the stage.

FreeSpin3D support two 3D model format – FreeSpin3D own 3d model format (.fl3d) and the 3D Studio format (.3ds). You can import the 3D model from the FreeSpin3D’s panel or convert the .3ds by the FreeSpin3D’s import engine.

After import the 3d model, you can preview it directly from the stage in real time. FreeSpin3D supports preview in full texture or wireframe. You can manipulate the rotation of the model in the FreeSpin3D’s panel. FreeSpin3D is tightly integrated with Adobe Flash and utilizes the standard Flash timeline and motion tweening for an intuitive visual workflow. You can change the 3D rotation at any point during a motion tween and FreeSpin3D automatically generates the rotation keyframes and tweens the rotation.

You just need a click to add interactive to the 3D models. FreeSpin3D build in interactive for keyboard and mouse control. Built-in behaviors can also be easily extended with ActionScript.

FreeSpin3D also allow user to create 3D geometry and apply textures directly from the FreeSpin3D control panel. It’s as easy as selecting a primitive type from a dropdown and browsing for an image on your machine to use as a texture. You can also perform non-uniform scaling along the X,Y, or Z axis.

Do the features of FreeSpin3D excite you? Head to FreeSpin3D’s website and download a trial version now.

Start from the new issue, FFD Mag is free of charge. You can download the newest version here.

Sept – October 2009 Issue

-Options when planning a Video Application with FMS
-Flex Remoting with AMFPHP – in depth
-Multiple File Upload Using AMFPHP
-Unconditional Patterns—The State and Strategy Design Patterns: Part I
-PureMVC for haXe
-A Journey into Adobe Flex Charting Components [Part1]

If you have talent on creating stumbling flash effect, you can also become a author in FlashComponents.net. You can earn up to 60% of every item sold if you are selling exclusively through FlashComponents, and if you reach specific sales amounts. It really a great opportunity to earn more money by your talent. Also, it is a good chance to explode your great work to several hundred thousands people in FlashComponents.net.

Getting Start with Flash Catalyst Part 4

In last tutorial, you have learn how to build a fancy navigation menu with 3d effect in Flash Catalyst. In the following tutorial, you will learn how to assign action to the menu and make transition effect to each page of your content.

If you din’t visit the previous tutorial. You can find the previous tutorial of this series here.

Getting Start with Flash Catalyst Part 1 – Basic

Last tutorial, you have learn to prepare artwork and import to Flash Catalyst. In the following tutorial. You will learn how to setup a menu will fancy 3d effect and use it as a navigation menu.

If you havn’t read the previous tutorial. You can visit this series of tutorial.

Getting Start with Adobe Flash Catalyst Part 1 – Basic

C. Add rollover effect to the menu

First, we would like to add a fancy 3d transition effect when mouse over on the menu.

1. Select the menu item “button_home_up”, “button_home_over” and the hit area of home item from the stage.

1. Right click on the item. Select “Convert artwork to component>Button”.

1. Now the artwork is converted to a button component. You can see in the HUD. There are 4 states “up”, “down”, “over” and disabled.

1. Click the “up” button on the HUD. You will go into the edit different states of the button component.

1. We are going to set the transition from “up” to “over” state. Select “button_home_up”. From the layer panel or click on the stage.

1. In the timeline panel, select the state transition “up -> over”. Click the “Add Action” button at the lower side of the timeline panel. Add a “Rotate 3D” action.

1. From the properties panel. Set the value like the fig show below.

1. In the timeline panel, add a new “Fade” action. Make sure it is a fade out action.

1. Then, select the “button_home_over” object from the layer panel.
2. In the timeline, click “Add Action” and add a new “Rotate 3D” action.

1. Set the properties like the fig show below.

1. Click the “Add Action” and add a new “Fade” effect.

1. Set the properties like the fig show below. It will be a fade in effect.

1. You can test the movie now by pressing command+return or control+enter in windows. You can rollover the home button and it will show the 3d effect.

1. Now, we will do the transition from “over” to “up”. Select the States transtion “ over -> up”.

1. Select the “button_home_over”. Click “Add Action” and add a “Rotate 3D” action.

1. Set the properties like the fig show below.

1. Click “Add Action” and add a “Fade” action. Make sure it is a fade out action.

1. Select the “button_home_up”. Click “Add Action” and add a “Rotate 3D” action.

1. Set the properties like the fig show below.

1. Click “Add Action” and add a “Fade” action. Make sure it is a fade in action.

1. Now, you can test the movie. You can try rollover and roll out the item.

Repeat the steps for other menu items.Now you have a fancy navigation menu with 3d transition effect.

Short summary

In this tutorial. You have learn how to setup a menu will fancy 3d effect and use it as a navigation menu. Next tutorial, you will learn how to do transition between page and assign action to menu to control the page transition.

Last tutorial, you have learn about the basic of Flash Catalyst. In following 2 tutorials, you will learn how to create a stylish flash website with a fancy navigation menu with 3d effect and assign action to the menu without any programming.

In the tutorials, I am working on illustrator CS3 and Flash Catalyst Beta 1. You can download trial version from adobe website if you have got it.

Flash Catalyst Beta 1 – http://labs.adobe.com/technologies/flashcatalyst/

Part A. Preparing artwork in illustrator

For this tutorial, I have created a website with illustrator and put the graphics in several layers.

We need to convert the graphics of menu item into symbols. It is important to convert the graphics in the symbols. When the artwork imported into the Flash Catalyst, the symbols will remain. And you can find it in the library panel when the graphics are converted into symbols.

1. Select the “home” menu item (black). Press F8 to convert it to symbol and name it with “button_home_up“.

2. Switch off the “Mouse Up” Layer.

3. Select the “home” menu item (white). Press F8 to convert it to symbol and name it with “button_home_over“.

4. Switch on both “Mouse Over” and “Mouse Up” layer.

5. Repeat for the menu items of portfolio, gallery and contact.

Now, we have each menu item structure like show below.

Then, we need to convert the graphics of the content into symbols.

1. Switch on the layer, which contains the content of home page.

2. Select all the content. Press F8 to convert it to symbol and name it with “content_home“.

3. Repeat for the content of portfolio, gallery and contact.

Now, the artwork is ready to import to Flash catalyst.

Part B. Import the artwork into Flash Catalyst

We need to import the artwork into Flash Catalyst now.

1. Launch Flash Catalyst Beta 1. Select “From Adobe illustrator AI File” under “Create New Project from Design File”.

2. Flash Catalyst will ask you the dimension of the project after import. It will determine the dimension of your illustrator. If you want ot keep the size, just leave it default. Click ok and the graphics will import into the project. It is a good point to save the project here.

3. After import, you can find the graphics imported exactly the same as your artwork in your illustrator.

Also, You can find all symbols created in illustrator are imported as library items. And you can find inside the library panel.

Short Summary

In this tutorial, you have learn how to prepare the artwork and import to Flash Catalyst. In next tutorial. You will learn how to do fancy interactive animation with simple step. No actionscript is needed.

HUD: The heads-up display (HUD) is use to display the setting available to the selected item on the stage. You can use it to edit the item appearance and assign interaction to the selected item.

“We’ve watched so many people who come from design or non-technical worlds struggle to learn Adobe Flash,” says Lynda Weinman, co-founder of lynda.com and prominent author and educator. “This new product, Flash Catalyst, will help designers create Flash-based assets and applications without needing to know a line of code or having to learn an unfamiliar program. It should open up Flash authoring to a new generation of creators.”

Adobe Flash Catalyst is intended to give web designers the ability to quickly create application interfaces and interactive content utilizing assets created in Adobe Photoshop and Illustrator. It also allows users to output finished interactive Flash SWF files or applications. The files can also be tied into back-end systems by developers using Adobe Flash Builder (formerly Adobe Flex Builder).

Those wanting to view Flash Catalyst Beta Preview http://www.lynda.com/flashcatalyst do not need to become Online Training Library® subscribers to access all of the course’s tutorials and assets.

Subscriptions to lynda.com range from $25 for one month to $375 per year and provide anytime access to more than 38,000 easy-to-use video tutorials. Premium subscriptions include instructors’ exercise files, so members can follow along with the examples onscreen. Customers learn at their own pace and may stop, rewind, and replay segments as often as necessary.

“Adobe Flash Catalyst makes designing interactive Flash content fun and exciting,” says Mordy Golding, lynda.com author and Adobe Community Expert. “It’s great that Adobe has made the beta available to all designers, and I’m thrilled that lynda.com has decided to make my training title free as well.”

About lynda.com

Founded in 1995 by Lynda Weinman and Bruce Heavin, lynda.com is the nation’s foremost authority on online training and education, and an award-winning provider of educational materials, including Hands-On Training® instructional books, the Online Training Library®, and CD- and DVD-based video training spanning more than 600 courses for designers, instructors, students, and hobbyists.

From professional software tools like Photoshop, Flash, Dreamweaver, Logic, Illustrator, and Office to consumer-friendly education about digital photography, web design, digital video, and more, lynda.com offers training on all kinds of topics. lynda.com’s all-star team of trainers and teachers provides comprehensive and unbiased video-based training to a global membership of tens of thousands of subscribers. Learn more at www.lynda.com.

About Mordy Golding

Mordy Golding has been a production artist for print and the web for many years, and is an Adobe Certified Expert and Adobe Certified Print Specialist. At Adobe, he was the product manager for Illustrator 10 and Illustrator CS. A popular presenter at Macworld, Photoshop World, and other worldwide events, Mordy is also the author of several books, including SAMS Teach Yourself Adobe Creative Suite All in One, The Web Designer’s Guide to Color, and Real World Adobe Illustrator. In 2003, Mordy was named a Champion of Graphic Design by Graphics IQ. Currently he serves as the founder of DesignResponsibly.com, teaching designers and printers how to successfully adopt today’s new technology. His full list of lynda.com titles can be found here:

http://www.lynda.com/home/ViewCourses.aspx?lpk1=39

Just a quick link to the font resource from thinkdesignblog.

I’ve been meaning to compile this list for a little while now. I’m following up my post, 20+ Beautiful Serif Fonts, with a list of equally beautiful, equal quality sans serif fonts. As we all know, you can never get enough good quality fonts. The keyword there being quality While it is hard to find real quality in the sea of free fonts, there are a lot of very talented designers creating some very cool fonts. Here’s a list of 20+ that I’ve recently enjoyed.

While all of these fonts are free, make sure to check the homepage for more info.

What is body (rigid body)?

Yes, like you and me, every human is a body in the world. Also, a plant, an animal, a television, all is a body. For a simple definition, a body is a individual element or object which exist in the world with different shape, mass, or other properties. In the box2D world, it is the same. Every graphics, button, etc. can be a body.

To create a body in Box2DFlashAS3

Before start, you should know some basic class related to creating a body.

b2BodyDef – body definition class. It is a data class use to hold the data which describe the mass and position of the body.

b2CircleDef, b2PolygonDef – body shape definition class. It is a data class use to hold the data to describe the shape and some physical properties of the body.

b2Body – body class. It is the class for creating the body instance actually use for simulation.

1. Create body definition object

Body definition object is use to hold the definition of a body object. It is use as a data object to define the properties of the body. When using the body definition to create a body object, the data will copy from the body definition to the body instance. So, the definition object can be reuse after creating the body object instance.

To create a body definition, you can use the code below.

var bodyDef:b2BodyDef = new b2BodyDef();

Afterward, you need to set the display object which this definition refer to. Here i have a ball shape movie clip called ball1_mc. Later, we can loop though body object inside the world and get back the displayb object reference by the m_userData property of body object.

bodyDef.data = ball1_mc;

Because the simluator need to know the init position of the body object, we need to set it by following code. I simply use the current position of the display object by refer to x and y property of the display object. So, we don’t need to change the code if we change the position of the display object.

bodyDef.position.Set(ball1_mc.x, ball1_mc.y);

Each body will have mass property, you can set the mass by following code. It is in kg.

bodyDef.massData.mass = 1.0;

Normally, we don’t set the mass directly. The mass will be calculate by the size of the display object. This help to maintain the mass to size relationship. For example, we have several ball object and they have different size. If we set the mass individually, the simulation may seem wired if we not set the mass properly. So, we should set the mass base of the size of each ball. You will learn how to set the mass base on the shape in later step.

2. Create Shape definition

Define Shape

The shape of the body object will affect the behavior in simulation. So, we need to define the shape of the body object. Box2d provide 2 type of shape – circle and polygon. We can use b2CircleDef and b2PolygonDef class to create the definition.

Circle Shape

var groundDefinition:b2PolygonDef = new b2PolygonDef();

Polygon Shape

var ballDefinition = new b2CircleDef();

Set Size

We need to define the size of the shape. For a box shape, we can use the following method of the b2PolygonDef. The agreement is the half width and height of the box.

groundDefinition.SetAsBox(230, 24);

For a circle shape, we can use the radius property to set the size of the circle shape.

ballDefinition.radius = 33;

Set Friction

Friction is used to make objects slide along each other realistically. Box2D supports static and dynamic friction, but uses the same parameter for both. Friction is simulated accurately in Box2D and the friction strength is proportional to the normal force (this is called Coulomb friction). The friction parameter is usually set between 0 and 1. A value of zero turns off friction and a value of one makes the friction strong. When the friction is computed between two shapes, Box2D must combine the friction parameters of the two shapes. This is done with the following formula:

groundDefinition.friction = .5;

Restitution is used to make objects bounce. The restitution value is usually set to be between 0 and 1. Consider dropping a ball on a table. A value of zero means the ball won’t bounce. This is called an inelastic collision. A value of one means the ball’s velocity will be exactly reflected. This is called a perfectly elastic collision. Restitution is combined using the following formula.

ballDefinition.restitution = 0.5;

Set Density

Higher density means the object is heavier (large mass value) if they are in same size. We can set the density by the following code. If density equal to zero, that means the object is unmovable.

ballDefinition.density = 1.0;

It is more simple to maintain same density to same type of object and calculate the mass by the size of the shape.

3. Create body instance

Last, we need to create the actual body object use for simulation.

We construct a body object from the body definition and add to the world object for simulation by following code.

var ball1Body:b2Body = world.CreateBody(ball1BodyDefinition);

Then attach the shape to the body object.

ball1Body.CreateShape(ballDefinition);

Now, we can calculate the mass by calling the method SetMassFromShapes(). This will set the mass property of the body object base on the size of the shape of defined in the shape definition.

ball1Body.SetMassFromShapes();

Next

You should now familiarize with the body object in Box2D. In next tutorial, i will talk about world object and adding force in the world.

One of the biggest problems flash designers/developers face after publishing their work over the internet, is that soon or later will noticed their work are stolen, or at least their code. Why, because the majority of the “flashers” don’t protect their movies by encrypting their files.
Using a Flash Decompiler, is very easy to get all the movies and code from a website. However, if you encrypt your data, they will get only errors.

SymplyShed released the second version SWF Protect, which let’s you encrypt your SWF and AS files preventing from being decompiled by other programs such as Sothink SWF Decompiler or Flash Decompiler.
The process is very easy and quick, just some clicks and drags and in less than 10 seconds you have all your files protected. Just to have a clearest picture on how it works, check out this screencast.

This encryption tool was tested with:

• ASV 5.21
• Flash Decompiler v3.2
• Imperator FLA v4.0
• Sothink SWF Decompiler v4.5
• Ave Imperator

Another good aspect of SWF Protect 2.0 is the price. It costs $40.00, cheap price compared with other competitors products. For example, the Kindisoft lite version costs $100, the standard $200 and the Amayeta SWF Encrypt $150. As you can easily check, we are talking in differences between 2.5 up to 5.0 times more.

We are givingaway 3 licenses of SWF Protector. How can you win one of them?

Drop a comment about SWF Protect. Only one entry per person is allowed. On the 1st of June we will randomly choose 3 entries and contact you.

Update

Here are the three winners an email will be dispatched to you. For the other that commented and didn’t win, Paul has offered a $9.95 discount for anyone who commented while the competition was going. To claim this, please email support@swfprotect.net

And the winners are:

• Peter Franco
• Devon
• Renoir

Tagged: Encryption Tools, SWF Protection ]]> http://flashenabled.wordpress.com/2009/05/18/symplyshed-released-swf-protect-2-0-3-licenses-giveaway/feed/ 45 cpinho SWF Protect 2.0 http://flashenabled.wordpress.com/2009/05/09/using-box2dflashas3-as3-physics-engine-part-2-basic-example/ http://flashenabled.wordpress.com/2009/05/09/using-box2dflashas3-as3-physics-engine-part-2-basic-example/#comments Sat, 09 May 2009 14:22:05 +0000 WaiLam http://flashenabledblog.com/?p=2907 Continue reading →]]> In recent tutorial, you learn some basic things which are important before start to use Box2DFlashAS3. In the following tutorial. I will teach you with example to use a basic world.

In the following tutorial, you will learn how to setup a basic scene – one ball and one box hit the ground. When running the flash, you will see the ball and box fall and bound off the ground.

A. Setup the scene graphics.

First, we need to setup the graphics we needed for simulation.

1. Open a new Action script 3.0 project in flash.

2. Draw and ground with box tool. I set it to 500 width x 50 height.

3. Convert it to a movie clip (press F8).

4. Name it with instance name “ground_mc”.

5. Double click and edit it. Place it center to origin (0,0).

6. Draw a ball (60 x 60). Name it with instance name “ball_mc”. Repeat step 2 to 5.

7. Draw a box (40 x 40). Name it with instance name “box_mc”. Repeat step 2 to 5.

8. Position the graphics like show below.

B. Adding Action Script

Step 1. Select the frame on the timeline and open the actionscript panel(F9 or option+F9 in mac).

Step 2. Enter the code below to import necessary library.

// Classes used in this example
import Box2D.Dynamics.*;
import Box2D.Collision.*;
import Box2D.Collision.Shapes.*;
import Box2D.Common.Math.*;

Step 3. Enter the code below to set the constant

// Define constant
var m_iterations:int = 5; // define the iteration of simulation
var m_timeStep:Number = 1.0/5.0; //define the time step of simulation

Step 3. Construct world object for simulation

The world object is use to define a world like the real world. You will have gravity inside. All object will add to this world object for simulation.

// Creat world AABB
var worldAABB:b2AABB = new b2AABB();
worldAABB.lowerBound.Set(-100.0, -100.0);
worldAABB.upperBound.Set(1000.0, 1000.0);

// Define the gravity vector
var gravity:b2Vec2 = new b2Vec2(0.0, 10.0);

// Construct a world object
var world:b2World = new b2World(worldAABB, gravity, true);

Step 4. Setup the ground object

A ground object is just like the ground in the real world. It is static and allow other object to collis on it without moving.

First, we need to define the properties of the ground. We use a b2PolygonDef to define the physical properties and b2BodyDef to define the simulation properties. It is important to set the property “density” to 0. Since 0 value means the ground is non-movable object.

To set the size of the shape, we use the SetAsBox function. The SetAsBox function takes the half-width and half-height. So in this case the ground box is 100 units wide (x-axis) and 20 units tall (y-axis).

The object b2PolygonDef also use to define the physical properties of the object.

friction – Friction is used to make objects slide along each other realistically
restitution – Restitution is used to make objects bounce.
density – The density of the object

I will talk more about these proprties in the future tutorials.

// Construct a shape definition for the ground
// It is use to store the physical properties of the ground
var groundDefinition:b2PolygonDef = new b2PolygonDef();
groundDefinition.SetAsBox(250, 25);
groundDefinition.friction = 0.3;
groundDefinition.density = 0; // we set the density to 0 means the ground is not movable

// Construct a body definition for the ground
// It is use to store the position and rotation of the ground
var groundBodyDefinition:b2BodyDef = new b2BodyDef();
groundBodyDefinition.userData = ground_mc; // Link to the visualize object named “ground_mc”
groundBodyDefinition.position.Set(ground_mc.x, ground_mc.y);
groundBodyDefinition.angle = ground_mc.rotation/180*Math.PI;

Then, we will use the body definition to create a body object for simulation. Then we creating the ground polygon shape on the ground body.

// Construct a body object and add to the world object for simulation
var groundBody:b2Body = world.CreateBody(groundBodyDefinition);
groundBody.CreateShape(groundDefinition);
groundBody.SetMassFromShapes();

Step 5. Setup the ball for simulation

Now, we setup the ball object. It is similar to the setup of the ground. But we use b2CircleDef as the shape definition object. Since it is a circle like object. We can set the radius of the shape.

// Construct a shape definition for the ball
// It is use to store the physical properties of the ball
var ballDefinition = new b2CircleDef();
ballDefinition.radius = 30;
ballDefinition.density = 3.0;
ballDefinition.friction = 0.5;
ballDefinition.restitution = 1; // We set the restitution properties to control the bounce of the object. Higher means more elastic

// Construct a body definition for the ball
// It is use to store the position and rotation of the ball
var ballBodyDefinition:b2BodyDef = new b2BodyDef();
ballBodyDefinition.userData = ball_mc;
ballBodyDefinition.position.Set(ball_mc.x, ball_mc.y);
ballBodyDefinition.angle = ball_mc.rotation/180*Math.PI;

// Construct a body object and add to the world object for simulation
var ballBody:b2Body = world.CreateBody(ballBodyDefinition);
ballBody.CreateShape(ballDefinition);
ballBody.SetMassFromShapes();

Step 6. Setup the box for simulation

We setup the box object by the code below.

// Construct a shape definition for the box
// It is use to store the physical properties of the box
var boxDefinition = new b2PolygonDef();
boxDefinition.SetAsBox(20, 20);
boxDefinition.density = 1.0;
boxDefinition.friction = 0.5;
boxDefinition.restitution = .5;

// Construct a body definition for the box
// It is use to store the position and rotation of the box
var boxBodyDefinition:b2BodyDef = new b2BodyDef();
boxBodyDefinition.userData = box_mc;
boxBodyDefinition.position.Set(box_mc.x, box_mc.y);
boxBodyDefinition.angle = box_mc.rotation/180*Math.PI;

// Construct a body object and add to the world object for simulation
var boxBody:b2Body = world.CreateBody(boxBodyDefinition);
boxBody.CreateShape(boxDefinition);
boxBody.SetMassFromShapes();

Step 7. Setup the render loop

Last, we need to setup a render loop to calculate the simulation result. Then, assign the new simulation result to the object.

function render(e:Event):void
{

// calulate the simulation
world.Step(m_timeStep, m_iterations);

// Go through body list and update sprite positions/rotations
for (var bb:b2Body = world.m_bodyList; bb; bb = bb.m_next){
if (bb.m_userData is Sprite){
bb.m_userData.x = bb.GetPosition().x;
bb.m_userData.y = bb.GetPosition().y;
bb.m_userData.rotation = bb.GetAngle() * (180/Math.PI);
}
}
}

// Add the Event.ENTER_FRAME listener
addEventListener(Event.ENTER_FRAME,render);

That all for the code in this example, you can test the movie. You will see the ball and box falling and hit the ground. The ball bounce more due to a higher restitution value.

You can download the source code here for testing (right click and save as zip file). Since the file not included the Box2D library. You need to download it from here or follow the previous tutorial to setup your working environment first.

In this tutorials, you just learn to setup a basic world for simulation. In next tutorial, i will talk about each advanced features.

You should evaluate whether a simple and cheap web hosting plan would be enough for your personal site, or a dedicated server would fit better your business, despite the high value you must pay for it. As, on the other hand would be more reliable, and would support a wider range of demanding resources to support your own server.
You can compare the prices, if you are not considering to spend too much money, or bandwidth and storage space, if your aim is to set a project requiring big amounts of data, or choose between .net or php depending on which do you feel more comfortable or your project platform requirements.
Last but not the least, if you are seeking for protect the world, or reduce the indirect production of CO2, or if your company / corporation applied some environment policies, you might want to consider the right green hosting for your company.

Choosing a web hosting provider is easy but requires time. You should consider first, several topics like, what does your project need, whether would produce big amount of traffic, or what kind of content will you be publishing. Sometimes, money is not the most important. If you are just deploying a small website, bear in mind that more than big amounts of storage (you will never use), maybe a reliable support 24/7 would be more important.

A) Why Physics Engine?

You can do predefined animation in flash by time line or key frame. But this is time consuming. You need a lot of time to do the animation frame by frame. For example, have a scene with a ball dropping on the floor. This may request few hours of time to tweak the position and motion to make it realistic. So, you need a physics engine. A physics engine can simulate realistic physics movement of a object base on mathematical equation.

Evermore, it can provide real time interaction between user and the object. Most likely, you can find physics engine use in games.

B) Box2DFlashAS3 physics engine

Box2D is a feature rich 2d rigid body physics engine, written in C++ by Erin Catto. It has been used in many games, including Crayon Physics Deluxe, winner of the 2008 Independent Game Festival Grand Prize. Many ports are available for Flash, Java, C#, Python, JavaScript, D, and fixed point embedded devices.

Box2DFlashAS3 is an open source port of Erin Catto’s powerful c++ physics library Box2D. It provide most of the features included in the original Box2D library.

C) Some concepts must know…

Box2D works with several fundamental objects. We briefly define these objects here and more details are given later in this document.

rigid body (body)

A chunk of matter that is so strong that the distance between any two bits of matter on the chunk is completely constant. They are hard like a diamond. In the following discussion we use body interchangably with rigid body.

shape

A 2D piece of collision geometry that is rigidly attached to a body. Shapes have material properties of friction and restitution.

constraint

A constraint is a physical connection that removes degrees of freedom from bodies. In 2D a body has 3 degrees of freedom. If we take a body and pin it to the wall (like a pendulum) we have constrained the body to the wall. At this point the body can only rotate about the pin, so the constraint has removed 2 degrees of freedom.

contact constraint

A special constraint designed to prevent penetration of rigid bodies and to simulate friction and restitution. You will never create a contact constraint, they are created automatically by Box2D.

joint

This is a contraint used to hold two or more bodies together. Box2D supports these joint types: revolute, prismatic, distance, and more. Joints may support limits and motors.

joint limit

A joint limit restricts the range of motion of a joint. For example, the human elbow only allows a certain range of angles.

joint motor

A joint motor drives the motion of the connected bodies according to the joint’s degrees of freedom. For example, you can use a motor to drive the rotation of an elbow.

world

A physics world is a collection of bodies, shapes, and constraints that interact together. Box2D supports the creation of multiple worlds, but this is usually not necessary or desirable.

D) Prepare to use the engine.

Download Box2DFlashAS3.
You can download the Box2DFlashAS3 library from the url below. Most recent version now is 2.02.

http://box2dflash.sourceforge.net/

You will got a zip file with the library source and some examples. Basically, you only need the source folder called “Box2D”. You can extract the files to your working directory and try the demo of the engine by double click the PhysTest.swf.

Setup class path

If you extract the file in your working, this step is not nessary. But if you place the library elsewhere other than your wokring directory. You can follow the step below to setup class path.

1.Open your working fla.

2.Open publish settings ( Menu>File>Publishing Settings).

3.Selct the Flash section.

4.Click “Settings…” button.

5.Click the “+” button and fill in the class path or browser to root directory of the library.

6.Click OK and return to the stage.

Next Part, i will doing a basic example on using the engine.

Part 2 – Animate the character by bones.

Step 1. Set the start pose and end pose

First, we need to set the start pose and end pose. My animation will start at a standing pose and end with the same pose. Remember to backup your fla first.

Using the select tool press and drag on the bone. You can set the pose of the character.

I have set the standing pose like below.

Because we need to have the same pose at the end, we create a new key frame at 150 frame. Scroll to see the 150 frame and click on it to highlight. Press F6 to create a new key frame. Now, you have 2 key frame at frame 1 and frame 150.

Step 2. Set the leg pose

Now, i am going to set the pose in each key frame. I drag the foot bone to set the pose. You will see the leg is move like a chain when moving the foot bone.

At frame 15, create a new key frame. Set the pose of leg like below.

At frame 30, create a new key frame. Set the pose of leg like below.

At frame 45, create a new key frame. Set the pose of leg like below.

At frame 60, create a new key frame. Set the pose of leg like below.

At frame 90, create a new key frame. Set the pose of leg like below.

Step 3. Set the arm pose

Following the legs, i will work on the arm. Similar to the leg, i drag on the hand tool to move the arm.

At frame 30, create a new key frame. Set the pose of arm like below.

At frame 40, create a new key frame. Set the pose of arm like below.

At frame 55, create a new key frame. Set the pose of arm like below.

At frame 70, create a new key frame. Set the pose of arm like below.

Step 4. Set the head pose

Now, i going to set the pose of the head. I can drag the head bone to move the head. You will see the head movement is limited when move the bone.

At frame 23, create a new key frame. Set the pose of head like below.

At frame 37, create a new key frame. Set the pose of head like below.

At frame 47, create a new key frame. Set the pose of head like below.

Now you can test the animation.

Step 3. Add easing effect to the animation.

Some of the animation may not look nature. Since they are always move in the same speed. But flash allow you to add easing function between each pose.

To add easing function to the animation. Click on the time line, between two key frame. The, you will see the panel to add the easing effect.

In the panel, you can set the strength of the easing effect and the type of easing effect.

Conclusion

The bone tool is a very good feature. But after using the tool, i think it have a lot of space for improvement on the tool. For example, the bone tool did not support individual time line for each bone. This lead to a problem if you have a complex animation. Also, it leak of control for tweaking the bone’s affected area and strength on the shape. Hope these will be improved in next version.

After the tutorial

In this series of tutorial, you have learn how to animate a character with bone. This is not the only way to animate a character with bone. Beside using a single shape character. You can also link the bone to different move clip to do bone animation. Bone tool also support a interesting function, it can allow user to interact with the animated body in real time. That mean, you can interact with it when it is published as a swf. Hope i can have a tutorial later for these functions.

Flash CS4 Animation with Bone Part 1
Flash CS4 Animation with Bone Part 2
Flash CS4 Animation with Bone Part 3