This is what we want to do in ActionScript. Of course we want to enhance it a bit by using ActionScript visual abilities, but the basic idea will be the same.
Of course, you may ask yourself why do we repeat ourselves? The FBML component is a nice one and why do we make the effort to work on it at all? The reason is that we really want to have a collection of Flash based components that work in a similar fashion like the Facebook standard components. Also, we really want to use the power of ActionScript so if we build something similar like to sample above, we will be able to connect a lot more easily to the existing application logic inside the swf.
Like in the previous examples, we will build the component based on the architecture we followed earlier. The basic idea behind it is that one one Facebook session will be created and passed to the component. The component will then take care of the logic. In this sample, once the valid Facebook session is created, the component will place the friends in a list and make it look pretty. Also, we will be able to use multiple components in one swf and that's where the real power of this architecture lies. So, now we need to move on and create the component.
What we need for the start is a blank swf. So, open the same FLA we worked on in the previous article. Remove all code and components.
Cool, we are really on the right path right now. Next thing we should do here is to create a valid session for Facebook. So this is accomplished with the following code that was shown in the last article:
import com.facebook.Facebook;
import com.facebook.utils.FacebookSessionUtil;
var fbook:Facebook;
var session:FacebookSessionUtil = new FacebookSessionUtil("MY_API_KEY", "MY_SECRET", loaderInfo);
fbook = session.facebook;
Paste this code inside the first frame of the swf on the actions layer. Now we have a valid Facebook session and can move on. The next thing we need to do is to examine the structure of the MultiFriend component that we will work on. What parts are in there and how do they work together?
First of all the component has two main parts: a text field to type in the names and the movieclip that will appear and act as the auto-complete, just below the text field. You can see the sample on the first image at the top and you get the idea. Now let’s create one empty component movieclip. I will not repeat the explanation of the two frame structure as I already assume that you mastered it. So, we need a component 300 px wide and 20 px high and it should link to the class called facebookUI. MultiFriendField that we are going to create now. The component will create the text field that will let the application users type in and the auto complete movieclip. Here is the blank class code that will help us:
package facebookUI{
import fl.core.UIComponent;
import flash.text.*;
import com.facebook.data.users.GetInfoData;
import com.facebook.utils.FacebookSessionUtil;
import com.facebook.data.users.FacebookUser;
import com.facebook.data.users.GetInfoFieldValues;
import com.facebook.data.friends.*;
import com.facebook.commands.users.*;
import com.facebook.commands.friends.*;
import com.facebook.net.FacebookCall;
import com.facebook.events.FacebookEvent;
import com.facebook.Facebook;
public class MultiFriendField extends UIComponent{
function MultiFriendField() {
}
override protected function configUI():void {
// always call super.configUI() in your implementation
super.configUI();
trace("hi...");
}
public function load(fbook:Facebook, uid:Number):void {
}
private function onInfo(e:FacebookEvent):void{
}
override protected function draw():void {
// always call super.draw() at the end
super.draw();
}
}
}
This is the basic skeleton of the class MultiFriendField. We need to save it in the facebookUI folder in the project directory and link to MultiFriendField symbol in our library with it.
Now when we run the swf (must not be uploaded in the Facebook canvas), we will see the trace message. If the trace message is showing up then it is a sign that we can move on. If there are errors, then it's better to stop and check the code. Again, now the class needs to create the text field and the auto-complete movieclip. This is done via the addChild method like in the previous article. So, first we need to define the the textfield, this will be done immediately after the class definition line:
public class MultiFriendField extends UIComponent{
private var _inputField:TextField = new TextField();
...
Next thing we need to do is to add it to the stage, and it can be done in the configUI method:
override protected function configUI():void {
// always call super.configUI() in your implementation
super.configUI();
this.addChild(_inputField);
_inputField.type = "input";
_inputField.border = true;
_inputField.width = 300;
_inputField.height = 20;
}
Now when we run the swf (don't need to compile it), we see the input text field that is resized and we also can type in text.
Wait, it would be nice if we could resemble the look and feel of the original Facebook components. We need to use Trebuchet MS font. So here is how it looks like:
override protected function configUI():void {
// always call super.configUI() in your implementation
super.configUI();
this.addChild(_inputField);
var tf:TextFormat = new TextFormat();
tf.font = "Trebuchet MS";
_inputField.defaultTextFormat = tf;
_inputField.type = "input";
_inputField.border = true;
_inputField.width = 300;
_inputField.height = 20;
}
That’s cool, now when we run the sample we will see the new font and look far more similar to the original Facebook interface.
Cool, it looks now far more pretty then the previous one. We have now implemented the first part of the component with the input text field and it was the easy one. Let's move on to the though part, the movieclip that will actually display the friends.
Well, we do need to work a bit with inheritance in this part. First we need to create the clap that will “snap” to the text field. Go to Insert -> New Symbol and select new movieclip. Make sure it has the fields set like in the image below.
As we can see the clip is linked to the class SnapClip. Don’t ask me why, we will later see that it makes sense. Let’s create now the SnapClip in the facebookUI folder. Here is how the class looks like here, very simple for now:
package facebookUI{
import flash.display.*;
import flash.text.*;
public class SnapClip extends MovieClip{
function SnapClip(){
super();
}
public function snapTo(t:TextField):void{
this.x = t.x;
this.y = t.y + t.height;
}
}
}
Save it as SnapClip.as in the facebookUI folder. Now we need to do a few tweaks in the original MultiFriendField class. We will first declare the movieclip:
...
private var _suggestClip:MovieClip = new SnapClip();
...
here is how the configUI method now looks like:
override protected function configUI():void {
// always call super.configUI() in your implementation
super.configUI();
this.addChild(_inputField);
var tf:TextFormat = new TextFormat();
tf.font = "Trebuchet MS";
_inputField.defaultTextFormat = tf;
_inputField.type = "input";
_inputField.border = true;
_inputField.width = 300;
_inputField.height = 20;
this.addChild(_suggestClip);
_suggestClip.snapTo(_inputField);
}
Hmm, I'm pretty sure you may be confused, so here is how the complete class looks like:
package facebookUI{
import fl.core.UIComponent;
import flash.text.*;
import flash.display.*;
import com.facebook.data.users.GetInfoData;
import com.facebook.utils.FacebookSessionUtil;
import com.facebook.data.users.FacebookUser;
import com.facebook.data.users.GetInfoFieldValues;
import com.facebook.data.friends.*;
import com.facebook.commands.users.*;
import com.facebook.commands.friends.*;
import com.facebook.net.FacebookCall;
import com.facebook.events.FacebookEvent;
import com.facebook.Facebook;
public class MultiFriendField extends UIComponent{
private var _inputField:TextField = new TextField();
private var _suggestClip:MovieClip = new SnapClip();
function MultiFriendField() {
}
override protected function configUI():void {
// always call super.configUI() in your implementation
super.configUI();
this.addChild(_inputField);
var tf:TextFormat = new TextFormat();
tf.font = "Trebuchet MS";
_inputField.defaultTextFormat = tf;
_inputField.type = "input";
_inputField.border = true;
_inputField.width = 300;
_inputField.height = 20;
this.addChild(_suggestClip);
_suggestClip.snapTo(_inputField);
}
override protected function draw():void {
// always call super.draw() at the end
super.draw();
}
}
}
Now let's run the sample. So it should look like this:
I placed one simple rectangle inside the NameSuggest movieclip in order to demonstrate how the movieclip "snaps“ to the text field. This is the desired result. The next step is to "simply“ inherit from this class. We will have the snap functionality integrated and we may call the snapTo() method directly. This is great for us, now as developers we can concentrate on stuff that is more important for the application. So, let's create the skeleton of the class that will derive the SnapClip, here it is:
package facebookUI{
import flash.display.*;
import flash.text.*;
public class SuggestClip extends SnapClip{
function SuggestClip(){
super();
trace("Hello, I'm " + this);
}
}
}
Well, in the library, we will not link the NameSuggest clip to SnapClip anymore, we will link it just to SuggestClip.
Now, finally when we run it, it should produce the result:
That's the desired result. :-) We have the snap functionality, but this time it is handled by the SnapClip. That's cool for us. The SuggestClip will now handle stuff like key board events. The component will make use of the up and down arrow buttons. When the list of friends is displayed, the arrow keys will be used the scroll up and down, like on the image below:
So, I hope that the usage of the arrow buttons is clear. Now let's create the key listeners inside the Suggest clip class. This will be done via the activate() / deactivate() methods. As soon as the application user focuses the text field, the name suggestions will be activated:
_inputField.addEventListener(FocusEvent.FOCUS_IN, focused);
and here is the "focused" function:
private function focused(e:FocusEvent):void {
trace("Field is focused...");
}
Here is now the complete class code for MultiFriendField.as:
package facebookUI{
import fl.core.UIComponent;
import flash.text.*;
import flash.display.*;
import flash.events.*;
import com.facebook.data.users.GetInfoData;
import com.facebook.utils.FacebookSessionUtil;
import com.facebook.data.users.FacebookUser;
import com.facebook.data.users.GetInfoFieldValues;
import com.facebook.data.friends.*;
import com.facebook.commands.users.*;
import com.facebook.commands.friends.*;
import com.facebook.net.FacebookCall;
import com.facebook.events.FacebookEvent;
import com.facebook.Facebook;
public class MultiFriendField extends UIComponent{
private var _inputField:TextField = new TextField();
private var _suggestClip:MovieClip = new SuggestClip();
function MultiFriendField() {
}
private function focused(e:FocusEvent):void {
trace("Field is focused...");
}
override protected function configUI():void {
// always call super.configUI() in your implementation
super.configUI();
this.addChild(_inputField);
var tf:TextFormat = new TextFormat();
tf.font = "Trebuchet MS";
_inputField.defaultTextFormat = tf;
_inputField.type = "input";
_inputField.border = true;
_inputField.width = 300;
_inputField.height = 20;
_inputField.addEventListener(FocusEvent.FOCUS_IN, focused);
this.addChild(_suggestClip);
_suggestClip.snapTo(_inputField);
}
override protected function draw():void {
// always call super.draw() at the end
super.draw();
}
}
}
Let's run the sample to see if it works. Here is how it looks like:
OK, we see now that every time the field is focused, the auto complete needs to be started. Modify the focused function to call the activate method:
private function focused(e:FocusEvent):void {
_suggestClip.activate();
}
The activate method is not yet implemented. So, open SuggestClip.as and add the following methods:
public function activate():void{
trace("Keyboard listening activated...");
stage.addEventListener(KeyboardEvent.KEY_DOWN, keyPressed);
}
public function deactivate():void{
trace("Keyboard listening deactivated...");
this.removeEventListener(KeyboardEvent.KEY_DOWN, keyPressed);
}
So, now the class SuggestClip is ready to listen for every key input. Here is the keyPressed method that will allow us to capture the key press event:
private function keyPressed(e:KeyboardEvent):void {
trace("key is pressed...");
}
Now here is the complete overview of the modificed SuggestClip class:
package facebookUI{
import flash.display.*;
import flash.text.*;
import flash.events.*;
public class SuggestClip extends SnapClip{
function SuggestClip(){
super();
}
private function keyPressed(e:KeyboardEvent):void {
trace("Key is pressed...“);
}
public function activate():void{
trace("Keyboard listening activated...");
stage.addEventListener(KeyboardEvent.KEY_DOWN, keyPressed);
}
public function deactivate():void{
trace("Keyboard listening deactivated...");
this.removeEventListener(KeyboardEvent.KEY_DOWN, keyPressed);
}
}
}
Publish the swf, focus the text field and press on soe of the key on your keyboard, you should see a result similar to this:
Now, we need to listen when the down and up arrow key is pressed and also we want to check when the enter key is pressed. Later you will see why. Here is the updated keyPressed function:
private function keyPressed(e:KeyboardEvent):void {
if(e.keyCode == 40){
trace("scroll names down...");
}
if(e.keyCode == 38){
trace("scroll names up");
}
if(e.keyCode == 13){
trace("select this name...");
}
}
From the trace messages we can see what the code intends to do.
Part 2 - Implementing the utility classes
We did the first part of the whole job. We created a component has a input text field inside. The SuggestClip, the clip that will display the actual names of the friends is snapped to the text field autoamtically. As soon as it is focused, the key listening is activated. The component listens to the up and down arrow button and the enter key. This is the basic mechanism.
What's next?
The following 2 classes will play a significant role: the SuggWord.as and the WordButton.as classes. Visually they are on the following locations:
SuggWord containts an array of WordButton classes. Every "WordButton“ contains one friend. Once it is clicked, the clips is removed and the text field is filled with the name of the selected friend, just like the original FBML brother.
So here is the plan what needs to be done:
- Implement the Wordbutton class
- Implement the SuggWord class
- Make it all work together on Facebook
Implement the WordButton class with the MovieClip
When we see the WordButton class on the image above, we notice that it has two states. One default state with white background. On the other side, there is a second rollover state that changes the color of the background. In order to achive that, first we need to implement a MovieClip with 2 states. So go to Insert -> New Symbol and create a MovieClip called WordButton:
On the timeline, create the following layer structure:
On the lowest BG layer, create 2 frames:
Leave the first frame empty and on the second frame, add a simple rectange shape size 200 x 30 px.
On the layer "Field", place the TextField called main_txt. The layer should span 2 frames:
On the HiLite layer, place one small rectange with alpha set to 0.3.
It should be direcly below the text field so it matches the height of the text field. Select it and convert it to a MovieClip. Name it textBG_mc.
Finally, leave the Actions layer for now. The MovieClip is now ready, we need to connect it now to the right class. Here is how the WordButton.as looks like:
package facebookUI{
import flash.display.*;
import flash.events.*;
import flash.text.*;
public class WordButton extends MovieClip{
private var _word:String = null;
function WordButton(){
super();
stop();
init();
}
private function init():void{
this.buttonMode = false;
textBG_mc.width = 0;
this.addEventListener(MouseEvent.ROLL_OVER, rolledOver);
this.addEventListener(MouseEvent.ROLL_OUT, rolledOut);
}
private function rolledOver(e:MouseEvent):void {
var tf:TextFormat = new TextFormat();
tf.color = 0xffffff;
main_txt.defaultTextFormat = tf;
main_txt.setTextFormat(tf);
this.gotoAndStop(2);
}
private function rolledOut(e:MouseEvent):void {
var tf:TextFormat = new TextFormat();
tf.color = 0x000000;
main_txt.defaultTextFormat = tf;
main_txt.setTextFormat(tf);
this.gotoAndStop(1);
}
public function setWord(w:String, len:Number):void{
main_txt.visible = false;
main_txt.htmlText = "<b>" + w.substr(0, len) + "</b>";
var wid:Number = main_txt.textWidth;
main_txt.htmlText = "<b>" + w.substr(0, len) + "</b>" + w.substr(len, w.length);
main_txt.visible = true;
textBG_mc.width = wid;
_word = w;
}
public function getWord():String{
return _word;
}
}
}
Implement the SuggWord class
The SuggWord class does not have any MovieClip in the library that is linked to it. It "simply" acts as a container for an array of WordButton clips that will appear as suggestions.
package facebookUI{
import flash.display.*;
import flash.events.*;
public class SuggWord extends MovieClip{
private var _focusIndex:Number = 0;
private var _currentWord:String = "";
private var _clipCounter:Number = 0;
private var _clips:Object = new Object();
function SuggWord(){
super();
}
public function clearAll():void {
while (this.numChildren){
this.removeChildAt(0);
}
_clips = new Object();
}
public function wordClicked(e:MouseEvent){
var clip = e.currentTarget;
dispatchWord(clip.getWord());
}
private function dispatchWord(word:String){
var e:SuperEvent = new SuperEvent("wordClicked", true, true);
e.add("word", word);
dispatchEvent(e);
}
public function addWord(t:String, len:Number):void{
_clipCounter++;
var word_mc:MovieClip = new WordButton();
word_mc.name = "field" + _clipCounter;
_clips["field" + _clipCounter] = word_mc;
this.addChild(word_mc);
word_mc.setWord(t, len);
var clip = _clips["field" + (_clipCounter - 1)];
var prevClipExists = Boolean(clip);
if(prevClipExists){
word_mc.y = clip.y + clip.height;
} else {
word_mc.y = 1;
}
word_mc.addEventListener(MouseEvent.CLICK, wordClicked);
}
public function focusPrev():void{
if(_focusIndex == 0){
return;
}
_focusIndex--;
this["field" + (_focusIndex + 1)].rolledOut(new MouseEvent(MouseEvent.ROLL_OUT));
this["field" + _focusIndex].rolledOver(new MouseEvent(MouseEvent.ROLL_OVER));
_currentWord = this["field" + _focusIndex].getWord();
}
public function focusNext():void{
if(_focusIndex == (_clipCounter + 1)){
return;
}
this["field" + (_focusIndex + 1)].rolledOut(new MouseEvent(MouseEvent.ROLL_OUT));
this["field" + _focusIndex].rolledOver(new MouseEvent(MouseEvent.ROLL_OVER));
_currentWord = this["field" + _focusIndex].getWord();
_focusIndex++;
}
public function focusFirst():void{
_focusIndex = 1;
var clip = _clips["field" + _focusIndex];
var clipExists = Boolean(clip);
if(clipExists){
clip.rolledOver(new MouseEvent(MouseEvent.ROLL_OVER));
_currentWord = clip.getWord();
}
}
public function getWord():String{
return _currentWord;
}
}
}
<div style="text-align: left;">Make it all work together on Facebook</div>
<div style="text-align: left;">So, now let's move on and implement the two classes. Return to the class MultiFriendField. Let's load the friends in an array. We need to add those two methods to the MultiFriendField class:</div>
public function load(fbook:Facebook):void {
var call:GetFriends = new GetFriends();
call.addEventListener(FacebookEvent.COMPLETE, onFriends);
fbook.post(call);
}
function onFriends(e:FacebookEvent):void{
var friends = (e.data as GetFriendsData).friends;
var i;
var len = friends.length;
var uids:Array = new Array();
for(i = 0; i < len; i++){
var user = friends.getItemAt(i) as FacebookUser;
uids.push(user.uid);
}
var call:FacebookCall = fbook.post(new GetInfo(uids, [GetInfoFieldValues.ALL_VALUES]));
call.addEventListener(FacebookEvent.COMPLETE, onDataRecieve);
fbook.post(call);
}
function onDataRecieve(e:FacebookEvent){
var userData = ((e.data as GetInfoData).userCollection);
var i;
var len = userData.length;
for(i = 0; i < len; i++){
var user = userData.getItemAt(i);
trace(user.first_name + " " + user.last_name);
_suggestClip.addWord(user.first_name + " " + user.last_name);
}
}
And on the main timeline, where we start our session, we call the load method:
import com.facebook.Facebook;
import com.facebook.utils.FacebookSessionUtil;
var fbook:Facebook;
var session:FacebookSessionUtil = new FacebookSessionUtil("MY_API_KEY", "MY_SECRET", loaderInfo);
fbook = session.facebook;
friendsField_mc.load(fbook);
So, once uploaded it should produce the list of friends:
Ok, in the line:
_suggestClip.addWord(user.first_name + " " + user.last_name);
we see that the friends are actually added to the list of suggestions. Finally we will try to see them. So, anytime a user types in text, friends should be suggested. Here is how.
Add the CHANGE listener for the text field:
_inputField.addEventListener(Event.CHANGE, textChanged);
and the event function:
private function textChanged(e:Event):void {
_suggestClip.suggest(_inputField.text);
}
And here is the result:
Implementing the details
Since I do not have any space to cover all the details that would make the component work, I recommend you to download the FLA and take a look at all the small details that are implemented. I know it sounds a bit odd, but there are details in the code that would need an extra article about it. For me it's important that we covered the core and basic functionality, the rest can be found in the source code that is available for MultiFriendC.fla.
To view the entire series please visit http://www.insideria.com/series-facebook-dev.html