RSS Twitter Status mit Flash AS3 auslesen

verfasst 13.04.2010 von MediaCix | kurze URL: /t988 | Kommentar schreiben

In diesem Beitrag geht es darum, wie man mit Flash ActionScript3 den Status von seinem Twitter Account auslesen kann. Twitter bietet hier XML und JSON als Datenaustausch an. Zur Abfrage wird entweder die TwitterID oder der Screen-Name benutzt. Die TwitterID steht z.B. in deinen RSS-Feed zum Twitter Account. Im nachfolgenden Beispiel wird ein ganz einfaches HTML-Textfeld mit den letzten 5 Einträgen eingelesen. Neu bei dieser Beschreibung ist, dass hier auch RegExp für Flash benutzt wird. Also nicht erschrecken :)

Als erstes legen wir auf der Bühne ein Textfeld an und vergeben dem Ding den Instanznamen „twitter_text”. Wichtig ist, dass dieses Textfeld HTML unterstützen muss und mehrzeilig ist. Beides kann bei den Eigenschaften eingestellt werden.

Im nächsten Schritt müssen Variablen definiert werden. Und das wir mit AS3 arbeiten, gehört das zur Hausordnung.

» Flash ActionScript
var TwitterID:String = '12345';
var urlLoader:URLLoader = new URLLoader(); 

// brauchen wir später zum auslesen
var html_text:String = '';
var tw:String = '';


Nun kann es eigentlich schon losgehen und wir lesen unsere XML ein und kontrollieren mit trace() die Ausgabe.

» Flash ActionScript
urlLoader.addEventListener(Event.COMPLETE, LoadXML);
function LoadXML(e:Event):void {
 var xmlData = new XML(e.target.data);
 var twitter_list:XMLList = xmlData.children();
 for (var i:Number = 0; i < 5; i++ ) {
  trace( twitter_list[i] );
 }
}
urlLoader.load(new URLRequest('http://twitter.com/statuses/user_timeline/'+TwitterID+'.xml'));


In Fenster der Ausgabe sollte nun der komplette XML-Stream zu sehen sein. Falls nicht, dann stimmt vielleicht die TwitterID nicht oder es dauert einfach zu lange. Aber wir gehen mal davon aus, dass alles bis hier funktioniert. Und ab jetzt kommt der komplizierte Teil - das auslesen der einzelnen Werte.

In diesem Beispiel lese ich das Datum, den UserName und den Text aus. Weiterhin sollen automatisch aus dem Text die Links automatisch in HTML-Links umgewandelt werden. Und ab dieser Stelle geht es nicht mehr ohne RegExp. Bei sehr vielen Tutorials im Netz wurde hier gar nicht darauf eingegangen, wie man die Links aus dem Texten automatisch als anklickbare Links bekommt.

Damit wir aus dem String die Links bekommen und automatisch in HTML-Links umwandeln können, benutze ich dazu folgende Funktion und RegExp:

» Flash ActionScript
var twitterUrl:RegExp = /(http://+[a-zA-Z0-9.-/_+=%&?,]*[a-zA-Z0-9-/_+=%&?])/g;
function repUrl():String {
 var arg_str:String = '';
 arg_str += '<br><a href="' + arguments[1]+ '">';
 arg_str += arguments[1];
 arg_str += '</a>';
 return arg_str;
}


Das Datum im XML-File hat das Format:

<created_at>Mon Apr 12 16:04:22 +0000 2010</created_at>


Auch hierzu ein RexExp und eine Funktion:

» Flash ActionScript
var twitterDate:RegExp = /(w+)s(w+)s([0-9]+)s([0-9:]+)s([0-9+]+)s([0-9]+)/g;
function repDate():String {
 var arg_str:String = '';
 arg_str += arguments[3] + ' ';
 arg_str += arguments[2] + ' ';
 arg_str += arguments[6];
 return arg_str;
}


Nun wird der Teil beim Auslesen ( Funktion LoadXML() ) der XML-Inhalte geändert und sieht wie folgt aus:

» Flash ActionScript
function LoadXML(e:Event):void {
 var xmlData = new XML(e.target.data);
 var twitter_list:XMLList = xmlData.children();

 for (var i:Number = 0; i < 5; i++ ) {

  // Datum und Zeit auslesen
  tw = twitter_list[i].created_at.text();
  tw = tw.replace(twitterDate, repDate);
  html_text += tw + ' ';
  
  // Username auslesen
  tw = twitter_list[i].user.screen_name.text();
  html_text += '<p><a href="http://twitter.com/' + tw + '">';
  html_text += '@' + tw;
  html_text += '</a></p>';
 
  // Text und Link auslesen
  tw = twitter_list[i].text.text(); 
  tw = tw.replace(/r|n/, ' ');
  tw = tw.replace(twitterUrl, repUrl);
  html_text += '<p>' + tw + '</p><br>';

  twitter_text.htmlText = html_text;
 }

}


replace() ist vergleichbar mit der PHP-Funktion preg_replace(). Es kann also auch mit reguläre Ausdrücken gesucht und ersetzt werden.

Wenn jetzt soweit alles stimmt, sollten im Textfeld 5 Einträge zu sehen sein.
08 Apr 2010 @MediaCix
Ausgespäht und abgezockt - Wie gefährlich ist das Internet? 
http://tinyurl.com/y8ukq5t


Falls nicht dann sollte man bei der Funktion LoadXML() Schrittweise mit trace() die Werte prüfen.

Natürlich kann das ganze noch über eine Timer-Klasse gesteuert werden. Es wäre dann möglich z.B. alle 30 Minuten automatisch die neusten Einträgen anzeigen zu lassen. Zum Schluss das komplette AS mit einer zusätzlichen Funktion die aus UserNamen im Text einen Twitter-Link erstellt.

» Flash ActionScript
var TwitterID:String = '12345';
var urlLoader:URLLoader = new URLLoader();

var html_text:String = '';
var tw:String = '';

urlLoader.addEventListener(Event.COMPLETE, LoadXML);

function LoadXML(e:Event):void {
 var xmlData = new XML(e.target.data);
 var twitter_list:XMLList = xmlData.children();

 for (var i:Number = 0; i < 5; i++ ) {

  // Datum und Zeit auslesen
  tw = twitter_list[i].created_at.text();
  tw = tw.replace(twitterDate, repDate);
  html_text += tw + ' ';
  
  // Username auslesen
  tw = twitter_list[i].user.screen_name.text();
  html_text += '<p><a href="http://twitter.com/' + tw + '">';
  html_text += '@' + tw;
  html_text += '</a></p>';
 
  // Text und Link auslesen
  tw = twitter_list[i].text.text(); 
  tw = tw.replace(/r|n/, ' ');
  tw = tw.replace(twitterUser, repUser);
  tw = tw.replace(twitterUrl, repUrl);
  html_text += '<p>' + tw + '</p><br>';

  twitter_text.htmlText = html_text;
 }

}
urlLoader.load(new URLRequest('http://twitter.com/statuses/user_timeline/'+TwitterID+'.xml'));


var twitterDate:RegExp = /(w+)s(w+)s([0-9]+)s([0-9:]+)s([0-9+]+)s([0-9]+)/g;
function repDate():String {
 var arg_str:String = '';
 arg_str += arguments[3] + ' ';
 arg_str += arguments[2] + ' ';
 arg_str += arguments[6];
 return arg_str;
}


var twitterUrl:RegExp = /(http://+[a-zA-Z0-9.-/_+=%&?,]*[a-zA-Z0-9-/_+=%&?])/g;
function repUrl():String {
 var arg_str:String = '';
 arg_str += '<br><a href="' + arguments[1]+ '">';
 arg_str += arguments[1];
 arg_str += '</a>';
 return arg_str;
}


var twitterUser:RegExp = /([s|(|[]@+w*(s|,|!|.|n|)|]|-|:))/g;
function repUser():String {
 var arg_str:String = '';
 arg_str += arguments[1].substr(0,1);
 arg_str += '<a href="http://twitter.com/' + arguments[1].substr(2,arguments[1].length-3)+ '">';
 arg_str += '@' + arguments[1].substr(1,arguments[1].length-2) + '</a>';
 arg_str += arguments[1].substr(arguments[1].length-1,1);
 return arg_str;
}


Und noch zum Schluss ein kleines Online-Beispiel wie es dann aussehen könnte:

neuen Kommentar schreiben

Ich möchte automatisch eine E-Mail bei neuen Kommentaren erhalten.



Themen mit ähnlichen Inhalten


Tags zum Beitrag

twitter     twitter-api