Using XML data from a Twitter feed, it is very easy to set up a Flash app to simply display your latest Tweet. With Twitter becoming an ever more powerful tool to spread information with, it has never been more important to display Tweets on a website. Now you will be able to do it through Flash.

Step 1: Prepare the Background

Lets start out by designing a simple background for your Tweets to sit in. Include some text and an icon to show where users could click to view the whole of your Twitter feed.

Here’s the image I used for my background. The PSD can be found with the source files. Feel free to use this or create one of your own. The dimensions we will be using for this Flash file will be 500 x 425.

Step 2: Setting Up the Main Flash File the Follow Button

OK, so we’re going to open up a new Flash document and be using Actionscript 3.

Once that’s open set the stage dimensions to 500 x 425, and then import your lovely background onto the centre of the stage.

We now need to turn the text where you said we could go to your Twitter page, actually into a button.
So lets start by creating a new layer, Insert > Timeline > Layer. Then using the rectangle tool draw a rectangle of where you want your button to be. Convert this shape into a Symbol > Button and turn the alpha down to 0%. The button should now be invisible and look something like this.

If you preview the Flash document now you should see the mouse turn into a hand where the button is, but nothing will happen when you click on it.

Step 3: Adding Some Actions to the ‘Follow’ Button

Give the new button an instance name of ‘follow’ and then create a new layer for our actionscript to sit on. Within this new layer open up the Actionscript panel and input this:

This creates a new function that will navigate to the Twitter page and an event listener that will check to see when the button has been clicked.
Preview you flash file now (Ctrl/Mac + Enter) and when the invisible button is clicked, it should take you to the desired web page.

Step 4: Setting Up Where Your Tweets Will Sit

Now to get down to what this tutorial is really about, displaying your latest Tweet in Flash. First up, lets create another new layer. Then create a text box where you want your latest Tweet to sit. Within the text box write something along the lines of ‘Loading Twitter Status’. This text will be displayed while your Twitter post is loading. Feel free to customise the font type, colour and size.
You should now have something like this:

Give the text box you just created an instance name of ‘twitter_txt’.

Step 5: PHP in a Flash Tutorial?

Yes unfortunately so. Due to the security restrictions in Flash it is not possible to grab data from an external domain, so you have do use a PHP file to do it for you. Simply create a new PHP file in your favourite text editor and input this code, replacing ‘xuroqflash’ with your Twitter ID:

Call the file ‘latest-tweets-in-flash.php’, and save it in the same directory as your .Fla file. There is also a PHP file located in the source files if you are having trouble.

Step 6: Starting the Actionscript File to Show Tweets

We are going to put all the Actionscript code for the Tweets in its own file. So go ahead and create a new Actionscript document.

Now for the code. First off we need to start the package and import all the classes that we will be using. The package keyword allows you to organize your code into groups that can be imported by other scripts.

Step 7: Loading the Twitter XML Data

Now we need to grab the Twitter feed data from the PHP file we created before. So we need to set up a new loader function to locate the PHP file and attach the XML to the Flash file.

Step 8: Parse the Twitter XML and Send it to the Text Box

Now we need to set up two new functions that will find the correct Twitter data and then display it in the text box we created earlier. So first up we tell it what to do when the Twitter feed has loaded, which in turn starts another function that will show the Twitter status in the ‘twitter_txt’ text box.

That’s all the coding done. Go back to the .Fla file and in the Properties Panel add “main” in the Class field to make this the Document Class.

Conclusion

Preview your Flash file (Ctrl/Mac + Enter). Your Tweets may not be displayed on your local computer due to the fact that the PHP will not run. However upload the .Swf file that will have just been created by you previewing the file, along with the PHP file to your server and all should now be working.

I hoped you learned a few tricks from this tutorial. See you next time for another Flash tutorial from XuroqFlash.