MDBitz Development Resources

There are often odd cases when in a Flash Application you find that by design you want to call a function but only have the name of the function as a String. This could be caused by various reasons one being that the name is stored in a database as part of some settings. To accomplish this conversion we make use of the Function object.

How to Convert a String to a Function

var functionName:String = "toString";
 
// obtain the function handler
var namedFunction:Function = this[fName];
 
// execute the function and pass any desired arguments
nameFunction( arg1, arg2, ... );

Generating a random number for use in Flash is a common problem that many developers come across. Luckily the Math object provides static methods to help us perform this basic task.  Found below are two snippets of how to generate a random integer from 0 to a max number or for a range of values.

How to Generate a random number from 0 to a max value:

Math.floor( Math.random() * (maxNum + 1) );

Examples:

Problem – return a number between 0 and 10

Math.floor( Math.random() * 11 );

Problem – return a number between 0 and the length of an array

Math.floor( Math.random() * myArray.length );

How to Generate a random number between the range min and max inclusively:

Math.floor( minNum + 
     (Math.random() * (maxNum - minNum + 1) ) );

Examples:

Problem – return a number between 10 and 45

var minNum = 10;
var maxNum = 35;
Math.floor( minNum + ( Math.random() * (maxNum - minNum + 1 ) ) );
//-- Math.floor( 10 + (Math.random() * 26) );

Code Break Down:

In the two methods we used the Math.random() and Math.floor() functions to generate our random number for us. The Math.random() function returns a value between 0 and 1 with 1 excluded. While the Math.floor() function returns the whole number or integer below the current value ( e.g. Math.floor( 3.82 ) = 3 ).  Utilizing these methods we generate a number in the desired range by multiplying the random number generated by our max value + 1 as the floor function will only return a value of max value.

What is the Flash Context Menu?

The Flash Context Menu is the menu that appears when you right-click on a flash swf. This menu normally contains settings, about, zoom and quality if not modified by the user.  This menu is an excellent place to put the copyright or credits of the application with links to author’s own website. If you built it why not put your name on it?

Modify the Context Menu

To modify the Context Menu you must first import a couple classes into your application ContextMenu, ContextMenuItem, and ContextMenuEvent:

import flash.ui.ContextMenu;
import flash.ui.ContextMenuItem;
import flash.events.ContextMenuEvent;

Now lets go ahead and create a new Context Menu

var myMenu:ContextMenu = new ContextMenu();

After creating the context menu i prefer to hide the default options for zoom and quality utilizing the hideBuiltInItems method

myMenu.hideBuiltInItems();

Now to create our custom options. This is done by instantiating new ContextMenuItems and adding them to the custom items list of the ContextMenu. So for example lets create a new menu item with the text “copyright 2009 MDBitz”.

var webMenuItem:ContextMenuItem = new ContextMenuItem("copyright 2009 MDBitz");

To add the item to our custom menu we push it to the customItems array of the menu

myMenu.customItems.push( webMenuItem );

At this point we have created our new menu item but we have not added any event handlers for if a user selects the option. To listen for the event we add a handler for the MENU_ITEM_SELECT event.

webMenuItem.addEventListener( ContextMenuEvent.MENU_ITEM_SELECT, onWebClick );

In the previous step we have set the onWebClick function to be called when the menu item is selected. In this case we are going to open my website in a new window. to do this we are going to use the URLRequest and navigateToURL classes. Again to use these we will first need to import them.

import flash.net.navigateToURL;
import flash.net.URLRequest;

Then we simply create the new request and use the navigateToURL class to go to that website in a new window.

public function onWebClick( event:ContextMenuEvent )
  {
    var url:String = "http://www.mdbitz.com";
    var request:URLRequest = new URLRequest(url);
    navigateToURL(request, '_blank');
}

Finally we are ready to set this menu as the context menu for the flash application. This is done by setting the contextMenu to our menu.

this.contextMenu = myMenu;

You know have your own customized context menu. An important item to remember though is that you can only have a limit of 15 items in the custom menu.

Resources

• ContextMenu ASDoc

In Flash Applications we sometimes find ourselves having to split an image up into slices.  To accomplish this simple task we utilize bitmaps to copy data from a section of the main graphic to create bitmaps of the different slices or pieces. Outlined below are the steps and code that are used to complete this task.

How to Slice a Bitmap

Before slicing a bitmap can begin we need to know 3 things:

• image – the bitmap graphic we will be slicing
• numColumns – the number of columns to be sliced from the graphic
• numRows – the number of rows to be sliced from the graphic

Knowing this information we can easily create a grid of bitmaps (2 dimensional array) containing the slices.

1. Determine the width and height of the resulting slices

   var iWidth:Number = image.width;
   var iHeight:Number = image.height;
   var pWidth:Number = iWidth / numColumns;
   var pHeight:Number = iHeight / numRows;

2. initialize the image array that will hold the resulting slices, and some other properties to be used when creating the bitmaps.

   var iArray:Array = new Array();
   var rectangle:Rectangle();
   var bitmap:Bitmap;
   var bData:BitmapData;

3. Iterate over the number of rows and initialize a new Array at the row Index in the image array

   for( var rowIdx:int = 0; rowIdx < numRows; rowIdx++ ) {
   iArray[rowIdx] = new Array();
   }

4. After initializing the 2nd level array for the row index iterate over the number of columns

   for( var rowIdx:int = 0; rowIdx < numRows; rowIdx++ ) {
   iArray[rowIdx] = new Array();
   for( var colIdx:int = 0; colIdx < numColumns; colIdx++ ) {}
   }

5. Inside the column iterator we know create our bitmap data for that slice
   1. Initialize a new BitmapData with dimensions set to the width and height calculated in step 1

      bData = new BitmapData( pWidth, pHeight, true, 0x00000000 );

   2. Create a new Rectangle that is positioned by the offset of the current slide and has width and height equal to the value calculated in step 1

      rectangle = new Rectangle( colIdx * pWidth, rowIdx * pHeight, pWidth, pHeight );

   3. Copy the bitmap data of the rectangle from the original graphic which is the data for the current slice

      bData.copyPixels( image.bitmapData, rectangle, new Point( 0, 0 ) );

   4. create a new Bitmap from the bitmap data

      bitmap = new Bitmap( bData );

   5. Add the bitmap to the grid  at the current row and column index

      iArray[rowIdx][colIdx] = bitmap;

6. The resulting grid contains bitmaps of all the slices

The Completed Code

var iWidth:Number = image.width;
var iHeight:Number = image.height;
var pWidth:Number = iWidth / numColumns;
var pHeight:Number = iHeight / numRows;
 
var iArray:Array = new Array();
 
var rectangle:Rectangle();
var bitmap:Bitmap;
var bData:BitmapData;
 
for( var rowIdx:int = 0; rowIdx < numRows; rowIdx++ ) {
    iArray[rowIdx] = new Array();
    for( var colIdx:int = 0; colIdx < numColumns; colIdx++ ) {
        bData = new BitmapData( pWidth, pHeight, true, 0x00000000 );
        rectangle = new Rectangle( colIdx * pWidth, rowIdx * pHeight, pWidth, pHeight );
        bData.copyPixels( image.bitmapData, rectangle, new Point( 0, 0 ) );
        bitmap = new Bitmap( bData );
        iArray[rowIdx][colIdx] = bitmap;
    }
}

ImageSlicer Utility to Slice Images

To make this process easier for myself and those that find themselves needing to slice an image, I have create the ImageSlicer utility class. This class contains a static method that you pass the graphic, number of columns, and number of rows to and it returns the 2 dimensional array. You can download the ImageSlicer utility here

An example usage is shown below but remember you need to import the class by statement import com.mdbitz.utils.ImageSlicer;

var bitmaps:Array = ImageSlicer.sliceImage( graphic, this._numColumns, this._numRows );

While doing research into particle generators for a new Action Script 3 Flash project I am working on I came across the Flint Particle System. This library is an open source project with the goal of creating a base framework that is easily extensible by developers to create their own particle behaviors and effects.

I have just begun to utilize the Particle Framework but currently it appears to be very robust with built in support for both 2D and 3D particle systems. For 3D particle systems Flint has support for both the Away3D and Papervision3D libraries, making Flint a highly versatile tool that can be used across diverse projects.

The main power behind this particular particle system is the clean breakup of functionality into distinct elements. To begin we have 3 elements to a Particle System:

• Particle
  Defines the individual particles within the system.
• Emitter
  An emitter is responsible for the creation and management of the particles
• Renderer
  As the name implies the Render is responsible for rendering of the particles.

With these 3 main pieces you are able to create and manage particles within the system. For further control and manipulation of how the system behaves over time actions, activities, initializers, and zones are used.

• Actions
  An Action defines how the system is modified or how particles act within the system. Some available actions include Gravity, Random Drift, Follow Mouse, and Collision.
• Initializers
  The Initializer is responsible for modifying particles upon creation which can include modifying their initial position, rotation, velocity, and color.
• Activities
  Activities define how the emitter changes over time, the most commonly used one is to have the emitter move with the mouse.
• Zones
  Zones  are used by various actions and activities to define a region of space.

On the official Flint website flintparticles.org you can find many examples and a brief tutorial on how to utilize the library within your own Flash Projects. Once I have  played around some more with the library i will also post some examples here for everyone to see.