mikeland.us » Flash AS3 integration in Facebook Apps (Part 1 of 2)

Flash AS3 integration in Facebook Apps (Part 1 of 2)

Today’s post is part 1/2 of a short tutorial on how to build Rastafarize!, a Facebook apps with Flash integration -without any AS3 Facebook library).

Part 1 will focus on the Flash side (exporting your flash to jpg).

Part 2 will show you how to build the App using PHP/MySQL/FBML.

This will provide you with a simple but complete Facebook App: Rastafarize!

Rastafarize! allows you to pull your own or friend’s profile picture and ‘rastafarize it’, upload the result as a JPG on the server , save the data on a database and post it to your profile.

So let’s look at the Flash now:

In this Flash module, I decided not to use the Facebook AS3 Library as I believe FlashVars does the job really well in this case. So we could avoid exposing our API and SecretKey inside our swif.

The source can be downloaded here.

Part 2 will be posted later this week after I do some clean up in the PHP code.

Enjoy!

import com.adobe.images.JPGEncoder;
import com.adobe.images.PNGEncoder;
import flash.display.Bitmap;
import flash.display.BitmapData;
import com.adobe.images.*;
import flash.net.URLLoader;
import flash.net.URLRequest;
import flash.events.*;
import flash.net.*;
import flash.geom.ColorTransform;

var allFlashVars:Object = LoaderInfo(this.root.loaderInfo).parameters;

var texto:String = 'http://fb.mikeland.us/mikeland/img/no_img.jpg';
var user_id:String = 'no_id';
var user_name:String = 'no_name';
var first_name:String = 'no_first_name';
var from_id:String = 'no_from_id';
	
if(allFlashVars.url_img){
	texto = String(allFlashVars.url_img);
	live_txt.text = 'live!';
	user_id = String(allFlashVars.user_id);
	user_name = String(allFlashVars.user_name);
	first_name = String(allFlashVars.first_name);
	from_id = String(allFlashVars.from_id);
} 
	
thanks_mc.visible = false;

var my_loader:Loader = new Loader();
var loaderContext:LoaderContext = new LoaderContext ();
loaderContext.checkPolicyFile = true;
my_loader.load(new URLRequest(texto), loaderContext);
my_loader.contentLoaderInfo.addEventListener(Event.COMPLETE, imgLoaded)	
	
	
function imgLoaded (event:Event):void {
	var myBitmapData:BitmapData = new BitmapData(my_loader.width, my_loader.height);
	myBitmapData.draw(my_loader);
	var myBitmap:Bitmap=new Bitmap;
	myBitmap.bitmapData = myBitmapData;
	var oldWidth = myBitmap.width;
	var oldHeight = myBitmap.height;
	myBitmap.width = 200;
	myBitmap.height = 200 * oldHeight / oldWidth;
	image.addChild(myBitmap);
		
}
	
function thank_you():void{
	thanks_mc.visible = true;
}
	
// Part I -- Create the display objects with correct relationships
var bWidth:Number = 400;
var bHeight:Number = 387;

var board:Sprite = new Sprite();
var masque:Shape = new Shape();
var image:MovieClip = new imageUser();

var fixPtLeft:dragPts = new dragPts();
var fixPtRight:dragPts = new dragPts();
var dragPtLeft:dragPts = new dragPts();
var dragPtRight:dragPts = new dragPts();
var dragPtBouk:dragPts = new dragPts();

//add the main movie clip
this.addChild(board);
board.addChild(masque);
board.addChild(image);

image.scaleX = 4;
image.scaleY = 4;
image.x -=  (my_loader.width/2);
image.y -=  (my_loader.height/2);
image.buttonMode = true;

addChild(dragPtLeft);
addChild(dragPtRight);
addChild(dragPtBouk);
addChild(fixPtLeft);
addChild(fixPtRight);

fixPtLeft.x = 120;
fixPtLeft.y = 100;
fixPtLeft.gotoAndStop(2);

fixPtRight.x = 330;
fixPtRight.y = 100;
fixPtRight.gotoAndStop(1);

dragPtLeft.x = 130;
dragPtLeft.y = 240;
dragPtLeft.gotoAndStop(3);

dragPtRight.x = 320;
dragPtRight.y = 240;
dragPtRight.gotoAndStop(4);

dragPtBouk.x = 220;
dragPtBouk.y = 330;
dragPtBouk.gotoAndStop(5);

// Part II -- Enable the drag and drop behavior for one of the points

var thisPt:Sprite = new Sprite();

dragPtLeft.addEventListener(MouseEvent.MOUSE_DOWN, startMove);
dragPtRight.addEventListener(MouseEvent.MOUSE_DOWN, startMove);
dragPtBouk.addEventListener(MouseEvent.MOUSE_DOWN, startMove);

function startMove(evt:MouseEvent):void {
	thisPt = Sprite(evt.currentTarget);
	//masque.filters = [ new DropShadowFilter() ];
	stage.addEventListener(MouseEvent.MOUSE_MOVE, pointMove);
}

function pointMove(e:MouseEvent):void {
	thisPt.x = goodX(mouseX);
	thisPt.y = goodY(mouseY);
	drawMask();
	e.updateAfterEvent();
}

stage.addEventListener(MouseEvent.MOUSE_UP, stopAll);

function stopAll(e:MouseEvent):void {
	masque.filters = [ ];
	stage.removeEventListener(MouseEvent.MOUSE_MOVE, pointMove);
}

image.addEventListener( MouseEvent.MOUSE_DOWN, handleDragImg );
image.addEventListener( MouseEvent.MOUSE_UP, handleDropImg );
image.addEventListener( MouseEvent.MOUSE_OUT, handleDropImg );
zoomIt_mc.addEventListener( Event.CHANGE, zoomer );
rotateIt_mc.addEventListener( Event.CHANGE, rotater );
print_btn.addEventListener( MouseEvent.MOUSE_DOWN, printPng );

function zoomer (e:Event= null):void {
	 image.scaleX = zoomIt_mc.value;  
	 image.scaleY = zoomIt_mc.value;  
}

function handleDragImg( event:MouseEvent ):void {
      image.startDrag();
}
    
function handleDropImg( event:MouseEvent ):void {
     image.stopDrag();
 }       
	
	
// Part III -- Helper functions

function drawMask():void {
	masque.graphics.clear();
	masque.graphics.lineStyle(1,0);
	masque.graphics.beginFill(0xFFAAFF);
	
	masque.graphics.moveTo(fixPtRight.x,fixPtRight.y);
	masque.graphics.lineTo(fixPtLeft.x, fixPtLeft.y);
	masque.graphics.lineTo(dragPtLeft.x,dragPtLeft.y);
	masque.graphics.lineTo(dragPtBouk.x,dragPtBouk.y);
	masque.graphics.lineTo(dragPtRight.x,dragPtRight.y);
	masque.graphics.lineTo(fixPtRight.x,fixPtRight.y);

masque.cacheAsBitmap = true;
	image.cacheAsBitmap = true;
	image.mask = masque;
	
	masque.graphics.endFill();
	
}

function goodX(inX:Number):Number {
	if (inX < 0) {
		return 0;
	}
	if (inX > bWidth) {
		return bWidth;
	}
	return inX;
}

function goodY(inY:Number):Number {
	if (inY < 0) {
		return 0;
	}
	if (inY > bHeight) {
		return bHeight;
	}
	return inY;
}

// Initially draw the mask
drawMask();
zoomer();

Comments are closed.

Flash AS3 integration in Facebook Apps (Part 1 of 2)

Main Menu

mikeFeed!

Code makes us Free! Code should be Free!!