Official website for Web Designer - defining the internet through beautiful design
FOLLOW US ON:
Author: Imagine Admin
4th February 2010

Flash Week Day #4 – Twitter feed

Add a Twitter feed to your blog with Flash

Flash Week Day #4 – Twitter feed

Add a Twitter feed to your blog with Flash

MASH THOSE TWEETS INTO YOUR SITE WITH SOME SWXFORMAT ACTION

Twitter seems to be the big buzz word at the moment. Just over a year ago the number of users was still only in the thousands, but now it is in the millions and everyone is using the micro-blogging tool, from designers to celebrities such as Stephen Fry and William Shatner. A rather nifty idea is to create a little badge to go on your blog so visitors could see what you’re staying via Twitter as well as your blog. There are a few free twitter badges, but they don’t give you the freedom to really put your own design into the badge. They limit you to background and text colour, so why not to create your own?
You may find you have a problem with your badge working fine on the desktop but when you place it online you may have a cross-domain issue. So how do you get around this problem you ask? Well, it’s SWXformat.org to the rescue. SWXformat acts as the proxy to get your data and then sends it to your Flash file online. So let’s get cracking and make a Twitter badge!

Download the project assets by clicking here

01 Installing SWXformat

Flash Week Day #4 – Twitter feed

It’s best to set up your development environment, so first of all you need to download the latest version of SWXformat. You can go to the site swxformat.org or straight to the source code here: http://tinyurl.com/decewk, For AS3 support, copy the “org” folder from Library/v2/AS3 next to your Flash document.

02 New Flash file

Flash Week Day #4 – Twitter feed

Open up Flash CS4 and create a new Flash File (ActionScript 3.0) and make the stage 211px x 428px, Call the first layer ‘BG’. On the cover disc you’ll have an fla file called Twitter, inside that we have created a background, but please let your design skills loose here. Add the background and then create a new layer called ‘panels’.

03 Panels

Flash Week Day #4 – Twitter feed

So the Twitter posts stand out we need to create five panels, again these are supplied in the source fla on the cover disc, but we urge you to be creative. Place the panels at 7px on the X axis and then place them at equal distances apart on the Y axis. You can do this by selecting all the panels and then using the Align properties panel.

04 Data 1

Flash Week Day #4 – Twitter feed

Add a new layer called ‘data’. Place two dynamic text fields over the top panel you just created. Open the Properties Inspector and in the Instance field name call the first item ‘one’, this should be approximately three lines high because it will store the tweet. Next call the second item ‘created0’.

Pages: 1 2 3

  • Tell a Friend
  • Follow our Twitter to find out about all the latest web development, news, reviews, previews, interviews, features and a whole more.
    • http://many Matt Rouse

      This does not function.

      Like the Paralax scrolling code from the same magazine, which I had to spend an hour debugging to get it to run properly. Is this magazine designed to frustrate me? I want these projects, but the sample code doesn’t run.

      Error #2044: Unhandled StatusEvent:. level=error, code=

    • http://many Matt Rouse

      Oh, and the data in the Output panel is coming back correct up to that point, except the URL which is showing as ‘undefined’.

      The posts are displayed with content like:

      “reess has desed a e este r ahse
      tds ret assaes ated at the eter”
      Date: sted hrs a

      Help!

    • Adam

      Nice tutorial,

      It was my first attempt at using .as scripts in my work and you made it pretty straight forward.

      Quick question, does using this SWX stuff get around the 150 maximum connetions to twitter each hour problem?

      Cheers

      Adam

    • http://many Matt Rouse

      I finally fixed it.

      For future reference, in CS5, you need to turn off debug mode to fix the error and you need to embed a font and then select each text area and select the font you have embedded.

    • http://www.facebook.com/Jopasety Jopasety

      ive tried pretty much everything dude.. :/ and i dont get it!
      what im doing wrong!? i follow ur last steps and it didnt work for me! :( how do u disable the debug mode!? thx in advance!

    • http://www.ichibandesign.com Ian

      It appears the free swx.php portal is now having some problems.

      TypeError: Error #1010: A term is undefined and has no properties.
      at TwitterSWX/detailsResultHandler()
      at flash.events::EventDispatcher/dispatchEventFunction()
      at flash.events::EventDispatcher/dispatchEvent()
      at org.swxformat::ExternalAsset/onMovieReady()

      is now being displayed when it wasn’t before. Great tutorial, and the end result lasted me for a good week or so since I bought the web designer mag volume 5. I’m going to try and crack this but any help would be appreciated.

    • Joanna

      All I’m seeing is the hopping bird, no Twitter posts. What am I doing wrong? I’m using CS5

    • Joanna

      I’m just going to link it in with this http://twitter.com/goodies/widgets