Development

I’ve split this post into 4 different sections, these were the stages of my development:

• Interacting with Twitter
• Drag and Drop functions
• Shuffling functions
• Design

1. Interacting with Twitter

I did a lot of research on Google to try and help me find a way to get twitter tweets into flash, I firstly looked into the API, and at first it all seemed very complicated. Aral Balkan gave a tutorial on how to get the new SWX working, however, as much as I tried, it didn’t work for me, I don’t think it would’ve given me the right results for the end product, the link is here. After countless google searches for help with the API, I resulted to looking into the ATOM feed, this seemed to be a lot more helpful, as with the atom feed, you could search and filter what is displayed, which is exactly what I wanted. Some documentation on how to use the ATOM feed was given on the API page here which seemed pretty simple, I just needed to find a way to get that into flash. After a lot more google searches, and about a day of searching, I finally found a lead here. Ploem posted some source code from his application, which helped me so much. The main functions which I used were this:

private function loadXML():void {
//search string
var searchString:String = "http://search.twitter.com/search.atom?q=" + searchName + "&=en&rpp=11";
loader = new URLLoader();

//request pointing to feed
var request:URLRequest = new URLRequest(searchString);
request.method = URLRequestMethod.GET;

//listen for when the data loads
loader.addEventListener(Event.COMPLETE, onDataLoad);

//listen for error events
loader.addEventListener(IOErrorEvent.IO_ERROR, onIOError);
loader.addEventListener(SecurityErrorEvent.SECURITY_ERROR, onSecurityError);

//load the feed data
loader.load(request);
}
private function onDataLoad(e:Event):void {
trace("onXmlLoaded");
//get the raw string data from the feed
var rawRSS:String = URLLoader(e.target).data;
//parse it as RSS
parseRSS(rawRSS);
}
//parses RSS 2.0 feed and prints out the feed titles into
//the text area
private function parseRSS(data:String):void {

if (!XMLUtil.isValidXML(data)) {
trace("Feed does not contain valid XML.");
return;
}
//create Atom10 instance
var atomfeed:Atom10 = new Atom10();

//parse the raw rss data
atomfeed.parse(data);

//get all of the items within the feed
items = atomfeed.entries;

showTweetsStart();
}
//start adding tweets
private function showTweetsStart():void {

for (var i = 0; i < 11; i++) {
mcNumber = 'currentEntry' + i;
root[mcNumber] = items[i];
}
//start timer
myTimer.addEventListener(TimerEvent.TIMER, showTweets);
myTimer.start();
}
//start displaying tweets
private function showTweets(event:TimerEvent):void {
var newHoz = randomHoz(170, 660);
var newVert = randomHoz(36, 450);
var current:Number = myTimer.currentCount;
var mcNum = 'currentEntry' + current;
var instanceNum:String = "a" + current;
//check if tweet is valid
if (root[mcNum].title != null && root[mcNum].title != "") {
root[instanceNum].tweet_txt.text = root[mcNum].title;
root[instanceNum].x = newHoz;
var myTween:Tween = new Tween(root[instanceNum], "y", Elastic.easeOut, newVert, newVert+10, 3, true);
var myTween1:Tween = new Tween(root[instanceNum], "alpha",None.easeNone,1,0,2,true);

} else {
root[instanceNum].tweet_txt.text = "Bad Tweet";
}
}

This is the code to get Twitter’s ATOM feed into flash, I created a number of movieclips which would contain the posts. I then also in the above code, created some tweens which would animate the boxes moving down as they appeared. Then the blue boxes would fade.

Next was to add the search function, at the top of the code there, there is this line of code:
var searchString:String = "http://search.twitter.com/search.atom?q=" + searchName + "&=en&rpp=11";

The variable in the middle called “searchName” is changed depending what is inputted into the search bar, when the user clicks Search, then this line of code is run and the XML is loaded in.

Special thanks to Ploem to helping me understand this code.

2. Drag and Drop functions

As you know, the movie clips which the text appears in are called a1, a2, a3 etc, I needed to add some code where the user could drag and drop them, as they are added onto the stage, I was able to give them instance names easily and able to drag and drop effectively, using the below code:

info_mc.visible = false;
var clipArray = [a1, a2, a3, a4, a5, a6, a7, a8, a9, a10];
for (var i:int = 0; i < clipArray.length; i++) {
clipArray[i].addEventListener(MouseEvent.MOUSE_DOWN, dragMe);
clipArray[i].addEventListener(MouseEvent.MOUSE_UP, stopDragging);
}

function dragMe(event:MouseEvent):void {
event.currentTarget.startDrag();
}

function stopDragging(event:MouseEvent):void {
event.currentTarget.stopDrag();
}

As you can see here, I’ve put the instance names in an array, then run a for loop to add event listeners to the movie clips, I can therefore then start dragging and dropping the movieclips, this part of the assignment was very simple, and so far I’m very proud of the results.

3. Adding the Shuffling Functions

The shuffling function was very easy to make, I simply created a function which would pick a random number between to values, the numbers would represent the x and y co-ordinates. I then used a tween to move to that random number location. This was also a very easy part of the assignment, and I didn’t have too much trouble designing this part.

//shuffle tweets
function shuffle(event:MouseEvent):void {
for (var i = 1; i < 11; i++) {
var instanceNum:String = "a" + i;
var xPos = root[instanceNum].x;
var yPos = root[instanceNum].y;
var xNewPos:Number;
var yNewPos:Number;
xNewPos = randomHoz(100, 660);
yNewPos = randomHoz(36, 450);

var myTween:Tween = new Tween(root[instanceNum], "y", Elastic.easeOut, yPos, yNewPos, 3, true);
var myTween1:Tween = new Tween(root[instanceNum], "x", Elastic.easeOut, xPos, xNewPos, 3, true);
}
}
//generates a random number between 2 parameters
function randomHoz(minVal, maxVal) {
return minVal + Math.floor(Math.random() * maxVal + 1 - minVal);
}

I’m very pleased with the results of shuffling the posts, the easeIn and easeOut makes the application look very flashy

4. Design

All of the applications I have researched for this project, all have a very clean interface, and have kept the same design standards as twitter. They all look very similar. I wanted to keep this design going by creating a very clean interface. There is a website which I love made by a company called GT London, which was designed for the new Audi R8, I think the colours work really well. It can be found here. So I followed the same background colour scheme, as I think it looks very clean, fresh and professional. All the buttons all have very rounded edges aswell to give the feeling of the application being very light and bubbly. I was thinking of adding the names of the posters on the right side of the screen, but I thought that the application would loose it’s feeling of being simple. Having too much on the screen I think would jepordise that.

I also wanted to keep the same theme as twitter with the typography, I searched on google for a place that I could download the twitter font, and I found one here.