You’ve seen them in just about every computer application—a window that scrolls, options in a dialog box, menus and buttons that take you from one page to the next. These and other interactive elements are the building blocks of applications. In Flash Catalyst they’re called components.
In this lesson, you’ll learn how to do the following:
• Use wireframe components for rapid prototyping
• Convert artwork to built-in components
• Create custom navigation and toggle buttons
• Create custom scroll bars and scrolling panels
• Build custom components and navigation buttons
• Add and format text
• Modify components using Edit-In-Place mode
• Share artwork between component states
• Add and delete Flash Catalyst interactions
This lesson will take about 90 minutes to complete. Copy the Lesson06 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.
The building blocks of rich Internet applications (RIAs) are components and the interactions that bring them to life.
Flash Catalyst provides a collection of components with built-in states and behaviors, such as the up, over, down, and disabled states of a simple button. You can also create a custom component where you define the states and behavior from scratch. You can even create components that include other components. For example, you can have a scroll panel that includes a scroll bar and buttons.
There are a few different ways that you can add a Flash Catalyst component to your application. These include:
• Drag wireframe components with a generic appearance from the Wireframe Components panel.
• Convert artwork into one of several built-in components (button, check box, and so on).
• Convert artwork to make a custom component.
After adding a component to the artboard, you can edit the component using Edit-In-Place and modify its individual parts. When using Edit-In-Place, you are editing the component’s definition in the project library. The changes apply to every instance of that component in every state of the application. This is different than applying properties. When you select a component and change its properties in the Properties panel, the properties apply only to the current state. To apply the same properties to the component in all other states, you can select the component and choose States > Make Same In All Other States.
When editing components in Edit-In-Place mode, the Layers panel divides into separate sections for the main application layers and the component layers. You can drag objects from the main application into the component and vice versa.
You can add Flash Catalyst interactions that define a desired behavior when a user interacts with a component (or grouped artwork). An interaction is like a set of instructions that tells the program what to do in response to a user event, such as clicking a button.
Most likely you’ll want to design custom user interface elements. But for rapid application prototypes or for simple functions like submitting a form, use the Flash Catalyst wireframe components.
The built-in wireframe components are ready-to-use and fully functional user interface elements. They can be used “as is” or quickly modified to your liking.
Flash Catalyst includes ten built-in wireframe components with a generic skin or appearance. These include:
• Button
• Checkbox
• Data List
• Horizontal/Vertical Scrollbar
• Horizontal/Vertical Slider
• Radio Button
• Text Input
• Toggle Button
Adding a wireframe component to your application is easy. Just drag a component from the Wireframe Components panel to the artboard.
This is a prototype for an online photo gallery. It includes some placeholder images and text. The next step is to add some basic interactive components.
Notice there is no Components category. Right now this project doesn’t include any components.
The button has a default label of Button. You can see the label on the button itself and in the Common category of the Properties panel. In the Properties panel, the current skin for this button is Wireframe. This means that it’s using the generic wireframe artwork for the button. Skin refers to the artwork or set of instructions that defines the graphical representation of the button.
This is because you added a wireframe component, and there’s no reason to place another copy in the project library. It’s available in the Wireframe Components panel already. For minor customization, you can change its properties in the Properties panel, but if you edit the button it becomes a new skin in the Library panel. This is done to preserve the original wireframe and so that you can reuse your edited button in other parts of the application.
The label on the button changes to Submit.
The button is in Edit-In-Place mode. Everything except the button is dimmed in the artboard. The component states appear in the Pages/States panel, and the Breadcrumbs bar shows that you are editing the Button component.
When a component is being edited, its layers are added to the Layers panel. The wireframe button includes three objects—a label and two rectangles. In the Up state, only the bottom rectangle is present.
Button components all have Up, Over, Down, and Disabled states. You can tell by looking in the Pages/States panel that you cannot change the states of a Flash Catalyst built-in Button component. The Duplicate State, New Blank State, and Delete buttons are inactive. However, you can modify the objects in each of its existing states.
The Over state of the button changes color.
This time the Library panel includes a Button component. This is because you edited the wireframe button in Edit-In-Place mode, which creates a new skin (based on the wireframe) automatically.
In the Properties panel, the skin for this button now refers to the name of the new component, Button1, in the Library panel.
There are some components that you probably don’t need to customize. A text input field used in a form is a good example.
As long as you haven’t edited a wireframe component, it can be sized using the selection handles or by changing its Height (H) and Width (W) values in the Properties panel.
When you place the pointer over a value in the Properties panel, it turns into a two-headed arrow. You can drag across the top of the value to change it. Dragging to the right increases the value. Dragging to the left decreases the value.
You can format the text that appears when someone types in the text field. These default settings are fine.
Radio buttons, also known as option buttons, typically present a choice for users. These choices are mutually exclusive and the user must choose only one option. For example, you may have a form that asks a yes or no question, or you may want someone to rate something by selecting from a group of options. When you add radio buttons to the application, each button represents an option. The user can select only one option at a time.
The blue text is hard to read over the dark background.
Only one radio button within a group of radio buttons can be selected. Radio buttons are in the same group when:
• Their Radio Button Group property is set to the same name in the Properties panel.
• The buttons have been selected and grouped by choosing Modify > Group.
• They are all part of the same component.
• They exist at the main application level (as in this example).
To present multiple questions and choices using radio buttons, group each set of radio buttons or assign them to a common group using the Radio Button Group property in the Properties panel.
Check boxes are used when answering a question is optional, or when a user can select more than one option in a list. Each check box is independent of the others. Typically a single check box is used for a single option that the user can turn on or off, opt in, opt out, and so on.
Notice in the Pages/States panel that a Checkbox component has a different set of Up, Over, Down, and Disabled states for when it’s selected.
The white text property is copied to all states in the component. That’s a huge time-saver.
Now the text is white until someone selects the check box, then it turns yellow.
This prototype needs one last wireframe component—a scroll bar for the list of thumbnails.
All scroll bars in Flash Catalyst must include a track and a thumb. The track runs the length or height of the scrollable area. The thumb is used to scroll content along the track. Optionally, you can include up and down buttons (vertical scroll bars) or left and right buttons (horizontal scroll bars).
The default width of the horizontal wireframe scroll bar is 200. As long as you don’t plan to edit the wireframe scroll bar, you can size it using the handles or the Properties panel.
When you select the check box, the text turns yellow. The scroll bar is not attached to any content yet, so you won’t see the thumbnails move.
If the Tab To Focus component property is deselected, pressing tab will not give the component keyboard focus. It must be clicked to get focus.
When you run the project, the focus changes from one component to another as the user presses Tab or clicks to select a component. Focus is indicated by a subtle blue highlight called the focus ring. The focus ring color can be changed in the Appearance section of the Properties panel. You can also change the Tab order of the objects on a page by changing their Tab Index property in the Component section of the Properties panel. Lower numbers place the item earlier in the sequence. The –1 indicates a default order, which is based on the order of objects in the Layers panel.
Wireframe components are convenient, but the real magic happens when you begin to transform your well-crafted original artwork into rich interactive user interfaces.
Flash Catalyst provides 11 types of built-in components that you can customize using your own artwork. But if the built-in components don’t fit your needs, you can use the Custom/Generic Component option to design additional components with up to 20 unique states.
The built-in component types include:
• Button
• Checkbox
• Radio Button
• Toggle Button
• Text Input
• Horizontal Slider
• Vertical Slider
• Scroll Panel
• Horizontal Scrollbar
• Vertical Scrollbar
• Data List
• Custom/Generic Component
When you convert artwork to a component, Flash Catalyst stores the new component in the Library panel, creates a new component object in the Layers panel, and replaces your artwork with an instance of the new component in the artboard.
Some components have special requirements and will not function properly until you define their required parts. For example, a Data List component must have a repeating item, and a scroll bar must have a track and a thumb. If the component has special requirements, a message appears in the HUD with instructions on how to complete the component.
To create a new component based on an existing component, right-click the component in the Library panel and choose Duplicate.
To rename a component in the Library panel, right-click the component and choose Rename. Type a new name and press Enter/Return.
To design buttons with a custom appearance, select the artwork for the Up, Over, and Down states of the button. Then, convert the artwork to a Button component. Edit the component and use the Layers panel to show or hide artwork in each state.
The selected objects are turned into a single Button component in the Layers panel.
The Over state is selected in the Pages/States panel. The Layers panel includes the objects used to create the button.
When creating buttons from small text, add a transparent rectangle to define a larger clickable area. The larger transparent shape makes the button much easier to use. Make sure that Transparency Accepts Mouse is selected in the Properties panel. If it’s not selected, all mouse actions will pass through the transparent areas to the layers below the component.
The text is selected in the Layers panel and in the artboard.
When you roll over the button, the text turns orange. Later in this lesson, you will use this button to link to another web page.
Any button can be used for navigation, including wireframe buttons. If your navigation buttons look the same, you can use repeated instances of the same button. For example, in the interactive banner application, the navigation buttons at the top of the window are identical except for their labels. Instead of creating five new buttons, create one button that you can use five times. You can change the label in each instance using the Label property.
These buttons are placeholders to show you how the final navigation should look. You will use one of these objects to make a reusable navigation button, so you can delete the repeated artwork.
The Btn 1 artwork is selected in the artboard. You may want to zoom in on the artboard to see this artwork close-up. About 200% should do it.
The button includes text and the artwork for each state of the button. You need to convert the Text object into a button label so that you can change the number on each instance of the button.
In the Layers panel, the text object changes to Label. Next, you need to define the appearance in each state of the button. To do this you will select each state and then show and hide artwork in the Layers panel.
You’re using the orange Down button as the Disabled state so that you can disable a button in any state to make it appear selected (orange). You can disable a button in the Properties panel.
The next step is to add additional instances of the button to the artboard.
The label will read “Button” until you define it in the Properties panel for each instance.
Notice that you’ve only added the new buttons to the Feature page. That’s OK because you can quickly share the new buttons to every state.
Now all states include the five buttons.
Here’s a great trick. You’ve seen navigation buttons that appear different than the others when they’re selected. It’s a nice feature because it helps orient the user to where they are in the application.
Flash Catalyst Button components don’t have a “selected” state that indicates which button or page is currently selected. But you can use the Disabled state for this purpose.
The button in the artboard turns orange because this is the look you defined in the Disabled state. Now when someone views page 1 (the Feature page), the button is orange to show them which page they’re on.
In the interactive banner application, the positions of the Back and Next buttons change from page to page. Because of this, you’ll need to make large and small versions of each button. The artwork for these buttons is included in the Back/Next Btns layer.
You need to show the buttons so that you can select them.
This includes the artwork for the smaller of the two Next buttons.
The button begins with a semitransparent arrow that turns orange when you roll over it.
A new button replaces the artwork in the Layers panel.
The other four pages already have the correct buttons showing and hidden.
Toggle buttons are typically used to trigger simple on/off functions. For example, you can use a toggle button to turn music on and off or play and stop a video. The interactive banner application requires a toggle button to play and stop the videos that you’ll add later to pages 4 and 5.
The artwork for the toggle button includes pause and play symbols and a semitransparent orange circle.
Toggle buttons have eight states that cannot be duplicated, added to, or deleted. There are two sets of Up, Over, Down, and Disabled states—one for when the button is in its initial state, and another for when the button is selected.
The new button is visible on page 4, the Restaurants page.
The toggle button needs to be moved a little to the right on this page. Objects, including components, can have their own unique set of properties in each state (including position), so moving the button here will not affect its position on the previous page.
You can quickly turn your graphics into vertical and horizontal scroll bars of any size. You can use just about any artwork. The only rule is that you have to include a track and a thumb. The up, down, right, and left scroll buttons are optional. The parts of a scroll bar can be positioned anywhere, on or off the artboard.
The Panel Artwork group includes the artwork for the lower design panel of this page, including the vertical scroll bar that you’ll use to scroll a block of text.
The Auto Change Warning message appears telling you that selected objects have interactions or effects attached. You’re getting this message because the objects are present in more than one state so Flash Catalyst added some default transitions between states.
A message in the HUD reminds you that to make the scroll bar work correctly, you need to assign its parts. Flash Catalyst needs to know which artwork to use as the thumb and the track.
The message in the HUD goes away. You have defined all of the required parts (track and thumb) for a Scrollbar component.
You can position the parts of a Scrollbar component anywhere you want.
This scroll bar looks better without the Up and Down buttons.
You can set properties to control the distance that content scrolls when using the scroll bar. When a scroll bar is selected, these properties appear in the Properties panel.
Page Size controls how far the thumb moves in a scroll bar when clicking in the track.
Step Size controls how far the thumb moves when clicking the arrows. In a slider, Step Size controls how far the thumb moves when pressing the arrow keys.
Snap Interval forces the thumb in a scroll bar to snap in increments rather than moving smoothly. Page Size and Step Size are always forced to be multiples of the Snap Interval.
Flash Catalyst includes a tool for adding text. This is mainly intended for creating labels or short blocks of text. Flash Catalyst is not the best place to generate large amounts of copy. A better workflow is to write and edit your copy in another application, such as Microsoft Word, and then copy and paste the spell-checked, edited, and approved copy into your Flash Catalyst design.
This is just placeholder text.
You are extending the text box below the artboard because you’re going to create a scrolling panel of text. The text box needs to be large enough for the scrolling text. It doesn’t have to be exact, because you can resize it later.
As you type, the text is constrained to the text box. The default text properties are a little hard to see over the dark background, but you’ll fix that in a minute.
The flashing insertion point should be in the top-left of the text box.
When you paste text from another application, any formatting is lost. If there is too much text to fit in the text box you drew, you can resize it. Use the Select tool to drag the text box selection handles.
The text should still extend below the artboard. In the next exercise, you will create a scrolling panel to display the text.
A common challenge in web design is finding space in the available window to display all the necessary content. One solution is to create scrolling panels. A panel creates a well-defined container for content in the user interface. By adding scrolling content and a scroll bar, you can place a large amount of information in a limited space. To create a scroll panel component in Flash Catalyst, you need:
• An object that will scroll, such as a long block of text or a series of images
• A scroll bar for scrolling the content
• An object to define the panel area, such as a rectangle shape (optional)
You can create a scroll panel without a scroll bar, but it’s useless unless users can scroll to see the hidden content.
By selecting the objects in the Layers panel, you are able to select the two parts of the scroll panel without selecting any of the other artwork in the artboard.
The Auto Change Warning message appears telling you that selected objects have interactions or effects attached. You’re getting this message because the objects are present in more than one state so Flash Catalyst added some default transitions between states. If you don’t get the Auto Change Warning message, then you can skip step 3 below.
A message in the HUD informs you that to make the scroll panel work correctly, you need to assign its required parts.
In the artboard, the text block changes to a scrolling content part. The bounding box of the text is sized to match the scroll bar. You can use the selection handles to resize the scrolling text.
To create a custom component, you select the objects that you want to appear in the various states, and then choose the Custom/Generic Component option in the HUD. There are no required parts in a custom component, and they can include images, drawings, text, grouped objects, and other components.
Embedding or nesting a component within another component is a good way to create additional views in the same page.
Sometimes, you’ll have components with only one state. By combining several objects into a single component, they can be manipulated as a single element. For example, you can apply global properties such as opacity and rotation, or create a transition that begins with a panel of objects offscreen and then have it slide into view.
This group includes all the artwork for the lower design panel on the Feature page. This includes the orange text, Featured Article button, scroll panel, white lines, and semitransparent background.
In the Layers panel, the Panel Artwork group is now a single component object.
The new custom component has only one state, as seen in the Pages/States panel. Custom components begin with all artwork on a single state, but you can duplicate or add up to 20 states, and then modify them as needed.
By making this into a custom component, you can manipulate it as a single object.
Interactions are events that occur in response to a user action, such as the click of a button. Flash Catalyst has many built-in interactions that you can quickly add to components or grouped objects. These include:
• Play a transition from one page or component state to another
• Trigger an action sequence, such as playing a sound, moving an object, or playing an animation
• Go to a URL
• Play, pause, or stop a video clip
Events used to trigger an interaction include:
• On Click
• On Mouse Down
• On Mouse Up
• On Roll Out
• On Roll Over
To add interactions you must either create a component or group the artwork. Use groups to hold interactions when you don’t need a reusable component.
Adding page navigation is easy. First you’ll need an object that will be used to hold the interaction. This can be any component or grouped artwork, but it’s usually a button you’ve designed specifically for navigation. Select the navigation object, and then add interactions that transition from one state to another when an event occurs. Interactions are added in the Interactions panel.
This button will transition the application to the Feature page.
On Click and Play Transition To State are already selected.
This button has the same behavior in every state. Its default setting is When In Any State.
A new interaction is added to the panel. When the button is clicked, the application will transition to the Feature state.
Conditional interactions are behaviors predicated upon some condition. For example, clicking a Next button takes the user viewing page 1 to page 2, and the user viewing page 2 to page 3. Conditional interactions are added just like any other interaction. The only difference is that you change the conditional setting from When In Any State to something more specific.
The Large Next button is visible on this page only and navigates to the Design page.
This is a conditional interaction. When someone clicks the button while in the Feature state, the application transitions to the Design page. This button is only present in the Feature page, so it only needs one interaction.
The Small Next button is visible on the Design, Map, and Restaurants pages. It needs to perform differently in each state.
The Small Next button now includes three conditional interactions.
The Small Back button now includes three conditional interactions.
This button is only visible in the Future page.
The same buttons perform differently, depending on which page you’re viewing.
Navigation isn’t limited to the current application. You can also add interactions that open external content.
The interactive banner application includes links on each page that point to additional external information, such as an article or an interactive restaurant guide.
This selects the button you created earlier.
A field appears below the Go To URL interaction. This is where you add the URL.
This button now links to the URL you entered.
The URL you entered opens in a new browser window.
1 What is the difference between the built-in wireframe components and the built-in component options in the HUD?
2 What happens to a wireframe component after it has been edited in Edit-In-Place mode?
3 What are the required parts in a Flash Catalyst Scrollbar component?
4 What is the best type of component for collecting answers to yes or no questions?
5 How can the Disabled button state and the Enabled button property be used together to help orient users to which page or state is currently selected?
6 What types of objects can be used to trigger an interaction?
1 The wireframe components are ready to use “as is” and include a generic skin or appearance. The built-in components in the HUD require that you provide the artwork for the new component.
2 When you edit a wireframe component in Edit-In-Place mode, the component becomes a new skin in the Library panel. The component can no longer be sized using the Properties panel.
3 A Flash Catalyst Scrollbar component must have a track and a thumb. The up, down, left, and right buttons are optional.
4 Radio buttons are best for presenting choices that are mutually exclusive. The user must choose only one option.
5 When a button is used to navigate to a specific state, you can format the button’s Disabled state to appear selected or highlighted, and then disable the button in the target state.
6 Interactions can be added to components or grouped artwork. You can also create On Application Start interactions that occur automatically when someone starts the application.
7 Conditional interactions are behaviors predicated upon some condition. For example, clicking a Next button takes the user viewing page 1 to page 2, and the user viewing page 2 to page 3. Conditional interactions are added just like any other interaction. The only difference is that you change the conditional setting from When In Any State to something more specific.