ShareThis

Getting Start with Flash Catalyst Part 3

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.

ShareThis

Getting Start with Flash Catalyst Part 2

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.

ShareThis

ShareThis

JUNE 1, 2009, VENTURA, CA—lynda.com, the award-winning provider of online training and education for consumers, businesses, and schools, today announced that it is offering its latest online training video course, Flash Catalyst Beta Preview with Mordy Golding, completely free to the public. The course is being released on June 1, 2009, the same day as the long-awaited public release of the Flash® Catalyst beta by Adobe® Systems Incorporated. To view this training course, visit http://www.lynda.com/flashcatalyst

“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

ShareThis

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.

ShareThis

In the previous tutorial, i have do an basic example. You should learn the basic step to start using Box2D in flash. In the following tutorials, i hope you will get more familiarize with using Box2D. First, i will talk about the basic element in Box2d – body.

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.

ShareThis

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

ShareThis

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.

ShareThis

In the past i faced some problems with some hosting providers. Some because were down several times, other because decided to raise their prices, sql database problems and so on.
When for the first time I hosted my first project, I even didn’t notice what should I consider prior to choose the right hosting provider. Nowadays things like these became easier, specially, because we can find web hosting rating sites, where we are able to find such information. But even better than that, is the possibility to hear the opinion from other people which use or used certain web hosting provider.

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.

ShareThis

I recently work on a project using Box2DFlashAS3 library and find it is a great thing we must learn. So, i want to write some beginner tutorials which help others to learn it. I will divided the tutorial in  several parts. In part 1, you will learn some basic concepts and preparation needed before using the engine.

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.

ShareThis

In previous tutorial, i have teach you how to add bone to a character and optimize the bone. Now, We go to the last step to animate the character by the bones. In this tutorial, you learn how to animate the character by moving the bones. I will do a simple dancing animation.

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

ShareThis

In previous tutorial, i have teach you how to add bone to a character. But, if you test by moving the bone, the character look wired. So, we need to optimize the bone in order to have best result when doing animation.

Part 2 – Optimizing the character and bones use for animation.

Step 1. Optimize body bone

The body bone is use to hold the body shape and it is the root of all bone. When we need to move the position of the character, we can move this bone. To adjust the shape affected by the body bone. We need to use the binding tool. Press and hold on the bone tool icon in the toolbar, the binding tool icon will appear. Select it.

Select the body bone and the knot affected by this bone will be highlighted with yellow color.

Press on the knot and drag on the bone and connect the knot and bone. To remove control points from the bone, Ctrl-click (Windows) or Option-click (Macintosh) a control point that is highlighted in yellow.

Connect the knot and the body bone like show below.

Step 2. Optimize hip and shoulder bone

Shoulder bone is use to connect the arm and hip bone is use to connect the leg and the body. In this character, these bone only use for connection and they will not affect the shape. So, we need to fix the position and rotation of these bones.

First, we disable all the connection from these bone to the shape. Select binding tool and click on the left shoulder bone. You can see some knot of the shape are highlighted. To remove control points from the bone, Ctrl-click (Windows) or Option-click (Macintosh) a control point that is highlighted in yellow. Repeat for right shoulder and the hip bones.

Second, we need to disable the rotation of the bone. Use the select tool to select the shoulder bone. Then you will see the option panel for joint:rotation. click on the “enable” check box to disable it.

Repeat for the right should and two hip bone.

Step 2. Optimize head and neck bone

The head and neck bone is use to control the movement of head. To have a better result, i have to limit the movement of the neck and head bone.

Select the neck bone. From the properties panel. Set the rotation constriant to -15 to +15 degree.

Then, only connect knots near the neck area.

Select the head bone. From the properties panel. Set the rotation constriant to -20 to +20 degree.

Then connect the rest of the knots in head area to the head bone.

Now, you can test the head movement. Use the select tool and select the head bone. Drag and move the bone and you can see the head move with the bone.

Step 3. Optimize arm and bone

Now, for the arms. First, we need to set the connection for each bone. Start from right arm, select upper arm bone. Use the binding tool to set the knot connection near the bone like the figure show below.

Select lower arm bone. Use the binding tool to connect the knot to arm bone like the figure show below.

Select hand bone. Use the binding tool to connect all knot from the hand to the bone.

Now, we set the rotation constraint for each bone.We limit the ratation of the upper arm from -10 to +70 degree. This will make sure the arm will not collapse with the body and head.

Then we limit the rotaiton of the lower arm from -80 to +0 degree.This make the arm move more nature.

Now, we test the movement of arm. The arm look strange when i move the bone.

We need a further tweak on the shape. First, we add one more point on the arm. Use the add anchor tool (Key “+”) click on the arm and add a point. Move the point and make the shape like this. You can also delete some unusual point by using the remove anchor tool (Key “-”).

Then, we reconnect some point to the bones.

Now, the arm look better.

Repeat the steps with the left arm.

Step 4. Optimize leg and bone

Now, for the legs, similar to the arm. We also need to connect the shape to the bone and limit the rotation of the bone.

Select the upper leg bone. Use the binding tool to connect the upper area shape to the bone.

Select the lower leg bone and connect the lower leg shape.

Last, select the foot bone and connect the foot shape.

Now, we set the rotation constraint for each bone.We limit the ratation of the upper leg from -45 to +25 degree.

Then we limit the rotation of the lower leg from 0 to +45 degree.

Limit the rotation of foot from 0 to +45 degree.

Now, you can test moving the bone. You can see the shape move with the bone like a skin of the bone. If the shape not moving correctly. You can adjust the connection between bones and knot.

In next tutorial, you will learn how to animate this character.
Flash CS4 Animation with Bone Part 3

ShareThis

Today, i am going to have a tutorial on how to create a 3d page flipping effect with flash component. There exist many page flipping solution around the net. But this one – PageTurn 3D is awsome. It has a relistic 3d page turn effect and i think it is very easy to use. Here is a tutorial how i use it to create a flipping book.

Step 1. Prepare images for each page from a pdf.

First, you need to prepare images for building the book. If you have Acrobat, you can simply export the pdf to jpg from the export menu. Then, you will create a sequence of jpg with file name arrange by page number.

Or, if you are not working from a pdf. You can save from other program to the jpeg files.

Step 2. Create a config xml for the components.

After you have the image of each page, you need to create a xml for config. The xml is use to describe which image use in your book.

If you have Photoshop, you can create the xml automatically. In Photoshop, goto menu>file>automate>Web Photo Gallery. Then, you will see the interface to create a web photo gallery from a bundle of images. Choose the folder which you put the images from step 1 and then choose the destination folder. You can save in a sub folder in your working folder for better management. After press the ok button, you will see photoshop automatically resize the photo and save in the destincation folder with a photos.xml generated.

If you havn’t photoshop, you can create your own xml. Open up any text editor. Copy the code below. Each <item> tag is describing a page in the book. You need to set the “path” attribes and the dimension of the file by width and height. Remember to add type = “bitmapfile”, this indicate the page is from a image file. After finish editing, save the xml inside the folder where you put your images.

<items id = “items” relativepath=”true”>

<item path = “page1.jpg” width = “450″ height = “800″ type = “bitmapfile”>
</item>

<item path = “page2.jpg” width = “450″ height = “800″ type = “bitmapfile”>
</item>

</items>

Step 3. Setup the component in a project.

This is the easy step. Create a new ActionScript 3.0 project or open your working project. Save it in the working folder. Make sure you have same the images and xml in the same working folder.

Open component panel, press command + F7 is OS X or ALT +F7 in windows. You will see the PageTurn 3D component sitting under the digicrafts catalog if you install it properly.

Drag from the panel to the stage. Resize it to what you want.

Make sure you selecting the component. Press Shift+F7 to open up the component inspector. Then, you will see the setting of the component. You can play around it.

Then, fill in the path to the xml which you created below in the field show below. The path should be relative path.

Almost done, you can futher customize the book from the component inspector. The setting is displayed in real time. Just play around with your eye and hand.

Then you can test the movie. You will see a flipping book in 3d. You can drag on the page and see the realistic page flipping effect. When click on it, you can zoom in the page view.

Step 4. Add control to the component.

Last, i want to add button to control the navigation of the book.

First, I drag 2 button from the component panel to the stage.

Then, i give a instance name to them. I call them “NEXT_BTN” and “LAST_BTN”.

Select the PageTurn component and open up the component inspector. Goto interactive section. You will see the field for fill in the next and prev control button. I filled in with my button name
“NEXT_BTN” and “LAST_BTN”.

That all, you can test the movie. You can now navigate the book by the button.

If you interesting on this components, you can get the demo from here. Or, you can buy it from digicrafts.

ShareThis

In Flash CS3 or previous version, it is the worst job if you want to do character animation inside flash. I prefer to  use 3 rd party software such as ToonBoom to do the animation first and then import it in to flash.

But in CS4, there included a new nice tool for doing character animation. This is called bone tool. You can create IK bone which help on doing character animation.

In this tutorial, i will introduce how to use the bone tool.

I diveded it into 3 parts.

Part 1, you will learn how to add bone to a character.

Part 2, you will learn how to optimize the character and bone use for animation.

Part 3, you will learn how to animation the character with the bone tool and keyframe.

Quick link here.

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

Part 1 – Adding bone to character with bone tool.
_______________________________________________________________________________

Stpe 1. Prepare the character.

Create a Character with your favour vector editing tool such as Illustrator or simply using flash. I have created a simple character in flash.

Here are some best practise tips you may need to bear in mind.

• Closed stroke and fill- your graphics should always have closed stroke. When tweening in between poses, cloased stroke made best result.
• Simplfy shape - your graphic should have a simple stroke. Optimize your shape and remove unnecessary knot.
• Simple colour – Your graphics should have a simple colour for easy tweening.
• Symmetry Pose shape – Draw your character in symmerty pose shape. The pose shape should have the arm and leg easy to set pose.

Step 2. (Optional) Importing artwork to Flash.

When you draw your graphics in other program such as illustrator. You need to import the graphics into Flash. You may need to clear up the graphics if needed.

You can get more info here for importing your graphics.

Using imported artwork

Step 3. Add bone to the shape.

In order to animate your charater, you need to add bone to your graphics. You can select bone tool in the toolbar.

Bone Tool – Adding bone to shape or object.

Bind Tool – Conntect the shape or object to the bone.

Create main bone on the body.

Select the bone tool. Click on the position under the head and drag to near the hip of the character to create a bone. Here i use one bone for the whole body. You can add more bones if you have complex animation on the body.

Create the shoulder bone.

Move the mouse to the join of the main bone under the head. Drag and create the left shoulder bone parallel to the shoulder. The end of the bone should near the middle area of the joint between body and arm. Repeat for the right shoulder.

Create the hip bone.

Move the mouse to the join of the main bone under the head. Drag and create the left shoulder bone parallel to the shoulder. The end of the bone should near the middle area of the joint between body and arm. Repeat for the right shoulder.

Create the head and neck bone.

Drag from the joint under the head and create a small neck bone. Then, drag from the end ofthe neck bone and create a bigger bone use for head. The head bone will connect to the head later to control the movement of the head. So, it is better to have a bigger head bone in order to control all the point in the head.

Create the arm bone.

Start from the end-joint of the left shoulder bone. Drag and create 3 bone along the left arm. 1-Shoulder to knot. 2-knot to hand. 3-hand. Repeat for the right arm.

Create the leg bone.

Start from the end-joint of the left hip bone. Drag and create 3 bone along the left leg. 1-hip bone to knot. 2-knot to foot. 3-foot.

The bone will looked show below.

Part 2, you will learn how to optimize the character and bone use for animation.

ShareThis