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

Creating a scrolling text panel

Now that your scroll bar works, you can bind it to a text panel to make the text scrollable when it’s too big for the panel. You’ll do this the same way you just created a scroll bar out of two objects—by converting the scroll bar and a text panel into a component. This associates the scroll bar with the text panel so that Flash Catalyst knows which panel is controlled by that particular scroll bar.

1    Switch back to Flash Catalyst. Just above the artboard is a crumb trail that works like a folder path, telling you what you’re editing in the document. Right now it reads Banner/VerticalScrollbarl. It isn’t just an indicator; it also lets you control which level of the document you’re editing. Click the word Banner to exit scroll bar editing mode.

2    Select the scroll bar and the text panel next to it.

3    With the two objects selected, choose Scroll Panel from the Convert Artwork to Component menu. The HUD changes to lead you through editing the parts of the scroll panel.

4    In the HUD, click Edit Parts. Because the scroll bar already exists in the selection, the only required part to assign is the scrolling content, so select the text panel and then choose Scrolling Content (required) from the Choose Part menu.

5    Choose File > Run Project, and test the scrolling panel in your web browser.

Now you’ll group the objects in the lower part of the banner to make it easier to work with as a unit later, when you apply transitions. There are many objects involved, but because they’re already arranged within the same layer, you can select all of them at once using the Layers panel.

6    In Flash Catalyst, click Banner in the crumb trail. In the Layers panel, click the triangle next to the Panels layer to expand it; expand the Feature panel sublayer and click the Feature panel sublayer to select it and all of the objects inside it.

7 With the objects still selected, choose Custom/Generic Component from the Convert Artwork to Component menu.

When you combine objects into a component, Flash Catalyst can optimize that component more easily than if it was still multiple objects. Now you’re ready to provide visual feedback and context that will reinforce the interactivity you’ll add.

Editing pages and states

With the Pages/States panel in Flash Catalyst, you can define how your design responds to viewer interactions. With Pages, different parts of your design can respond to viewer interaction, such as a button changing another part of your design. With States, you can control how individual components respond, such as the button itself.

Now you’ll create the buttons that allow the user to go from one page to the next.

1    In the Layers panel, expand the Top Buttons layer. If necessary, zoom out so that you can see the five buttons at the top of the banner.

2    Click the Buttonl sublayer to select all the objects that make up Buttonl.

3    In the HUD, choose Button from the Convert Artwork to Component menu.

4    Double-click button  on the artboard. Notice in the crumb trail that you are currently editing only the button, and the Pages/States panel now displays the different states of that button.

5    In the Pages/States panel, click the Over state.

6    In the Layers panel, expand the Buttonl layer and turn off the Up layer.

Note: As you work with objects in this lesson, you may see the same object referred to in more than one way. For example, you might see references to button I and Buttonl. When you see a reference such as button I, look for a button on the artboard labeled I. When you see a capitalized name with no space (such as Buttonl), that’s an object name that you’ll find in a panel such as Layers or Library.

7    Click the Down state, and in the Layers panel turn off the Up and Over layers.

8    Click the Disabled state, and in the Layers panel turn off the Up and Over layers.

The orange Down layer will now be visible as long as the mouse button is down over a button, and also when you’re already on the target page for a button.

You have now created all the different states for that button when the user mouses over and clicks on the button.

9   In the Pages/States panel, click each of the states to preview how the button looks during viewer interactions.

Setting up a label

When your design uses multiple copies of an object, you can represent them with multiple instances of a single component. To differentiate them during interactions, you can convert the object’s text into a label that you change for each instance of the component. Using instances and labels instead of making whole copies of objects makes the project more efficient and easier to store and optimize. In this project, the buttons are identical except for the number, so you’ll turn the numbers into labels.

1    With the Buttonl sublayer selected in the Layers panel, click the Up state in the Pages/States panel; then in the Layers panel, expand the Button sublayer and click the layer named label that contains a 1.

2    In the HUD, choose Label from the Convert to Button Part menu.

Note that although the layer is already named Label, that was just a name assigned in Illustrator to remind you to convert the text into a label in Flash Catalyst.

3    In the crumb trail, click Banner to exit button editing mode.

4    Click the Library tab to open the Library panel, expand the Components section if necessary, and then select Buttonl in the Components section. Drag Buttonl from the Library panel over button 2 on the artboard. Don’t be concerned that Buttonl doesn’t match the square shape of button 2 on the artboard; align the top-left corner with the top-left corner of the existing square button.

When you created a working Buttonl component earlier, it was added to the Library panel. In this step you’re adding another instance of the same button so that you don’t have to create it again. Now you’ll customize the label of the new button 2.

5 With the button selected (not the text), in the Properties panel expand the Common properties if necessary, and for Label enter 2. The text is now short enough to fit inside the button because you edited it down to the number 2.

6 On the artboard, select the first button in the row of buttons you’re working with. This also selects it (Button 2) in the Layers panel. Double-click the name of the selected button and change its name to Button l. You’re replacing the button graphics imported from Illustrator with interactive button components you’ve just built in Flash Catalyst. In the same way, edit the second button so its layer name is Button 2.

7 In the Layers panel, delete the Button2 sublayer (the one that looks like a folder, not the new button component you just added and renamed). You don’t need it anymore, because you just replaced it with a working button.

In an actual project, you’d continue this process to replace the other three top buttons. For this lesson, you’ll move on to creating a transition between pages l and 2 of the interactive banner.

Setting up pages and states for a transition

You can set up a transition that you can customize extensively by animating multiple objects. In this section you’ll set up how the project experience changes during different states of interaction, and then in the next section you’ll set up the events that animate them.

You may want to review the final project in your web browser to understand where each component of the project will move during this page transition.

1    In the Pages/States panel, click Pagel.

2    In the Layers panel, turn off the FeaturepanelCustomComponent layer, and turn on the Design Panel layer. This sets the visibility of these layers when the viewer is on page l.

3    Select the Design Panel sublayer in the Layers panel. With all the objects in that sublayer selected, create a custom component in the same way you did for the Feature panel in step 7 of Creating a Scrolling Text Panel, earlier in this lesson.

You may want to zoom out a level or two before the next step, so that there’s a little space below the artboard.

4    With the DesignpanelCustomComponent layer selected, Shift-drag the component downward until it is off the artboard to set the initial position of the layer before a page transition starts.

5    Turn on the FeaturepanelCustomComponent layer and make sure the DesignpanelCustomComponent layer is still visible off the artboard.

6    In the Pages/States panel, click the Duplicate State button to create a new page called Page2. If the Timelines and Design-Time Data panels open at the bottom of the workspace and take up too much space on your screen, double-click the Timelines panel tab to minimize the panel group.

7    In the Layers panel, select the FeaturepanelCustomComponent layer, and Shift-drag the custom component downward until it is off the artboard; then hide it in the Layers panel.

8    Select the DesignpanelCustomComponent layer and Shift-drag it onto the artboard until it is positioned properly. In the Layers panel, make FeaturepanelCustomComponent visible again.

9 Still on Page2, select the Image Slider sublayer and use the HUD to turn it into a custom component.

10 With the ImageSliderCustomComponent layer selected, Shift-drag the component to the left until it is positioned properly between the two gray dark rectangles at the left and right sides of the page. This moves the image on Page2 into place to complete this page transition.

Setting up button navigation

After you’ve defined the different pages and states of interaction, you set up the buttons that will move the viewer between the pages and states.

1    In the Pages/States panel, click Pagel, and then on the artboard select button 1.

2    In the Interactions panel, click Add Interaction.

3    Choose On Click from the first menu.

4    Choose Play Transition to State from the second menu.

5    Choose Pagel from the Choose State menu, and click OK.

6    Still on the Pagel state, select button 2 and repeat steps 2-5, except in step 5 choose page 2 as the target state.

7    In the Pages/States panel, click Pagel, and then on the artboard select button l.

8    In the Common section of the Properties panel, make sure the Enabled check box is not selected, because you don’t want Buttonl to do anything on Pagel.

9    Click button 2, and in the Properties tab, make sure the Enabled check box is selected.

10    In the Pages/States panel, select Page2.

11    Click button l, and in the Properties panel, make sure the Enabled check box is selected.

12    Click button 2, and in the Properties panel, make sure the Enabled check box is not selected.

13    Choose File > Run Project, and test your work by clicking the l and 2 buttons. Notice the transition you created between pages l and 2 and also how each button changes in appearance when you move the cursor over each of them.

Creating transitions

With the pages, states, and buttons all in place, you can now use the Timelines panel to control what happens over time during the transitions among pages and states.

1 Open the Timelines panel at the bottom-left corner of the workspace.

Notice that two state transitions already exist in the Timelines panel: Pagel to Page2 and Page2 to Pagel. Also, note that all the layers that have been dragged onto and off the artboard have a layer in the Timelines panel that indicates the elements moved.

2    In the State Transitions section of the Timelines panel, make sure Pagel > Page2 is selected, and select the DesignpanelCustomComponent layer.

3    Position the cursor over the vertical bar that says Move and you will see a small handle appear.

4    Click the handle and drag the bar until it is at the 0.25 second mark, and then repeat for the FeaturepanelCustomComponent layer.

You want the Design panel (DesignpanelCustomComponent) to move onto the artboard after the 2 Wheels Good panel has moved off the artboard.

5    Click and drag the green bar for FeaturepanelCustomComponent movement so that it starts at the 0.25 second mark and ends at the 0.5 second mark.

6    For the ImageSliderCustomComponent layer, make the movement last for 0.5 seconds.

You can test the transitions within Adobe Flash Catalyst without running the project.

7    In the Timelines panel, click the Play button above the layer names.

Now, in much the same way, you’ll create the transition that plays when the viewer navigates from Page2 back to Pagel.

8    In the State Transitions section of the Timelines panel, make sure Page2 > Pagel is selected, and select the FeaturepanelCustomComponent layer.

9    With the FeaturepanelCustomComponent layer selected, click the handle and drag the bar until it is at the 0.25 second mark. Repeat for the DesignpanelCustomComponent layer.

10    You want the DesignpanelCustomComponent layer to move before the FeaturepanelCustomComponent, so drag the green bar representing the FeaturepanelCustomComponent animation so that it starts at the 0.25 second mark and ends at the 0.5 second mark.

11    For the ImageSliderCustomComponent layer, make the movement last for 0.5 seconds.

12    Click the Play button in the Timelines panel to test your animation.

13    Choose File > Run Project, and test the animation in your web browser.