BitmapData
To animate the static pixel art illustration of the road worker, it had
to be separated into different smaller images.
These separate images are enclosed in a movieclip, and animated
individually, to mimic the impression of drilling/shaking.
The illustration is divided into six separate images and four extra images for the shadow.
The separated parts have to be slightly fine-tuned. Extra pixels have to
be drawn to eliminate the possibility of gaps, since the separate parts
animate more of less independently of each other.
As soon as the individual parts are fine-tuned, they are combined into
one single image, or so-called 'image strip' (see image).
To limit the amount of redundant space, the separate images are combined
as efficiently as possible.
Within Adobe Flash, the individual images are again cropped with
ActionScript.
To cut the individual images from the image strip, a list is made. The list contains the top left position and the width and height of each individual image.
| number | position in image strip | size | description |
| 1 | 0, 0 | 81, 81 | torso |
| 2 | 81, 0 | 81, 81 | torso (shadow) |
| 3 | 0, 81 | 73, 74 | head |
| 4 | 73, 81 | 73, 74 | head (shadow) |
| 5 | 146, 81 | 19, 28 | chisel |
| 6 | 0, 155 | 69, 42 | legs |
| 7 | 0, 197 | 69, 42 | legs (shadow) |
| 8 | 69, 155 | 53, 37 | wire |
| 9 | 69, 197 | 53, 37 | wire (shadow) |
| 10 | 122, 155 | 41, 42 | drill |
| 11 | 122, 197 | 29, 14 | drill addon |
The information in the list is used to isolate individual images from
the image strip. These individual images are enclosed in a movieclip.
The order in which the movieclips are stacked/layered is important. In
Adobe Flash, the movieclip with the greatest depth value is closest to
the eye of the spectator.
To recreate the original illustration, the order is - from top to bottom
- head, drill add-on, torso, drill, chisel, wire, legs, head (shadow),
torso (shadow), wire (shadow), legs (shadow).
The image in the movieclip is positioned at the origin of the movieclip
(0, 0).
The position of the movieclips needs to be changed to see the original
pixel art illustration. The next list shows the top left position of
every movieclip.
| number | movieclip position | size | description |
| 1 | 0, 65 | 81, 81 | torso |
| 2 | 0, 65 | 81, 81 | torso (shadow) |
| 3 | 6, 0 | 73, 74 | head |
| 4 | 6, 0 | 73, 74 | head (shadow) |
| 5 | 9, 128 | 19, 28 | chisel |
| 6 | 20, 111 | 69, 42 | legs |
| 7 | 20, 111 | 69, 42 | legs (shadow) |
| 8 | 15, 54 | 53, 37 | wire |
| 9 | 15, 54 | 53, 37 | wire (shadow) |
| 10 | 5, 96 | 41, 42 | drill |
| 11 | 9, 91 | 29, 14 | drill addon |
The positions in the list are used as the default position of each
movieclip.
A value/offset is used to reposition the movieclip around this default
position during the animation.
The next thing to do is to figure out how the described process can be made with ActionScript.
ActionscriptAn object is used to store the required information per individual part
of the illustration.
The object has the next properties:
| Property name | Property description |
| clip_name | Name of the movieclip |
| position_x | Default position movieclip |
| position_y | Default position movieclip |
| lookup | Multi-dimensional array with offsets |
| index | Index 'lookup' array |
The object properties need to be accessed on several places in the
ActionScript code, so the scope of the object needs to be global.
In this example, the global variables are positioned at the top of the
ActionScript.
var drill : Object = new Object(); // drill object var drill_addon : Object = new Object(); // drill_addon object var chisel : Object = new Object(); // chisel object var torso : Object = new Object(); // torso object var head : Object = new Object(); // head object var wire : Object = new Object(); // wire object var legs : Object = new Object(); // legs object
Notice the lack of objects for the images that are used for the shadow.
This will be explained later.
In the ActionScript code above, the variables 'drill', 'drill_addon',
'chisel', 'torso', 'head', 'wire', 'legs' are created in the memory. But
these variables - objects - don't have any properties yet.
The properties have to be added to the object. This needs to be done
only once in this example, and is done at the start of the program.
The function 'init()' is used as the function that is executed first, as
soon as the Adobe Flash animation starts.
The function is used to cut the individual images out of the image strip
and position all movieclips at the right place, in the right layer order. Properties are added to the objects, and the variables needed for
the particle animation are set/initialized aswell.
Object 'torso' is used as an example; the other objects are set/initialized in the same way, with different values.
/******************************************************************************/
/* drububu.com :: ic-project */
/******************************************************************************/
function init() : Void
{
...
torso.clip_name = "mc_torso";
torso.position_x = 0;
torso.position_y = 65;
torso.lookup = [[0,1], [-1,0], [1,0], [0,1], [1,1], [0,-1], [-1,0]];
torso.index = 0;
...
}
/******************************************************************************/
/* drububu.com :: ic-project */
/******************************************************************************/
init();
stop();
First the property, 'clip_name', is set to "mc_torso"; this is the name
of the movieclip that will contain the image of the torso.
The properties 'position_x' and 'position_y' are set to 0 and 65. This
will be the default position of the movieclip. During the animation,
offsets are added to this default position.
The next property, 'lookup', is a so-called multi-dimensional array; in
this case a two dimensional array. Every entry of the array contains an
array with two entries; an array in an array.
The first entry represents the horizontal offset, the second entry the
vertical offset.
The number of entries in an array can be retrieved with the property 'length'.
trace(torso.lookup.length); // output 7
To find the horizontal and vertical offset of the 5th entry, the following ActionScript code can be used:
trace(torso.lookup[4][0]+" "+torso.lookup[4][1]); // output 1 1
To find the horizontal and vertical offset of the 3rd entry, the following ActionScript code can be used:
trace(torso.lookup[2][0]+" "+torso.lookup[2][1]); // output 1 0
The last property of the object, 'torso', is 'index'. Index is used to
store the entry number in the array.
During the animation, this property changes from 0, the first entry of
the array, to 7, the last entry of this specific array
(torso.lookup); so the horizontal and vertical offset will be
different per frame during the animation.
After adding properties to the object, it's time to create a
movieclip with the image of the torso, and a movieclip with the image of
the shadow of the torso.
This done in a function called 'init_movieclip'.
/*******************************************************************************/
/* drububu.com :: ic-project */
/*******************************************************************************/
function init() : Void
{
...
torso.clip_name = "mc_torso";
torso.position_x = 0;
torso.position_y = 65;
torso.lookup = [[0,1], [-1,0], [1,0], [0,1], [1,1], [0,-1], [-1,0]];
torso.index = 0;
init_movieclip(torso.clip_name, false, 0, 0, 81, 81);
init_movieclip(torso.clip_name, true , 81, 0, 81, 81);
...
}
To cut the required part out of the image strip, the exact position
within the image strip has to be specified. This information is passed
on as an argument to the function.
The exact position in the image strip could also be added to the object
as a property, but this would be a waste of memory, since these values
are used only once.
The function call to 'init_movieclip' has six arguments.
| argument | description. |
| torso.clip_name | The name of the movieclip that has to be created. This movieclip will contain one of the individual images, in this case the illustration of the torso |
| false | A Boolean (true or false) that indicates whether the individual image will be used as shadow or not. |
| 0 | The left position of the individual image within the image strip. |
| 0 | The top position of the individual image within the image strip. |
| 81 | The width of the individual image within the image strip. |
| 81 | The height of the individual image within the image strip. |
The second argument is a so-called flag. The value of this variable can be 'true' or 'false' and is called a boolean.
The movieclips 'torso', 'head', 'legs', and 'wire' have two versions.
The first version is the illustrated version, the second version is
completely gray and is used as shadow.
The movieclips used for shadow are created in an extra movieclip called
'mc_shadow'. This movieclip is positioned two pixels to the right and
two pixels downwards, which makes the content of this movieclip only
visible - as shadow - on the right side of the illustration, as in the
original pixel art illustration.
The position of the movieclips 'torso', 'head', 'legs', and 'wire' in
'mc_shadow', are exactly the same as the illustrated version. The
position for both movieclips needs to be the same because the shadow
should not move differently from it's illustrated version.
By changing the position of movieclip 'mc_shadow', the positions of the
clips remain the same, but the movieclips in movieclip 'mc_shadow'
remain visible on the right side as shadow.
