“Can you show my cool product on our web in 3D?” Did your clients asked you before? You answer may be “It’s not possible” or “Our budget can’t achieve this high-technology”. But you may need to change your answer now. FreeSpin3D bring an easy way to include interactive 3D in Flash. You can easily embed a fully interactive 3D product showcase in your website with a very low cost.

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.

lash and Flex Developers Magazine brings the new issue of bi-monthly PDF magazine for free download with better and richer content.

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]

Having a project with a short deadline? Or, you want to have some stumbling effect in your design but you are not familiarizing with coding. The FlashComponents.net can help you. FlashComponents.net provides you essential online tools to simplify the process on development and publishing. It database contains 10000+ flash resources across 100+ catalogues. From 3D Carousel Flash Menu to Full Websites Templates. With 3000+ quality author and some big brands. You must find what you want by search thought their database. I have tried to buy some flash effect from them and all work great. And it really saves me from the deadline. I will buy more in the future. You can start searching there database here.

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 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.

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.

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

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.

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.