1. Code
  2. Web Design

Build a Promotional Ticker For Your Site With AS3 and the Flash IDE


We're going to be creating a simple promo ticker for a website. This is great if you are running low on space on the home page, or if you just want the latest news or products to catch the viewers eye. Let's get going!

Step 1: Download Tweener

The first step will be to source the files that are needed. Firstly, download Tweener from Look for the latest stable build under the downloads section. The one I am using is 1_33_74.

Step 2: Source Photos

I also got some free photos from The photos you choose would largely depend on you categories, but here are the ones I am using:

I edited the images and scaled them to dimensions of 136 x 95 pixels.

Step 3: The Directories

The directory structure is quite simple. An images folder for the prepped images, an xml folder for the XML document and the flash is in the root.

Directory Structure

Step 4: Install Tweener

Extract the Tweener class to your class folder. If you've been using AS3 for some time, you should have a class folder. Otherwise, take a look at the documentation and read up on how to set it up. Click on the downloads and installation link on the left hand side.

Step 5: Create Your XML

I usually do this first, but tweak it as I build the flash file. I either do this because I want to add more functionality, or I think the XML file structure could be a bit better. In any case, the final XML file looks like this:

Open up your favourite text editor, copy and paste the XML code. A quick rundown – ee start the XML file with a declaration. There is then a teaser node (for lack of a better name). The teaser node has 4 child nodes named "item". Each item node has 4 attributes. They are "heading", "label", "image" and "link". The item node value is a CDATA section. It is best to have a CDATA section when adding a block of text in flash.

Step 6: Create Flash File.

Open up Flash. Create a new Flash file (Actionscript 3).

Create a new flash file

Go to Modify > Document (Ctrl + J), set the movie width to 600px and the height to 200px. Change th background color to #999999.

Document Properties

Step 7: Set up the Layers

Create two layers. Name the bottom one "background" and the top one "actions". Lock the actions layer.

Set up the layers

Step 8: Create the Background

Now we'll create the background of our promo ticker. Make sure you are on the background layer, then using the rectangle tool create a new rectangle with a size of 548px * 128px, and a corner radius of 8.
Give it a linear vertical gradient with the following values: #CCCCCC and #FFFFFF. The stroke value is also set to #333333 and a height of 0.2. Center this object to the stage by pressing Ctrl+K, making sure that "Center to stage" is selected. Click on "Align horizontal center" and "Align vertical center".

Create the background

Step 9: Create a Movieclip.

Select the newly created background and press F8 on your keyboard. Make sure "Movie clip" is selected and give it a name of "bg".

Convert to movieclip

Step 10: Buttons Moveiclip

Now we'll create the top buttons movieclip. Go to Insert > New Symbol (Ctrl + F8). Give it a name of "button" and make sure that the symbol type is set to Movieclip.

Create Button Clip

Step 11: Edit Buttons

Go to Window > Library (Ctrl + L). Find the "button" symbol in the library and double-click on it. This will take you to the timeline of the symbol. Add two new layers. Name the three layers "background", "text" and "actions" from bottom to top.

Create Layers

Step 12: Up State

Let's add the up state. On the background layer create a rectangle with the following properties:

  • No stroke
  • Corner radius of 5
  • Linear gradient from #2E3224 and #48463A

Set the size of this shape to 95px * 31px.

Create Button Up

Use the Polystar Tool to create a three sided polygon (triangle). Place this just underneath the rectangle. Center the triangle and rectangle.

Create Arrow

Step 13: The Down State

Add a keyframe on the background layer at frame 2 of the "button" Movieclip and create another rounded rectangle, this time use a linear gradient with these values:

  • #6BA2AA and #82B8C0

Duplicate the rectangle, cut it in half and give it the following values:

  • Alpha: 10

Align the tops of these two rectangles, and you have a simple glossy button!

Create Button Down

Step 14: Finish Off the Button

On the text layer add a dynamic text box. Give it an instance name of "butLabelTxt". I used Century Gothic 13pt as the font. I also added a drop shadow to the textbox with the following settings:

  • Strength: 80
  • Quality: High
  • Distance: 2

The rest of the settings are left as default.

Create Textbox

On the actions layer, add a stop action on both frame 1 and 2. Once done, navigate back to the main timeline.

Step 15: Linkage

Now we'll give the button a linkage id. Open up the library by navigating to Window > Library or use the shortcut Ctrl + L. You should only have the one item in your library. Right-click on the "button" Movieclip and select "Linkage". In the Class field type the name "Button" (note the capital B). Click OK.

Button Linkage ID

Step 16: Start the Info Clip

Hit Ctrl + F8 to create another Movieclip. Give it a name of "infoHolder". Create three layers. Name them "picture", "text" and "button". On the picture layer create a rounded rectangle with the following properties:

  • 148px * 104px
  • #7AB1B9

Hit CTRL + F8 to bring up the "Create New Symbol" dialogue box. Give it a name of "picBG", and add a drop shadow to this rectangle.

Step 17: Picture Holder Clip

While still on the "picture" layer, create a rectangle with the following properties:

  • 136px * 95px

Convert this rectangle to a Movieclip by hitting F8 on your keyboard. Name it "holderClip" and give it an instance name of "holderClip_mc". Hit CTRL + K to open up the align panel and center align these two rectangles.

Create Pic Holder

On the "text" layer create two dynamic text boxes. Give them the following properties:

Top textbox:

  • 350px * 50px

Bottom textbox:

  • 350px * 71px

Give them instance names of "headingTxt" and "summaryTxt" respectively.

Create Textboxes

Step 18: Add a Button

Lastly, on the button layer, create a new Movieclip(Ctrl + F8), and call it "moreBut". Create a rounded rectangle with the following properties:

  • 100px * 25px
  • Liner Gradient properties: #CCCCCC to #FFFFFF
  • Corner radius: 8

Add a static textbox and type the word "more" inside it. You can also add a simple rectangle to act as a divider and a plus sign for a little bit more detail.

Create More Button

Give this Movieclip an instance name of "moreBut_mc". Navigate back to the main timeline.

Step 19: Linkage

Let's give the movieclip a linkage ID. Open up the library and give the "infoHolder" clip a linkage id of "InfoHolder".

Linkage ID

Step 20: The Variables.

Let's throw some code into the mix. Go to the actions layer and hit F9 on the keyboard to open up the actions panel. Firstly we'll import Tweener and create some variables. Copy and paste the following code in the actions panel. It may look like a lot, but I've tried to comment every line of code.

Step 21: The Functions

We'll now add the functions. Under the last line of code, hit enter twice and paste the following:


That’s it! Test your movie. You should have a promo ticker that can be used to promote news stories, products or anything of interest on your site. As mentioned earlier, it's also a great space saver. Hope you enjoyed the tutorial.

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