You are Here:Home>>Old Posts>>Getting Start with Flash Catalyst Part 2 – import artwork

Getting Start with Flash Catalyst Part 2 – import artwork

By | 2009-06-23T03:11:53+00:00 Jun 23, 2009|Old Posts|

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.

About the Author:

A father, a husband and a geek... Carlos was the founder of projects like The Tech Labs and Flash Enabled Blog. He is the founder of TekTuts He is passionate about technologies. Their main skills are in analytics, transport & logistics, business administration. He also writes about programming resources, trends, strategy and web development.

6 Comments

  1. henk duivendrecht June 23, 2009 at 9:12 am - Reply

    Thanks for the tutorials!

    I was wondering if flash catalyst can only be used with Flex or can you export directly to flash / actionscript as well?

    Henk

  2. amelia June 23, 2009 at 2:22 pm - Reply

    Thanks for part 2. Makes sense now…

  3. WaiLam June 25, 2009 at 2:55 am - Reply

    >>henk

    Now flash catalyst will directly publish to swf. But it is still beta, i don’t know if they will add features for exporting to flash.

  4. Frinley April 24, 2010 at 3:01 pm - Reply

    you are doing a good job, thanks for these collections. Really useful and interesting.

  5. Bike Games May 13, 2010 at 6:55 am - Reply

    Thanks a lot!!! I was having so much trouble.

  6. Texture plus May 29, 2010 at 7:24 pm - Reply

    I never used flash catalyst but it seems realy practic and easy to use! Will try it! Thanks for this post!

Leave a Reply