This is a Basix tutorial during which we will build our first project in Flash Catalyst from a pre-made PSD file. We will cover Catalyst basics: converting art to components, creating some effects and making these components alive - no code required!
In this tutorial you will learn how to handle artwork in Flash Catalyst and make it come alive.
In the second part of the tut, after you have become familiar with the program, we will make some more complicated things and add more interactivity.
Note: you can save your Flash Catalyst Project at any time and then continue when it is comfortable for you. In order to do this go to File > Save As... , give a name to the project and save it wherever you wish.
Final Result Preview
Here is the final result we will achieve. By learning the basics of working with one of Adobe's newest products we will convert our artwork into components, create some glow effects, specify icons and make transitions to pages. We'll also make an Adobe Icon as a button leading to a specified URL: http://active.tutsplus.com
This may appear to be an extremely basic example. What's important is the way in which we achieve the interactivity. The whole process is point and click, there's not a single line of coding involved.
Step 1: Create a New Project From PSD
Open Adobe Flash Catalyst, then at the starting window select "Create New Project from Design File" > "From Adobe Photoshop PSD File...".
Step 2: Dialog Box
Select Galaxy.PSD (you can get this from the Source download at the top of the tutorial). Make sure that the "Import non-visible layers" option is checked and press OK.
Step 3: Assigning New Pages (States)
First of all we should assign the so-called "States" for our project. States (also called "Pages") represent the changes which will happen after users perform certain actions (for example, he or she hits a button).
In our project the aim is the following: after the user clicks on one of the icons (Flash, Photoshop or Dreamweaver) a rectangle with some info about the product appears. As we have three icons we should add three additional States (Pages). In order to do this hit "Duplicate State" three times in the Pages/States panel. This creates three copies of our main Page, in which we will make some changes.
Step 4: Give Names to our States
It's now wise to set the states' names. Double-click the name of each state and change it to something meaningful. I've chosen the following names beginning with the first state: Main, Photoshop, Flash, Dreamweaver. I recommend you give these states the same names - this will help you follow the tutorial and avoid confusion.
Note: It's very important to keep your project structured and assign meaningful names to your components. Doing so will help you find what you need and decide where to place future assets.
Step 5: Convert Icons into Buttons
So we've assigned the states for our project. Now let's create some buttons. In order to do this choose the Flash group of layers. The HUD panel should appear (if not, press F7). In brackets you'll see "2 items", showing that two items are selected. Now click Convert Artwork to Component > Choose Component and from the menu choose Button and click on it. This will turn our group of layers into a Button. Do the same with Photoshop and Dreamweaver groups.
After you do this in the Layer Panel and in the HUD Panel it should look like this (notice "Button" in the HUD Panel and in the Layer Panel our groups are converted into the layers with the name Button):
Step 6: Button States
The next thing we should do is assign states to our buttons. If you are familiar with Flash Professional, you know that buttons exist with four states - the same is true here. In our project we are interested in the Over and Down States.
Let me clarify the meanings of all the states for those who are unfamiliar with them.
- Up State - the normal state of the button when the cursor isn't on it.
- Over State - the state when we move our cursor over the button.
- Down State - the state when we click on the button.
Let's begin with the Over state of the Photoshop Button - in the HUD Panel click on "Over state". Draw your attention to the Pages/States Panel where for now we have only four States (Up,Over,Down,Disabled). You can also see that only our button is fully visible and the other artwork is faded in the background.
Also take a look at our Layer Panel where you can see the Photoshop group:
Step 7: Assign Over State to PhotoshopIcon Layer
Expand the Photoshop group. Select the PhotoshopIcon layer from the Layer Panel, then go to Properties Panel > Filters > Add Filter > Glow. Pick the color you like (I've used the color from the icon - #179AFF), set Blur to 16 and Strength to 1.
Note: Remember that all this is done in the Over State in the Pages/States Panel.
Step 8: Assign Over State to the Rectangle Layer
Choose the Rectangle layer in the Layer Panel. Look at the scene and you'll see that the object is selected, but it's behind the PhotoshopIcon. Simply extend the rectangle by bringing the mouse to the right side of the rectangle, set the arrow in the middle between top and bottom corner. Extend it so that we have space to write the label "Photoshop".
Step 9: Add Text to our Photoshop Group
So we've extended the rectangle. Now take the Text Tool (shortcut T) and on top of the rectangle write the word "Photoshop". In the Properties Panel of the Text Tool I've chosen the following properties (you can choose the same):
For now you should have something that looks like this (I've deselected the layers):
OK, we've set the Over State for the Photoshop Button - you can test your project with the Ctrl + Enter shortcut or going to File > Run Project. If you've followed the tutorial and done everything correctly, the Photoshop Icon should glow and the text with rectangle should appear while you hover your mouse over the button.
Back in our project, you can go to the main scene by simply clicking twice on the empty space or pressing Esc on the keyboard. You can also click on the breadcrumb links in the top-left corner of the scene where you see Galaxy / PhotoshopButton.
Repeat steps 7 to 9 with the Flash and Dreamweaver Buttons. Note that in your Glow effects it's best to use the colors of the icons.
Step 10: Assign Down State to the Button
This step is optional. I'd like to add some glow when a user clicks one of the buttons. In order to do this, we select one of the buttons in the Layer Panel, then choose Down State in the HUD Panel. Then in the Layer Panel go to the Dreamweaver group (or whichever group you'd prefer to tackle first), select the layer DreamweaverIcon. Once there, go to the Properties Panel, choose Filters > Add Filter > Glow and select the preferences you like (I've used dark grey- #333333). Repeat this step for the other groups.
Step 11: Make Hand Cursor
During this step we'll convert the AdobeIcon layer into a button and assign hand cursors for our icons. First of all, select the AdobeIcon layer. Go to the HUD Panel and click the Choose Component > Button. After you're done select the new Button, go to Appearance and check the field "Hand cursor". Do this for all other buttons (Photoshop, Flash and Dreamweaver).
Step 12: Hand Cursor For All States
If you test your project you'll notice that the hand cursor appears when we mouse over the icons. We've illustrated to our users that these icons are buttons. The next step is to assign this option to other pages. It can be done very easily - to do this simply select one of the icons, go to the HUD Panel and once there choose option "Make Same in All Other States". By doing this, the hand cursor will appear on the other pages too.
Note: You'll also notice that the layers with icons have the same name "Button". This is fine for a simple project such as this, but for other more complicated ones I strongly recommend you rename the layers and give them meaningful names.
Step 13: Adding Interactions Introduction
We are one step closer to the end. Now let's deal with interactions. In Flash Catalyst interactions allow us to switch between different Pages (States), go to a specific URL, Play, Pause or Stop video.
Let's start with our first interaction. Choose the AdobeIcon Button and double-click on the Interactions Panel if it's hidden. With the layer selected click on the Add Interaction Button:
Step 14: Adding Interactions URL
Here you can see the drop down list. As we are interested in the URL Interaction, choose the following options:
- On Click.
- Go To URL.
- Blank field where your preferred URL should be written.
- Open in New Window.
- Choose Main.
By using these parameters we tell Catalyst that when a user clicks on the button he will be sent to the URL that we've assigned and that the site will open in a new browser window. We've also defined that this interaction is only possible when we are in the Main State (Page).
Step 15: Page Interactions Layers Order
Now let's create the Interactions between the Pages. First of all we need to move the AdobeIcon layer so it will be under the Rectangles group layer. This will allow us to see Rectangles on top of the other objects. To do this simply drag the layers to alter their order. The following layer order will be applied to all other States:
Step 16: Page Interactions Reveal Rectangles
The next thing we need is to change the look of specified Pages by editing the content. Choose the page Photoshop. In the Layers Panel select the Rectangles group layer and reveal it by clicking where indicated here:
The eye-icon will be revealed and on the Page you will see the Adobe Dreamweaver rectangle with the text and icon inside of it. As it is Photoshop Page, we should only reveal the content relevant to it. Expand the Rectangle group layer and switch off the eye-icons of the Flash and Dreamweaver groups - this will allow us to see only Photoshop relevant content:
Repeat these actions for the Flash and Dreamweaver Pages so that the visible rectangles are relevant to the software.
Step 17: Page Interactions From Main to Photoshop Page
If you did everything correctly the thumbs in your Pages/States panel should look like this:
Now let's add Interaction between our Main and Photoshop Pages. In the Pages/States panel select our Main Page. Then go to Layer Panel and choose the PhotoshopIcon Button. As we did previously, go to Interactions panel and choose the following options:
- On Click action.
- Play Transition To State.
- Photoshop (here we assign to which Page the transition will be made).
- In any State.
Repeat this step for Dreamweaver and Flash Pages so that by clicking on an icon we are taken to the corresponding Page.
Step 18: Page Interactions Import Image
Our next step is to import one more image to the library so that we can play the transition back to the Main Page. Go to Photoshop Page. Select Rectangle group layer in the Layer Panel. Choose File > Import and select the exit.gif icon (again, this is available in the Source download at the top of the tutorial):
Step 19: Page Interactions Positioning the Image
The image should appear in the center of the rectangle:
And the Layer Panel should appear so:
Now with the help of the mouse simply position the Exit icon in the bottom right side of the white rectangle:
Step 20: Page Interactions Revealing the Image
Flash Catalyst is smart enough to position the image at the right place in other pages. We just have to reveal the image by clicking on the eye-icon:
Step 21: Page Interactions Set Exit Icon
We now need to convert the Exit icon into a button and set one effect.
Select the Exit icon, go to the HUD Panel and convert it into a Button as we did previously.
Select the Up State, and in the Properties Panel choose Common > Opacity. Set the Opacity to 50. This will allow us to reveal full opacity only when we mouse over the button or press on it:
Step 22: Adding the Final Interaction
Let's add a simple Interaction to our Exit Button. In the Photoshop Page select the layer with the icon, click Add Interaction as we did previously and set the options shown on the image below. The only difference is that it should play transition to the Main State while being in any states:
Congratulations!
You've accomplished the first part of this two part tutorial about Flash Catalyst basics. Press Ctrl + Enter or File > Run Project to check if everything works fine. For now there should be glow effects, and the Adobe Icon should lead to the URL you've specified. The other Icons (Photoshop, Flash, Dreamweaver) should play transitions to their Pages and the Exit Icon should play a transition back to the Main Page.
In the following part of the tutorial we will learn how to add some animation to our project, add sound, and set video.
Comments