So for a couple of weeks, I’ve been messing around w/ building a simple using Facebook. I decided to use the new ActionScript 3 API created by Adobe and Facebook. I wanted to do a little tutorial because some of this information is hard to understand since most of the API has definitions like, ” “.
In this tutorial I will show you how to login to Facebook, retrieve your friends list and populate a TileList with their pictures. Ok, let’s get started.
Step 1: Get an account (If you don’t have a Facebook account, that would be wierd. People in nursing homes have them).
Step 4: in Design view drop in two Buttons, a Text, ComboBox and TileList components.
Step 5: enter the text into the labels of the buttons as they are in the picture below.
Then the TileList
Step 6: Now to make changes to the TileList we need click on the TileList and look at Flex Properties in the Flex Development View. In the Flex Properties set Column Count to 4 (ignore the row count).
Ok now we have the visuals let’s get to my favorite, coding.
Step 7: We are going to make ids for all componets so we can reference them in the code. The first Button name “loginbutton”, the label name “title”, the combobox name “sortBox”. See below to check your code.
<mx:Button id="loginbutton"
label="Click after you log into Facebook"
x="10" y="10"/><mx:Label id="title"
text="Hello you" x="10" y="40"/><mx:Button label="get Friends"
x="10" y="66"/><mx:ComboBox id="sortBox" x="10" y="96"/><mx:TileList id="friendsList" columnCount="4" width="400" height="400"
x="10" y="126"></mx:TileList>
Step 8: we are going to put in all of the imports and variables.
Don’t forget to add an applicationComplete to your Application Tag.
Step 10: we are going to create the response to us connecting to Facebook. It will return our id which we will make another call to get all of our info for our account.
<mx:Button id="loginbutton"
label="Click after you log into Facebook"
click="onConfirmLogin()" x="10" y="10"/>
private function onConnect(e:FacebookEvent):void
{
var call:FacebookCall=fbook.post(new GetInfo([fbook.uid], [GetInfoFieldValues.ALL_VALUES]));
call.addEventListener(FacebookEvent.COMPLETE, onGetInfo);
}
This should only return one result. The title text we named will display the account first and last name
//This gives just the ids of your friendsprivatefunction getFriends():void{varcall:FacebookCall=fbook.post(new GetFriends());
call.addEventListener(FacebookEvent.COMPLETE, onGetFriends);
}privatefunction onGetFriends(evt:FacebookEvent):void{if(evt.error){
alert = Alert.show(evt.error.errorMsg, "Error: "+ evt.error.errorCode);
return;
}var friends:FacebookUserCollection=(evt.dataas GetFriendsData).friends;
var uids:Array=[];
var userFriend:FacebookUser;
for(var i:int=0; i < friends.source.length; i++){
userFriend=friends.getItemAt(i)as FacebookUser;
uids.push(userFriend.uid);
}//get all the info of a friendsvarcall:FacebookCall=fbook.post(new GetInfo(uids, [GetInfoFieldValues.ALL_VALUES]));
call.addEventListener(FacebookEvent.COMPLETE, onHandleFriends);
}
Don’t forget to add the getFriends function to the click handler of the Button labeled “get Friends”
privatefunction onHandleFriends(e:FacebookEvent):void{if(e.error){var alert:Alert = Alert.show(e.error.errorMsg, "Error: "+e.error.errorCode);
return;
}vardata:GetInfoData=e.dataas GetInfoData;
var friendCollection:FacebookUserCollection=data.userCollection as FacebookUserCollection;
createList(friendCollection);
}privatefunction createList(data:FacebookUserCollection):void{
_friendsCollection=new ArrayCollection();
for(var i:int=0; i < data.length; i++){
_friendsCollection.addItem(data.getItemAt(i));
}
friendsList.dataProvider=_friendsCollection;
}
<mx:Button label="get Friends"
click="getFriends()" x="10" y="66"/>t;
Also we need to put in an itemRender to the TileList (for more info on itemRenders)
//This will allow you to show each friend's picture and when you hover over it will tell you there name.
<mx:TileList id="friendsList" columnCount="4" rowCount="1" width="400" height="400"
labelField="pic_big" allowMultipleSelection="false" x="10" y="126"><mx:itemRenderer><mx:Component><mx:Image source="{data.pic_big}"
toolTip="{data.name}"/></mx:Component></mx:itemRenderer>
Step 11: (Almost there) add functionality to the comboBox.
So over the last few months I’ve been messing around with Adobe AIR. The first thing that I worked on was what I was called at the time Abstract Weather Bug. I then noticed that the title was too long.
Look the title is not important. The way the this app works. Is you open the setting slider and enter in your zip, low and high temp scale, Fariehiet or Celsius, and the click GO.
You have the option to save your setting and intervals to which it will check the temperature again.
It then will display a color some were between a gradient of pure blue and red. Post coming soon explaining some of how to create a color scale.
I’m not really a designer (planning to work on that this year) so it doesn’t look awesome.
This past week I worked on a porting exercise. I have always wanted to find out how you convert Roman Numerals to Arabic numerals and vice versa. So I starting searching and found a bunch of bloated code for converting these numbers then I stumbled on this page.
So in a few hours of screwing around w/ the loops (typing this correctly took a bit) I got it ported. Porting is fun cause all you have to do is translate.
Here is the piano. Once I can build it w/ Air I’ll make it into simple app. I would suggest downloading the swf and running it in your standalone flash player. The keyboard is huge.
I have a couple of ideas to to advance this keyboard:
Decoupling functionality
recording of sound
sustain pedal
pitch ben
modulation
get out an alpha version of the code.
If you have some ideas I’d love to hear them. Please leave me a comment.
So after 13 year of off and on drumming I have learned a thing or two about music. Not much about tuning a guitar. Thanks to a class that I got a D in, Musical Acoustics, I know every note produces a frequency and a wavelength. With that you can now you Flash to produce a frequency and that is what I did, the six notes from left to right are the notes of a regularly tuned guitar.
Since I lost my Musical Acoustics book from UNT I had to look it up to find the Frequency of All Notes
public class GuitarTuner extends Sprite
{
private var _key1:Sprite;
private var _key2:Sprite;
private var _key3:Sprite;
private var _key4:Sprite;
private var _key5:Sprite;
private var _key6:Sprite;
private var _sound:Sound;
private var _note:Number = 0;
private var noise:Number = 0;
private var text:TextField = new TextField();
_sound = new Sound();
_sound.addEventListener(Event.SAMPLES_CALLBACK, onCallback);
_sound.play();
var sprite:Sprite = Sprite(evt.currentTarget);
switch(sprite.name)
{
case “midC”:
_note = 277.18;
break;
case GuitarTuner.E4:
_note = 329.63;
break;
case GuitarTuner.A4:
_note = 440.00;
break;
case GuitarTuner.D4:
_note = 587.33;
break;
case GuitarTuner.G5:
_note = 783.99;
break;
case GuitarTuner.B5:
_note = 987.77;
break;
case GuitarTuner.E6:
_note = 1318.51;
break;
}
text.text = String(_note);
}
private function makeKey():Sprite
{
var key:Sprite = new Sprite()
key.graphics.lineStyle(1, 0×000000);
key.graphics.beginFill(0xFFFFFF, 1);
key.graphics.drawRect(0, 0, 20, 50);
key.graphics.endFill();
return key;
}
public function spaceFromSibling(sibling:DisplayObject, target:DisplayObject,
coordinate:String = “x”, distance:Number = 0):Number
{
var value:int;
switch(coordinate)
{
case “x”:
value = sibling.x + sibling.width + distance;
break;
case “y”:
value = sibling.y + sibling.height + distance;
break;
}
return Math.floor(value);
}
}
}[/as]
If this code doesn’t make sense check out Lee Brimelow’s tutorial on Dynamic Sound.
I miss writing classes w/ 50 or so lines of code and here is one. This is a take off of Lee Brimelow’s Example of Dynamic Sound Generation. I’m using the BitmapData to create a tone.
For some reason it wasn’t working for me so I decided to download Pixel Bender Preview Release and copy the file’s source code and export it (File > Export Pixel Bender…for Flash) and it worked so I wanted to post it. Just in case some one had the same problem.
// shaderLoader complete handler
private function shaderLoaded(event:Event):void {
// set up shader
_shader.byteCode = _shaderLoader.data as ByteArray; // error if invalid
_shader.data.src.input = _bitmap.bitmapData; // image input
_shader.data.size.value = [100]; // constant size
_shader.data.fade.value = [.5]; // constant fade value
// draw the shader every frame
addEventListener(Event.ENTER_FRAME, drawKaleidoscope);
}
// enterframe handler
private function drawKaleidoscope(event:Event):void {
// base position on mouse location
_shader.data.position.value = [mouseX, mouseY];
// rotate constantly over time
_shader.data.angle.value = [getTimer()/500];
// draw a rectangle with the shader fill
graphics.clear();
graphics.beginShaderFill(_shader);
graphics.drawRect(0,0,300,250);
}
}
}[/as]
private function onMove(evt:MouseEvent):void
{
mc.rotationZ = stage.mouseY;
mc.rotationX = stage.mouseX
}
}
}
[/as]
Also here are some classes that I saw through code completion. I don’t really know what to do with them yet. Maybe someone else will and will let me know (I have too much work and GTAing to do ).
).