Flash components overview

<pageby nominor="false" comments="false"/>

This is part of Flash tutorial series.

Introduction

Flash CS3 component library

Components are prebuilt interface elements (widgets) that will speed up programming of interactive Flash pages.

Learning goals

This is a high level overview:

• Learn where to find components
• Learn about the purpose of various Flash 9 (CS3) components

Prerequisites

Flash CS3 desktop tutorial

Flash drawing tutorial

Flash button tutorial (not absolutely necessary)

Moving on

This article is just a conceptual overview. There are some specific component tutorials you may be interested in:

Flash component button tutorial

Flash Video component tutorial

Flash datagrid component tutorial

The Flash tutorials article has a list of other tutorials.

Quality

This text should technical people get going and may not be good enough for self-learning beginners. It can be used as handout in a "hands-on" class. That is what Daniel K. Schneider made it for...

Level

It aims at beginners. More advanced features and tricks are not explained here.

Learning materials

• There is component

demo (file flash-cs3-components-overview.fla ... in progress).

• Grab the various *.fla files from here:

http://tecfa.unige.ch/guides/flash/ex/components-intro/

The executive summary

Flash has a few built-in components (called widgets or gadgets in other contexts) and that will allow to you to build an interactive environment more quickly than by coding all by yourself.

However, making good use of most of these components still requires basic knowledge of ActionScript. In this article we will try to show a few design patterns that you can copy and adapt.

The executive summary

• Open the component library (Window->Components or CTRL-F7)
• Drag a component to the stage
• Fill in some parameters
• Add some ActionScript code that will handle user action events.

ActionScript (AS2) vs. ActionScript (AS3)

• In CS3, a component library is available for both versions
• The AS3 one is smaller as you could see in the screenshot above. We shall focus on Flash 9 and Action Script 3 here. However, the principle of using AS2 parameters is the same.

In this article we are going to look at User Interface components only, see the Flash video component tutorial for the Video elements.

To open the component library

• Window->Components or CTRL-F7
• I suggest to dock it against your library.

'Warning - AS2 components are different from AS3 components (!!)

• It really is important to plan ahead, i.e. you must decide whether you work with AS2 or AS3 before you start using any component !
• As long as you don't use components, as long as you don't insert any ActionScript code you can easily switch between various Flash and ActionScript versions. Once you start using AS or AS-based components you can't !

Installing other components.

You may find or (mostly) buy other ActionScript components on the Internet or through Adobe's website. You just can open a component file, but then it will not permanently be in your System. To make a component permanently available:

• Quit Flash
• Copy the component either:

C:\Program Files\Adobe\Flash CS3\language\Configuration\Components

Macintosh HD:Applications:Adobe Flash CS3:Configuration:Components

AS 3 built-in component overview

I am (slowly) making a demo (not yet fully completed, but somewhat instructive).

• Get the source from http://tecfa.unige.ch/guides/flash/ex/components-intro/

Use of components with the Flash Desktop

• Using the UI Components

Using components

• Open the component library (Window->Components or CTRL-F7)
• Drag a component to the stage. This will also add this component to the library.
• Once a component is in your library, just drag it from there

Component assets

• Adding a component to the stage or to the library also will copy necessary Component Assets in a folder. Do not delete this folder !
• If you wish you can then change the components skins (i.e. the graphical representation) by editing these elements (but make sure that you know what you do).

Parameters

Each component has a series of parameters that you can modify in order to change the component's appearance and behavior.

The most important parameters can be simply changed through the Parameters panel (menu Window->Properties>Parameters)

Flash CS3 Parameters panel (button component shown)

Alternatively, you also can use the Components Inspector.

Flash CS3 Component inspector panel (button component shown)

The components inspector gives extra information, e.g. the name of the component used (on top just below the tab).

Tip: If the parameter or component inspect won't display the parameters, click on an empty spot on the workspace and select the object again. (You likely selected more than one object).

Other parameters only can be changed through ActionScript coding.

Sizing components

With the free transform tool (or similar) you can resize component instances

• Just click on it on the stage and do it
• Alternatively set the size through the parameters or properties panel.

In any case, you do not need to fiddle with component internals ....

Live preview

If your component doesn't really show, (re)enable live preview:

• Select Control > Enable Live Preview (tick the box)

The rest of this article briefly presents each UI component. See also the Flash Video component tutorial which is in a separate article.

Working with the Actions Frame panel

Tip: If your screen is large enough, it's a good idea to drag out this panel to the Desktop (do not let it "touch" Flash. Then pin it down with the pin at the bottom. This way you can move around in your frames and layers and still edit code.

(More is needed here, maybe I will write an ActionScript panel tutorial).

Understanding what is going on

A beginner usually has trouble understanding why a script doesn't show any effect. Errors are mostly likely in the data, e.g. in the names you give to your component instances or fields.

One way to track a few things down is to print out messages. Below is really ugly piece of code that attempts to print out information (even if it doesn't exist). Just insert it in the scripts layer after/before your other code. This will write messages to the output pane that will pop up.

this.addEventListener(MouseEvent.CLICK, onMouseClickEvent);  

// Then make the callback  
function onMouseClickEvent(e:Event)  
 {  
   try
   {
     // trace(e);
     trace(">>" + e.type + " event from " + e.target.name + " called on " + this.name);
     trace("------");
   }
   catch (e:Error)
   {
    // trace("Error occurred!");
   }
 }  

Remove it once you are done or better just put comments around the code like this:

/*
   .... above code here ....
*/

I have to complete this function, with some more useful infos at some point ....

• See also Event (Adobe)

Below we summarize functionalities of the other button components. (More details will be added sometimes, in the meanwhile, please consult the official documentation)

Various button components

You can see a simple use of these in thedemo.

Button

“The Button component is a resizable, rectangular button that a user can press with the mouse or the spacebar to initiate an action in the application. You can add a custom icon to a Button. You can also change the behavior of a Button from push to toggle. A toggle Button stays pressed when clicked and returns to its up state when clicked again” Adobe documentation (see above)

CheckBox

“A CheckBox is a square box that can be selected or deselected. When it is selected, a check mark appears in the box. You can add a text label to a CheckBox and place it to the left, right, above, or below the CheckBox” Adobe documentation

• Using the CheckBox (Adobe Using ActionScript 3.0 Components)
• Checkbox class (ActionScript 3.0 Language and Components Reference)

RadioButton

“The RadioButton component lets you force a user to make a single choice within a set of choices. This component must be used in a group of at least two RadioButton instances. Only one member of the group can be selected at any given time. Selecting one radio button in a group deselects the currently selected radio button in the group. You set the groupName parameter to indicate which group a radio button belongs to.” Adobe documentation

• RadioButton (Adobe Using ActionScript 3.0 Components)

Number and text input

TextArea

“The TextArea component is a wrapper for the native ActionScript TextField object. You can use the TextArea component to display text and also to edit and receive text input if the editable property is true. The component can display or receive multiple lines of text and wraps long lines of text if the wordWrap property is set to true. The restrict property allows you to restrict the characters that a user can enter and maxChars allows you to specify the maximum number of characters that a user can enter. If the text exceeds the horizontal or vertical boundaries of the text area, horizontal and vertical scroll bars automatically appear unless their associated properties, horizontalScrollPolicy and verticalScrollPolicy, are set to off.” Adobe documentation

• TextArea (ActionScript 3.0 Language and Components Reference)

TextInput

“The TextInput component is a single-line text component that is a wrapper for the native ActionScript TextField object. If you need a multiline text field, use the TextArea component. For example, you could use a TextInput component as a password field in a form. You could also set up a listener that checks whether the field has enough characters when a user tabs out of the field. That listener could display an error message indicating that the proper number of characters must be entered.” Adobe documentation

• TextField (ActionScript 3.0 Language and Components Reference)

Numeric Stepper

“The NumericStepper component allows a user to step through an ordered set of numbers. The component consists of a number in a text box displayed beside small up and down arrow buttons. When a user presses the buttons, the number is raised or lowered incrementally according to the unit specified in the stepSize parameter until the user releases the buttons or until the maximum or minimum value is reached. The text in the NumericStepper component's text box is also editable.” Adobe documentation

• Using the NumericStepper (Using ActionScript 3.0 Components)
• NumericStepper class (ActionScript 3.0 Language and Components Reference)

Slider

“The Slider component lets a user select a value by sliding a graphical thumb between the end points of a track that corresponds to a range of values. You can use a slider to allow a user to choose a value such as a number or a percentage, for example. You can also use ActionScript to cause the slider's value to influence the behavior of a second object. For example, you could associate the slider with a picture and shrink it or enlarge it based on the relative position, or value, of the slider's thumb.” Adobe documentation

• Slider class (ActionScript 3.0 Language and Components Reference)

Other

ColorPicker

“The ColorPicker component allows a user to select a color from a swatch list. The default mode of the ColorPicker shows a single color in a square button. When a user clicks the button, the list of available colors appears in a swatch panel along with a text field that displays the hexadecimal value of the current color selection.” Adobe documentation

• Using the ColorPicker (Using ActionScript 3.0 Components)
• ColorPicker class (ActionScript 3.0 Language and Components Reference)

ComboBox

A ComboBox component allows a user to make a single selection from a drop-down list. Adobe documentation

Label

“The Label component displays a single line of text, typically to identify some other element or activity on a web page. You can specify that a label be formatted with HTML to take advantage of its text formatting tags.” Adobe documentation

ProgessBar

“The ProgressBar component displays the progress of loading content, which is reassuring to a user when the content is large and can delay the execution of the application. The ProgressBar is useful for displaying the progress of loading images and pieces of an application. The loading process can be determinate or indeterminate. A determinate progress bar is a linear representation of a task's progress over time and is used when the amount of content to load is known. An indeterminate progress bar is used when the amount of content to load is unknown. You can also add a Label component to display the progress of loading as a percentage.” Adobe documentation

ScrollPane

“You can use the ScrollPane component to display content that is too large for the area into which it is loaded. For example, if you have a large image and only a small space for it in an application, you could load it into a ScrollPane. The ScrollPane can accept movie clips, JPEG, PNG, GIF, and SWF files.” Adobe documentation

Uploader

“The UILoader component is a container that can display SWF, JPEG, progressive JPEG, PNG, and GIF files. You can use a UILoader whenever you need to retrieve content from a remote location and pull it into a Flash application. For example, you could use a UILoader to add a company logo (JPEG file) to a form. You could also use the UILoader component in an application that displays photos. Use the load() method to load content, the percentLoaded property to determine how much content has loaded, and the complete event to determine when loading is finished.” Adobe documentation

UIScollBar

“The UIScrollBar component allows you to add a scroll bar to a text field. You can add a scroll bar to a text field while authoring, or at run time with ActionScript. To use the UIScrollBar component, create a text field on the Stage and drag the UIScrollBar component from the Components panel to any quadrant of the text field's bounding box.” Adobe documentation

List-based components

Lists

These components are based on lists

• A list is a row
• Rows can have columns
• A cell is either an element of a simple row or the intersection of a row with a column

Items

• Contents of cells are items
• Items are objects with various properties (depending on the component)

The dataProvider parameter

• For ComboBox, List, and TileList click on the dataProvider parameter to enter data.

DataGrid

“The DataGrid component lets you display data in a grid of rows and columns, drawing the data from an array or an external XML file that you can parse into an array for the DataProvider. The DataGrid component includes vertical and horizontal scrolling, event support (including support for editable cells), and sorting capabilities.” Adobe documentation

See the Flash datagrid component tutorial in this Wiki.

List

“The List component is a scrollable single- or multiple-selection list box. A list can also display graphics, including other components. You add the items displayed in the list by using the Values dialog box that appears when you click in the labels or data parameter fields. You can also use the List.addItem() and List.addItemAt() methods to add items to the list.” Adobe documentation

TileList

“The TileList component consists of a list that is made up of rows and columns that are supplied with data by a data provider. An item refers to a unit of data that is stored in a cell in the TileList. An item, which originates in the data provider, typically has a label property and a source property. The label property identifies the content to display in a cell and the source provides a value for it.” Adobe documentation

See Displaying images with the TileList component (Adobe tutorial) by Bob Berry

A little ComboBox with ActionScript only

After a day or two learning ActionScript I already was fed up with working with the drag and drop method. Problem is that I can't remember any instance names, label names, etc. and writing little pieces of ActionScript is very time consuming that way.

If you have the same problems, you should write as much as you can directly in ActionScript.

For instance, instead of dragging a ComboBox to the desktop, filling the dataProvider field in the Parameters panel etc. you just write the whole code that creates, positions and fills this ComboBox.

Code below (more or less) has been used to make the CS3 components overview

import fl.controls.ComboBox;
import fl.data.DataProvider;
import flash.net.navigateToURL;

var items_CB:Array = new Array(
  {label:"HOME", data: "home_frame"},
  {label:"User Input - buttons", data: "buttons_frame"},
  {label:"Color Picker", data: "color_picker_frame"},
  {label:"Data Grid", data: "data_grid_frame"},
  {label:"Lists", data: "lists_frame"},
  {label:"User Input - more", data: "user_input_frame"},
  {label:"Scrolling", data: "scroll_frame"}
);

var menu_CB:ComboBox = new ComboBox();
// Width of items
menu_CB.dropdownWidth = 200;
// With of the menu button
menu_CB.width = 150;
// Position (from to right: x,y)
menu_CB.move(380, 7);
// Number of rows to display without scrollbar
menu_CB.rowCount = 7;
// Label of the menu button
menu_CB.prompt = "Flash CS3 UI Components";
// Insert the items defined above
menu_CB.dataProvider = new DataProvider(items_CB);
// Register the event handler
menu_CB.addEventListener(Event.CHANGE, changeHandler);

addChild(menu_CB);

function changeHandler(event:Event):void {
	var destination = ComboBox(event.target).selectedItem.data;
	gotoAndStop(destination);
	menu_CB.selectedIndex = -1;
}

Tip: Positioning the box is not that hard. Just turn on the Rulers (Right-click->Rulers).

Links

Reference

• Flash CS3 Documentation - Select Using ActionScript 3 Components or here then click on top left menu icon. (Yes Adobe can't manage URLs for pages and menus)

• UIComponent (Adobe AS3 reference manual). For programmers.

Tutorials

• Getting started with Flash CS3 user interface components, Bob Berry, Adobe

• Creating ActionScript 3.0 components in Flash (programming, not using)

• Flash and ActionScript components learning guide

Component libraries

• Meta-Index at HotScripts.com (but not sorted by Flash version ....)

• * Adobe Exchange beta (various licences, also commercial). Not everything a component.

• Atellis (Good reflection component).