- Interactive Components
- Working in Photoshop
- Preparing for Transfer
- Moving Elements into Director
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Working in Photoshop
To begin, I recommend creating all graphics and text in Adobe Photoshop. The flexibility in Photoshop far exceeds the options that we find in Macromedia Director. Open up a new file. For the best results, create your new file's canvas size as the same size as your Stage size within Director. This will help you determine proportions and placements with your elements. One other important benefit for creating your Photoshop files at the same size as your Stage size will be to preserve registration points. You'll see how much time we'll be able to save in a few minutes. And besides time, your final interactive application will look seamless and professional.
Start by creating a new layer. Fortunately, Photoshop defaults to creating a new layer once you select the Type tool in the Tools window and click anywhere on your new canvas. Type your text. Apply the appropriate font attributes as desired (color, font, size, and so on). This will be used as our "normal" state, so set it up the way the text element should appear onscreen when there is no user activity. Correct placement is also recommended at this point. This will again save you a great deal of time and aggravation later on. If you are working with other background images for the interface of your application, bring them into this file so that you can accurately gauge placement. The best way to create the other two stages of your text is to duplicate the original text layer. Simply grab the text layer in the Layer window and drag it down to the Create New Layer icon located at the bottom of the Layer window. This will automatically create a new layer of text, replicating the original layer exactly (size, placement, everything). You'll need to do this twice so that you wind up with a total of three text layers—all identical. For the third layer, it really doesn't matter whether you duplicate the original or the duplicated layer...you'll wind up with the same results. Activate each layer by double-clicking on that layer in the Layer window. The Type tool window should appear. Change the attributes for each of the other two layers as desired (color, opacity, and so on). DO NOT CHANGE THE POSITION.
Now, go in and name each layer. This will make identifying your layers later on in Director much easier to coordinate. I try to use a standard naming convention for all similar layers, such as whatever the text says, followed by either normal, rollover, or down. These identifiers will allow you to quickly and easily select the layer you need. Repeat this process for each navigational text element you want in your application. Make sure to save your file as a Photoshop document (.PSD file), keeping all layers independent. You never know how handy this will be in case you have to come back and change something later on.