XuroqFlash

Flash Tutorial: Displaying Tweets in Flash

Tom Parsons — Wed, 23 Dec 2009 19:10:57 +0000

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:

1
2
3
4
5
6
7

function subscribeLink(event:MouseEvent):void
{ //Insert your own Twitter Link
var URL:URLRequest = new URLRequest("http://twitter.com/xuroqflash");
navigateToURL(URL);
}

follow.addEventListener(MouseEvent.CLICK, subscribeLink);

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:

1
2
3
4
5
6

$dataURL = "http://twitter.com/statuses/user_timeline/xuroqflash.xml";

readfile($dataURL);

?>

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

package
{
import flash.display.MovieClip;
import flash.events.Event;
import flash.net.URLLoader;
import flash.text.TextField;
import flash.text.TextFieldAutoSize;
import flash.net.URLLoader;
import flash.net.URLRequest;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.net.navigateToURL;

public class Main extends MovieClip
{
private var twitterXML:XML;

public function Main()
{
loadTwitterXML("latest-tweets-in-flash.php");
}

private function loadTwitterXML(URL:String):void
{
var urlLoader:URLLoader = new URLLoader();
urlLoader.addEventListener(Event.COMPLETE, finishLoadingXML);
urlLoader.load(new URLRequest(URL));
}
}
}

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

package
{
package
{
import flash.display.MovieClip;
import flash.events.Event;
import flash.net.URLLoader;
import flash.text.TextField;
import flash.text.TextFieldAutoSize;
import flash.net.URLLoader;
import flash.net.URLRequest;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.net.navigateToURL;

public class Main extends MovieClip
{
private var twitterXML:XML;

public function Main()
{
loadTwitterXML("latest-tweets-in-flash.php");
}

private function loadTwitterXML(URL:String):void
{
var urlLoader:URLLoader = new URLLoader();
urlLoader.addEventListener(Event.COMPLETE, finishLoadingXML);
urlLoader.load(new URLRequest(URL));
}

private function finishLoadingXML(e:Event = null):void
{
e.target.removeEventListener(Event.COMPLETE, finishLoadingXML);

twitterXML = new XML(e.target.data);
showTwitterStatus();
}

private function showTwitterStatus():void
{
twitter_txt.wordWrap = true;
twitter_txt.autoSize = TextFieldAutoSize.LEFT;

twitter_txt.htmlText = twitterXML.status.text[0];
}
}
}

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.

Flash Sites of the Week #1

Tom Parsons — Tue, 22 Dec 2009 10:30:59 +0000

There are thousands of Flash websites out there that not only have brilliant designs, but the use of Flash and Actionscript is extraordinary. Many of these site have no other purpose on the web, other than to ‘wow’ the user. Here are the best Flash websites for this week.

So here goes, the first running of Flash sites of the Week. You can send us your suggestions via Twitter twitter.com/xuroqflash or via email.

Incredibox – incredibox.fr

Something a bit different. Incredibox allows you to mix your own tunes using inbuilt sound effects, while being entertained by the singing avatars.

Gsenpod – gsenpod.com

The personal portfolio of Gsenpod a.k.a Christian Bartsch. A very eye catching background video and generally a brilliantly designed site.

Mats Cordt, Photographer – matscordt.com

Mats is a photographer interested in taking pictures of people, cars, fashion and Landscape. The site is so brilliantly simplistic!

That’s your lot for this week. Make sure to check back next week for more fantastic Flash sites.

Coming Up in XuroqFlash…

Tom Parsons — Mon, 14 Dec 2009 18:00:56 +0000

Over the past couple of months XuroqFlash has undergone many changes. We believe that all these changes will help the site to grow and also improve our users experience.

Now that all these changes have been made here is what you can expect to be coming up in XuroqFlash over the next couple of months…

Flash Tutorials
Many people have been asking for them and now we will be able to provide them. Thanks to the recent upgrades in the backend of XuroqFlash we are now able to provide full Flash tutorials. This is something that we have long wanted to do, so we can show you how to go about creating you own brilliant Flash creations. Initially we will write tutorials for some of the Flash designs that are currently on the site, and afterwards will publish tutorials for as many new Flash creations as possible.

Showing You the Best of Flash
There are many Flash websites that do not get the publicity they deserve. We will be providing you with inspiration and ideas from some of the best Flash sites on the web.

Latest News and Reviews on Adobe Flash
Adobe Flash player is constantly being upgraded and Adobe Flash CS5 is in the making. We will provide you with all the latest news on what is going on in the Flash world, and try to bring you any reviews on the latest Flash products.

And Of Course, Open Source Flash Designs
We will continue to provide our free and open source Flash designs for you to use, edit and be inspired by. Did you know at the time this article is published we are on our 55th open source design! And we are always aiming to add as many more as possible. We would also like to thank all those who have contributed to them in the past.

View Your Latest Tweets In Flash

Tom Parsons — Fri, 04 Dec 2009 16:20:36 +0000

View your latest Tweets in this beautifully designed Flash widget.

Update to Mini Golf Game

Tom Parsons — Wed, 25 Nov 2009 18:22:42 +0000

A while back I uploaded a Flash ‘golf putting game’. I got a few emails and comments outlining some glitches in the game and with the help of the Flash community have now amended the problems. It is now a very addictive game so make sure you check it out.

Same Great Content, Brilliant New Homepage Design

Tom Parsons — Sun, 15 Nov 2009 00:17:09 +0000

If you are a regular visitor you will be able to see a few design tweaks around here, namely the new design of the homepage. We would like to think it brings more functionality and most of all a better look to the website. We hope you like it, and once again thanks goes to the Flash community for their continued support.

Flash Blurry Lights

Tom Parsons — Sun, 08 Nov 2009 14:55:29 +0000

A brilliant Flash background animation using a blurry light effect.

Circular Orb Flash Preloader

Tom Parsons — Mon, 19 Oct 2009 19:57:12 +0000

Animation on the timeline to create an attractive Flash preloader.

Basic Stand Out Digital Flash Clock

Tom Parsons — Sun, 04 Oct 2009 13:29:52 +0000

A good looking flash digital clock using the glow effect.

Homer’s Eyes Follow the Mouse

Tom Parsons — Sat, 26 Sep 2009 15:40:33 +0000

A simple animation using actionscript 3 to make Homer’s eyes follow the mouse.