I myself being a designer, designing a custom skin for a List component has always been a little difficult. Experiencing Adobe Flash Catalyst was overwhelming from a designer’s perspective. To make this obvious, I am presenting a simple way of creating a fairly cool looking list box (DataList) component using Adobe Flash Catalyst 1.0.

Download

You may download this project file for reference.

(6533 downloads)

Preview

This is what we will create following this tutorial.

(Image)

Prerequisites

This tutorial requires you to have Adobe Flash Catalyst 1.0 Installed.

Overview

DataList as a component requires 2 main components. One being Repeating Item, the other being a Vertical Scroll bar. There are also other innovative ways of having a list control. This tutorial covers the skinning of a standard vertical list box with custom item (with a title, description and thumbnail placeholder) and a custom looking vertical Scroll bar.

Creation of the DataList UI

Let’s jump in to the steps of creating the component. We start off by drawing simple vector rectangles and filling them with different colors and gradients with some filters. We begin by creating a new Flash Catalyst Project as shown below: -

Adobe Flash Catalyst has a Toolbox when in Design workspace. A screen shot of the same is shown below: -

Choose the Rectangle tool and draw a rectangle of 351 x 351 pixels. All the dimensions I draw in my user interface are just my choice and are not necessarily a compulsion. You may feel free to have your own dimensions.

As you can see, it is just a very simple rectangle, which is not very aesthetic. Let us try and make it look better by adding a Fill Color and an appropriate Stroke color.

The properties of the above rectangle is as shown. Fill Color = #CCCCCC, Stroke Color = #DDDDDD.

This is the canvas that we drew here that holds the repeating items of the DataList. Do not worry about the behavior of the component just yet. We are trying to create a nice look for our DataList. We shall arrive in steps that convert the artwork to component in just a while. Now we shall create a List Item rectangle. Repeat the same process of creating a rectangle, place it inside the canvas rectangle as shown below. The properties of the item rectangle is also shown. Fill Color is a gradient from #CCCCCC to #ADADAD. Stroke Color is #A8A8A8.

To give it more effect and life, let us draw another rectangle just inside the one above and give it an inner outline effect. The output and properties of this rectangle is displayed below. Stroke Color is #EFEFEF.

Assuming we have a List Item background graphic, we shall draw a couple of Text Boxes that will represent Labels of the ListItem component. Use the Text Tool to insert a text field on the rectangle. Later, we also apply a subtle Drop Shadow filter using the Filters panel.

We shall add another Text Field on the List Item graphic that will represent the description or metadata of the list item. Make the description text field a little smaller and give it an opacity of 75% to make it look a little dark compared to the title.

Let’s now draw a rectangle that should act as a place holder for thumbnail of the list item. Fill Color is #FFFFFF with an opacity of 30%.

We can finally freeze the UI of the List Item as it is completely done. It is now time to create a vertical scrollbar for our DataList.

Creating Vertical Scrollbar

It amazes to know how easy it is to create a scrollbar in Adobe Flash Catalyst. It is just a matter of drawing 2 rectangles. Draw a rectangle with a width of 7 px and a height of 330 px. Give it a corner radius of 4 px. Fill it with a color #999999. Also give it a slight inner shadow. The properties panel below shows the DropShadow parameters.

This is how the UI should look like now.

We are done creating the “Track” for the scrollbar. Let us now create the “Thumb” component of the scrollbar. This should be fairly simple as it is just a 7×66 pixels rectangle with 4 corner radius and fill color #333333. Place it just on top of the previous “Track” rectangle.

This is how it should look finally.

Now is when we have the complete design of how our List component has to look like. Let’s go ahead and convert the non-intelligent design to a working flex component.

Just for your reference, the CODE for the above skin we created is shown below. It is however not a good idea to make modifications to this.

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:d="http://ns.adobe.com/fxg/2008/dt" xmlns:fc="http://ns.adobe.com/flashcatalyst/2009" backgroundColor="#FFFFFF" height="600" preloaderChromeColor="#FFFFFF" width="800">
	<fx:Style source="Main.css"/>
	<fx:DesignLayer d:userLabel="Layer 1">
		<s:Rect height="350" radiusX="0" width="350" x="49.5" y="49.5">
			<s:stroke>
				<s:SolidColorStroke caps="none" color="#CCCCCC" joints="miter" miterLimit="4" weight="1"/>
			</s:stroke>
			<s:fill>
				<s:SolidColor color="#DDDDDD"/>
			</s:fill>
		</s:Rect>
		<s:Rect height="65" radiusX="0" width="330" x="59.5" y="59.5">
			<s:stroke>
				<s:SolidColorStroke caps="none" color="#A8A8A8" joints="miter" miterLimit="4" weight="1"/>
			</s:stroke>
			<s:fill>
				<s:LinearGradient rotation="90">
					<s:GradientEntry alpha="1.0" color="#CCCCCC" ratio="0"/>
					<s:GradientEntry alpha="1.0" color="#ADADAD" ratio="1"/>
				</s:LinearGradient>
			</s:fill>
		</s:Rect>
		<s:Rect alpha="0.4" height="63" radiusX="0" width="318" x="60.5" y="60.5">
			<s:stroke>
				<s:SolidColorStroke caps="none" color="#EFEFEF" joints="miter" miterLimit="4" weight="1"/>
			</s:stroke>
		</s:Rect>
		<s:RichText color="#FFFFFF" fontFamily="Myriad Web Pro Bold" fontSize="14" tabStops="S0 S50 S100 S150 S200" text="Item Title" width="238" x="133" y="71">
			<s:filters>
				<s:DropShadowFilter alpha="0.25" angle="45.0" blurX="1" blurY="1" color="0x000000" distance="1" hideObject="false" inner="false" knockout="false" quality="2" strength="1"/>
			</s:filters>
		</s:RichText>
		<s:RichText alpha="0.75" color="#FFFFFF" fontFamily="Myriad Web Pro" fontSize="12" height="28" tabStops="S0 S50 S100 S150 S200" text="Item Description or Metadata" width="238" x="133" y="91"/>
		<s:Rect alpha="0.3" height="57" width="57" x="63.5" y="63.5">
			<s:stroke>
				<s:SolidColorStroke caps="none" color="#FFFFFF" joints="miter" miterLimit="4" weight="1"/>
			</s:stroke>
			<s:fill>
				<s:SolidColor color="#FFFFFF"/>
			</s:fill>
		</s:Rect>
		<s:Rect height="330" radiusX="4" width="7" x="386" y="59">
			<s:fill>
				<s:SolidColor color="#999999"/>
			</s:fill>
			<s:filters>
				<s:DropShadowFilter alpha="0.4" angle="45.0" blurX="2" blurY="2" color="0x000000" distance="1" hideObject="false" inner="true" knockout="false" quality="2" strength="1"/>
			</s:filters>
		</s:Rect>
		<s:Rect height="66" radiusX="4" width="7" x="386" y="59">
			<s:fill>
				<s:SolidColor color="#333333"/>
			</s:fill>
		</s:Rect>
	</fx:DesignLayer>
</s:Application>

Adding Intelligence

In order to convert the artwork to components, we need to start from the inside of the component and move out hierarchically. If and once we convert the whole artwork in to a DataList component, it is hard to convert the scrollbar to a Vertical Scrollbar component. Hence, we shall start by creating the scrollbar component.

Each component has a group of elements that need to be present. Some elements are always marked *required* and are compulsory. Some are optional. For instance, the Vertical Scrollbar component has the Track and Thumb compulsory. The up and down arrow buttons are optional. I shall demonstrate converting only the required elements since we haven’t drawn the up and down arrows.

For this, start by selecting the required components for the Vertical Scrollbar, Track and Thumb. You should see a panel on the screen that will allow you to convert the artwork into components. You can find the panel in the menu – Window > HUD (F7). Choose the dropdown that says “Convert Artwork to Component” and select “Vertical Scrollbar” as shown below: -

Now both Track and Thumb artwork seem like a single object and is converted into Vertical Scrollbar component. The HUD panel shows that you can now edit the parts of the component. Go ahead and click the “Edit Parts” button.

We need to specify Flash Catalyst the different parts of our component. In this case, the mandatory Track and the Thumb. Now go ahead and select the artwork for Track, i.e., the longer rectangle. Choose the dropdown in the HUD panel and select “Choose Part” under “Convert to Vertical Scrollbar Part” section and select “Track”.

Follow similar steps by selecting the Thumb artwork, i.e., shorter rectangle and convert it to Thumb under the HUD.

It is time to convert the whole artwork we did to a DataList component. Click on the “DataListSkin” on breadcrumbs that is on top left as shown below to move to the root of the artwork so we can select the rest of the artwork.

Now select all the artwork (HUD should show “7 Items”). Select “Choose Component” under “Convert Artwork to Component” on the HUD and choose “DataList” component.

Just as we did with the scrollbar, we need to now specify the parts of the List component. The artwork should appear as a single element on the screen and HUD should show a button “Edit Parts”. Go ahead and click it.

If you have observed in the above screen shot, the dark gray rectangle that represents the background of our item is stretched a little horizontally, to touch the scrollbar. This happened to maintain the same spacing around the item and the background box. We need to fix that. Select the rectangle that is stretched.

Use the properties panel to reduce the width to -10 of what it is. According to our dimensions, I choose 321px for width. One very important thing to note is, there are multiple “States” inside the DataList component and we made this fix in one of the states. We need to make this change affect all other states. Do not make this change manually in all states. Instead, as soon as you reduce the size in the current state, a button appears in the HUD panel that says “Make Same in All Other States”. Click the button.

Now that we have fixed the artwork width, let us specify what should comprise the item. The only required element inside a DataList component is called the “Repeated Item”. As per our design, the repeated item is the 2 rectangles for the background, title text of the item, description text and the thumbnail rectangle. Select these 5 elements and in the HUD, choose “Choose Part” under the “Convert Artwork to Component”. Select “Repeated Item”.

Ah! You should now be seeing the item repeated 5 times below.

Adobe Flash Catalyst by default repeats the Repeated Item 5 times. This can be modified later by adding/editing/deleting the items. Below the screen, you should find a panel “Design-Time Data”.

By clicking on the “Add Row” and delete buttons below in the panel, you can add or delete rows for design time reference and also edit the contents of each text field that your repeated item contains inline under the Design-Time Data panel. We may now do a Ctrl+Enter (Windows) or Cmd+Enter (Mac) to test our List component in the browser. The component should show the number of rows you added in the Design-Time Data panel and the scrollbar should work as expected. A major part of our component creation is finished.

However, we can notice that the mouse-over of an item and the selected item doesn’t look as per our liking as Adobe Flash Catalyst by default adds what it calls “Highlight Rectangle” above the list items to give it a mouse-over effect and selected item effect. This could work out for some designs. But we shall explore how to customize the UI for these states as well.

As explained before in this article, we have different states for each component. It is obvious to have similar states for our DataList component as well. The states are “Normal”, “Over” and “Selected” states.

We can customize the UI of our elements in the component by navigating to the particular state. Go ahead and click the “Over” state to customize it.

Click on the artwork to select a “Highlight Rectangle” and delete it since we are modifying the rectangles that we created.

Select the back rectangle of the item and fill it with a darker gray and a darker outline. Fill gradient should be #999999 to #666666 and Stroke color shall be #666666.

Save your .fxp file and test the content. You should see the darker item graphic for the mouse-over state.

Go ahead and repeat similar steps to customize the “Selected” state of your list item and fill it with a gradient from #000000 to #333333 and give it a stroke color of #000000. Darken the description text field in the “Selected” state to color #999999.

This is what we get after the customization.

Test and run the content that you created. This is pretty much it. We can now import this custom skinned component to Flash Builder and bind the data we require. Hope you enjoyed creating this custom skin.

Happy Skinning!

Flash Catalyst - Skin a custom DataList, 5.0 out of 5 based on 1 rating