Two weeks ago me and my fellow co-workers have started our company blog which can be reached at
http://blog.publicis-modem.ch every open source initiative, project or library that we create will be published there.
I might do a cross link to a blog post or even write a little more about it, but I think you should keep an eye over there aswell, we already released two opensource projects (wallaGo and AS3Square) and there is more to come soon, so stay tuned for some fresh content and don’t forget to bookmark a new fresh blog.

… it feels very bad, why? Just to mention a few reasons, the people, the scenery, the people, the snowboarding, have I already mentioned the people?
yep, besides Flash At The Lake 09 there was no conference that I loved so much, It was such an awesome time talking with some great cool people, it was a laid back conference with
lots of time for networking, snowboarding, and simply having fun. Let me recap for your what happened and how I experienced it.

Day T-1:
Yep, I’ve driven up to Stechelberg a day before the Conference officially started together with Mihai Corlan which I had the opportunity of picking up at the Airport and having
a very relaxed drive to the mountains with some very good talks not only geeky but very inspiring and fun. After arriving at the Location, people started to walk in ( there were already a few though ),
and we had a great time getting to know each other and to learn about what others do, very constructive and inspiring, if it wasn’t for the late night obligatory speaker snowball fight at 3am

Day 1:
First day on the slopes, first day of the conference, after a very relaxing snowboarding day with @riccastelhano, @masdennis, @starnut, @johanlopes and @agens as you can see here, the conference started late but very interesting with the opening speech of @mcorlan on Building Mobile Apps with Adobe AIR, followed by @agens speech on Making Flash Games where he showed an awesome ski jump game which attracted a sick amount of gamers, Peter also presented FunGrid an opensource flash game API, almost at midnight @mcorlan had the last speech of the day/night where he showed some great AIR/P2P examples as well some tips & tricks on his session Optimizing your Flash/AIR Application. Same as last night, it didn’t end very early and in this place I would like to thank Otto & and his service for keeping us awake with some booze and especially to stay awake with us at such late time.

Day 2:
Apart from the usual awesome weather in Stechelberg, just have a look at this awful pics, here, here, here, here, here, here, here and if you don’t have enough of it, here the complete Album. Everybody was pretty much on time to attend @masdennis awesome presentation on Messing with Actionscript and the Kinect then as the Dinner arrived, @fcolaco had a surprise prepared for us especially for visitors outside of Switzerland, the local yodeler group made a show for us and you shouldn’t miss this one, The Yodelers at gotoAndSki(); after their show, the conference continued its normal path and @starnut was up on the stage for his talk titled Hot Wireless Data Fudge where he speaks about all kinds of wireless communication while developing for AIR on mobile and on the desktop, again quite late it was my turn to present Developing for TV with AIR, where @fcolaco grounded me for not behaving don’t remember why though but I think it was okay to do so.

Day 3 & Last Day:
Yep, this pretty much sucks, everybody knew that this was the last day of the conference and everyone was sad about it as well, nevertheless, @dctrl @starnut and me decided to have a blast on the slopes and do some snowboarding the last day, which again was wonderful due to the awesome weather in the mountains, this time we had to start a bit earlier as some attendees were living that night.
First of all @trinefalbe stepped up the stage with her talk on Cognitive Psychology in Interactive Design a very very good talk which I really enjoyed and I recommend this one to all of you designing Flash Applications, Websites, or even if you are not a Flash Developer, have a look at it as soon as her video is online. After Trine we had to speed up things a little and instaed of having dinner @riccastelhano was up on the stage doing his talk on Flash + Arduino: a connection with Feelings, again a very inspiring talk with funny moments and great shows, as well it wakened up the electronical guy in me, just need to get my hands on a bunch of boards and start building my own stuff, I think our good friend Maciek “Feel happy like a pig in the mud” Wcislik aka @inoutin had the same thoughts like me.
Last but not least our very own SFUG co-manager @_sandro was up on the stage talking about Advanced Flash Accessibility a great talk as usual and how could it be different, Sandro released a new opensource library called JAcc that will help every flash developer enabling Accessibility in their Flash Projects. That was it gotoAndSki(); was officially over and everyone was feeling sad about it.

At the end it was one of the best conferences I’ve attended in the past, not only because there was some snowboarding involved, no, @fcolaco and @almeidavid_made a great conference in the swiss alps porting the concept from norway to switzerland, I had a blast meeting all these people, which now became friends, I can’t describe well enough how the conference was, I think the best would be to check out the tweets from the first week after the event by then you will be mad that you didn’t attend this event but you will know where you are going to be next year when it’s time for gotoAndSki(“switzerland”); 2012.

Below some of the tweets that I think really explain how the conference was:

I guess good networking is when you think “I miss this guys” instead of just “I made this business contacts”. Damn #gotoAndSki nostalgia…
@fcolaco

Blog: Two thumbs up for #gotoAndSki(‘Switzerland’) http://www.trinefalbe.com/?p=690
@trinefalbe

Walking through the streets of Lisbon. “Need to catch fresh air”, my brain says. I guess it’s a #gotoAndSki secon… http://picplz.com/FvSV
@imhugo

Me too! RT @RicCastelhano: may I return to the Swiss Alps ?? May I, please? Pretty please? #gotoandski aftermath
@jenschr

Just 17 more days to gotoAndSki(); the swiss edition in Stechelberg, a good time to present what I’m going to talk about during my session called “Developing AIR for TV”.

During these 45 minutes, you are going to learn how to develop AIR content for Television, starting from a simple videoplayer using the new StageVideo classes (StageCraft) to a simple Remote Controlled Slideshowviewer, up to a P2P multiplayer game which can be played with different control devices like the TV remote that comes along with your TV device or with any Android 2.2 with Adobe AIR powered Device. All these examples and a few more hints on optimization and design considerations are being showed during this session.

I hope to see a bunch of you up in the mountains of beautiful Lauterbrunnen, gotoAndSki(); tickets are limited to approx 100 attendees, and as far as I know there are not much comfort tickets left, so if you want to experience an awesome event with the beautiful swiss alps and a bunch of flash / flex guys having fun in the slopes, then jump right over to the gotoAndSki(); site and book your ticket now.

See you there!
Tiago

In the following series, I’m going to show you how to access those special properties that are available when developing for an Android or any other Flash / AIR powered device.

Today, we start with the Accelerometer API.

In this article I’m going to show you how to control a simple ball with the help of the accelerometer API. Clearly you could create a game like the well known Labyrinth available for the iOS or Teeter available on the HTC android devices very easy as soon as you know how to master the Accelerometer API.

Before we start just a heads up that you can follow this article even if you work with Flash CS5 although working with Flash Builder “Burrito” makes your life much easier.

To start let’s create a new Flash Builder “actionscript mobile project” called: “AccelerometerBall“.  Setup the project how you like it, just be sure that you enable full screen.

Now that you are ready to go we first check if an accelerometer is available, if none is available then it’s not worth of continuing the game, but if it’s available we add the sphere to the stage which we want to control. You can add whatever you want, i’m just using a simple sphere I created in Photoshop to be my indicator.

if ( Accelerometer.isSupported )
{
    _accelerometer = new Accelerometer();
    _accelerometer.addEventListener( AccelerometerEvent.UPDATE, onAccelUpdate );
 
    _sphere = new sphereClass();
    _sphere.scaleX = _sphere.scaleY = .2;
    addChild( _sphere );
 
    addEventListener(Event.ENTER_FRAME, moveSphere );
}
else
{
    //display message to user that accelerometer is not available
}

When you test the application at this point, you will not see your sphere unless your developer machine has an accelerometer in place, which I doubt

So to properly test it, you should debug your application on your mobile phone, now if you are on Flash CS5 you can use Device Central to simulate the normal behavior of  a mobile phone, Flash Builder “Burrito” users can deploy and debug directly from the Flash Builder Interface, to do that, just simply create a new Run configuration and setup as following.

When debugging the application on your phone you should now be able to see the sphere you placed in stage.

Next on let’s move on to the usage of the Accelerometer API.

To move our sphere, we simply need to take the accelerometers x & y event, have a look at the code below:

protected function onAccelUpdate( event:AccelerometerEvent ):void
{
     _targetX = event.accelerationX * _factor;
     _targetY = event.accelerationY * _factor;
}
 
protected function moveSphere(event:Event):void
{
      _sphere.x -= _targetX;
      _sphere.y += _targetY;
}

If you now test your applcation on your device or in Device Central you should see your sphere moving around on your screen.
As you see every time an update of accelerometer is being dispatched the new position is being saved in the _targetX & _targetY variable, thanks to the EnterFrame we move our sphere around the stage.

Here the complete code for you to review:

package
{
	import flash.display.Bitmap;
	import flash.display.Sprite;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import flash.events.AccelerometerEvent;
	import flash.events.Event;
	import flash.sensors.Accelerometer;
 
	public class AcceleroBall extends Sprite
	{
		[Embed(source="sphere.png")]
		private var sphereClass:Class;
 
		private var _sphere			:Bitmap;
		private var _factor			:uint			= 50;
 
		private var _accelerometer		:Accelerometer;
		private var _targetX			:Number;
		private var _targetY			:Number;
 
		public function AcceleroBall()
		{
			setup();
		}
 
		protected function setup():void
		{
			if ( Accelerometer.isSupported )
			{
				_accelerometer = new Accelerometer();
				_accelerometer.addEventListener( AccelerometerEvent.UPDATE, onAccelUpdate );
 
				_sphere = new sphereClass();
				_sphere.scaleX = _sphere.scaleY = .2;
				addChild( _sphere );
 
				addEventListener(Event.ENTER_FRAME, moveSphere );
			}
			else
			{
				//display message to user that accelerometer is not available
			}
		}
 
		protected function onAccelUpdate( event:AccelerometerEvent ):void
		{
			_targetX = event.accelerationX * _factor;
			_targetY = event.accelerationY * _factor;
		}
 
		protected function moveSphere(event:Event):void
		{
			_sphere.x -= _targetX;
			_sphere.y += _targetY;
		}
	}
}

Now it’s up on you to create the boundaries, some holes on the floor, and there you go you have your first Flash Game.

If you have questions, don’t hesitate to comment on this post.

• No double unicodes.
• Automatic generation of embed code, easy for you to copy & paste directly into your application.

One thing that I can’t handle for you is to define the source of the font with it’s according fontname as defined in your system, but hey if I find a way around this, I will update it.

And again if you would like to play around with it, here the app. Have fun!

You might have read on one of my previous tweets, where I was screaming about using “special” characters in Flash, with “special” I mean arabic, cyrillic, hebrew, chinese simplified and traditional, as well japanese.

I know,  I know, there is TLF (Text Layout Framework) that handles the whole text, but I’m talking about embedding the font, did you knew that the complete chinese Unicode range helds something around 20’000 characters? You might think so what? Let me tell you that the complete chinese character range is over 7MB big!!! Do you really want to let your viewers download a 7MB file just for the font? No.

So I’ve created a quick app that will enable you to read out the UTF code from the text you need to use, with it you can specifically embed only the characters you need and take the file size down to a minimum. Now there is only a downside of this method, if the textual content changes a day, you need to again import the new characters.
Apart from that, I haven’t seen any bad things about this implementation.

At the end of this post you will find an useful small tool to get all the needed characters.

As an example below with this line you are embedding a font only containing numerals typing 1234567890 will give you a range from U+0030 to U+0039

Embed(source="font_file_name", fontName="font_name", mimeType="application/x-font-truetype", unicodeRange="U+0030-U+0039,U+002E")]

So let’s assume you would like to write this: “Nemusíte oči vidět, musíte vidění” which means “You don’t need eyes to see, you need vision” and only embed the needed characters, you would embed your font like this

Embed(source="font_file_name", fontName="font_name",  mimeType="application/x-font-truetype",  unicodeRange="U+004e, U+0065, U+006d, U+0075, U+0073, U+00ed, U+0074, U+0065, U+0020,  U+006f, U+010d, U+0069, U+0020, U+0076, U+0069, U+0064, U+011b, U+0074,  U+002c, U+0020, U+006d, U+0075, U+0073, U+00ed, U+0074, U+0065, U+0020,  U+0076, U+0069, U+0064, U+011b, U+006e, U+00ed")]

If you don’t know how to use this kind of font embedding, have a read here:

http://soledadpenades.com/2008/10/21/embedding-fonts-in-actionscript-3-using-flex-sdk/

Test ride it your self and have fun

Flash is one of the most engaging, innovative, and versatile technologies available—allowing the creation of anything from animated banners and simple cartoons, to Rich Internet Applications, interactive videos, and dynamic user interfaces for web sites, kiosks, devices, or DVDs. The possibilities are endless, and now it just got better.

Flash CS5 boasts a host of new features, including the much-anticipated iPhone application creation feature, a whole new animation engine enabling full manipulation of tweens and paths, custom easing, improved inverse kinematics, a revamped timeline, built-in 3D, and much more.

This book is all you’ll need to learn Flash CS5 from the ground up. If you already have Flash experience, this book will allow you to quickly catch up on all the cool new features. Flash experts Tom Green and Tiago Dias guide you step-by-step through all facets of Flash CS5, keeping the emphasis firmly on good design techniques that you use in your own projects.

• Learn Flash design from the ground up, or just get to grips with the new features, with a series of step-by-step tutorials.
• Provides an easy introduction to ActionScript 3.0 coding, but the focus is mainly kept on design.
• Learn from the experts—written by renowned Flash designers Tom Green and Tiago Dias.

What You’ll Learn

• How to create an iPhone application.
• The ins and outs of the Flash CS5 interface
• How to use all of Flash CS5′s essential features, such as text, graphics, and animation
• How to use video and sound effectively in Flash
• The fundamentals of Flash CS5’s new animation and timeline features
• The basics of ActionScript 3.0
• How to populate a Flash movie with dynamic data such as XML.

Who this book is for

This book is for both beginners who want a solid grounding in Flash CS5, and designers with previous Flash experience, who want to get up to speed with the new features.

First of all we have a multiline, word-wrapped textfield in AS3, the text is picked up from an external XML file and gets styled with a CSS stylesheet, the textfield CAN have one line or multiple lines (depending on the translation and the language used), if the text is only an one-liner, the graphic (a simple small gray arrow) needs to be placed after the text in the middle of the first line, so you are able to visualize this, think about a standard <li> tag where you get the black dot, in my case just at the other side eg. at the end fo the line. have a look at the Example for a visual clarification what I want to achieve.

Basically a simple task, you grab the textlength add the gutter and margin to it and place the small arrow at that position.. but what do you do when the text goes multine and word wraps automatically?
After doing some experiments, I’ve came up with a simple yet appropriate solution for this.
Let’s start with a simple text field, containing some text and setup for multiline and wordwrapping.

var tf:TextField = new TextField();
tf.text = "Lorem Ipsum is simply dummy text of the printing and typesetting industry.";
tf.width = 100;
tf.multiline = true;
tf.wordWrap = true;
addChild( tf );

This will display a simple textfield without any formatting with 5 lines of content. Why did I set a width value on my textfield? Well without it, the textfield would just be as wide as the text, resulting in a single line text, and that’s not what we want.

Now we create a simple square / dot / arrow whatever you like acting as a marker for the end of line, so you can visualize what’s happening, I’ve created a small rectangle like this:

var rect:Sprite = new Sprite();
rect.graphics.beginFill(0xff0000);
rect.graphics.drawRect(0,0,10, 2);
rect.graphics.endFill();
addChild( rect );

Simple rectangle, doesn’t need much of an explanation, maybe you asking yourself why I’ve set it at x & y 0? Although I could position the rectangle right at the proper position I always preferred to use the setters of it so I rather create all my shapes/graphs at 0,0 and move them with myShape.x = 100, it makes things more obvious to read and you find it much quicker then doing directly on the drawRect() method.

Next up let’s have a look at our class that returns the requested values.

public class StringUtil
{
	private static var _lastChar		:TextLineMetrics;
	private static var _x			:int;
	private static var _y			:int;
 
	private static var _gutter		:int = 2;
 
	public static function getEndOfLine( tf:TextField, line:int ):Point
	{
		_lastChar 	= tf.getLineMetrics(line);
		_x		= tf.x + _lastChar.width + _gutter;
		_y		= _lastChar.height * line  + _lastChar.ascent;
 
		return new Point( _x, _y );
	}
}

What we are doing here is rather simple then you think. First we pass the textfield and the desired line to our static function, then using the getLineMetrics() method we return the desired line’s metrics, this can now be used to set an x and y position of the to be returned Point(). as you see at the _x value, I’m just telling it to add the textfields x position to the width of the requested line, at the end we add the gutter value for the textfield.
The vertical position is another story, here we need to get the height of the desired line and multiply with it. this has the reason that there is no method available to get the proper y position of the line, so by multiplying the textheight with the desired line you get the proper y position of it. After that calculation we add the _lastCahr.ascent property of the line, asking what ascent? Take a look at the image below for more information about it but basically it’s just the length of the baseline to the top of the line height in pixels, so exactly the middle of our text.

Have a look at the image below for a nice and clean overview about the gutter of a flash textfield as well about the other properties a textfield has.

Something you should also be aware of is that the width of the text line is relative to the textfield width, but you need to subtract the gutter width of 4 pixels (2 pixels on each side ).

Now that our class is available let’s take a look at how I used it for this example.

var point:Point = StringUtil.getEndOfLine( tf, tf.numLines - 1 );
rect.x = point.x;
rect.y = point.y;

What we are doing here is nothing else then creating a new Point based on the position returned by our class, passing the textfield and specially since I want to have the rectangle on the LAST line I just ask for the textfields number of lines – 1.

When running this example above you should see the small red rectangle on the last line of our textfield. yay!!!

You can download the StringUtil class here: StringUtil.as
Hope this serves you as well as it served me last week, and don’t forget to leave a comment if you have any questions about it.

Last week while working on the interface for my new upcoming library I needed a way to save some data on the users computer, altough I’m working with AIR I could easily save an xml or a txt file to the users local computer, but as soon as I would start writing a pure as3 project I would have to rewrite it again, as I can’t be sure that the client will have Flash Player 10 or even the rights to save to it’s local harddisk, some people working at bigger companies are not allowed to save anything to their local harddisk due to security rights.

The solution for this is simple yet effective, you need to use SharedObjects aka. Cookies in Flash.

Shared Objects can do the following:

• Maintain Local Persistence: Saves data locally on the users drive, for example you could save the last application state or the score of the last game, create a local highscore list and many many more applications for local use.
• Store and Share Data on FMS: Basically the same as before, but with the difference that you saving the shared object on a flash media server. Good thing about it, it can be shared throughout multiple computers, the same user using the same application on multiple computers can save its data on a server.
• Share data in realtime: using FMS you can aswell for example save the state of a multiuser application saving the current state of the applcation, every new user will get the current state based on the shared object

More information about Shared Objects can be found HERE

Let me show you a few lines of code and explain what you can do with it.

The most basic example is how to write data into a shared object.

var _so:SharedObject;
_so = SharedObject.getLocal("myLocalData");
_so.data.firstname = "myfirstname";
_so.data.lastname = "mylastname";
_so.data.age = "30";
_so.flush();

In the example above we create a new variable called _so of the type SharedObject, after that we use the getLocal() method to create the shared object, if no shared object does not already exist it will be created. if the call fails or the parameters passed along are invalid, flash throws an exception. Calling the flush() method the data will be saved to the users local harddisk.

Next up lets see how you can read from a persistent shared object.

var _so:SharedObject;
_so = SharedObject.getLocal("myLocalData");
trace( _so.data.firstname); //traces myfirstname
trace(_so.data.lastname); // traces mylastname
trace(_so.data.age); // traces 30

This time we do basically the same as before, but instead of saving data we call data, when calling _so.data.age you are going to grab the sharedobjects property named age which results in 30.

If you rather prefer to save SharedObjects to an FMS, you can use it this way:

var _nc:NetConnection;
var _so:SharedObject;
 
_nc = new NetConnection();
_nc.connect("rtmp://yourFMSserver/yourAppName");
_so = SharedObject.getRemote("myRemoteData", nc.uri, false);
_so.connect( nc );
_so.setProperty( "names", {firstame:myfirstname, lastname:myLastname} );
_so.setProperty( "age", {"30"} );

This time we create a new NetConnection to the Flash Media Server and it’s application, calling the getRemote() method acts the same as using the getLocal() method, but you also need to pass the netconnections URI to be able to save the the sharedobject remotely.
Differently from the local version we use the setProperty() method to save data on the remote Shared Object.

These are the basics for handling Shared Objects, if you have any further questions just drop me a line and I might be able to help you out.

Well, nevertheless, I’m writing this article because I’ve seen this post on the Adobe Forums by dmennenoh where he asked for the possibilities of using the Facebook AS3 API without Flex or AIR and the possibility of uploading pictures to Facebook.

Short answer: yes, it’s possible but…. it’s not a very well documented process of achieving it.

Before we start, I would like to recommend you a few tutorials on the Adobe Developer Connection, Jeanette Stallons wrote a whole series about the usage of the Facebook AS3 API, and it’s an absolute must read if you want to start developing flash applications or websites using facebook data and connectivity. First I recommend you starting with the Quick Start to get a feeling for it, after that move on to Part 1: Build and Test Locally, Part 2: Deploy on Facebook and Part 3: Deploy using Facebook Connect

First of all before we start be sure to get the newest FacebookAS3 library, be sure to download the Flash version of it. At this point the current version is Facebook_library_v3.4_flash.swc you can get newest version on the Project page.

As I prefer using MinimalComps by Keith Peters (aka. BIT-101) we are going to download his classes here. If you don’t know MinimalComps, it’s a set of components like you know from Flex or the Flash IDE, it contains the default set of components like button, textfield, textarea, but also has various interesting components like dials, calendars, knobs and much much more. I strongly recommend you read through the documentation and work through a few tutorials so you get your hands dirty with it.
Again this is not a MUST-USE, I just feel more comfortable using these then any other components.

I strongly recommend to use the deMonsterDebugger to trace events and data returned from facebook, it has a simple to use interface and is far better then the normal trace() functionality.

1. Setup
1.1 Let’s start by opening Flash Builder and creating a new Actionscript Project with the name FacebookAS3. We are not going to use any Flex Components neither any AIR methods, you could also build this in the Flash IDE, but I prefer to use Flash Builder for it’s Code Completion features and it’s the tool I prefer when coding AS3.

1.2 Import the .SWC file by right clicking on the Project name and selecting Properties, then go to Actionscript Build Path and select the Library path tab, press the Add SWC button and locate the downloaded facebook_library_flash.swc you downloaded previously. Press OK and we are ready to go.

1.3 If you using MinimalComps for the UserInterface, don’t forget to import the source to your project so you can use them properly.

1.4 If you using deMonsterDebugger to trace and debug your application, don’t forget to import the needed classes to your project src folder.

2. Login
Below you will find my main class that handles the whole login procedure of our small application.

public class Main extends Sprite
	{
		private static const API_KEY	:String				= "xxxxx";
		private static const SECRET	:String				= "xxxxx";
 
		private var _overlaySprite		:Sprite;
		private var _userInterface		:UserInterface;
		private var _photoBA			:ByteArray;
 
		private var _fb					:Facebook;
		private var _fbSession			:FacebookSessionUtil;
		private var _userData			:FacebookUser;
		private var _uid				:String;
		private var _batchCollection	:BatchCollection;
		private var _batchRun			:BatchRun;
		private var _albumArray			:Array;
		private var _uploadPhoto		:UploadPhoto;
 
		public function Main()
		{
			MonsterDebugger.trace(this, "init - Facebook integration" );
 
			stage.scaleMode = StageScaleMode.NO_SCALE;
			stage.align		= StageAlign.TOP_LEFT;
 
			_overlaySprite = new Sprite();
			_overlaySprite.graphics.beginFill(0xcccccc, 0.5 );
			_overlaySprite.graphics.drawRect( 0, 0, stage.stageWidth, stage.stageHeight );
			_overlaySprite.graphics.endFill();
			addChild( _overlaySprite );
			_overlaySprite.visible = false;
 
			_userInterface				= new UserInterface();
			_userInterface.addEventListener( Event.SELECT, uploadImage );
			addChild( _userInterface );
			_userInterface.visible = false;
			login();
		}
 
		private function login():void
		{
			_fbSession					= new FacebookSessionUtil( API_KEY, SECRET, loaderInfo );
			_fb							= _fbSession.facebook;
 
			_fbSession.addEventListener( FacebookEvent.CONNECT, connectHandle );
			_fbSession.addEventListener( FacebookEvent.WAITING_FOR_LOGIN, loginWaitHandler );
 
			_fbSession.login();
 
		}
 
		private function connectHandle( e:FacebookEvent ):void
		{
 
			if ( e.success )
			{
				_uid 					= ( e.data as GetSessionData ).uid;
 
				_batchCollection		= new BatchCollection();
				_batchCollection.addItem( new HasAppPermission( HasAppPermissionValues.PHOTO_UPLOAD ) );
				_batchCollection.addItem( new GetInfo([_uid], [GetInfoFieldValues.FIRST_NAME, GetInfoFieldValues.CURRENT_LOCATION]));
				_batchCollection.addItem( new GetAlbums() );
 
				_batchRun				= _fb.post( new BatchRun( _batchCollection ) ) as BatchRun;
				_batchRun.addEventListener( FacebookEvent.COMPLETE, batchCompleteHandler );
			}
		}
 
		private function batchCompleteHandler( e:FacebookEvent ):void
		{
			if ( e.success )
			{
				var results:Array = ( e.data as BatchResult ).results;
 
				var hasPermission:BooleanResultData = results[0];
				var getInfoResult:GetInfoData = results[1];
				var getAlbumsResult:GetAlbumsData = results[2];
 
				if ( !hasPermission.value )
				{
					MonsterDebugger.trace(this, "no permission" );
					getPermissions();
				}
 
					/*_userData = getInfoResult.userCollection.getItemAt(0) as FacebookUser;
					_userInterface.username = _userData.first_name + _userData.last_name;
					_userInterface.albumList = getAlbumsResult.albumCollection.toArray();*/
 
			}
 
		}
 
		private function getPermissions():void
		{
			_fb.grantExtendedPermission( ExtendedPermissionValues.PHOTO_UPLOAD );
		}
 
		private function uploadImage( e:Event ):void
		{
			_uploadPhoto = new UploadPhoto(_userInterface.snapshot);
			_fb.post(_uploadPhoto);
		}
 
		private function loginWaitHandler( e:FacebookEvent ):void
		{
			_overlaySprite.visible = true;
			_overlaySprite.addEventListener( MouseEvent.CLICK, confirmConnect );
		}
 
		private function confirmConnect( e:MouseEvent ):void
		{
			_overlaySprite.visible = false;
			_userInterface.visible = true;
			_overlaySprite.removeEventListener( MouseEvent.CLICK, confirmConnect );
			_fbSession.validateLogin();
		}
	}

Let’s take a look at what’s happening here, first of all we create instances of the facebook and the facebooksessionutil classes, those are going to help using Facebook throughout the whole application.
We setup an overlaysprite (this could also be a simple button or an alert panel) that will let us know when the user came back from the facebook login page. When the overlaysprite is clicked we validate the login and enable our userinterface. When the user is connected successfully to the application we start our BatchCollection to make multiple calls to FB, We check if the user has allowed permission to upload pictures, get his basic information like id, name and so on, and also get the album list from his profile (currently not working due to API bug)
When the batch is completed we assign the result to various variables and check the status of the extended permission if this is false, then we ask the user to confirm the permission so we are able to upload pictures, the getPermission() method.
After that we are ready to move on to our interface.

In this example I’m not going to create a seamless experience with Facebook that you know from other applications mostly on Mobile Phones, that involves a bunch of HTML and Javascript scripting and is covered on Jeanette Stallons Part 3: Deploy using Facebook Connect

3. Interface (UserInterface.as)
Next up we are going to create a simple interface so you can preview the webcam image and take a snapshot, we also going to create a small logger window so we get informed about what’s going on without having to switch to the deMonsterDebugger to view the status. Therefore I’m going to create a custom class named UserInterface which will have the visual assets and placeholders for the data received.

Below the Userinterface.as class:

public class UserInterface extends Sprite
	{
		private var _video			:Video;
		private var _camera			:Camera;
 
		private var _bitmap			:Bitmap;
		private var _bitmapData			:BitmapData;
 
		private var _snapshotBA			:ByteArray;
 
		private var _pushButton			:PushButton;
 
		private var _albumArray			:Array;
		private var _albumList			:List;
 
		public function UserInterface()
		{
			_camera				= Camera.getCamera();
			_camera.setMode( 640, 480, 25, true );
			_video				= new Video( _camera.width / 2, _camera.height / 2 );
			_video.attachCamera( _camera );
			addChild( _video );
 
			_pushButton				= new PushButton();
			_pushButton.width			= 80;
			_pushButton.x				= _video.width - _pushButton.width;
			_pushButton.y				= _video.height + 5;
			_pushButton.label			= "CAPTURE";
			_pushButton.addEventListener( MouseEvent.CLICK, createSnapshot );
			addChild( _pushButton );
 
			_bitmapData				= new BitmapData( _camera.width / 2, _camera.height / 2 );
			_bitmap					= new Bitmap( _bitmapData );
 
		}
 
		private function createSnapshot( e:MouseEvent ):void
		{
			_bitmapData.draw( _video );
			_video.visible = false;
			addChild( _bitmap );
 
			var enc:JPGEncoder = new JPGEncoder( 80 );
			_snapshotBA = enc.encode( _bitmapData );
 
			_pushButton.removeEventListener( MouseEvent.CLICK, createSnapshot );
			_pushButton.label = "UPLOAD IMAGE";
			_pushButton.addEventListener( MouseEvent.CLICK, sendSnapshot );
		}
 
		private function sendSnapshot( e:MouseEvent ):void
		{
			dispatchEvent( new Event( Event.SELECT ) )
		}
 
		private function createList():void
		{
			_albumList			= new List( this, _video.x + _video.width + 20, _video.y, _albumArray );
			addChild( _albumList );
 
		}
 
		public function set albumList( arr:Array ):void
		{
			_albumArray = arr;
			//MonsterDebugger.trace(this, _albumArray );
			//createList();
		}
 
		public function get snapshot():ByteArray
		{
			return _snapshotBA;
		}
	}

As you see I’m creaing a Camera instance with the size of 640x480px and attaching it to a video class to be displayed on the stage at halfsize, you could also keep it the full size but I prefer working with the 320×240 format.
The Bitmap and BitmapData instances are created and create a getter to return the bytearray to our mainapplication.

4. Using the Webcam
Let’s take a quicklook what we are doing to take a snapshot of the webcam and how to prepare the image to be uploaded to Facebook. As mentioned on my previous post we take a snapshot of the webcam by creating a bitmapdata of it, then we use the JPGEncoder classes from the AS3Corelib (these are as well already inside the AS3Facebook Library) and encode them into a ByteArray.

private function createSnapshot( e:MouseEvent ):void
		{
			_bitmapData.draw( _video );
			_video.visible = false;
			addChild( _bitmap );
 
			var enc:JPGEncoder = new JPGEncoder( 80 );
			_snapshotBA = enc.encode( _bitmapData );
}

5. Choosing Album and uploading Picture
As mentioned before there is currently a bug with the AS3Facebook API 3.4, you cannot get the Albumlist from the logged in user, even if you give the application the proper extended permissions. So in our case we are just going to upload our photos to the default album, now you’re asking what’s the default album?

It’s not very clear to me as well, but basically Facebook creates a Photoalbum for every application that uploads an image to it, let’s say your application is called “APU” the user using the application will get a APU PhotoGallery folder in his profile. So choose wisely what name your application will have.

Below the upload code:

private function uploadImage( e:Event ):void
		{
			_uploadPhoto = new UploadPhoto(_userInterface.snapshot);
			_fb.post(_uploadPhoto);
		}

That’s it, the most difficult part developing applications using Facebook is barely the way the whole data communication works, the API is very stable and things work well ( let’s forget the GetAlbum bug ).
Most tutorials out there have been written for Flex or AIR, simply because it gives you the best userinterface to handle FB needs nevertheless I prefer using pure AS3.

This time I didn’t want to create a nice interface to use it, as this is solely a programming article, feel free to modify it, download it, share it, whatever you would like to do with it.

You can download the project here: Source (Flash Builder Project)

On one of my last posts taking a screenshot with AS3 I’ve explained how to create a snapshot by using the Bitmap and the BitmapData classes.

Sometimes you need to convert the bitmaps to bytearrays to send them to a server-side script, save it directly to an AIR database or send it with AMF.

Something that is still a bit unclear, is how to convert the freshly created BitmapData to a ByteArray, there are no methods available in the default packages that come along with Flash Builder or Flash Professional, there are a few other ways, but they are in my opinion not really the best way on doing it. After all we all like to write short, smart clean code right?

Make sure you download the JPG/PNG Encoder classes from the AS3 corelib, without these you will not be able to create a proper bytearray of the snapshot,

To start off, let’s refresh our memory on how to create a bitmapdata.

_bitmapData					= new BitmapData( _sprite.width, _sprite.height );
_bitmap						= new Bitmap( _bitmapData );
_bitmapData.draw ( _sprite );
addChild( _bitmap );

Now that we remember how we create the bitmapdata object, let’s move on to the creation of a ByteArray, don’t be afraid it’s really easy, and it doesn’t cost you more then two lines of code.

var enc:JPGEncoder = new JPGEncoder( 80 );
var _snapshotBA = enc.encode( _bitmapData );

That was it, as you see, I kept my promise, only 2 lines of code to create a ByteArray.

Stay tuned for the next post.

The whole idea is basically to draw a line dynamically between 2 displayobjects, on top of it when one object is being dragged the line is redrawn along based on the second sprite position.

There is  a lot more that can be done, like avoiding other sprites, drawing multiple lines attached to multiple buttons and so on. but I think this class can give you a good head start for future implementations.

First of all there are a few things that we need to consider before starting, let’s take a look at the first few tasks

1. Every Sprite needs to know to which button it has been linked to. You need to store this somewhere.
2. Every Sprite needs a specific anchor point that is used as endpoint of the drawn line.
3. As soon the drag method is started we need to know where  the one end of the line (from the sprite that is not being dragged by the mouse) is positioned at. This is something that we really need to do once on a startDrag method.

Here’s what I’ve done:
Based on the notices above, I’ve created a new Class called ConnectedSprite a simple class which extends the Sprite Class but with a few more options that helps us towards our goal and this is how our class looks like:

package
{
	import flash.display.DisplayObject;
	import flash.display.Sprite;
	import flash.geom.Point;
 
	public class ConnectedSprite extends Sprite
	{
		private var _anchorPoint			:Point;
		private var _relativeObject		:ConnectedSprite;
 
		public function ConnectedSprite()
		{
			super();
		}
 
		public function set anchorPoint ( p:Point ):void
		{
			_anchorPoint = p;
		}
 
		public function get anchorPoint():Point
		{
			return _anchorPoint;
		}
 
		public function set relativeObject ( co:ConnectedSprite ):void
		{
			_relativeObject = co;
		}
 
		public function get relativeObject():ConnectedSprite
		{
			return _relativeObject;
		}
	}
}

Just to give you quick overview of what we are doing here:
Basically we are extending the Sprite class and adding two new variables _anchorPoint and _relativeObject, those are accessible by using getters & setters.
The _anchorpoint variable holds a fixed x and y position where our line should connect to and the _relativeObject has a reference to the other sprite which is being conntected to.
Pretty simple but effective.

That was already it, we now just need to create two new ConnectedSprite instances pass the needed values and there you go, below the BaseClass I’ve built for this example:

public class AnchoredSprite extends Sprite
	{
		private var _spriteA			:ConnectedSprite;
		private var _spriteB			:ConnectedSprite;
 
		private var _movingTarget		:ConnectedSprite;
		private var _staticTargetPos		:Point		= new Point();
 
		private var _connector			:Sprite;
 
		public function AnchoredSprite()
		{
			_connector = new Sprite();
			addChild( _connector );
 
			_spriteA = new ConnectedSprite();
			_spriteA.graphics.beginFill( 0xff0000, 1 );
			_spriteA.graphics.drawRect( 0, 0, 50, 50 );
			_spriteA.graphics.endFill();
			_spriteA.anchorPoint = new Point( _spriteA.width / 2, _spriteA.height / 2 );
			addChild( _spriteA );
			_spriteA.addEventListener( MouseEvent.MOUSE_DOWN, mouseDownHandler );
			_spriteA.addEventListener( MouseEvent.MOUSE_UP, mouseUpHandler );
 
			_spriteB = new ConnectedSprite();
			_spriteB.graphics.beginFill( 0x0000ff, 1 );
			_spriteB.graphics.drawRect( 0, 0, 50, 50 );
			_spriteB.graphics.endFill();
			_spriteB.anchorPoint = new Point( _spriteB.width / 2, _spriteB.height / 2 );
			addChild( _spriteB );
			_spriteB.addEventListener( MouseEvent.MOUSE_DOWN, mouseDownHandler );
			_spriteB.addEventListener( MouseEvent.MOUSE_UP, mouseUpHandler );
 
			_spriteA.relativeObject = _spriteB;
			_spriteB.relativeObject = _spriteA;
		}
 
		private function mouseDownHandler( e:MouseEvent ):void
		{
			e.target.startDrag( false );
			_movingTarget = e.target as ConnectedSprite;
			_staticTargetPos.x = _movingTarget.relativeObject.x + _movingTarget.relativeObject.anchorPoint.x;
			_staticTargetPos.y = _movingTarget.relativeObject.y + _movingTarget.relativeObject.anchorPoint.y;
			addEventListener( MouseEvent.MOUSE_MOVE, drawLine );
		}
 
		private function mouseUpHandler( e:MouseEvent ):void
		{
			e.target.stopDrag();
			_movingTarget = null;
 
			removeEventListener( MouseEvent.MOUSE_MOVE, drawLine );
		}
 
		private function drawLine( e:MouseEvent ):void
		{
			_connector.graphics.clear();
			_connector.graphics.lineStyle( 1, 0x333333 );
			_connector.graphics.moveTo( _staticTargetPos.x, _staticTargetPos.y );
			_connector.graphics.lineTo( _movingTarget.x + _movingTarget.anchorPoint.x, _movingTarget.y + _movingTarget.anchorPoint.y );
			e.updateAfterEvent();
		}
	}

it’s quite a long base class for this simple task, it could have been reduced using other drawing methods, but that is something that I leave up to you.

Below a working example and you can download the source files here: ConnectedSprite