Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
There are many designers who like to create their design mockups inside of Photoshop. The good news is that you can actually take your PSD files and bring them directly into Flash Catalyst. Before you do that however, let's take a few moments to look at how you can structure your file inside of Photoshop to give you the best experience inside of Flash Catalyst. Now unfortunately there are no pages inside of Photoshop. That means if you want to create some kind of application that has multiple pages inside of Flash Catalyst, you'll need to be careful about putting each page design on its own layer inside of Photoshop.
As you can see in this file here, called olive_game.psd, I have three main layer groups. In the Background layer, I have all the elements that I might have for the background of this project. I also have a separate layer for the three different bottles Rosemary, Mandarin Orange and Jalapeno, and I have a completely separate folder for what will ultimately become many pages inside of Flash Catalyst. I have separate elements for when a person loses the game or when he wins the game. In fact, because you'll be working with so many different layers inside of Photoshop, you may find it difficult to actually work in your design.
My suggestion would actually be to use a feature that's been a part of Illustrator for some time, it's called Layer Comps. You can find the Layer Comps panel by going to the Window menu and choosing Layer Comps. This easily lets you create multiple states of your design which would simulate how the pages might work inside of Flash Catalyst. For example, I'll turn off the entire Results layer here, I'll create a new layer comp and I'll call it PlayGame and click OK. Next, I'll turn on the Results layer and with the Path layer visible, I'll also turn on the Winner layer and create a new layer comp called Winner.
Finally, I'll hide the Winner layer, reveal the Loser layer and create a new layer comp called Loser. At this point I can actually click on these arrows at the bottom of my Layer Comps panel to toggle between those different layer comps. Notice that Photoshop is simply turning layers on and off for me but it really lets me focus on the design at hand. If you'd like to learn more about Layer Comps, be sure to check out some of the great video training titles by Deke McClelland here at Lynda.com. Unfortunately there is no way to automatically transfer Layer Comps into pages inside of Flash Catalyst.
So this process works great for when you're working on your design but because you were careful about how you actually have structured your document and named your layers here in Photoshop, you'll only have a few extra clicks to make this happen inside of Flash Catalyst as well. Once you're happy with your design, and you're ready to bring it into Flash Catalyst, all you need to do is just save your file as a regular PSD file. Once you've done that, come over to Flash Catalyst and you can either click on this button here, Create A New Project from Design File From an Adobe Photoshop PSD File, or alternatively, you can also go to the File menu and choose to Create a New Project from the Design File.
So I'll click on this option and then in my Chapter 02 folder in my Exercise_Files folder, I'll select the olive_game.psd file and click Open. Once again, I'm going to get a dialog box that gives me options for how I want to import this PSD file. Notice Flash Catalyst automatically recognizes the pixel dimensions of my document and I'm presented with options of how I want to import Image layers, Shape layers and Text layers. I also have the ability to import non-visible layers. Before I click OK though, let me click on the Advanced button.
If you're somewhat familiar with the application called Flash Professional, you know that when importing PSDs, you actually have layer level control on how each element is brought into your project, well the same applies here inside of Flash Catalyst. Notice I have my three main layers and I can click on the triangle to reveal the contents of those layers. As I click on each element, Flash Catalyst will give me different options for how I want to treat that element when I import it. For example this is a Text layer. I can choose to import that and turn it into a flattened bitmap image.
Once I've made my choices, I can click OK to import that artwork. Once again, Flash Catalyst will now analyze that Photoshop file and bring it in so that I can work on it. If I go to my Layers panel, I'll see that the layers that I've added inside of Photoshop are now here inside of Flash Catalyst. With my artwork available and my structure intact, I can now begin to add interactivity and complete my project.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.