Advertisement
  1. Code
  2. Flash
Code

Quick Introduction: Flash List and TileList Components

by
Difficulty:BeginnerLength:MediumLanguages:

In this week's Quick Tip on Flash Professional tools we will be taking a look at the Tile and TileList components.


Step 1: Setting up the Document

Open a new Flash Document and set the following properties:

  • Document Size: 550x400px
  • Background Color: #FFFFFF

Step 2: Add Components to the Stage

Open the components window by going to Menu > Window > Components or pressing CTRL+F7.

Drag two Labels, one List and one TileList component to the stage.

In the Properties panel give the first Label an instance name of "populationLabel".

(If the Properties panel is not showing, go to Window > Properties or press CTRL+F3.)

Set the Label's X to 31.00 and its Y to 26.00.

In the Properties panel give the second Label the instance name "flagsLabel". Set the Label's X to 31.00 and its Y to 238.

Then give the List the instance name "statesList" and set the List's X to 31.00 and its Y to 62.00.

Finally, give the TileList the instance name "statesTileList" and set the TileList's X to 31.00 and its Y to 269.00.


Step 3: Importing the Classes

Create a new ActionScript file and name it Main.as. We will be declaring our components in Main.as, so we need to turn off "auto declare stage instances"; the benefit of doing this is that you get code hinting for the instance.

Go to Menu > File > Publish Settings. Click on Settings next to Script[Actionscript 3].

Uncheck "Automatically declare stage instances".

In Main.as, open the package declaration and import the classes we will be using by adding the following code:


Step 4: Setup the Main Class

We'll add the class definition, making it extend MovieClip, and we'll set up our constructor function.

Add the following to Main.as:


Step 5: Functions

Here we'll define the setupListDataProvider(), setupTileListDataProvider(), setupLabels(), setupTileList(), and setupLoader() functions, as mentioned previously in the constructor.

In the library you will find movie clips named by "state" MC; these are used as an icon for the List component. You must setup the linkage for the movie clips for them to be added to the list. Do this by right-clicking on the movie clip and selecting "Properties". Here we use the name of the movie clip as the Class name:

The DataProvider class gives us an easy way to set up data to be used by components.

Add the following functions to Main.as:


Step 6: Event Listeners

Here we'll code our Event Listeners for when an item in either of the lists is clicked.

Add the following to Main.as


Conclusion

Using the List and TileList components is a great way to display lists of data and images.

You'll notice in the Component Parameters panel of the components that you can check and select certain properties.

The above image is for the List Component, the properties for which are as follows:

  • "allowMultipleSelection: a Boolean value that indicates whether more than one list item can be selected at a time
  • "dataProvider: the data model of the list of items to be viewed
  • "enabled: a Boolean value that indicates whether the component can accept user input
  • "horizontalLineScrollSize: a value that describes the amount of content to be scrolled, horizontally, when a scroll arrow is clicked
  • "horizontalPageScrollSize: the count of pixels by which to move the scroll thumb on the horizontal scroll bar when the scroll bar track is pressed.
  • "horizontalScrollPolicy: value that indicates the state of the horizontal scroll bar
  • "horizontalLineScrollSize: a value that describes the amount of content to be scrolled, horizontally, when a scroll arrow is clicked
  • "horizontalPageScrollSize: he count of pixels by which to move the scroll thumb on the horizontal scroll bar when the scroll bar track is pressed
  • "verticalScrollPolicy: a value that indicates the state of the vertical scroll bar
  • "visible: a Boolean value that indicates whether the component instance is visible

The properties for the TileList are as follows:

  • allowMultipleSelection: a Boolean value that indicates whether more than one list item can be selected at a time
  • columnCount: the number of columns that are at least partially visible in the list
  • columnWidth: "the width that is applied to a column in the list, in pixels.
  • dataProvider: the data model of the list of items to be viewed
  • direction: a value that indicates whether the TileList component scrolls horizontally or vertically.
  • enabled: a Boolean value that indicates whether the component can accept user input
  • horizontalLineScrollSize: a value that describes the amount of content to be scrolled, horizontally, when a scroll arrow is clicked
  • horizontalPageScrollSize: the count of pixels by which to move the scroll thumb on the horizontal scroll bar when the scroll bar track is pressed.
  • rowCount: the number of rows that are at least partially visible in the list.
  • rowHeight: the height that is applied to each row in the list, in pixels.
  • scrollPolicy: " the scroll policy for the TileList component.
  • verticalLineScrollSize: a value that describes how many pixels to scroll vertically when a scroll arrow is clicked.
  • verticalPageScrollSize: the count of pixels by which to move the scroll thumb on the vertical scroll bar when the scroll bar track is pressed..
  • visible: a Boolean value that indicates whether the component instance is visible

The help files are a great place to learn more about these properties.

To see the properties for Labels be sure to check out the Quick Tip on the Button and Label components.

Thanks to http://www.state-flags-usa.com for allowing me to use their flag images.

Thanks for reading and keep watching for upcoming component tutorials!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.