Matt Smith Blog

EaselJS Canvas vs Flash: Moving an Image

matt — Fri, 23 Dec 2011 20:28:12 +0000

This example shows an image moving to the mouse position inside a canvas tag compared to Flash. The HTML5 version uses the EaselJS javascript library and comes from gotoAndLearn() and Activetuts+ tutorials. Both versions are set at 60fps. View a demo here.

HTML5:





Canvas EaselJS Flash Move Image







  Canvas EaselJS

AS3:

import flash.events.Event;
import flash.events.MouseEvent;

function easeCookie(e:Event):void {
	cookie_mc.x += (stage.mouseX-cookie_mc.x-cookie_mc.width*0.5)*0.1;
	cookie_mc.y += (stage.mouseY-cookie_mc.y-cookie_mc.height*0.5)*0.1;
}

stage.addEventListener(MouseEvent.MOUSE_OVER, manageMouseOver);

function manageMouseOver(event:MouseEvent):void{
  stage.removeEventListener(MouseEvent.MOUSE_OVER, manageMouseOver);
  stage.addEventListener(Event.MOUSE_LEAVE, manageMouseOut);
  stage.addEventListener(Event.ENTER_FRAME,easeCookie);
  stage.frameRate = 60;
}

function manageMouseOut(event:Event):void{
  stage.removeEventListener(Event.MOUSE_LEAVE, manageMouseOut);
  stage.addEventListener(MouseEvent.MOUSE_OVER, manageMouseOver);
  stage.removeEventListener(Event.ENTER_FRAME,easeCookie);
  stage.frameRate = 0;
}

CSS3 Fill Background with Image

matt — Sun, 11 Dec 2011 15:59:47 +0000

Using the CSS3 background size property to fill the background with an image. The image is scaled so that it’s smallest width or height fills the browser. View a demo here.





CSS3 Background Image Cover

Links:
- Image Source
- -moz-background-size
- -webkit-background-size

PlayBook Error #2044 Unhandled IOErrorEvent

matt — Sun, 09 Oct 2011 04:13:59 +0000

While porting over my Android photo upload demo application to the PlayBook I ran into: Error #2044: Unhandled IOErrorEvent:. text=Error #2038: File I/O Error.

The issue is that you have to get permission to access the shared file system. To do this add access_shared to blackberry-tablet.xml.



	xxxxxxxxxxxxxxxxxxxxxxx
	Matt Smith
	access_internet
	use_camera
	access_shared

Upload Multiple Files in Adobe AIR with Zend AMF and Flex

matt — Sun, 14 Aug 2011 21:34:52 +0000

This is a revised version of this post which allowed a user to upload a single file. Instead a user can select multiple files to upload.

On the server we need to upload the Zend Framework (minimal) and create some files. This is how the file structure will end up looking:

Create index.php (the gateway):

setClass("UploadService");
$server->setClassMap("FileVO","FileVO");

echo($server->handle());
?>

In the service directory create UploadService.php:

fileData;
			file_put_contents($_SERVER['DOCUMENT_ROOT'].'/chaosm/air/ex2_uploadamf/uploads/'.$data->fileName,$fileData);
			return true;
		}
		catch (Exception $e)
		{
			throw new Exception($e->getMessage());
		}
	}
}
?>

In the vo directory create FileVO.php (the value object for the file):

In services-config.xml change the endpoint uri (line 17) to the location of the gateway on your server:

Finally make a directory called uploads. This is where files will be written to, so it needs to have the required permissions (such as 777).

In Flash Builder create a new Flex project called UploadAMF (or import my .fxp file). This is how the file structure will end up looking:

Right-click on the project and select Properties. Include the services-config.xml under additional compiler arguments like this:

Right-click on the src folder and create a new package called vo. In the vo package create a new ActionScript class called FileVO (notice that it has the same properties as the php value object on the server):

package vo
{
	import flash.utils.ByteArray;

	[RemoteClass(alias="FileVO")]
	[Bindable]
	public class FileVO
	{
		public var fileName:String;
		public var fileData:ByteArray;
	}
}

The main application file UploadAMF.mxml is where everything happens. A remote object is created, the user selects images to upload and the upload method is called on each file. The FileReferenceList class provides the means to select multiple files for uploading.

Download the source files.

Upload Files in Adobe AIR with Zend AMF and Flex

matt — Sun, 07 Aug 2011 23:26:50 +0000

This example shows how to upload files in an Adobe AIR application to a server using Zend AMF and Flex. It’s based off a blog post by Leonardo França. I found getting started with Zend AMF a bit confusing, this tutorial by Ryan Stewart was very helpful.

On the server we need to upload the Zend Framework (minimal) and create some files. This is how the file structure will end up looking:

Create index.php (the gateway):

setClass("UploadService");
$server->setClassMap("FileVO","FileVO");

echo($server->handle());
?>

In the service directory create UploadService.php:

fileData;
			file_put_contents($_SERVER['DOCUMENT_ROOT'].'/chaosm/air/ex2_uploadamf/uploads/'.$data->fileName,$fileData);
			return true;
		}
		catch (Exception $e)
		{
			throw new Exception($e->getMessage());
		}
	}
}
?>

In the vo directory create FileVO.php (the value object for the file):

In services-config.xml change the endpoint uri (line 17) to the location of the gateway on your server:

Finally make a directory called uploads. This is where files will be written to, so it needs to have the required permissions (such as 777).

In Flash Builder create a new Flex project called UploadAMF (or import my .fxp file). This is how the file structure will end up looking:

Right-click on the project and select Properties. Include the services-config.xml under additional compiler arguments like this:

package vo
{
	import flash.utils.ByteArray;

	[RemoteClass(alias="FileVO")]
	[Bindable]
	public class FileVO
	{
		public var fileName:String;
		public var fileData:ByteArray;
	}
}

The main application file UploadAMF.mxml is where everything happens. A remote object is created, the user selects an image to upload and the upload method is called. When the upload is complete an Alert box is shown to the user.

Download the source files.

Flex Mobile: Upload Photo to Server with PHP

matt — Sat, 04 Jun 2011 00:26:26 +0000

The code below uploads a photo from a Flex mobile application to a server with PHP. When I was first searching on how to do this I came across a good tutorial on Hybrid Hacking. So I’ve basically just modified their code to work on mobile with the CameraUI and CameraRoll classes. Download the Flex project here.

The Flex mobile application has one view which looks like this:

The PHP code (from Hybrid Hacking) looks like this:

Flex Monty Hall Problem

matt — Sat, 28 May 2011 08:40:41 +0000

I made this quick example in Flex and AS3 to test different outcomes for the Monty Hall problem. View a demo here.



	
		= 0) {
					outputNum = 0;
					outputText.text = "Sample Results ("+numTrials+"):\n";
					var won:int = 0;
					var lost:int = 0;
					for(var i:int; i= 100) {
						outputText.appendText("... done\n");
					} else {
						outputText.appendText("done\n");
					}
				}
			}

			protected function neverChangeBtn_clickHandler(event:MouseEvent):void
			{
				var numTrials:int = int(numTrialsInp.text);
				if (numTrials >= 0) {
					outputNum = 0;
					outputText.text = "Sample Results ("+numTrials+"):\n";
					var won:int = 0;
					var lost:int = 0;
					for(var i:int; i= 100) {
						outputText.appendText("... done\n");
					} else {
						outputText.appendText("done\n");
					}
				}

			}

			protected function labelResults(data:Object, field:String, index:Number, percentValue:Number):String
			{
				return data.Label + " " + Math.round(data.Data/int(numTrialsInp.text)*100) + "%";
			}

			protected function whatIs_clickHandler(event:MouseEvent):void
			{
				navigateToURL(new URLRequest("http://en.wikipedia.org/wiki/Monty_Hall_problem"));
			}

		]]>

What is the best way to communicate with MySQL from a Flash application?

matt — Tue, 22 Feb 2011 18:09:55 +0000

I asked this question on Quora and got a really good answer (read here). What I actually had to learn was how to get Flash communicating with PHP using serialization (compared to get/post requests and xml). There are two options for doing this, AMFPHP and ZendAMF. The video tutorials below are a great walk through:

- Introduction to AMFPHP: Part 1
- Introduction to AMFPHP: Part 2
- Introduction to ZendAMF

YUI3 StumbleUpon List

matt — Thu, 17 Feb 2011 18:12:45 +0000

Using YUI3 YQL Query Utility to display a StumbleUpon user’s recent favorites. View a demo here.





StumbleUpon List YUI3 YQL


StumbleList

Resize SWFObject with YUI3

matt — Fri, 07 Jan 2011 04:10:23 +0000

Using YUI3 Animation to change the height of a swfobject. View a demo here. Download the FLA file here.

//ActionScript 3
stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;

toggle_txt.x = toggle_txt.y = 10;
toggle_txt.text = "Toggle Height (click) StageHeight = "+String(stage.stageHeight);
toggle_txt.buttonMode = true;

toggle_txt.addEventListener(MouseEvent.CLICK, fl_MouseClickHandler);

function fl_MouseClickHandler(event:MouseEvent):void
{
	ExternalInterface.call('toggleSize');
}

stage.addEventListener(Event.RESIZE, resizeHandler);

function resizeHandler(evt:Event):void
{
	toggle_txt.text = "Toggle Height (click) StageHeight = "+String(stage.stageHeight);
}





Expand Stage

Links:
- AS3 External Interface

[Update - I've redone this example with jQuery here.]