9. Integrating SWF Content from other Creative Suite Tools

Lesson Overview

When it comes to effective visual communication, keeping the attention of your audience is a challenge. Designing engaging and meaningful content requires thinking outside the box and leveraging a wide range of design tools, including vector-based animation, with a purpose—to tell a story, explain a concept, demonstrate a procedure, or simply entertain.

Flash Catalyst does an excellent job with smooth transitions using simple fades and movement. You can also produce more elaborate animation using other Adobe Creative Suite tools and then publish your movie as a SWF file. The SWF file is imported as an asset in your Flash Catalyst project.

In this lesson, you’ll learn how to do the following:

• Use SWF files in Flash Catalyst projects

• Add SWF files to an application

• Control the playback of a SWF file

• Play a SWF file from a specific frame

• Create an animated button using a SWF file

This lesson will take about 40 minutes to complete. Copy the Lesson09 folder into the lessons folder that you created on your hard drive for these projects (or create it now), if you haven’t already done so. As you work on this lesson, you won’t be preserving the start files; if you need to restore the start files, copy them from the Adobe Flash Catalyst CS5 Classroom in a Book CD.

Quickly extend the capabilities of your Flash Catalyst project by importing complex interactive animation and movies published in the SWF file format. Add immersive content or interactive video created in Adobe Flash Professional to create a more compelling user experience.

SWF files

SWF, pronounced swif, is short for Shockwave Flash and is the dominant format for displaying animated vector graphics and text, as well as sound and video, over the Internet. The SWF file format delivers vector graphics, text, video, and sound and is viewed using Adobe Flash Player and Adobe AIR software. Flash Player reaches over 98 percent of Internet-enabled desktops and more than 800 million hand helds and mobile devices.

Creating SWF files for Flash Catalyst

Browse the web and you’ll find page after page of computer programs for publishing your finished web content in the SWF file format. These include several Adobe Creative Suite applications and a long list of third-party programs.

You can use the following Adobe applications to output SWF files:

• Adobe Flash Professional CS4 or CS5 (recommended for Flash Catalyst SWF content)

• Adobe Premiere Pro

• Adobe After Effects

• Adobe Encore

• Adobe Fireworks

• Adobe InDesign

• Adobe Illustrator

• Adobe Media Encoder

• Adobe Captivate*

• Adobe Presenter*

Using SWF files in Flash Catalyst

With so many applications capable of outputting SWF content, there’s a lot of potential to leverage existing materials in your rich Internet applications. However, it’s important to know that not all SWF content is created equal. Take a few minutes to review the following tips before acquiring SWF content for use in your Flash Catalyst projects:

• Controlling the playback of SWF content in Flash Catalyst. You can add Flash Catalyst effects in the Timelines panel to control the playback of a SWF file. Only SWF content written in ActionScript 3.0 and published using Adobe Flash Professional can be controlled using Flash Catalyst effects.

• Importing Flash Professional SWF content. You can import SWF files created in Flash Professional into Flash Catalyst, but there is no direct integration between the two applications. If you need to edit the SWF file, make your changes in Flash Professional, republish, and import the new file into Flash Catalyst. Then, select the SWF Asset in your application and use the Source link in the Properties panel to swap the old SWF file for the new one you’ve added to the library.

• Loading content dynamically. Many SWF files are complex interactive applications that load content dynamically at runtime. For example, a movie.swf file may include a link to video stored externally in a folder named My Video. You can import the movie.swf file into Flash Catalyst, but you’ll need to manually copy the source video to your published Flash Catalyst project folders. The linked video must maintain the same position relative to Main.swf that it had relative to movie.swf. For example, if the video is stored in the My Video folder next to movie.swf, then copy the My Video folder and paste it next to the Main.swf file that’s created when you publish your Flash Catalyst project. If you publish more than one version of the application (for example, web, offline, AIR), you’ll need to manually copy the video to all locations.

• Merging a shared library. Flash Professional CS5 includes two types of text—Text Layout Framework (TLF) and Classic. TLF was introduced with Flash Professional CS4 and is the new default way to create text in Flash Professional. TLF text delivers multilingual, print-quality typography for the web and offers formatting not possible with Classic text. When publishing SWF files that include TLF text, the Flash Professional CS5 default is to generate two files, a SWF file and a SWZ file. The SWZ file is a text layout library. You must merge the shared library into the underlying code of the SWF file before you can use the SWF file in Flash Catalyst.

To merge a shared library in Flash Professional CS4:

1. In Flash Professional CS5, choose File > Publish Settings and select the Flash tab.
2. On the Flash tab, click the Script: ActionScript 3.0 Settings button and select the Library Path tab.
3. On the Library Path tab, in the Runtime Shared Library Settings section, select Merged Into Code from the Default Linkage pop-up menu.
4. Publish the SWF file.

Adding SWF files to Flash Catalyst

When you import a SWF file into Flash Catalyst, it’s stored as an asset in the Images category of the project library. An instance of the SWF file is added to the current state automatically. You can share that same instance of the SWF file to other states just like you can with images, video, and other objects. Once you’ve imported the SWF file to the library, you can use it anywhere in your application by dragging it from the Library panel to the artboard.

Import a SWF file to the artboard

Let’s add the animated logo for the Restaurant Guide application. The logo is a SWF file that we can import directly to the artboard.

1. Start Flash Catalyst, browse to the Lesson09 folder on your hard drive, and open the Lesson09_Restaurants.fxp file.
   

   This file is an interactive restaurant guide. An animated logo belongs at the top of the page. The logo was created and published as a SWF file.

2. Select the Home page in the Pages/States panel.
3. Choose File > Import > SWF File.
4. Browse to the Lesson09 folder on your hard drive, select logo_wave.swf, and click Open.
   

   The SWF movie appears in the artboard on the Home page and the SWF Asset appears in the Layers panel.

   

5. In the artboard, drag the animated logo (SWF Asset) to position it in the empty space at the top of the page.
   

   

   The first frame of the SWF movie is visible in the artboard. The entire content of this SWF file is located in Frame 1 of the movie, including the animated flag, so you don’t need to play the movie to see it.

6. Make sure the SWF file is selected, and choose States > Share To State > SubPages.
   

   The SWF file is added to the top of the SubPages state.

Preview a SWF animation

You can’t preview a SWF movie in the Flash Catalyst Library panel the way you can a video or still image, but you can preview the movie by running the project.

1. Open the Library panel.
2. Expand the Images category and select the logo_wave.swf file.
   

   The SWF icon appears in the preview window in the Library panel.

   

3. Run the project in a browser.
   

   In a browser, you can see the SWF movie. In this case it looks just like it did in Flash Catalyst, because the entire contents of the movie are occurring in a single frame.

   

4. Close the browser and return to Flash Catalyst.
5. Close the Lesson09_Restaurants.fxp files, without saving changes, and keep Flash Catalyst open.

Controlling the playback of SWF files

Most SWF files consist of more than one frame, and many involve internal navigation or other interactivity. For these SWF files, you’ll need to add an interaction that tells the movie when to play or stop. You can even tell the SWF file to begin playing or stop on a specific frame within the movie.

Play or stop a SWF file

To play or stop a SWF file, add an interaction that triggers an action sequence when someone clicks or rolls over a component or group, or when the application starts. In the action sequence, add an effect to control the playback of the SWF file.

To see how this works, let’s add an On Application Start interaction that plays a SWF file automatically when someone opens the application.

1. Open the Lesson09_Photo_Traveler.fxp file. It’s located in the Lesson09 folder on your hard drive.
2. Choose File > Import > SWF File. Browse to the Lesson09 folder, select the traveler.swf file, and click Open.
   

   A new SWF Asset is added to the top of the artboard and appears in the Layers panel, inside the SWF folder. You may need to expand the SWF folder to see the SWF Asset in the Layers panel.

3. Choose Modify > Align > Bottom to position the SWF Asset at the bottom of the artboard.
   

   This SWF file begins transparent in Frame 1 and fades into view during the first 20 frames of the movie, so you don’t see much in the artboard.

   

4. Choose Edit > Deselect All to make sure nothing is selected in the artboard.
5. In the Interactions panel, click Add Interaction.
   

   Because nothing is selected in the artboard, the interaction defaults to On Application Start.

6. Choose Play Action Sequence as the interaction type.
   

   

7. Click OK.
   

   The new On Application Start action sequence is selected in the Timelines panel.

8. In the Layers panel, expand the SWF folder and click SWF Asset to select the SWF file in the artboard.
9. In the Timelines panel, click Add Action and choose SWF Control > Play - play().
   

   A Play SWF effect is added to the On Application Start action sequence in the Timeline.

   

10. Run the project in a browser.
    

    The SWF movie begins playing as soon as the application starts.

    The application links at the top of the window aren’t connected to any pages yet, but you can test the SWF file by clicking its right and left arrow keys.

    

11. Explore the SWF movie by clicking the Next button (right arrow) twice. When you’re finished exploring, close the browser and return to Flash Catalyst.

Play the SWF movie from a specific frame

You can tell the movie to begin playing on a specific frame in the SWF file’s main timeline. This allows you to build controls in Flash Catalyst that go to and play or stop at different locations within the SWF movie.

1. Select the Play SWF effect in the Timelines panel.
2. In the Timelines panel, click the Delete icon () to delete the effect.
   

   Deleting the effect does not remove the action sequence, only the effect. The On Application Start action sequence is still selected in the Timelines panel.

3. Click Add Action and choose SWF Control > Go To Frame And Play - gotoAndPlay().
   

   The Go To Frame And Play effect appears in the Timeline.

   

4. In the Properties panel, change the Start Frame value to 31.
   

   This tells the action sequence to begin playing the SWF movie at Frame 31 of its main timeline.

   

   Note

   In this activity you use a Go To Frame And Play effect to begin a movie at Frame 31, but why Frame 31? This is a starting point of another section in the movie, but you can just as easily go to any other frame. Having knowledge of the SWF file’s main timeline will help determine which frame to use in a Go To Frame And Play (or Stop) effect.

5. Run the project in a browser.
   

   This time when the application starts, the SWF movie plays automatically, but it begins on Frame 31.

   

   Tip

   You can add Go To Frame And Play or Go To Frame And Stop interactions to navigation buttons that you create in Flash Catalyst, and then use the different buttons to quickly begin playing or go to and stop a SWF movie at various locations.

6. Close the Lesson09_Photo_Traveler.fxp file without saving changes, but leave Flash Catalyst open.

Adding a SWF file to a component

You can use an imported SWF file to bring buttons and other components to life by using creative animation techniques that aren’t available in the current Flash Catalyst collection of effects.

To illustrate this, let’s add some animation to a sample button. We’ve already created a simple animated SWF file of two gears rotating in opposite directions. This will be a nice complement to our button.

Position a SWF file

First, you need to position the SWF file on the sample button.

1. Open the Lesson09_Animated_Button file. It’s located in the Lesson09 folder on your hard drive.
   

   The file includes a navigation button that’s partially designed. To complete the button, you will add a SWF animation.

   

2. In the Layers panel, select the Button object. In the Heads-Up Display (HUD), click Up to edit the button in Edit-In-Place mode.
   

   The button opens with the Up state selected.

3. Import the gear_button.swf file. It’s located in the Lesson09 folder.
   

   The SWF Asset is added as a new object in the Button component layers.

   

4. In the artboard, position the gear_button SWF file so that it’s centered above the text in the Button component.
   

   

5. With the button selected in the Up state, choose States > Share To State > All States to copy the SWF file to the Over, Down, and Disabled states.

Add effects to play the animation

With the SWF Asset in all states of the button, you can use transition effects to control when the animation is playing or stopped.

1. In the Timelines panel, select the Up > Over transition.
2. Select the SWF Asset in the artboard, if it’s not already selected.
3. In the Timelines panel, choose Add Action > SWF Controls > Play - play().
   

   The play effect is added to the transition between the Up and Over states of the button.

   

4. Select the Over > Up transition.
5. Choose Add Action > SWF Controls > Stop - stop().
   

   The stop effect is added to the Over > Up transition.

   

6. Press Esc to exit Edit-In-Place mode.
7. Run the project in a browser and test the button.
   

   When you roll over the button, the SWF animation plays and the gears appear to spin in opposite directions. When you move the pointer away from the button, the animation stops.

8. Close the browser and return to Flash Catalyst.
9. Close the Lesson09_Animated_Button file without saving changes.

Review questions

Review answers

1 The recommended application for creating Flash Content is Adobe Flash Professional CS4 or CS5.

2 Only SWF content written in ActionScript 3.0 and published using Adobe Flash Professional can be controlled in Flash Catalyst.

3 Flash Catalyst supports SWF files with links to external files, but the linked content must maintain its original position relative to the SWF file being imported. If you publish more than one version of the application, you’ll need to manually copy the linked content to all locations in the published directories.

4 Flash Professional includes two types of text: Text Layout Framework (TLF) and Classic. When publishing SWF files that include TLF text, Flash Professional’s default is to generate two files, a SWF file and a SWZ file. The SWZ file is a text layout library. You must merge the shared library into the underlying code of the SWF file before you can use the SWF file in Flash Catalyst.

5 To preview a SWF file, you must run the project in a browser or publish the project. You cannot preview a SWF file in the Library or Timelines panels.

6 If the entire SWF movie occurs in the first frame of its internal main timeline, the SWF file plays without adding controls in Flash Catalyst.

7 You can control a SWF file in Flash Catalyst by using an action sequence with a SWF Control effect. You can also add the SWF file to the Up and Over states in a Button component and then add a SWF Control effect to the transitions between states.