- Catalyst and Interactivity
- Embedding Media in Catalyst
- Defining Custom Player Controls
- Generating a Web Page
- Wrapping Up
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Defining Custom Player Controls
We'll create simple artwork to use for play, pause, and stop buttons. Of course, your artwork doesn't have to be simple at all. In a typical workflow, you'd create these buttons in Illustrator or Photoshop and either import them or just copy-and-paste them into Catalyst. But to simplify the experience here, and keep the focus on defining artwork as player controls, we'll simply whip up very simple buttons right in Catalyst.
- Use Catalyst's limited selection of drawing tools to draw a triangle, an octagon (the Octagon tool is in the Triangle tool fly-out), and a square.
- Rotate the octagon and triangle as you draw them, making the octagon look something like a stop sign, and pointing the triangle to the right. Don't worry about sizes or other properties yet.
- Select your three shapes and define the same Common properties for all of them (see Figure 3):
- W: 50
- H: 50
- Stroke: red
- Weight: 6
- Fill: yellow
)
Figure 3 Creating player controls from Flash Catalyst shapes.
All the pieces are now in place to define the three shapes as interactive play, pause, and stop buttons. First, we'll convert each piece of artwork to a four-stage button, making the buttons a bit dynamic. Then we'll assign interactivity so the buttons work on the video. Follow these steps:
- Click the triangle, which will become our Play button. Choose Button from the Choose Component pop-up in the Head Up Display (HUD)—the gray box that floats on the artboard when you select objects in Catalyst (see Figure 4).
- With the newly defined button selected, click the Over state tab in the HUD. The button is isolated. Select it again, and change the Fill to gray in the Common category of the Properties panel, as shown in Figure 5.
- Press Esc to leave isolation mode. With the triangle selected, click the Add Interaction button in the Properties panel. From the second pop-up, choose Play Video (see Figure 6). Click OK to assign these parameters to the button.
- In the new Choose Video pop-up that appears next, choose your video (it will be the only option).
- Repeat the previous steps to assign button status to the other two shapes, defining a gray fill for each of them in the Over state.
- Select the Play button (the triangle). Expand the Component category of the Properties panel and enter Play video in the Tooltip box. Leave the other settings at their defaults. You're finished defining the Play button.
- Define the Pause and Stop buttons, choosing the appropriate settings for each in the Add Interaction pop-up.
- With the buttons defined, play around with their positions on the artboard, and add more artwork if you like.
- Test the file by choosing File > Run Project. The project opens in your default browser (see Figure 7). Try all three of your new buttons, and troubleshoot them as necessary back in Catalyst.
)
Figure 4 Assigning activity to a component.
){kind=small}
Figure 5 Defining the over state.
)
Figure 6 Adding a Play Video interaction.
)
Figure 7 Testing the player in a browser.
If your video controls don't work, review these troubleshooting possibilities:
- Each of the buttons needs to be individually defined as a button.
- Each button must have the Over state defined individually.
- Each button must have unique interaction assigned (Play Video, Pause Video, or Stop Video) using the Add Interaction button in the Properties panel for that particular button.