1. Code
  2. XML

Build a Smooth Hot Products List with the Caurina Tweener Class


In this, his first tut at Flashtuts+, Yanko takes you through building a dynamic 'Hot Products' list using old favourites ActionScript 3.0 and XML. He also smoothes things out by utilizing the Caurina Tweener class. Enjoy..

Step 1: File Structure

We'll begin by taking a look at the file structure of our project. The folder "caurina" is the Tweener class folder. You can download tweener from here:Tweener. In the folder "img" we'll store our images that will be used in the application.
The images in my case will have dimensions 60px wide and 55px high.

Step 2: XML

Let`s create the XML file. Open your text editor and write:

Save it as "data.xml" in the "project" folder.

Step 3: The Idea

The idea is to pass parameters to the main function "showData". These parameters are "loopMin" and "loopMax" (see the code) values for a for() loop. Then we'll filter the results with an if() statement and show them.

Step 4: Starting

Create a new Flash file (ActionScript 3).

Set the stage size to 350x350px

Step 5: Background

With the Rectangle tool (R) draw a shape with dimensions 350x350px, type linear and colors #d3d3d3,#f1f1f1. Use the Gradient transform tool (F) to adjust the gradient.

Click on the shape then open align window and make sure that the "To stage" button is enabled. Align your shape vertically and horizontally.

Create a new layer, then with the rectangle tool draw a shape 350x40px with color #333333 and align it to the bottom.

Now select both shapes and press F8 or Modify > Convert to symbol, set type to movie clip and name it "main".

Step 6: Adding Buttons

Double-click on the movie clip to open it then rename Layer 1 to "background" and lock it. Create a new layer and name it "btns". Select the Oval tool (O) then hold shift and drag a circle with stroke color:#0098FF and fill color:#FFFFFF dimensions 20X20px. Click on the stroke and change the stroke height to 3.

Select your shape and press F8 to convert it to symbol. Choose type "Button" and name it "btn".

Double-click on the Button then right-click on the "Over" frame. Select Insert Keyframe.


Select fill color and change it to #d3d3d3.

Insert Keyframe on the Down frame and change the fill color to #999999. Return to "main" movie clip and select the button. Change its instance name to "btn1". Then drag the button to the bottom, drag to the right whilst holding "Alt" and release to create a second button. Change the instance name to "btn2".

Repeat the procedure one more time to add a third button to stage and change its instance name to "btn3". Open the Align window and disable "To stage" button. Select the three buttons and align them horizontally and verticaly. Enable "To stage" once again and align them vertically.

Step 7: Items

Create a new layer and name it "items". Draw a rectangle on it of 320x90px color: type:linear #D3D3D3,#BBBBBB. Again, use the gradient transform tool to adjust the gradient. Select the shape and align it vertically to the stage. Press F8, type:Movie Clip and name it "item" - select top middle as the registration point.

Double-click on the movie clip item. Them rename "layer 1" to "background". Create a new layer and name it "txt". Select the text tool(T) and set the text type to Dynamic Text. Then draw a text field, setting the instance name to "txt". Type some text and set these properties:

Create new layer and name it "price". With the text tool draw another text field and set its instance name to "price". Set the text color to :#0099FF.

Now we're gonna make a new button..

Create a new layer and name it "btn_more". Now draw a shape with the rectangle tool of 60x20px with color:#666666. Select it and press F8. Choose type:Button and assign it a name of "more". Also, change its instance name to "more". Open the button and add a new layer, call it text. Select the text tool and use it to draw a text field, type:static text. Enter the text "more" into the field, color:#FFFFFF;size:12;format:align center;.

Insert keyframes in the Over and Down frames, and change color as you like. I use: over:#999999; down:#333333;

Return to the main movie clip, select the item and change its instance name to item1. Hold the Alt key, drag the item down to add a copy to stage. Name the second item instance name to "item2". Add another copy and change the instance name to "item3". Align the items and you should have something like this:

Step 8: Mask

Now we'll make a mask for the items. Make a new layer, name it "mask" and on it draw a rectangle 350x310px.

Right-click on the mask layer, then select mask:

Make new layer, name it "actions" and paste the code that is in the following step.

Step 9: Actionscript

Take a look at the full code:

Step 10: Vars

Step 11: xmlLoaded

When the xml file is loaded, an event listener calls the xmlLoaded function.

Step 12: showData

The function "showData" passes two parameters "loopMin" and "loopMax" these are the values for the for() loop. "loopMaxResult" and "loopSecondResult" we use in an if() statement to separate three results. If we have an array with 3 elements, the first element will be with key [0] and the last with key[2](0,1,2). To loop through the array with for() our loopMin value must be=0 and our loopMax=4. To know in which item we need to put data we use if (i==loopMin) this will display the first result in the first item, if (i==loopSecondResult) displays the second result and if (i==loopMaxResult) the third result.

Step 13: Function fData

Function fData passes two parameters. One is the movie clip instance name and the second is i value. Here we add data from the xml document to our movie clips and also make the button "more" open links from the xml.

Step 14: hideNshow

Function hideNshow passes 4 parameters.

  1. effTime - time in seconds that is used in tweener animation
  2. effeffTransition - type of tweener transition
  3. iMin - var min value
  4. iMax - var max value

When item1 animation is completed tweener calls the function "Show" (which brings items back but removes images from each one) and runs the "showData" function to fill them with the next results from our xml file. Additionally, the value of currentBtn is increased by one. Lastly, the timer is started.

Step 15: timeEvent

This function is called when the timer count down 5 seconds.

Step 16: Buttons functions

These are the functions that event listeners for buttons call.

Step 17: btnControl function

btnControl passes one parameter "btnNumber" which is used in a switch statement to change the properties of buttons when they're clicked or active.

Step 18: Event Listeners

Step 19: Which Button is Active?

We use three if() statements to see which button is currently active.

Step 20: Call functions

After end of function "ShowData" we run it with parameters (xml_length-3,xml_length+1) to see the first results when we run the application. We add event listener to data_loader so when the xml file is loaded and ready to use we call the "xmlLoaded" function.


You can modify the app as you like, change transition types, timer seconds or for example make it to show recent posts, news, tweets etc. I hope you enjoyed following along!

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