I build robots. Little electromechanical machines that roll around the floor, seek light, avoid objects. Stuff like that.

I also run a little kid`s website called cybercritters. So I decided the kids might like a robot to drive around. If they like it enough I can expand it to run in 2 1/2 D, or avoid objects, or make it into an avoidance race, or whatever strikes my fancy.

I thought it would be fun to share how I put the little robot together using Flash. I use the old Macromedia Flash 8, I just can`t spring for the loot right now.

So here`s the inside scoop on how I built a robot that is virtual, and you can play with it for free on the web.

Here goes!

It`s flash, so there are all kinds of things that could be done to it. But I started with the actual robot object. I made a body for the robot, encircled it with a little box that I could turn on and off when it collides with something (just the edges of the screen area in this version.)

Of course I can expand it to operate on the screen like the little virtual pets that work from your desktop on cybercritters.

Some things to look at in the scripts:

Note the little control panel and the code that allows you to drag the robot around the screen, should it crash.

Note use of the collision routine... Everything calls collsion checks before anything happens. Just like in a real-life non-virtual robot.

Action Script-Wise it looks like this:

#include "wirelessBugBot.as"

var divMove = 5; // divide obj by divMove and (controls speed inverse to size)

// make collision Var = true to set process in motion
var collision = false; // movie starts by making sure it is stopped
_root.NSEW.collisionBox._visible = false; // turn off collision box
_root.help._visible = false;

// Limits for Height Y And Width X of Entire Playing Area
var XlimitH = 890; // right margin roughly 100px from the right end
var XlimitL = 30; // creates a left margin
var YlimitH = 555; // bottom margin about 100px
var YlimitL = 25; // top margin

//////////////////////////////////////////////////
// Drag N Drop the robot anywhere on the screen
//
_root.NSEW.onPress = function() {
this.startDrag();
collision = false; // Stops any actions and holds the object as-is
};
_root.NSEW.onRelease = function() {
collision = false; // Stops any actions and holds the object as-is
_root.NSEW.collisionBox._visible = false; // turn off collision box
this.stopDrag();
};


///////////// HELP ///////////////
_root.helpMe.onRelease = function(){
_root.help._visible = true;
}
_root.help.close.onRelease = function() {
_root.help._visible = false;

}

/////////////////////////////////////////////////////////////////////////////////////
//////// Control Mechanisms and things that work :-) ///////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////
// (c) Copyright 2009, the ETECETERA group, all rights reserved.
//
// Author - Jim Huffman
// Orig 07/11/2009
// Release Version 02
//
/////////////////////////////////////////////////////////////////////////////////////


//////////////////////////////////////////////////////////////////////
// Robot Relative Move Comands
// Here we have to check on the environmental conditions
// before the Raw movement routine is called

function collisionTest(){ // The Heart of the control here is this: The collision test ?? Have we exceeded limits of track?
if(collision){ // if the collision variable is true, then check deeper
//check the limits of the playing field top and bottom margins minus the height and width of the object
if (NSEW._y > YlimitH || NSEW._y < YlimitL) {
_root.NSEW.collisionBox._visible = true;
return false; // check vertical limits
}

if (NSEW._x > XlimitH || NSEW._x < XlimitL ){
_root.NSEW.collisionBox._visible = true;
return false;// check horizontal limits
}
else {
_root.NSEW.collisionBox._visible = false;
return true; // if not hit something - keep going
}
}
else {
//_root.NSEW.collisionBox._visible = true;
return false;
}
}

function move(strg){ // All movement requests come here before object moves
// always check if there is an existing collision (Maybe a STOP?)
if (collisionTest()) { // collision test returns true - choose proper movements
var x = 0;
if (strg == `up`){
this.onEnterFrame = function(){
if(x++ > 10) {
if (collisionTest()) moveUp(NSEW);
}
}
}
if (strg == `Lft`){
this.onEnterFrame = function(){
if(x++ > 10) {
if (collisionTest()) moveLft(NSEW);
}
}
}
if (strg == `Rt`){
this.onEnterFrame = function(){
if(x++ > 10) {
if (collisionTest()) moveRt(NSEW);
}
}
}
if (strg == `Dwn`){
this.onEnterFrame = function(){
if(x++ > 10) {
if (collisionTest()) moveDwn(NSEW);
}
}
}
if (strg == `DiaUp`){
this.onEnterFrame = function(){
if(x++ > 10) {
if (collisionTest()) moveDiaUp(NSEW);
}
}
}
if (strg == `DiaRup`){
this.onEnterFrame = function(){
if(x++ > 10) {
if (collisionTest()) moveDiaRup(NSEW);
}
}
}
if (strg == `DiaDn`){
this.onEnterFrame = function(){
if(x++ > 10) {
if (collisionTest()) moveDiaDn(NSEW);
}
}
}
if (strg == `DiaRdn`){
this.onEnterFrame = function(){
if(x++ > 10) {
if (collisionTest()) moveDiaRdn(NSEW);
}
}
}
}
}

//////////////////////////////////////
// Raw Object Moves happen here
// These routines ignore the overall limit and collision rules
function moveUp(object) {
oY = object._y;
oH = object._height ;
object._y = oY - oH /divMove ; // move it out of the gate
}

function moveDwn(object) {
oY = object._y;
oH = object._height ;
object._y = oY + oH /divMove ; // move it out of the gate
}

function moveLft(object) {
oX = object._x;
oW = object._width ;
object._x = oX - oW /divMove ; // move it out of the gate
}

function moveRt (object) {
oX = object._x;
oW = object._width ;
object._x = oX + oW /divMove ; // move it out of the gate
}

function moveDiaUp (object) {
oY = object._y;
oH = object._height ;
object._y = oY - oH /(divMove + 6 );
oX = object._x;
oW = object._width ;
object._x = oX - oW /(divMove + 6 );
}

function moveDiaDn (object) {
oY = object._y;
oH = object._height ;
object._y = oY + oH /(divMove + 6 ) ;
oX = object._x;
oW = object._width ;
object._x = oX + oW /(divMove + 6 ) ;
}

function moveDiaRup (object) {
oY = object._y;
oH = object._height ;
object._y = oY - oH /(divMove + 6 ) ;
oX = object._x;
oW = object._width ;
object._x = oX + oW /(divMove + 6 ) ;
}

function moveDiaRdn (object) {
oY = object._y;
oH = object._height ;
object._y = oY + oH /(divMove + 6 );
oX = object._x;
oW = object._width ;
object._x = oX - oW /(divMove + 6 ) ;
}

///////////////////////////////////////////////////
// Controller commands Virtual Joystick
// stick points character in correct direction
// moves character one width in the direction pointed
// then calls the move() routine appropriately

this.stick.STOP.onPress = function () { // Screeechhh
collision = false; // Stops any actions and holds the object as-is
_root.NSEW.collisionBox._visible = false; // turn off collision box
}

this.stick.N.onPress = function () { // Move one "space" north
_root.NSEW.gotoAndStop(`N`); // point away from operator
collision = true;
moveUp(NSEW);
move(`up`);
}

this.stick.S.onPress = function () {// Move one "space" south
_root.NSEW.gotoAndStop(1);
collision = true;
moveDwn(NSEW);
move(`Dwn`);
}

this.stick.W.onPress = function () {// Move one "space" west
_root.NSEW.gotoAndStop(2);
collision = true;
moveLft(NSEW);
move(`Lft`);
}

this.stick.E.onPress = function () {// Move one "space" east
_root.NSEW.gotoAndStop(4);
collision = true;
moveRt(NSEW);
move(`Rt`);
}

this.stick.NW.onPress = function () {// Move one "space" northwest
_root.NSEW.gotoAndStop(6);
collision = true;
moveDiaUp(NSEW);
move(`DiaUp`);
}

this.stick.NE.onPress = function () {// Move one "space" northeast
_root.NSEW.gotoAndStop(5);
collision = true;
moveDiaRup(NSEW);
move(`DiaRup`);
}

this.stick.SE.onPress = function () {// Move one "space" southeast
_root.NSEW.gotoAndStop(7);
collision = true;
moveDiaDn(NSEW);
move(`DiaDn`);
}

this.stick.SW.onPress = function () {// Move one "space" southwest
_root.NSEW.gotoAndStop(8);
collision = true;
moveDiaRdn(NSEW);
move(`DiaRdn`);
}

///////////////////////////////////////////////////////////////////
//////// END Control Mechanisms /////////////////////////////////
///////////////////////////////////////////////////////////////////