Fuel your Flash with FreeSpin3D


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

Posted in Reviews | Tagged , , | 11 Comments

Flash&Flex Developer’s Magazine now free.

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]

Posted in Resources | Tagged , , , | 1 Comment

Fuel your Flash

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.

Posted in Articles, Reviews | Tagged , | 4 Comments

Getting Start with Flash Catalyst Part 4 (end) – Assign Interaction

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

Getting Start with Flash Catalyst Part 2 – Import artwork

Getting Start with Flash Catalyst Part 3 – Menu with 3d effect

D. Add transition effect between pages

First, we would like to add a fancy 3d transition for transition between pages.

  1. Since we have 4 different pages. We need to create 4 states first. From the

PAGES/STATES panel, click the duplicate button and create second state.

  1. In this state, we are going to show the portfolio. From the layer panel, hide the “content_home” layer and visible the “content_portfolio” layer by click the visibility icon (the eye).

  1. Repeat for the other 2 pages. Now we have 4 states with different page visible.

  1. Now, we going to set the transition effect between pages. In the TIMELINES panel,select the transition state “page 1 -> page 2”.

  1. Select the “content_home” object. Click “add action” button to add a “Rotate 3D” effect. We add a rotate effect to the portfolio content for hiding.

  1. Set the properties to the fig below.

  1. Select the “content_portfolio. Click “add action” button to add a “Rotate 3D” effect. We add a rotate effect to the portfolio content for showing.

  1. Set the properties to the fig below.

  1. Repeat the step to set transition for “page 1 -> page 3”, “page 1 -> page 4”. Also, the revsed trnsition “page 2 -> page 1”, “page 3 -> page 1”, “page 4 -> page 1”. Beside rotate 3d effect, you also add resize effect or move effect.

E. Assign action to the navigation menu button

Now we need to add action to the navigation button for trigger the page transition effect.

  1. Select the home menu item (button_home). The HUD will pop up.

  1. Click the “+” button in the “Custom interaction” to add a new “on Click” action for the button.

  1. From the “Do Action” combo box, select “Play transition to state”.

  1. Since this is the “home” button. We want the page transition to home page (page 1). From the “To Target” combo box, select page 1.

  1. Since we want to the page transition to page 1 in any state when click on this button. We leave the combo box below to “When in Any state”.

  1. Repeat the step for each navigation button. Now we have finished the setup. And you can test the movie. You now have a amazing 3d rotate transition effect for each page.

Summary

Hope you enjoy this series of tutorial for Flash Catalyst. You have learned basic concept of Flash Catalyst and doing transition effect by using it. Flash Catalyst is an amazing tool for designer for creating rich flash website without any programming. And it is just a beta version now. It should add more function in the future release. Hope I can have more tutorial for the future version.

Posted in Flash Catalyst, Tutorials | Tagged , , , | 7 Comments

Getting Start with Flash Catalyst Part 3 – Menu with 3d effect

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.

Posted in Flash Catalyst, Tutorials | Tagged , , , | 3 Comments

Getting Start with Flash Catalyst Part 2 – import artwork

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.

Layer

Description

Menu Item (Mouse up)

hold the menu items when in mouse up state.

Menu Item (Mouse Over)

hold the menu items when in mouse over state

Menu Item (Hit area)

hold the hit area for each item.

Content (Home)

hold the content for home page.

Content (Portfolio)

hold the content for portfolio page.

Content (Gallery)

hold the content for gallery page.

Content (Contact)

hold the content for contact page.

Background

Static background

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.

Posted in Flash Catalyst, Tutorials | Tagged , , | 8 Comments

Getting Start with Adobe Flash Catalyst beta 1 – Part 1

What is Flash Catalyst?

catalyst_1_ui

Adobe Flash Catalyst is a new professional interaction design tool for rapidly creating user interfaces without coding.

  • Transform artwork created in Adobe Photoshop® and Adobe Illustrator® into functional user interfaces.
  • Create interactive prototypes with the ability to leverage them in the final product
  • Publish a finished project as a SWF file ready for distribution
  • Work more efficiently with developers who use Adobe Flash Builder™ 4 to create rich Internet applications (RIAs). Designers use Flash Catalyst to create the functional user experience then provide the project file to developers who use Flash Builder to add functionality and integrate with servers and services.

Features of Flash Catalyst?

Rapidly create and deliver a finished SWF file or collaborate more effectively with developers:

  • Fast learning curve: If you can use Photoshop or Illustrator you can quickly learn to use Flash Catalyst.
  • Fast Interaction Design: Transform native Photoshop and Illustrator files into functional user experiences. Publish finished projects for distribution as a SWF file.
  • Collaborate more effectively with developers: Provide Flash Catalyst projects to developers who use Flash Builder to add additional functionality and integrate with servers and services.

Different work flow with Flash Catalyst

The traditional work flow for creating a flash enabled website are complex. Designer work on the layout design first and pass to programmer to do programming on the interaction of the UI. If any change on the graphics may affect the program. Result, programmer may need to redo the program if any change on the layout.

catalyst_1_ui

Now, the new work flow by using the Flash Catalyst. The UI design and the business logic can be separated. Designer can work on the layout design and also the UI interaction. Flash Catalyst allow designer to do interaction on the UI without any programming. And the business logic behind the UI can be done within the Flash Builder by programmer.

catalyst_1_ui

Concepts of using Flash Catalyst interface

fc_1_concept_state


Page/States

The main concept in using Flash Catalyst is state. Each state represent different section or page of each website. For example, you website have introduction, portfolio and contact. Then, introduction is the first state, portfolio is the second state and the contact is the third state.

fc_1_concept_transtion

Transition and action

From one state to other state, we have transition. In Flash Catalyst, you are allow to set different action to each transition. For example, when transition from introduction to portfolio, you can set the content of introduction fade out and content of portfolio fade in.

Understand the user interface of Catalyst

Pages/States: This panel show the pages/states contain in this project. Fromthis panel, you can add new state or duplicate existing state/page.

catalyst_1_states

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.

catalyst_1_hud

Timelines: The timelines is use to display the transition/action for each stage. And allow you to add different action for each transition. And set the duration of each transition.

catalyst_1_timeline

Wireframe Components: The wireframe components are use to do wire frame design on the UI. You can drag from the components panel to the stage to add a components. And then use the HUD to change skin of the components.

Tools panel/layers: The Tools panel contains tool for selecting item and create shape and text on the stage. The layers panel just allow you to group different item into layer and control the visibility of the layers.

catalyst_1_toolpanelGet Flash Catalyst

Flash Catalyst is under beta 1. You can get the beta version from adobe lab.


Next

You should now know more about what is flash catalyst. Excite about the function of flash catalyst? I will teach how to create a stylish menu step by step in next tutorial.

Posted in Flash, Flash Catalyst, Flash Tutorials, Flex, Tutorials | Tagged , , , , | 3 Comments

Free, Complete Access to Adobe Flash Catalyst Training from lynda.com

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

Posted in Articles, News | Tagged , | 3 Comments

Quality Free Sans Serif Fonts

thumbnail(15)

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.

Posted in Resources | 8 Comments

Using Box2DFlashAS3 (AS3 physics engine) Part 3 – Learn more about body object

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.

box2d_3_1

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.

box2d_3_2

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.

Posted in Flash, Tutorials | Tagged , , | 3 Comments