MDBitz Development Resources

Ever wonder how you can persist data for a user in your Flash SWF applications? The simple answer is to use a local SharedObject or as it is commonly known the Flash Cookie. These objects are stored to the users local machine much like a cookie with it’s access limited to current domain and optional path, allowing you to save data that can be shared between different SWFs on your site if you so desire.

Shared Objects storage on the local computer

The Shared Object is stored in an .sol file on the users local computer. These files are stored in the Flash Player directory of the users profile and much like cookies are accessible only to by SWFs with the same domain and local path. The default size limitation for a .sol file is usually around 100Kb however this can be modified by the user and if more space is required they will have to approve it. Don’t worry to much about that part right now we’ll touch on that later.

Obtaining a Shared Object

To create or obtain an existing Shared Object we utilize the getLocal method. This method returns the Shared Object with the given name and path for the domain. If for some reason the Shared Object could not be created then an error will be thrown, some possible reasons for this would be that 3rd party storage is disabled.

Understanding the getLocal function

The getLocal function takes up to 3 parameters with only the name being required.

• name: The identifier of the Shared Object
• localPath: The full or partial path to the swf that determines where it is stored locally. By setting this to a generic path that is used by multiple swfs in your domain you can have saved data from one swf be read and used by another swf.
• secure: Boolean identifying if the SWF is accessible only over HTTPS. If true then an HTTP request to the SWF will not allow the Shared Object to be created or read from. (default value is FALSE)

To create/obtain a Shared Object with a specified name you would use the following code:

try {
    var sharedObj:SharedObject = SharedObject.getLocal( "user_settings" );
} catch(e:Error) {
    // Shared Object could not be created
}

If we wanted to create/obtain a Shared Object that had a defined localPath and was accessible only by HTTPS then we would use the following code:

try {
    var sharedObj:SharedObject = SharedObject.getLocal( "user_settings", "/shared/", true );
} catch(e:Error) {
    // Shared Object could not be created
}

Reading and Writing data to the Shared Object

Now that you have instantiated your local Shared Object you will want to store and read that data you wish to persist across usages of your SWF application. Access of the data stored in the Shared Object is done through the data property. You simply specify the named property and set a value to it or output it into another variable or parameter.

To illustrate lets assume we want to save the Users high score into the Shared Object.

sharedObj.data.high_score = 1000;

If we wanted to read the saved high_score value then we simply would access it the same way:

var highScore = sharedObj.data.high_score;

Write Immediately with Flush

When the SWF application quits or exits is when the Shared Object would normally get written to the local file system. However if you want to save your data immediately you can utilize the flush method. This method will cause the data to be written immediately. If the write could not be performed an error will be thrown, or if the size of the Shared Object is above the the users defined maximum size then they will be presented with a dialog box to confirm/deny the additional space. If this occurs then a pending status will be returned and you will need to listen for a netStatus event to determine if the save was successful. Please note that the dialog boxes minimum size is 215 x 138 and your SWF will need to be larger then this to display the full dialog box.

Sample basic example

try {
    var status:String = sharedObj.flush();
    if( status == SharedObjectFlushStatus.FLUSHED ) {
        // Successfull
    }
} catch(e:Error) {
    // Shared Object could not be saved
}

If your Shared Object has a maximum size that it can grow to you can pass this value to the flush value. What this does is make it so that Flash will ask for the inputted amount of space so that it doesn’t ask with each save as the size of the Shared Object increases.

try {
    var status:String = sharedObj.flush( 4096 );
    if( status == SharedObjectFlushStatus.FLUSHED ) {
        // Successful
    }
} catch(e:Error) {
    // Shared Object could not be saved
}

Erasing your Shared Object

To delete your Shared Object you utilize the clear method. When called it empties the data in your SharedObject instance and will also delete the file saved on the user’s local computer.

sharedObj.clear();

Saving user data in Flash is a relatively simply task. Although you may not utilize them in all applications they can come in handy with games and user settings. Allowing you to present the user with a consistent experience in that application as well as other applications in that domain.

Resources

• ActionScript 3 LiveDocs : SharedObject

FlashVars are a great way to pass information to your swf. The most common usage is to pass along the root path to use when looking up resources or configuration information. These parameters can then be accessed within your application by the use of ActionScript and are a great way to increase the customization and re-usability of your code.

To start things off lets look at a few possible ways to pass FlashVars into your SWF application. The first way is by use of the Object or EMBED tags. This is only for those developers still out there that haven’t started utilizing SWFObject to embed their SWFs into the page.

Object Tag Example

When using the Object tag you need to specify a param with the name FLashVars that has its values set to name=value pairs with an & separating the variables.

<PARAM NAME=FlashVars VALUE="base-url=www.mdbitz.com/&mode=single"/>

Embed Tag Example

To use FlashVars in an EMBED tag you simply define a FLASHVARS attribute with the values set the same as in the object tag.

<EMBED href="mySWF.swf" FlashVars="base-url=www.mdbitz.com/&mode=single" ></EMBED>

Most Flash Developers do not however still utilize the the Object and Embed Tags to display SWFs instead they most often use JavaScript libraries like SWFObject that handle the code output.

SWFObject Example

With SWFObject you simply pass an associated array that contains named values into your embedSWF call, and the library will take care of outputting the correct code.

var flashvars = {baseURL: "www.mdbitz.com", mode: "single"};
		var params = {wmode: "transparent", allowFullScreen: "false"};
		var attributes = {};
		swfobject.embedSWF("mySWF.swf", "mySWF", "800", "200", "9.0.0", "flash/expressInstall.swf", flashvars, params, attributes);

Obtaining the FlashVars in ActionScript 3

Now that you are passing variables into your Flash application you need to obtain and use those values. In ActionScript 3 we need to get the parameters out of the root LoaderInfo object.

var paramObj:Object = null
try {
    paramObj = LoaderInfo(this.root.loaderInfo).parameters;
} catch (error:Error) {
    // Flash Vars could not be loaded
}

The parameters property of the LoaderInfo class returns an Object that can be treated similar to an associated array. All you need to do to get your named properties is:

var baseURL = paramObj["baseURL"];

That is all there is to using FlashVars. You will find that once you start using them it will greatly enhance the re-usability of your applications and also reduce deployment issues from path errors.

For those of us that have applications that require the uploading of files, our work has just gotten easier. Earlier this month the folks of moxiecode (tinymce) released the first version of their File Uploading tool Plupload.

This handy tool enables users to utilize Flash, Silverlight, HTML5, and other web assets for handling and displaying the progress of the files being uploaded. In addition it also contains handlers for resizing images on the client side before the file is transmitted over to your server. An interesting tool that you definitely want to review before creating your own file upload tool. Check out the Plupload official site to learn more.

The Flint Particle System is an open source flash project with the goal of creating a base framework that is easily extensible by developers to create their own particle behaviors and effects. One of the many features it has is the ability to have your particle emitters move with your mouse. Below you can see a demonstration of this behavior as well as a quick code break down of how to do this in your own projects.

How To

The main steps to utilizing the Flint Particle system are:

1. Create your emitters
2. Create your renderer and attach your emitters
3. Attach your renderer to your Stage or Display Object
4. Add activites to the emitter
5. Start your emitters

Step 1: Create your emitters

Of course these can get a little more complicated but for starters lets look at the creation of an emitter. To do that I tend to extend the Basic 2D Emitter with my own class setting its properties.

package com.mdbitz
{
 
	import flash.geom.Point;
	import org.flintparticles.common.actions.*;
	import org.flintparticles.common.counters.*;
	import org.flintparticles.common.displayObjects.Dot;
	import org.flintparticles.common.initializers.*;
	import org.flintparticles.twoD.actions.*;
	import org.flintparticles.twoD.emitters.Emitter2D;
	import org.flintparticles.twoD.initializers.*;
	import org.flintparticles.twoD.zones.*;
 
	public class BlueSparkler extends Emitter2D
	{
 
		public function BlueSparkler()
		{
			// init counter
			this.counter = new Pulse( 1.5, 10 );
 
			// set up initializers
			this.addInitializer( new ImageClass( Dot, 1, 0x91C3FC ) );
			this.addInitializer( new ScaleImageInit( 0.75, 1.5 ) );
			this.addInitializer( new Lifetime( 1.2, 3.6 ) );
			this.addInitializer( new Velocity( new DiscSectorZone( new Point( 0, 0 ), 75, 15, -10 * Math.PI/9 , 6 * Math.PI/9 ) ) );
 
			// set up actions
			this.addAction( new Age() );
			this.addAction( new Move() );
			this.addAction( new Fade() );
			this.addAction( new Accelerate( 0, 18 ) );
			this.addAction( new RandomDrift( 22, 22 ) );
 
		}
 
	}
}

In the above Emitter class you will note that i initialize my emitter with a counter for when it should emit particles then set initializers on how the particles behave such as lifetime, velocity, and scale. The last thing i do is set some basic actions to have the particles age, move, fade, and etc. All Emitters can be created in a similar fashion with full details on the different flint base classes being found in the AS Docs

We use this emitter class by creating a new instance of it in our main flash document class. Which at this point will simply define the imports, constructor and a setUpEmitter function that we will be adding to.

package com.mdbitz{
 
	import flash.display.MovieClip;
 
	import flash.geom.Rectangle;
	import flash.geom.Point;
 
	import org.flintparticles.common.counters.*;
	import org.flintparticles.twoD.renderers.*;
	import org.flintparticles.twoD.initializers.*;
	import org.flintparticles.twoD.activities.*;
	import org.flintparticles.twoD.zones.*;
 
	public class Main extends MovieClip
	{
 
		public function Main()
		{
			this.setUpEmitter();
		}//main
 
		public function setUpEmitter():void
		{
			// initilize emitters
			var whiteEmitter:WhiteSparkler = new WhiteSparkler();
			var blueEmitter:BlueSparkler = new BlueSparkler();
		}
 
	}//class
 
}//package

Step 2: Create your Renderer

The renderer is the object that is responsible for displaying the particles emitted by the various emitters added to it. For this example we are going to utilize a basic BitMapRenderer and attach our blue and white emitters.

// create renderer
var renderer:BitmapRenderer = new BitmapRenderer( new Rectangle( 0, 0, 500, 500 ) );
 
// add emitters to renderer
renderer.addEmitter( whiteEmitter );
renderer.addEmitter( blueEmitter );

Step 3: Add your renderer to your Stage or Display Object

Not to much to this step simply add your renderer as a child to where it should be displayed and if needed change its x y positions.

// add renderer to screen
this.addChild( renderer );

Step 4: Add Activities to the Emitter

Now that our renderer is all set to go we want to add activities to our Emitters. Activities are behaviors that the Emitters follow, in our case we want are Emitters to follow the Mouse that is done by the FollowMouse Class as shown below:

// set up emitters to follow mouse
whiteEmitter.addActivity( new FollowMouse( renderer ) );
blueEmitter.addActivity( new FollowMouse( renderer ) );

Step 5: Start your Emitters

Last but not least is to start your emitters so that they generate particles.

// start emitters
whiteEmitter.start();
blueEmitter.start();

That is all there is to it., you know have a particle generator that follows your mouse around. The full setUpEmitters function is displayed below and the source code for this example including the swf can be found in the Downloads section.

public function setUpEmitter():void {
 
// initilize emitters
var whiteEmitter:WhiteSparkler = new WhiteSparkler();
var blueEmitter:BlueSparkler = new BlueSparkler();
 
// create renderer
var renderer:BitmapRenderer = new BitmapRenderer( new Rectangle( 0, 0, 500, 500 ) );
 
// add emitters to renderer
renderer.addEmitter( whiteEmitter );
renderer.addEmitter( blueEmitter );
 
// add renderer to screen
this.addChild( renderer );
 
// set up emitters to follow mouse
whiteEmitter.addActivity( new FollowMouse( renderer ) );
blueEmitter.addActivity( new FollowMouse( renderer ) );
 
// start emitters
whiteEmitter.start();
blueEmitter.start();
}

Downloads

• Flint Follow Mouse Example Project

Today I came across a perplexing issue when working on applying a BlurFilter to a Movie Clip in a Flash Application. When working with a large container object for a scrolling gallery I found that the BlurFilter I was trying to apply was not being rendered. After some testing and research it appears that Bitmaps have a max height and width of 2880 pixels. This limit was causing the BlurFilter to not render.
If you find that filters aren’t working on your Display Objects it may be that your object exceeds the max dimensions of 2880×2880.