Getting started

1. Download the beta version of Adobe Catalyst. To activate it, you’ll need the serial number from the download page.

2. It is strongly recommended that you also download the tutorial files and work your way through the “Getting started with Adobe Flash Catalyst beta 2” tutorial.

What follows is a brief description of the steps you need to take to create the multimedia piece, and a piece that will be the basis of sessions on Flash Catalyst I’ll teach next semester. Having worked through the tutorial will make everything much clearer and easier to accomplish. The online tutorial also provides information for making more sophisticated presentations.

Create your multimedia presentation on layers in Photoshop

1. Create a new document, at the final size that you want, 72 dpi, and with your preferred background colour. Make sure your layers palette is open.

2. Get rid of the locked background layer by control-clicking (or right-clicking) on the background layer and selecting “Layer from Background.” Rename the resulting “Layer 0” as “background.”

3. Create your document, keeping these things in mind:

(i) everything that you want to appear on every page of your multimedia piece (other than navigation buttons) should go on the background layer. Your background layer can contain more than a colour. You can place (and perhaps fade back) an image, add headers etc.

(ii) Each page of the document needs to be on a separate layer and contain only the items you want to appear on that screen in the finished piece. If you have multiple layers for a page (for instance, a text layer, an effects layer, an image layer, etc.), create a folder with the page name and place all those layers in that folder. Each page should have its own folder.

(iii) Create the navigation items — buttons, text links, image links, etc. — on a separate layer.

(iv) As you work through the layers, you can turn them on and off (the eye icon) to allow you to focus on the layer you’re working on. It’s a good idea to leave the background layer turned on.

4. When you’re finished, you should have a structure similar to this in your layers palette, with most items (other than the background perhaps) folders, which may contain a number of layers.

Page 3
Page 2
Page 1

5. Save the document as a .psd file, which keeps the layers intact.

(Note: This also works in Adobe Illustrator. You would again build your site on layers, and then save the file as an .ai file.)

Getting it into Adobe Catalyst Beta 2 and creating the piece

1. Launch Adobe Catalyst. From the opening screen, select “Open from Photoshop.” In the box that pops up, make sure all items are editable and that the “import non-visible layers” box is checked.

2. In the pages/state palette (top left), click on “duplicate state” until you have separate states for each of the pages in your presentation. Double click on the names of each page to rename them.

3. For each page: click to highlight and then use the eye icon in the layers palette (top right) to turn on what should be there and turn off what shouldn’t (i.e. the content of other pages)

4.You add interactivity through the navigation items. The online tutorial gives detailed instruction for creating and modifying buttons. For the small piece I produced, I used small versions of the photos as buttons to launch the larger image. Here’s what I did:

(i) I deleted the small navigation photos on all of the pages but the first one.

(ii) I selected the first page and then selected each of the navigation photos in turn and, in the small pop-up window at top right of the main stage, selected Button from the dropdown menu Convert Artwork to Component. In the Layers palette, I renamed the generic buttons to reflect what they linked to (Skytrain_Button, College_button, etc.)

(iii) I control-clicked (right-click) on each button and selected “Share to State > All States” from the dropdown menu. That placed the button on each page. (Page and state are the same thing.)

(iv) To make the button do something, I selected it and went to the interactions panel (right side of the screen), where I clicked on the + Add Interaction. I chose “on Click” and then, from “Choose State,” selected the page the button links to. (onClick is a bit of ActionScript that says “when someone clicks on the mouse button, do something.)

(v) Once you’ve set buttons up, go to File > Run Project. It’ll open in your default browser, and everything should work. If it doesn’t work, go back through the stages or read through the online tutorial again. (It took me four tries to successfully complete the online tutorial, but after that, creating the small sample project was relatively easy.)

Note: The online tutorial has instructions for applying smoother transitions, and transitions that allow you to scale up to final image sizes, which add a level of polish to your pieces.

When you’re done you can publish the project (File > Publish to SWF), which allows you to save a local copy that you can launch in a brewer, and folder of stuff for web publication (upload the file to your server and away you go).