1. Particles using Greensock and Adobe Edge
2. Animated Gradient using CSS3 and Greensock
I’m leaving the blog up for reference, but I won’t be creating any new posts. Thanks for reading! 
*UPDATE: Ok there will probably some new posts in the future.
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:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Canvas EaselJS Flash Move Image</title>
<script src="easel.js"></script>
<script>
var stage;
var cookieImage = new Image();
var cookie;
function init() {
stage = new Stage(document.getElementById("canvas"));
cookieImage.src = 'cookie.png';
cookieImage.name = 'cookie';
cookieImage.onload = loadGraphics;
}
function loadGraphics() {
cookie = new Bitmap(cookieImage);
buildInterface();
}
function buildInterface() {
cookie.regX = cookie.image.width*0.5;
cookie.regY = cookie.image.height*0.5;
stage.addChild(cookie);
Ticker.setFPS(60);
Ticker.addListener(window);
}
function tick() {
cookie.x += (stage.mouseX-cookie.x)*0.1;
cookie.y += (stage.mouseY-cookie.y)*0.1;
stage.update();
}
</script>
<style>
body {
font-family: Verdana, Geneva, sans-serif;
color: #333;
}
canvas {
background-color: #CCC;
}
</style>
</head>
<body onLoad="init()">
<div>
<h1>Canvas EaselJS</h1>
<canvas id="canvas" width="600" height="400"></canvas>
</div>
</body>
</html>
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;
}
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.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3 Background Image Cover</title>
<style>
html {
height: 100%;
}
body {
background-image: url(background.png);
-moz-background-size: cover;
-o-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
}
</style>
</head>
<body>
</body>
</html>
Links:
- Image Source
- -moz-background-size
- -webkit-background-size
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 <action>access_shared</action> to blackberry-tablet.xml.
<?xml version="1.0" encoding="UTF-8"?> <qnx> <authorId>xxxxxxxxxxxxxxxxxxxxxxx</authorId> <author>Matt Smith</author> <permission>access_internet</permission> <permission>use_camera</permission> <action>access_shared</action> </qnx>
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):
<?php
error_reporting(E_ALL|E_STRICT);
ini_set("display_errors", "on");
require('Zend/Amf/Server.php');
require_once('vo/FileVO.php');
require_once('service/UploadService.php');
$server = new Zend_Amf_Server();
$server->setClass("UploadService");
$server->setClassMap("FileVO","FileVO");
echo($server->handle());
?>
In the service directory create UploadService.php:
<?php
require_once($_SERVER['DOCUMENT_ROOT'].'/chaosm/air/ex2_uploadamf/vo/FileVO.php');
class UploadService
{
public function __construct() {}
public function upload(FileVO $data)
{
try
{
$fileData = $data->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):
<?php
class FileVO
{
public $fileName;
public $fileData;
function __construct() {}
}
?>
In services-config.xml change the endpoint uri (line 17) to the location of the gateway on your server:
<?xml version="1.0" encoding="UTF-8"?>
<services-config>
<services>
<service id="amfphp-flashremoting-service" class="flex.messaging.services.RemotingService" messageTypes="flex.messaging.messages.RemotingMessage">
<destination id="zendamf">
<channels>
<channel ref="zend-amf-channel"/>
</channels>
<properties>
<source>*</source>
</properties>
</destination>
</service>
</services>
<channels>
<channel-definition id="zend-amf-channel" class="mx.messaging.channels.AMFChannel">
<endpoint uri="http://www.chaosm.net/air/ex2_uploadamf/" class="flex.messaging.endpoints.AMFEndpoint"/>
</channel-definition>
</channels>
</services-config>
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.
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.events.FlexEvent;
import mx.rpc.events.FaultEvent;
import mx.rpc.events.ResultEvent;
import vo.FileVO;
private var fileRefList:FileReferenceList;
private var fileTypes:FileFilter = new FileFilter("Images (*.jpg, *.jpeg)", "*.jpg; *.jpeg");
private var allTypes:Array = new Array(fileTypes);
private var totalFilesCount:int = 0;
private var currentFileCount:int = 0;
protected function selectButton_clickHandler(event:MouseEvent):void
{
fileRefList = new FileReferenceList();
fileRefList.addEventListener(Event.SELECT,selectHandler);
fileRefList.browse(allTypes);
}
protected function selectHandler(event:Event):void
{
totalFilesCount = fileRefList.fileList.length;
currentFileCount = 0;
}
protected function uploadButton_clickHandler(event:MouseEvent):void
{
if (currentFileCount < totalFilesCount) {
uploadFile();
selectButton.enabled = false;
uploadButton.enabled = false;
}
}
public function uploadFile():void
{
if (currentFileCount < totalFilesCount) {
trace("current file = "+currentFileCount);
var currentFileRef:FileReference = new FileReference;
currentFileRef = fileRefList.fileList[currentFileCount];
currentFileRef.addEventListener(Event.COMPLETE,function fileLoadComplete(event:Event):void {
trace("file loaded into memory");
var data:ByteArray = new ByteArray();
currentFileRef.data.readBytes(data,0,currentFileRef.data.length);
var fileVO:FileVO = new FileVO();
fileVO.fileName = currentFileRef.name;
fileVO.fileData = data;
upload.token = ro.upload(fileVO);
});
currentFileRef.load();
} else {
trace("uploads complete");
selectButton.enabled = true;
uploadButton.enabled = true;
}
currentFileCount++;
}
protected function upload_faultHandler(event:FaultEvent):void
{
Alert.show(event.fault.faultString,"Error");
}
protected function upload_resultHandler(event:ResultEvent):void
{
if (Boolean(event.message.body))
{
trace("file uploaded");
}
else
{
trace("unable to upload file");
}
uploadFile();
}
]]>
</fx:Script>
<fx:Declarations>
<s:RemoteObject id="ro" destination="zendamf" source="UploadService"/>
<s:CallResponder id="upload" fault="upload_faultHandler(event)"
result="upload_resultHandler(event)"/>
</fx:Declarations>
<s:Form x="10" y="10">
<s:FormItem label="Upload Files">
<s:HGroup>
<s:Button id="selectButton" label="Select" click="selectButton_clickHandler(event)"/>
<s:Button id="uploadButton" label="Upload" click="uploadButton_clickHandler(event)"/>
</s:HGroup>
</s:FormItem>
</s:Form>
</s:WindowedApplication>
Download the source files.
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):
<?php
error_reporting(E_ALL|E_STRICT);
ini_set("display_errors", "on");
require('Zend/Amf/Server.php');
require_once('vo/FileVO.php');
require_once('service/UploadService.php');
$server = new Zend_Amf_Server();
$server->setClass("UploadService");
$server->setClassMap("FileVO","FileVO");
echo($server->handle());
?>
In the service directory create UploadService.php:
<?php
require_once($_SERVER['DOCUMENT_ROOT'].'/chaosm/air/ex2_uploadamf/vo/FileVO.php');
class UploadService
{
public function __construct() {}
public function upload(FileVO $data)
{
try
{
$fileData = $data->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):
<?php
class FileVO
{
public $fileName;
public $fileData;
function __construct() {}
}
?>
In services-config.xml change the endpoint uri (line 17) to the location of the gateway on your server:
<?xml version="1.0" encoding="UTF-8"?>
<services-config>
<services>
<service id="amfphp-flashremoting-service" class="flex.messaging.services.RemotingService" messageTypes="flex.messaging.messages.RemotingMessage">
<destination id="zendamf">
<channels>
<channel ref="zend-amf-channel"/>
</channels>
<properties>
<source>*</source>
</properties>
</destination>
</service>
</services>
<channels>
<channel-definition id="zend-amf-channel" class="mx.messaging.channels.AMFChannel">
<endpoint uri="http://www.chaosm.net/air/ex2_uploadamf/" class="flex.messaging.endpoints.AMFEndpoint"/>
</channel-definition>
</channels>
</services-config>
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 an image to upload and the upload method is called. When the upload is complete an Alert box is shown to the user.
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.events.FlexEvent;
import mx.rpc.events.FaultEvent;
import mx.rpc.events.ResultEvent;
import vo.FileVO;
private var fileRef:FileReference;
private var fileTypes:FileFilter = new FileFilter("Images (*.jpg, *.jpeg)", "*.jpg; *.jpeg");
private var allTypes:Array = new Array(fileTypes)
protected function selectButton_clickHandler(event:MouseEvent):void
{
fileRef = new FileReference();
fileRef.addEventListener(Event.SELECT,selectHandler);
fileRef.browse(allTypes);
}
protected function selectHandler(event:Event):void
{
fileTextInput.text = fileRef.name;
fileRef.load();
}
protected function uploadButton_clickHandler(event:MouseEvent):void
{
var data:ByteArray = new ByteArray();
fileRef.data.readBytes(data,0,fileRef.data.length);
var fileVO:FileVO = new FileVO();
fileVO.fileName = fileRef.name;
fileVO.fileData = data;
upload.token = ro.upload(fileVO);
selectButton.enabled = false;
uploadButton.enabled = false;
}
protected function upload_faultHandler(event:FaultEvent):void
{
Alert.show(event.fault.faultString,"Error");
selectButton.enabled = true;
uploadButton.enabled = true;
}
protected function upload_resultHandler(event:ResultEvent):void
{
if (Boolean(event.message.body))
{
Alert.show("File uploaded.","Success");
}
else
{
Alert.show("Unable to upload file.","Error");
}
selectButton.enabled = true;
uploadButton.enabled = true;
}
]]>
</fx:Script>
<fx:Declarations>
<s:RemoteObject id="ro" destination="zendamf" source="UploadService"/>
<s:CallResponder id="upload" fault="upload_faultHandler(event)"
result="upload_resultHandler(event)"/>
</fx:Declarations>
<s:Form x="10" y="10">
<s:FormItem label="File">
<s:HGroup>
<s:TextInput id="fileTextInput"/>
<s:Button id="selectButton" label="Select" click="selectButton_clickHandler(event)"/>
<s:Button id="uploadButton" label="Upload" click="uploadButton_clickHandler(event)"/>
</s:HGroup>
</s:FormItem>
</s:Form>
</s:WindowedApplication>
Download the source files.
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:
<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
title="Photo Upload">
<fx:Script>
<![CDATA[
private var urlRequest:URLRequest = new URLRequest("http://www._____.com/upload.php");
private var file:File;
//take a new picture with the camera
protected function uploadCamera_clickHandler(event:MouseEvent):void
{
if (CameraUI.isSupported)
{
trace("camera is supported");
var myCam:CameraUI = new CameraUI();
myCam.launch(MediaType.IMAGE);
myCam.addEventListener(MediaEvent.COMPLETE,selectCompleteHandler);
}
else
{
trace("camera not supported");
statusText.text = "Camera not supported on this device.";
}
}
//select a picture from the camera roll (gallery)
protected function uploadGallery_clickHandler(event:MouseEvent):void
{
if (CameraRoll.supportsBrowseForImage)
{
trace("camera roll is supported");
var roll:CameraRoll = new CameraRoll();
roll.browseForImage();
roll.addEventListener(MediaEvent.SELECT,selectCompleteHandler);
}
else
{
trace("camera roll not supported");
statusText.text = "Camera roll not supported on this device.";
}
}
//when the selection is complete upload it
protected function selectCompleteHandler(event:MediaEvent):void
{
trace("event.data.file.url; = "+event.data.file.url);
takePhotoButton.enabled = galleryPhotoButton.enabled = false;
file = event.data.file;
file.addEventListener(Event.COMPLETE,uploadCompleteHandler);
file.addEventListener(Event.OPEN,openUploadHandler);
file.upload(urlRequest);
}
protected function uploadCompleteHandler(event:Event):void
{
trace("upload complete");
takePhotoButton.enabled = galleryPhotoButton.enabled = true;
statusText.text = "Photo Uploaded";
}
protected function openUploadHandler(event:Event):void
{
trace("uploading");
statusText.text = "Uploading...";
}
]]>
</fx:Script>
<s:VGroup x="21" y="23" width="200" height="200">
<s:Label id="statusText" fontSize="24" text="Choose a photo..."/>
<s:Button id="takePhotoButton" label="Take Photo" click="uploadCamera_clickHandler(event)"/>
<s:Button id="galleryPhotoButton" label="Upload from Gallery"
click="uploadGallery_clickHandler(event)"/>
</s:VGroup>
</s:View>
The PHP code (from Hybrid Hacking) looks like this:
<?php $tempFile = $_FILES['Filedata']['tmp_name']; $fileName = $_FILES['Filedata']['name']; $fileSize = $_FILES['Filedata']['size']; move_uploaded_file($tempFile, "./" . $fileName);
I made this quick example in Flex and AS3 to test different outcomes for the Monty Hall problem. View a demo here.
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
minWidth="500" minHeight="610"
creationComplete="application1_creationCompleteHandler(event)"
viewSourceURL="srcview/index.html">
<fx:Script>
<![CDATA[
import flash.net.navigateToURL;
import mx.charts.PieChart;
import mx.collections.ArrayCollection;
import mx.events.FlexEvent;
[Bindable]
public var dp:ArrayCollection;
public var outputNum:int;
protected function application1_creationCompleteHandler(event:FlexEvent):void
{
outputText.appendText("Click a button to process random tests.\n");
}
public function changeAlways():Boolean
{
var array:Array = new Array();
var winPosition:int = Math.random() * 3;
array[winPosition] = "Car";
var guess:int = Math.random() * 3;
if (array[guess] == "Car")
{
if (outputNum < 50) outputText.appendText("You won a car on your first guess!\n");
return true;
} else
{
array[guess] = "Guess";
//the goat
var goat:int = -1;
while (goat != -1)
{
var tmp:int = Math.random()*3;
if (array[tmp] != "Car" && array[tmp] != "Guess") goat = tmp;
}
array[goat] = "Goat";
//change your guess
for (var i:int; i<array.length; i++)
{
if(array[i] != "Guess" && array[i] != "Goat")
{
if(array[i] == "Car")
{
if (outputNum < 50) outputText.appendText("You won a car on your second guess!\n");
return true;
} else {
if (outputNum < 50) outputText.appendText("You lost!\n");
return false;
}
}
}
return false;
}
}
public function changeNever():Boolean
{
var array:Array = new Array();
var winPosition:int = Math.random() * 3;
array[winPosition] = "Car";
var guess:int = Math.random() * 3;
if (array[guess] == "Car")
{
if (outputNum < 50) outputText.appendText("You won a car!\n");
return true;
} else {
if (outputNum < 50) outputText.appendText("You lost!\n");
return false;
}
}
protected function alwaysChangeBtn_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<numTrials; i++)
{
if(changeAlways())
{
won++;
} else {
lost++;
}
outputNum++;
}
dp = new ArrayCollection([{Label:"Won",Data:won},{Label:"Lost",Data:lost}]);
if (outputNum >= 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<numTrials; i++)
{
if(changeNever())
{
won++;
} else {
lost++;
}
outputNum++;
}
dp = new ArrayCollection([{Label:"Won",Data:won},{Label:"Lost",Data:lost}]);
if (outputNum >= 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"));
}
]]>
</fx:Script>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
<!--<fx:String id="butterfly2">Purple</fx:String>-->
</fx:Declarations>
<s:VGroup x="10" y="10">
<s:Label fontSize="20" fontWeight="bold" text="Monty Hall Probability"/>
<s:HGroup>
<s:Button id="alwaysChangeBtn" label="Always Change" click="alwaysChangeBtn_clickHandler(event)"/>
<s:Button id="neverChangeBtn" label="Never Change" click="neverChangeBtn_clickHandler(event)"/>
<s:TextInput id="numTrialsInp" text="100" textAlign="right"/>
</s:HGroup>
<s:TextArea id="outputText" width="372" height="233"/>
<mx:LinkButton id="whatIs" label="What is the Monty Hall problem?"
click="whatIs_clickHandler(event)"/>
<mx:PieChart id="piechart1" dataProvider="{dp}" fontSize="14">
<mx:series>
<mx:PieSeries labelField="Label" labelPosition="inside" labelFunction="labelResults" nameField="Label" displayName="Series 1" field="Data">
<!-- Clear the drop shadow filters from the chart. -->
<mx:filters>
<fx:Array/>
</mx:filters>
</mx:PieSeries>
</mx:series>
</mx:PieChart>
</s:VGroup>
</s:Application>
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