Creating Interactive Flash Content (Adobe Creative Suite 5) Part 1

Lesson Overview

In this lesson, you’ll learn the following:

•    Creating a Flash Catalyst document

•    Editing pages and states

• Creating interactivity

• Animating transitions

•    Roundtrip editing with Adobe Illustrator

•    Adding video

•    Publishing to SWF format

This lesson will take about two hours to complete.

About Adobe Flash Catalyst

New from Adobe, Flash Catalyst helps designers easily build rich, interactive content. It combines an intuitive user interface with a toolset that will feel familiar— similar to Photoshop, Illustrator, and Fireworks—with the expressiveness, consistency, and reach of Adobe Flash technology. The result: a feature-rich interaction design tool you can successfully use to publish SWF files without writing code.

As you’d expect from a professional Adobe design tool, you always have complete control over the appearance of your artwork, and you can publish your interactive content as a SWF file that displays with Adobe Flash Player lO for wide browser compatibility on the web.

If you want a developer to enhance an interactive project you’ve built with Flash Catalyst, you don’t have to do anything. Flash Catalyst output is developer-friendly, writing code for you in the background while you focus on designing expressive, interactive content. Using the open-source Adobe Flex framework as its underlying structure, Flash Catalyst helps ensure that when you have to hand more complex projects off to a developer, everything is already in place, ready to go.

A typical workflow

To create an interactive document in Flash Catalyst, you typically perform the following steps:

1   Plan how the user should interact with your document, and also plan transitions between states or pages.

2   Design the document in Adobe Illustrator or Adobe Photoshop, using layers to structure the content in a way that supports the buttons, states, and other interactivity you’ll apply in Flash Catalyst.

3   Import the design and any multimedia assets into your Flash Catalyst document.

4    Add interactivity and transitions.

5   Test and publish your document.

Viewing the sample document

You will start by opening a Flash document provided in the Lesson04 folder. It’s an interactive banner intended to work within a larger website design.

1 In Windows Explorer/the Finder, navigate to your Lesson04 folder. In the Banner_finished folder, open the InteractiveBanner_SWF folder. Double-click the file Main.html.

2    In your web browser, explore the Flash document. Move the mouse over the five buttons at the top of the banner, and notice how the buttons highlight and make a sound as the cursor passes over them. At the bottom-left corner is an article link (it doesn’t actually go to the web in this demonstration), and at the middle of the bottom is a scrollable text field.

3    Move the cursor to the right edge to highlight the navigation arrow, and click it to see the second panel. Then click button 4 at the top of the banner to go to the fourth panel.

4    The fourth panel contains a movie. Click the Play button in the middle of the movie to watch it. Feel free to explore the other panels.

Comparing Flash Catalyst and Flash Professional

Flash Catalyst complements Flash Professional by letting designers easily create immersive online experiences by transforming visually compelling artwork they create using tools such as Adobe Illustrator and Adobe Photoshop. Typical Flash Catalyst projects focus on user interface design, rich Internet applications, microsites, prototypes, and widgets. Its structured approach to interaction design greatly simplifies the creation of rich media by designers. Use Flash Catalyst when you want to start with highly designed content and end with a finished project, or a project that you can hand off to a web developer to enhance using Flex Builder, all without writing a single line of code.

In contrast, Flash Professional is a more developer-oriented tool focused on creating immersive experiences that can include video content. Typical Flash Professional projects focus on rich content, highly interactive video content, advertising, and games. Its free-form, fully timeline-driven approach, and advanced vector animation provides a much wider range of possibilities for user interaction than is available from Flash Catalyst. While Flash Catalyst can create output for Flash Player and Adobe AIR, Flash Professional also supports mobile devices through Flash Lite and iPhone export capability. The wider scope of potential offered by Flash Professional often requires at least some coding and a steeper learning curve than Flash Catalyst.

5    You can keep this document open as reference as you go through this lesson. If you don’t want to leave it open right now, close the web browser window or tab, or exit the web browser.

Next you’ll open the Flash Catalyst document that was used to create the interactive Flash document.

6    Start Adobe Flash Catalyst.

7    Click the Open button in the Welcome screen, or choose File > Open Project.

8    In the Open Project dialog box, navigate to your LessonO4 folder. In the Banner_finished folder, open the InteractiveBanner_FC folder. Double-click the file InteractiveBanner_finished.fxp.

Across the top of the window you can see the five pages of the banner. The top of the workspace contains view controls, and many of the tools you’ll use are available along the right side of the workspace, starting with the tools at the top and then a column of panels. The Timelines and Design-Time Data panels are minimized at the bottom of the workspace.

Creating a Flash Catalyst document

You’ll create a new Flash Catalyst document. This will be the foundation for the design and interactivity that you’ll add later.

1    In the Flash Catalyst welcome screen, click Adobe Flash Catalyst Project.

If you don’t see the welcome screen, choose Welcome.

2    Name the project Banner. For the width enter 955, for the height enter 310, and then click OK. The new blank document appears, and the document that was previously open is closed.

3 To see the entire content of the artboard in the document window, choose View > Fit Artboard In Window.

4 At the top of the workspace, in the application bar to the left of the search field, click the Design menu and choose Code.

Design and Code are the two document workspaces in Flash Catalyst. As you work, Flash Catalyst creates code in the background so that a web developer can build upon your work using Flash Builder. You can see that Flash Catalyst has already generated code for the new blank document. You can’t edit the code in Flash Catalyst; you’ll be working in Design workspace during this lesson.

5    Switch from Code workspace back to Design workspace.

6    Choose File > Save As, and save the document under the name Banner in your Lesson04 folder.

Importing a design from Adobe Illustrator

You can import Adobe Illustrator or Adobe Photoshop graphics directly onto the artboard, preserving all layers and the image composition. In this exercise you’ll import the design for the banner created in Adobe Illustrator.

1    Choose File > Import > Adobe Illustrator File (.ai).

2    Navigate to your Lesson04 folder. Select the file InteractiveBanner_art.ai, and click Open. When the Illustrator Import Options dialog box appears, click OK to accept the default settings. Flash Catalyst converts the Illustrator document for use in Flash Catalyst. If the Import Issues dialog box appears, click OK.

Designing Layers for Flash Catalyst

When you prepare graphics in Adobe Illustrator or Adobe Photoshop as the basis for a Flash Catalyst project, be sure to plan ahead and organize your Illustrator and Photoshop documents into layers and layer groups that anticipate the structure of the interactive media you’ll create in Flash Catalyst.

For example, in the Illustrator document that’s used as the foundation for the Flash Catalyst project in this topic, a top-level Panels layer contains sublayers that correspond to each of the banner’s five panels. Each panel’s sublayer contains the objects belonging to that panel.

At points during the lesson, multiple objects are converted into a Flash Catalyst component. Because the layer hierarchy from Illustrator already corresponds to the hierarchy of the components that will be created in Flash Catalyst, it takes only one click in the Layers panel to select all the objects needed for a specific component.

3 The Illustrator artwork you just imported may be selected; if it is, choose Edit > Deselect All. You may also want to choose View > Fit Artboard In Window.

Now you’ll add interactivity and navigation to the Illustrator graphics you imported.

Creating a scroll bar

Now you’ll turn a graphic of a scroll bar into an actual, working scroll bar. This is easy because Flash Catalyst already knows about the most common interactive controls. All you have to do is assign specific graphics to become those controls.

1    Choose View > Magnification > 200% and adjust the view so that you can see the scroll bar graphic to the right of the paragraph in the center of the banner.

2    With the Selection tool, Shift-click to select both the scroll bar thumb and its track.

As soon as you select objects, a floating Heads Up Display (HUD) appears, presenting context-sensitive options for the selected object. You’ll use the HUD to quickly create a working scroll bar from the selected graphics. If the HUD is in the way, you can drag it to another position.

3    With the two objects selected, choose Vertical Scrollbar from the Convert Artwork to Component menu. The HUD changes to lead you through the next step, indicating which graphics correspond to the parts of a working scroll bar.

4    In the HUD, click Edit Parts.

5    Select the larger object that will become the scroll bar track, and in the HUD select “Track (required)” from the Convert to Vertical Scrollbar Part menu.

6 Select the smaller object that will become the scroll bar thumb control, and in the HUD select “Thumb (required)” from the Convert to Vertical Scrollbar Part menu.

You’ll see the word “Required” in the menu when Flash Catalyst knows that a control can’t function without that part. You’re done setting up the scroll bar, because you’ve already assigned objects to both required parts—the scroll bar track and the thumb control.

7    Choose File > Run Project. Flash Catalyst builds a temporary version of the project and opens it in your default web browser.

8    In your web browser, test that the scroll bar is working properly.