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.
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.
hold the content for home page.
hold the content for portfolio page.
hold the content for gallery page.
hold the content for contact page.
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.
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.