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

private function getBitmapData( target:DisplayObject ) : BitmapData
{
if ( bd )
{
bd = null;
}
//target.width and target.height can also be replaced with a fixed number.
var bd : BitmapData = new BitmapData( target.width, target.height );
bd.draw( target );
return bd;
}

you want to display the captured bitmapdata on the stage or inside of a Sprite? Again this is no problem:

private function displayCapturedBitmapData():void
{
var bmp:Bitmap = new Bitmap( getBitmapData( myImage ) );
addChild(bmp);
}

That’s it, now you know how to create screenshots of your flash movie.

Who doesn’t know SWFObject & SWFAddress? These two JavaScript buddies are the best a serious Flash Developer can have.

SWFObject embeds your Flash nicely and browser independent, it has gone a long way and now it’s even the default publishing method in Flash Builder and Flash Catalyst (not sure about Flash CS5 ), you can read a more detailed history on the projects history site.

SWFAddress is a small library that provides deep-linking functionality in your Flash projects, it enables you to create unique virtual URL’s which enables Search Engines to index your flash content and of course the utilisation of the browsers back and forward buttons eg. history capabilities.

Usually in our development process we integrate these 2 buddies right at the beginning of the project, before we even code any AS3 line, these two are already in the html template inside FlashBuilder. Last time I started a new project I downloaded the latest versions (at that time) from these libraries and implemented them. Everything was working fine, and it works fine, but sadly only on FF3+ and IE8.. what happened to the strength of SWFObject?

After scrolling through a few posts and forums I decided to gradually downgrade every version of each Library backwards to see what happens. I must mention that the default embedding and display of flash content works perfectly, but when you need to send flashvars or parameters to your swf, there’s when things break.

Solution?
It’s an easy one, but painful to find out as it took me a few hours to get it to work.
SWFObject and SWFAddress are in deed buddies, but they need to be coordinated  properly.

First pitfall:
The order that the javascript is being placed is very important, you NEED to place it in the order:
1. SWFObject 2. SWFAddress all other Javascripts you might have in place shouldn’t bother these two, but it’s always safer to put your custom stuff after the SWFAddress import.

Second pitfall:
There are various versions of each library some work together some don’t. I didn’t had the time to create a nice working table, but I promise you that I’m going to post one in the near future, but I can tell you what definately works 100%, SWFObject 2.2 & SWFAddress 2.2, yes both libraries with the same version number.

Third pitfall:
Sometimes ( I can’t tell you in which formation ) flashvars as parameters don’t get through to the SWF, the only workaround I found was to instead of using a parameters array I’ve passed an arguments array, that fixed all the troubles.

I know it’ s weird and I would like to elaborate more on this, but currently I just don’t have the time to do it, but don’t be afraid I will get a list up soon with my testing results.
If you have any questions to this topic, drop me a line and I will try to help you out.

UPDATE:
Changed version numbers from 2.3 to 2.2, thanks to Ven

During the last project I worked on for ChocolatFrey I had a small problem that was bugging me. with the help of our inhouse stagemanager class where you can define minimum width & height of the stage the flash website always looked good, but as sson as the screen was smaller then the minimum defined width & height it broke the layout.
After a few minutes of searching I found this awesome little JavaScript called SWFFit it resizes the flash movie based on the minimum dimensions set.

The usage of it is let’s say SIMPLE!! Even if you didn’t really care about JS, you can easily understand how it works, this is a simple example of how to use it:

swffit.fit("my_flash", 960, 670);

What the script above would do, is just create browser scrollbars when the defined size has been reached.
You can even set more options like min/max width & height and how the flash content should be centered.

Below a short explanation of the possible options:

swffit.fit('flashID', minW, minH, maxW, maxH, hCenter, vCenter);

flashID: the id of the flash embed/object tag
minW: minimum width in pixels
minH: minimum height in pixels
maxW: maximum width in pixels
maxH: maximumheight in pixels
hCenter: flash content will be centered horizontally when the maximum size has been reached ( Boolean )
vCenter: flash content will be centered vertically when the maximum size has been reached ( Boolean )

This is one of the Javascripts that should always be handy as Flash Developer together with SWFObject & SWFAddress.

So go have a look at it, and try it out, I can only recommend it and give a big thank you out to Miller Medeiros for sharing this with us.

The Open Source Media Framework went live a few weeks ago with it’s first release 1.0, I already worked with various sprint versions of it, and lately created a final project using OSMF.

Something that I was missing was the capability of displaying a Sprite or Text Element inside a Serial- or Parallel-Element.
So I’ve wrote a simple class named “InteractiveDisplayObjectElementt” that will handle this need:

public class InteractiveDisplayElement extends MediaElement
{
private var displayObjectTrait:InteractiveDisplayObjectTrait;
private var _sprite:Sprite;
 
public function InteractiveDisplayElement( displayObject:Sprite=null)
{
   super();
   this.sprite = displayObject;
}
 
public function set sprite( value:Sprite ):void
{
   _sprite = value;
    updateSprite();
}
 
public function get sprite():Sprite
{
    return _sprite;
}
 
private function updateSprite():void
{
   var sprite:Sprite = new Sprite();
   sprite.addChild( _sprite );
 
   if ( displayObjectTrait == null )
   {
      displayObjectTrait = new InteractiveDisplayObjectTrait( sprite );
      addTrait( MediaTraitType.DISPLAY_OBJECT, displayObjectTrait );
   }
   displayObjectTrait.setSize( sprite.width, sprite.height );
}

Extending the MediaElement class enables you to create a visible displayelement that can be attached to any kind of OSMF container including the serial & parallel elements, this is aswell the class being used for all kind of non-loadable elements.
So basically we are passing a Sprite to our new element to be placed in it, as soon as it’s set we call up the updateSprite() method that will add the passed sprite to the displaylist and assign it to the InteractiveDisplayObjectTrait (class following below)

The second class built was the InteractiveDisplayObjectTrait, this was only to keep the structure and logic of OSMF kind of in “place”, with it you can set the size of the element separately.

internal class InteractiveDisplayObjectTrait extends DisplayObjectTrait
{
  public function InteractiveDisplayObjectTrait(displayObject:DisplayObject, mediaWidth:Number=0, mediaHeight:Number=0)
  {
    super(displayObject, mediaWidth, mediaHeight);
  }
 
  public function setSize(mediaWidth:Number, mediaHeight:Number):void
  {
     setMediaSize(mediaWidth, mediaHeight);
  }
}

With it you are now able to use simple as well complex sprites in your Composition elements, below an example of how I tested the newly built class.

...
var aniHolder:Sprite = new Sprite();
sp.addChild( aniHolder );
var ball:Sprite = new Sprite();
ball.graphics.beginFill(0xff0000,1 );
ball.graphics.drawCircle( 0, 0, 8 );
ball.graphics.endFill();
aniHolder.addChild( ball );
 
TweenMax.to( ball, 2, { x: 400, repeat:-1, yoyo:true, ease:com.greensock.easing.Bounce.easeInOut});
 
var _spriteElement2:InteractiveDisplayElement = new InteractiveDisplayElement( aniHolder );
layout							= new LayoutMetadata();
layout.left = 400;
_spriteElement2.addMetadata( LayoutMetadata.LAYOUT_NAMESPACE, layout );
_pararellElement.addChild( _spriteElement2 );
...

What do you need to know about the code above? Well as you see I’m only creating a red circle that is being added to the aniHolder sprite, with the help of tweenmax I’m animating the circle to bounce left to right and viceversa, then I create a new InteractiveDisplayElement (the class we created before) assign a layout to it and add to the ParallelElement (this could also be a serialelement or a simple mediacontainerSprite).

Yay! the  open source media framework just went into production release 1.0.
I’ve been working with the early betas of OSMF and it just rocks to see such a project going into production state, Flash developers need to constantly build audio/videoplayers ranging from simple video playback to very complex situations like playing multiple video formats with multiple lengths while keeping it dynamic, using posterframes, prerolls, in-video advertisement and much much more, either you developed your own media player framework to cope with the needs or you had to build your play from the groundup everytime you got such a request. With OSMF you have a stable framework that allows you to create mediaplayers  quick and easy but also fully customizable.

But like I said, it’s a FRAMEWORK!!! it’s by no means a finalized player with all the buttons and thingys you want, if you are searching for that then use the Videoplayer component or do a google search for an open source videoplayer, there are dozens of them on the net.

So What is OSMF?
OSMF is a mediaframework that simplifies the development of media players by allowing developers to assemble bits & pieces to create a full-featuerd mediaplayback solution.

Come on, I don’t want to code another player with another codebase
by no means I’m telling you to switch all your projects over to OSMF, but I really really recommend you to have a look at what is possible with it. My last project was creating a mediaplayer that shows a swf, an image and  an flv or mp4 one after the other, if I would be building this without OSMF it would have taken me at least 2-3days, with OSMF it only took me 2 hours to get into the logic of OSMF and having a prototype style mediaplayer running, with all the features the client requested.

Give me the player I don’t care about framework
Ok fine, Adobe also pre-released the Strobe Media Playback media player, which you quickly integrate into any websitem it’s a compiled SWF available here: http://www.opensourcemediaframework.com/strobe_prerelease.html
You use the player, you configure the player through the HTML file (flash vars) and that’s it, now you saying aren’t there enough players around that can do that?

Probably yes, but do those players also support all of this?
- Progressive Download
- RTMP streaming
- Live streaming
- HTTP Dynamic Streaming
- Content Protection
- and much much more

Below a few links to useful information about OSMF & Strobe Media Playback
More about OSMF
More about Strobe
OSMF AppStudio

And a few useful blogs from the contributors and developers of OSMF
Official OSMF blog
David Hassoun
Greg Hamer
Kevin Towes

The developer documentation can be found here and a quick start guide to OSMF can be found here.

Now go out there and create some really cool players!

The Connect recording of our session can be found here http://bit.ly/dbZBIz

Enjoy and see you next time at the 35th SFUG Meeting on the 25th of May 2010.
Details and topics will be announced soon.

During Developer Week, learn about the Adobe® Flash® Platform, including Adobe® Flex®, Adobe® Flash® Builder™, Adobe® AIR®, Adobe® Flash® Player, and how it integrates with Adobe® Creative Suite® 5 technologies. This weeklong event features free, live webinars presented by Adobe technology experts. See live demos and have your questions answered by the experts during interactive Q&A sessions.

Want to attend? Nothing easier then that! Just jump over directly here:
http://www.adobe.com/cfusion/event/index.cfm?event=detail&id=1489921&loc=en_us

The next SFUG (Swiss Flash User Group) takes place on the 20h of April 2010 with the long awaited talk by Sandro about performance tweaks in AS3 and last but not least myself and Marcel Vogt are showcasing two demo apps we built using the the megaphone platform.

Topic 1: AS3 Performance Tweaks ( Sandro Ducceschi / Liip AG )

Topic 2: Megaphone (Tiago Dias & Marcel Vogt / Publicis Werbeagentur BSW AG )

When: 20. April 2010 / 19:00-22:00
Where: Publicis Werbeagentur BSW AG, Stadelhoferstrasse 25, 8024 Zürich

More information about the single topics  can be found here: http://www.sfug.ch/?p=168

More information about SFUG can be found on:
Adobe Groups
SFUG Site