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 http://code.google.com/p/tweener/. 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 sxc.hu. The photos you choose would largely depend on you categories, but here are the ones I am using:

• http://www.sxc.hu/photo/756577
• http://www.sxc.hu/photo/1111567
• http://www.sxc.hu/photo/1123775
• http://www.sxc.hu/photo/1187878

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.

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:

<teaser>
	<item heading="Awesome new videos." label="video" image="-image1.jpg" link="http://www.videohive.net">
	<![CDATA[We love videos. And we have some new ones right here.]]>
	</item>
	<item heading="Audio loops your grandma would love." label="audio" image="-image2.jpg" link="http://www.audiojungle.net">
	<![CDATA[Our audio loops are banging.]]>
	</item>
	<item heading="Great graphics make the world go round." label="graphics" image="-image3.jpg" link="http://www.graphicriver.net">
	<![CDATA[Live without graphics, nah, that thought is just too horrible.]]>
	</item>
	<item heading="Dont stop learning." label="tutorials" image="-image4.jpg" link="http://tutsplus.com">
	<![CDATA[Knowledge is power. Done.]]>
	</item>
</teaser>

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).

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

Step 7: Set up the Layers

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

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”.

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”.

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.

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.

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.

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

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:

• #FFFFFF
• Alpha: 10

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

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.

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.

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
• #FFFFFF

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.

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.

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.

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”.

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.

//import the Tweener class
import caurina.transitions.*;

//create a vriable to store an instance of the URLLoader class
var xmlLoader:URLLoader = new URLLoader();
//add an event listener to listen for when the loader has finished loading.
xmlLoader.addEventListener(Event.COMPLETE, doComplete);
//load the xml file
xmlLoader.load(new URLRequest("xml/teaser.xml"));

//these two variables store numbers which we will assign values to later.
var catNum:Number;
var newNum:Number;

//these two arrays will store button names.
var butClipMain:Array = [];
var butClip:Array = [];

//assigns the current button number
var currBut:Number = 0;

//this array will store the link values from the xml
var linksArray:Array = [];

//we assign a variable name to a sprite instance. This sprite instance will hold the infoHolder movieclip
var holderSprite:Sprite = new Sprite();
//we add it to the stage.
addChild(holderSprite);

//we create a variable to store the instance of the timer class. We also set the timer to 5 seconds.
var timer:Timer = new Timer(5000);
//add an event listener
timer.addEventListener(TimerEvent.TIMER, doTimer);
//start the timer
timer.start();

Step 21: The Functions

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

//create a function called doComplete
function doComplete(e:Event):void
{
	//create a new variable to store an instance of the XML class. We pass through the data from the XML file.
	var xml:XML = new XML(e.target.data);
	//we create a new XMLList. This stores the nodes we want to access in the XML file.
	var catList:XMLList = xml.item;
	//we create another XMLList. This stores the image attribute of the nodes.
	//So it will store the location of the image. -image3.jpg etc.
	var images:XMLList = xml.item.@image;

	//we assign a value to the variable created earlier.
	//Depending on how many items are in the XML, this number will differ.
	//for this example catNum = 3.
	catNum = catList.length();

	//we start a loop
	for(var i:Number = 0; i < catNum; i++)
	{
		//here we create instances of the movieclips in the library and add them to stage.
		//create a variable to store the instances of the classes created.
		var but:Button = new Button();
		//set the x position of the button instances
		//the expression adds spacing between the buttons
		but.x += (95.8*i) + 3*i;
		//set the y position of the button instances
		but.y = 18;
		//we tell the instances to go to their second frame and stop.
		//This will be their "down" position
		but.gotoAndStop(2);
		//we give the dynamic text box inside the button some text.
		//the text will be the label attribute of each node in the XML.
		but.butLabelTxt.text = catList[i].@label;
		//we assign a name to the button instances.
		//names will be but1,but2,but3
		but.name = "but" + i;
		//we add the instances to the stage
		addChild(but);
		//we add the button names to the array created earlier
		butClip.push(but.name);
		//we add the button names to the array created earlier
		butClipMain.push(but.name);

		//we add the link values to the array created earlier
		linksArray.push(catList[i].@link); 

		//here we create instances of the movieclips in the library and add them to stage.
		//create a variable to store the instances of the classes created.
		var info:InfoHolder = new InfoHolder();
		//set the x position of the infoHolder instances
		//the expression adds spacing between the buttons
		info.x += (560*i) + 5*i;
		//set the y position of the infoHolder instances
		info.y = 50;
		//we give the dynamic text box inside the button some text.
		//the text for the headingTxt textbox will be the heading attribute of each node in the XML.
		info.headingTxt.text = catList[i].@heading;
		//the text for the summaryTxt textbox will be the CDATA section of each node in the XML.
		info.summaryTxt.text = catList[i];
		//we assign a name to the infoHolder instances.
		//names will be but1,but2,but3
		info.name = "info" + i;
		//we add an event listener to the more button inside infoHolder
		info.moreBut_mc.addEventListener(MouseEvent.CLICK, doMore, false, 0, true);
		//we set buttonMode to true, so that the movieclip will act like a button.
		info.moreBut_mc.buttonMode = true;
		//we add the infoHolder instances as children of the sprite we created earlier.
		holderSprite.addChild(info);

		//we create a new loader instance
		var picLoader:Loader = new Loader();
		//we request the images
		var picURLReq:URLRequest = new URLRequest(images[i]);
		//we load the images
		picLoader.load(picURLReq);
		//we add the images to the clip inside infoHolder
		info.holderClip_mc.addChild(picLoader);

		//we add an event listener to the button instances.
		but.addEventListener(MouseEvent.CLICK, doClick, false, 0, true);
		//this prevents the textbox from being mouse enabled
		but.mouseChildren = false;
	}	

	//this sets the first button instance on stage to an "up" position by sending it to its first frame.
	MovieClip(getChildByName("but" + 0)).gotoAndStop(1);

	//we set the newNum variable to one less than the value of the variable catNum
	newNum = catNum - 1;
}

//we create a new function called doTimer
//this function will be called every 5 seconds.
function doTimer(e:TimerEvent):void
{
	//we start a conditional if statement
	//it checks if the current button's value is less than newNum's variable value
	if(currBut < newNum)
	{
	//we increment the value of the currBut variable
		currBut++;
	//we call the function prevBut and send through the currBut value as a parameter
		prevBut(currBut);
	//we call the function switchButtons and send through the currBut value as a parameter
		switchButtons(currBut);
	//we call the function tweenSwitch
		tweenSwitch();

	}
	//the else of the conditional
	//it checks currBut variable is equal to newNum variable
	else if(currBut == newNum)
	{
	//we set the currBut variable value back to 0
		currBut = 0;
	//we call the prevBUt function. We send through a parameter
		prevBut(newNum+1);
	//we call the switchButtons function. We send through a parameter
		switchButtons(currBut);
	//we call the tweenStart function
		tweenStart();
	}

}

//we create a function called doCLick. It handles the button events.
function doClick(e:MouseEvent):void
{
	//we create a variable. The value will be the name of the caller.
	//if but1 is clicked the value of butString will be but1
	var butString:String = String(e.target.name);
	//we create another variable. The value is the first variable sliced.
	//if but1 is clicked the value of slicedString will be 1
	var slicedString:String = butString.slice(3);
	//we create a new variable and set its value slicedString which has been type cast to a number.
	var butNumber:Number = Number(slicedString);
	//if a button is clicked send that button to frame 1. its "down" state
	e.target.gotoAndStop(1);

	//we start another loop
	for(var j = 0; j < butClip.length; j++)
	{
	//we loop through the buttons and set them to their "up" state
		MovieClip(getChildByName(butClip[j])).gotoAndStop(2);
	//we set the button that was clicked to its "down" state
		e.target.gotoAndStop(1);
	}

	//we stop the timer if a button is clicked
	timer.stop();

	//we call the butTween function and send through a parameter
	//if but1 is clicked the parameter will be 1
	butTween(butNumber);
}

//we create a function called doMore
//this event handler takes care of the more button in infoHolder
function doMore(e:MouseEvent):void
{
	//we create a variable. The value will be the name of the caller.
	var butString:String = String(e.target.parent.name);
	//we slice the butString value to only the number
	//so if info1 is pressed slicedString will be 1
	var slicedString:String = butString.slice(4);
	//if info1 is pressed it will go to the first URL in the linksArray
	//the first element of this array will be equal the link attribute of the first child node in the XML.
	navigateToURL(new URLRequest(linksArray[Number(slicedString)]));
}

//we create a function called prevBut which expects a parameter
//this function handles the previous button as the button moves from on to the next
function prevBut(butValue:Number):void
{
	//sets the previous button to its "up" state
	MovieClip(getChildByName("but" + (butValue-1))).gotoAndStop(2);
}

//we create a function called switchButtons
function switchButtons(butValue:Number):void
{
	//sets the current button to its "down" state
	MovieClip(getChildByName("but" + butValue)).gotoAndStop(1);
}

//we create a function called tweenSwitch
//this function handles the tweening of the sprite object
function tweenSwitch():void
{
	//the holderSprite is moved -560px every 5 seconds. It moves -560px because that is approximately the width of one infoHolder
	Tweener.addTween(holderSprite,{x:holderSprite.x - 560, time:1, transition:"easeOutQuad"});
}

//we create a function called tweenStart
//this function handles the beginning of the animation
function tweenStart():void
{
	//if the promo ticker starts at the beginning, we set the sprites position to 5.
	Tweener.addTween(holderSprite,{x:5, time:1, transition:"easeOutQuad"});
}

//we create a function called butTween
//this function handles the button press. It takes care of how the sprite reacts when a button is pressed.
//it expects a parameter. If but1 was pressed, the parameter would be 1 etc.
function butTween(moveValue:Number):void
{
	//we start an if conditional
	//checks if the value of the parameter is 0
	if(moveValue == 0)
	{
		//if the parameter is 0, move the sprite to its start position
	 	Tweener.addTween(holderSprite,{x:5, time:0.5, transition:"easeOutQuad"});
		//reset the currBut variable value
		currBut = moveValue;
		//start the timer again
		timer.start();
	}
	//else of the conditional
	else
	{
		//if one of the other buttons are pressed move the sprite to the correct location
		Tweener.addTween(holderSprite,{x:moveValue*-560, time:0.5, transition:"easeOutQuad"});
		//set the currBut variable value 0,1 etc. Corresponds to the button that was pressed
		currBut = moveValue;
		//start the timer.
		timer.start();
	}
}

Conclusion

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.