HODGEDEV FLASH BLOG

I have been working on a framework to ease the communication between flash and drupals services module via AMFPHP.

Click here to head to the google repository
You will require an SVN client to retrieve the current versions of the individual classes.

The workflow is rather simple,

First you require the Services class, which is built around the Singleton Design pattern and cannot be instantiated directly. Please use the getInstance() method.

Once you have a reference to the SINGLE Services class instance and have set the gateway property, you may then use the public connect() method, which utilizes the System class to connect and disconnect from the database.

The Services instance maintains/holds a valid session id, and NetConnection instance, which are both required by all Service Classes.

The Service class is an Abstract class and is not intended to be instantiated, but extended by the various service classes, such as Node.as.

if you wanted node data, you merely import the Node class, instanstiate a node object passing THE Service object to it and then call getData() on the node object.

I haven’t blogged in some time because many things have been going on. I am no longer working at Streetwise and I am freelancing at home. So far the journey has been pleasant. I now have much more time to work on personal projects and once such project is Photo Shoot Builder. PSB is still alpha quality, but we will be going beta with is soon.

Bram Timmer, a long time friend and very strong designer/photographer, suggested that photographers needed a more elegant method of creating these set lists. Bram soon handed off the creative to me in the form of a PSD, as we usually do, and after a lot of cutting, codeing and compiling, we find ourselves at v0.2.3. Click the link below.

Photo Shoot Builder is merely a drag and drop enabled tool for building a typical set diagram that is rather common in photography. It utilizes many different design patterns, all within context, and the site is very extensible, easy to update, and performs very well. When the end-user is ready, he or she may choose to save as jpg or png. We are close to enabling the Flickr upload mechanism as well. Go play with the application, but remember it isn’t even beta yet. If you are going to leave feedback, please be constructive.

Click here to use Photo Shoot Builder v0.2.3a

I have a client that needs some simple 3D. Since I am allowed to develop the project for Flash Player 10, and my 3D needs were simplistic, I chose not to use Papervision3D. I began things like normal. I opened FlashDevelop3 and created a project. Then, I opened Flash CS4 and created a rectangle. With a mock-up of the final product in the background, I began to rotate the rectangle in 3D space; until it matched the comp. When I was happy, I tested the movie, and sure enough everything looked great.

After getting my creative into its proper position and perspective, I moved on to link the DocumentClass that FlashDevelop3 created when I created my project, to the newly created flash file. As soon as I entered the document class, I tested the movie. My rectangle no longer had perspective and was only barely visible on screen. I removed the document class and all the sudden my rotation values were back.

I began to scour google for answers and eventually found some on adobe’s site. What what said on adobe’s site was to set the following in your class.

//”this” applies to my DocumentClass
this.transform.perspectiveProjection.projectionCenter = new Point(someNumber,someNumber);
this.transform.perspectiveProjection.fieldOfView = someInt;

Having this information, I quickly entered in and tested my movie. I was a bit saddened to see that nothing had changed. I sat for a moment and thought about it. If the values for projectionCenter and fieldOfView must be set if using a document class, then it is possible that any rotation on the X, Y, or Z, in the Flash IDE may have been ignored. I quickly set rotation values with actionscript and tested the movie. EUREKA! It works.

Hopefully this little tid-bit of information can save you from the aggravation I went through

Click here to watch FlashDevelop3 R2 and the Flex 3.3 SDK video tutorial Part 04: How to create an AIR application.

This short video shows you how to create an AIR project.

First, the Descriptor file (setting the namespace to 1.5) and changing any other settings you wish.
Second, edit the CreateCertificate.bat and create a certificate.
Third, edit the PackageApplication.bat, compile your application to create a swf, then run PackageApplication.bat, provide the password set in CreateCertificate.bat and the AIR application is created in the air folder.

Stay tuned for a run-through of the AIR Update Framework, which allows users to check for updates which is dictated by a UpdateDescriptor file on your server somewhere.

DEMO: http://dev.hodgedev.com/DeSOL_testing/

Note: This is not intended as a replacement for SharedObject. Obviously if you still require some level of persistence you could just use the native SharedObject; However, if you require the use of a SharedObject and would like it to clear with the browser cache, or by a certain date, this class can help you.

The class works by creating a cookie when the shared object is created; This is done with the help of the ExternalInterface Class in the flash.external Package which makes a call to a javascript function.

From the point of creation, the SharedObjects lifespan is directly related to that of the Cookie’s life span. The two share the same name, and upon load of the page a function is called to check if a particular cookie exists. The cookie acts as a reference for the SharedObject. If the cookie is removed, meaning the cache has been cleared, the next page load checks the cookie, finds that it does not exists, and clears the SharedObject that has the same name.

 
//The AS3 Class
package com.hodgedev.desol.net
{
	import flash.external.ExternalInterface;
	import flash.net.SharedObject;
	import flash.net.SharedObjectFlushStatus;
	/**
	 * …
	 * @author Brian Hodge (brian@hodgedev.com)
	 */
	public class CachedSharedObject extends SharedObject
	{
		/**
		 * creates a cookie via ExternalInterface and a call to a
		 * javascript function which is expecting three things:
		 * a name, a value, how many days until expiration.  A
		 * SharedObject and a cookie are created with the same name.
		 * The SharedObjects life is dependent up on cookie's life.
		 * @param	pName string used to name the SharedObject
		 * @return  SharedObject
		 */
		public static function getLocalCSO(pName:String):SharedObject
		{
			var createStr:String = ExternalInterface.call("createCookie", pName, "Exists to allow flash local shared objects to clear with browser cache clear.", "7 " );
			return SharedObject.getLocal(pName);
		}
		/**
		 * an array of cookies recieved from the javascript window.cookies
		 * call returned as a string then converted to an array.
		 * @return
		 */
		public static function cookies():Array
		{
			return String(ExternalInterface.call("getCookies")).split(";");
		}
		/**
		 * Acts as the garbage collection for a CachedSharedObject.
		 * The cookie that was created at the same time is the
		 * reference.  If the reference no longer exists, hence
		 * the cache was cleared, the SharedObject is removed.
		 * @return Boolean
		 */
		public static function LSOGC():Boolean
		{
			if (CachedSharedObject.cookies().length < = 1 )
			{
				trace('No cookies found, clearing all CachedSharedObjects.');
				return true;
			}
			return false;
		}
		/**
		 * reads a cookie via ExternalInterface.  A
		 * javascript function returns a string which
		 * this function then returns a reformmated
		 * version of.
		 * @param	pName
		 * @return  String
		 */
		public static function readCookie(pName:String):String
		{
			var readStr:String = ExternalInterface.call("readCookie", pName);
			return "Cookie name:  " + pName + "\nCookie value: " + readStr;
		}
		/**
		 * Erases a cookia via ExternalInterface.  A
		 * javascript function deletes the cookie.
		 * @param	pName
		 */
		public static function eraseCookie(pName:String):void
		{
			ExternalInterface.call("eraseCookie", pName);
		}
	}
}
//The javascript
/**
 *Author URL: http://www.quirksmode.org/js/cookies.html
 *Notes: Thanks to the author at the above site for the
 *easy to use functions.
 */
function getCookies()
{
	return unescape(document.cookie.toString());
}
function createCookie(name,value,days)
{
	if (days)
	{
		var date = new Date();
		date.setTime(date.getTime()+(days*24*60*60*1000));
		var expires = "; expires="+date.toGMTString();
	}
	else var expires = "";
	document.cookie = name+"="+value+expires+"; path=/";
	return "Cookie created.";
}
function readCookie(name)
{
	var nameEQ = name + "=";
	var ca = document.cookie.split(';');
	for(var i=0;i < ca.length;i++)
	{
		var c = ca[i];
		while (c.charAt(0)==' ') c = c.substring(1,c.length);
		if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
	}
	return null;
}
function eraseCookie(name)
{
	createCookie(name,"",-1);
}

Download the source files here.

Click here to watch FlashDevelop3 R2 and the Flex 3.3 SDK FlashDevelop3 R2 and the Flex 3.3 SDK video tutorial Part 03: Events, Interactivity, and Timer: the new setInterval.

In part 03, first we talk about why the document class extends Sprite or MovieClip, which FlashDevelop automatically imports Sprite into your project and extends your document class with it.

Second, we talk about waiting for the document class to be added to the stage, so that we make access properties of the stage.

Third, import the required event MouseEvent, to handle mouse interactivity. We setup an event listener for when the end-user has pressed the mouse down while over “_sprite”, the square we created in part 02 of this series. We handled the mouse event with a nice TweenLite driven animation of the “_sprite” object.

Fourth, we imported the two classes for handling keyboard interaction. KeyboardEvent is used to listen for for the key-based events, and the Keyboard class maintains a list of static constants representing unsigned integers used to compare against the keyCode available to the method listener for the KeyboardEvent dispatch.

Fifth, and finally, we talk about the Timer object, which is the new setInterval. Although you can still use setInterval in Actionscript3, I prefer the Timer object. Maybe I prefer Timer because of its use of the new event flow, im not sure; although I can say, that I like that you can stop and start it with built in methods. In this example, we instantiate a Timer object, set it to fire every 1000ms (1 second) and then we listen for that event to be dispatched every second, and have a function fire each time. The function that fires has a simple trace, that when tested, loops over and over in the console.

Stay tuned for part 04, coming soon!

Click here to watch FlashDevelop3 R2 and the Flex 3.3 SDK Part 02: Packages, Classes and drawing API, oh my!

This part of the series starts off by displaying the Actionscript3 API site;

First, I explain where to learn information about things like Sprite and Event, which were automatically imported and implemented by FlashDevelop3 when we created our project.

Second, we head over to http://blog.greensock.com/ and download TweenMax, though we will only be using TweenLite today (TweenLite included with TweenMax download).

Third, we extract the package into our Actionscript3 class path folder, if you do not already have one, this is a common grounds for you to keep classes and packages, please create one, make note of where you created it, we will be requiring that path in FlashDevelop3 in the next step. Now extract the “gs” folder into the newly created class path folder.

Fourth, we head over to FlashDevelop3 and we select the project from the project tree, mine is on the right, right mouse click on the project name and go to properties. Once the popup arrives, head to the Classpaths tab, and click the Add Classpath button. Be sure to input the location of the class path. NOTE: This path does not include the “gs” folder at the end, we will reference packages in this classpath in their import lines.

Example:
import gs.TweenLite;

Fifth, we import the flash.display.Graphics class, create a new Sprite and draw to it using an instance of the Graphics class.

Sixth, we animate the Sprite we drew to using TweenLite. With one line of code, we have an easy to manage animation with a nice looking Elastic ease applied to it, and it only took twenty seconds to write the animation code out.

Stay tuned for part 03, I hope this is helpful.

Click here to watch FlashDevelop3 R2 and the Flex 3.3 SDK Part 01: Setup and Hello World!

I have a friend that is eager to learn flash and Actionscript3, but does not have the money to buy the Flash IDE. I told my friend he could just download FlashDevelop3 and the Flex 3.3 SDK to compile with. My friend didn’t respond so fast to that on IM; I had lost him. It occurred to me to start a small series of tutorials explaining how to compile a SWF with the Flash IDE or Flex Builder 3.

Things to note:
*Flex 3.3 SDK is not the same thing as Flex Builder 3, nor is it the same as the Flex 3 Framework.
*FlashDevelop3 is free, as is the Flex 3 SDK used to compile.
*Most strong AS3 developers seem to be moving out of Flash and away from the time-line, this could leap you forward a great deal to start off with; That being said, it is still important to understand the time-line and other parts of the Flash IDE.

Good luck, stay tuned for part two where we talk about importing classes, specifically TweenLite. We create rectangle using the drawing API and animate with TweenLite.

If you use a sniffer, as I spoke on before, you may have noticed that all assets loaded into your SWF are relative to the index.html, or the html file loading the main swf; Well, all but FLV’s. FLV’s are relative to the SWF file. This means that if the host swf is not in the same folder as the html file, the relative paths to XML, images, audio, etc, are different from the relative paths of FLV’s. This can cause you some problems if you are not aware of it and you merely copy and paste the path of another asset and merely change the name and extension to flv.

Hopefully this helps prove the usefulness of a sniffer to anyone that is not using one.

The studio that I am working at, Streetwise, has had me checking out the various 3D engines available to Actionscript3.  I played with Papervision3D first and was immediately disappointed with the lack of tutorials.  I then moved onto Away3D because it appeared to have an abundance of tutorials all delivered on an easy to navigate, well constructed website.  After a few projects in Away3D it became apparent to me that Away3D is a “PORT” of Papervision3D, meaning it borrows from, or ” EXTENDS”, from Papervision3D.  After asking some other developers on stackoverflow.com, I came to the conclusion that I needed to give Papervision3D another shot.  Thanks to google, I found more tutorials and a strong backing behind Papervision3D.  When I was looking around at was being done out there, I stumbled upon http://www.saveyoursensible.com, a neat little site that utilizes a 3D character that you can interact with.  I was reading somewhere where people were discussing this mixture of Papervision3D and an md2 for light-wieght, low poly, character animations.  I found a quake model that I like, downloaded the md2 and used the following to produce it in the flash runtime.  The following shows how to render and md2 in the flash runtime using the Papervision3D API.

 
package com.streetwise.ui
{
import flash.display.Sprite;
import flash.events.Event;
import org.papervision3d.view.Viewport3D;
import org.papervision3d.scenes.Scene3D;
import org.papervision3d.cameras.Camera3D;
import org.papervision3d.events.FileLoadEvent;
import org.papervision3d.materials.BitmapFileMaterial;
import org.papervision3d.objects.parsers.MD2;
import org.papervision3d.render.BasicRenderEngine;
public class Main extends Sprite
{
private var viewport:Viewport3D;
private var scene:Scene3D;
private var camera:Camera3D;
private var _quakeGuy:MD2;
private var renderer:BasicRenderEngine;
public function Main():void
{
if(stage) init();
else addEventListener(Event.ADDED_TO_STAGE, init);
}
private function init(e:Event = null):void
{
viewport = new Viewport3D(550, 400, false, true);
addChild(viewport);
scene = new Scene3D();
camera = new Camera3D();
renderer = new BasicRenderEngine();
camera.zoom = 400;
camera.focus = 12;
_quakeGuy = new MD2(false);
_quakeGuy.rotationX = -90;
_quakeGuy.rotationY = -90;
_quakeGuy.addEventListener( FileLoadEvent.ANIMATIONS_COMPLETE, onAnimationsComplete );
_quakeGuy.load("assets/quakeguy/tris.md2 " , new BitmapFileMaterial("assets/quakeguy/quake.png"));
scene.addChild( _quakeGuy );
addEventListener(Event.ENTER_FRAME, _onEnterFrame);
}
private function onAnimationsComplete( event:FileLoadEvent ) : void
{
_quakeGuy.play();
}
private function _onEnterFrame(e:Event):void
{
renderer.renderScene(scene, camera, viewport);
}
}
}

It is important to try things, play with functionality, learn how to dig into the docs make something new.  The more you experiment, the better you get at experimenting.  I was in no way the first to do this, but I now have a great understanding.

The next step is to purchase QTiP, a plugin for 3D Studio Max, which enables you to create your own md2 files complete with animation.  This is how the developers of the sensibles project above achieved their goal.

View Demo