Woot?

We’re also going to create a function that lets us see the approximate time the next bus will come to any given stop (ex. “5 minutes until the next bus”).

Some helpful links (be sure to read the Google Maps references and examples):

Google Maps API/Libraries (you’ll need an API key)

ZendAMF

For this example, I’m using the LTC of London Ontario with the 21/15 route, and the 17.

First we want to make a new “map” and we want a remote object that lets us communicate with PHP (I’m just generating XML here, see the source code for my example).

<maps:Map xmlns:maps=”com.google.maps.*” id=”map” mapevent_mapready=”onMapReady(event)” width=”100%” height=”100%”

url=”http://code.google.com/apis/maps/” key=”YOUR GOOGLE MAPS API KEY HERE”/>

<mx:RemoteObject id=”amfcall” destination=”LTC” source=”LTC” endpoint=”YOUR ZENDAMF URL HERE” showBusyCursor=”true” />

And while we’re at it, we’ll make our Clear Overlay function since it’s really simple.

private function clearOverlays():void{

map.clearOverlays();

}

The next bit of code specifies how the buttons we just created will look. It’s pretty self explanatory (colors, size, position, etc.)

private function createButton(text:String,x:Number,y:Number,callback:Function):void {

var button:Sprite = new Sprite();

button.x = x;

button.y = y;

var label:TextField = new TextField();

label.text = text;

label.x = 2;

label.selectable = false;

label.autoSize = TextFieldAutoSize.CENTER;

var format:TextFormat = new TextFormat(“Verdana”);

label.setTextFormat(format);

var buttonWidth:Number = 100;

var background:Shape = new Shape();

background.graphics.beginFill(0xFFFFFF);

background.graphics.lineStyle(1, 0×000000);

background.graphics.drawRoundRect(0, 0, buttonWidth, 18, 4);

background.graphics.endFill();

button.addChild(background);

button.addChild(label);

button.addEventListener(MouseEvent.CLICK, callback);;

map.addChild(button);

}

Next we’ll define our route. Google Maps uses a weird algorithm to define waypoints and paths, but fortunately they made a tool to make them really easily and spit out the code you need here. For the 21/15 route, this is the function/algorithm I used. (It gets a little wacky)

private function showTwentyOne():void{

//21 ROUTE START

var twentyonePoints:String = “eiqeGnkunNeRebAtN{FsIyd@tDuWwSaCgHsAiBVe@{BgFlCiCpEcA~EuAhKrDdCnBhGlApGlBzBrBlLBnBu@~DxIxCfD?tEgAfa@jvBbd@{Pn|@n{E`cAia@d_@c@xh@sSxFpYtd@yQbEnTp@lc@bcAiG|@l[fGbyAlHs@bM`CjKgBxHnBpJcAzEiC|AdP}@jW?xQpA|[";

var twentyoneLevels:String = "BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB";

var twentyonePolyline:Polyline = Polyline.fromEncoded(

new EncodedPolylineData(twentyonePoints, 32, twentyoneLevels, 4),

new PolylineOptions({ strokeStyle: new StrokeStyle({

color: 0x0000ff,

thickness: 4,

alpha: 0.7})

}));

map.addOverlay(twentyonePolyline);

getStops(21);

}

Then we'll run the "getStops" function that gets all out stops from the database and displays them as overlays on the map.

private function getStops(route:Number):void{

var tok:AsyncToken = amfcall.getStops(route);

tok.addResponder(new AsyncResponder(getStopsWin, somethingfail, tok));

}

Using AsyncToken, we use PHP to generate the list of stops from the DB and bring them back as XML. Google Maps uses longitude and latitude so we'll be bring those coordinates back from the database.

private function getStopsWin(event:ResultEvent, token:AsyncToken):void{

var xml:XML = XML(event.result);

var xmlList:XMLList;

xmlList = xml.children();

for(var i:int=0; i<xmlList.length(); i++)

{

map.addOverlay(createStop(xmlList.stopID[i],new LatLng(xmlList.lat[i],xmlList.lang[i]),”"));

}

}

private function createStop(stopID:int, latlng:LatLng, content:String):Marker {

var marker:Marker = new Marker(latlng);

marker.addEventListener(MapMouseEvent.CLICK, function(e:MapMouseEvent):void {

var tok:AsyncToken = amfcall.getTimes(stopID);

tok.addResponder(new AsyncResponder(getTimesWin, somethingfail, tok));

});

return marker;

}

As an extra feature, we’re going to calculate the approximate time that the next bus will appear to any given stop we click on. For this, we use the Date functions in AS3 to compare the current time with the bus times we have in the database for any given stop. I’m sure there is some easier way to compare times, but this is the way that works for me.

private function closestTime(now:Number, after:Number):int{

var difference:int = after – now;

difference = difference/1000;

difference = difference/60;

return difference;

}

private function getTimesWin(event:ResultEvent, token:AsyncToken):void{

var currentTime:Date = new Date();

var currentMilliseconds:Number = currentTime.valueOf();

var dayString:String = weekDayLabels[currentTime.getDay()];

var xml:XML = XML(event.result);

var xmlList:XMLList;

xmlList = xml.children();

for(var i:int=0; i<xmlList.length(); i++)

{

var time:String = xmlList.time[i]+” GMT-0″+(currentTime.getTimezoneOffset()/60)+”00 “+dayString+” “+(currentTime.month+1)+”/”+(currentTime.getDate())+”/”+currentTime.getFullYear();

var milliseconds:Number = Date.parse(time);

var minutesleft:int = closestTime(currentMilliseconds,milliseconds);

var latlng:LatLng = new LatLng(xmlList.lat[i],xmlList.lang[i]);

if (i==0){

var compareTime:int = minutesleft;

} else {

if(compareTime > minutesleft || compareTime < 0){

compareTime = minutesleft;

}

}

}

if(compareTime == 1){

content = compareTime+” minute left till the next bus”;

} else if(compareTime == 0){

content = “Bus should already be there!”;

}else {

content = compareTime+” minutes left till the next bus”;

}

var timeTitle:String = “Bus Stop”;

map.openInfoWindow(latlng, new InfoWindowOptions({titleHTML: timeTitle, contentHTML: content}));

}

The only thing that’s left to do, is add a fail function in case the PHP or MySQL doesn’t work right.

public function somethingfail(event:FaultEvent, token:AsyncToken):void{

Alert.show(“Uh oh, something went wrong on our side! Try again in a bit!”);//OH GAWD

}

Here’s the source files which include all this AS3 source code, PHP, and a SQL dump of the database I used.

If you have any questions or comments, let me know.

Check it out here.

Be warned, there are a few bugs.

Update: Now synced with a MySQL database to find when the next bus will come. (There are only a few stops in there, so if there are some REALLY huge times or it says “bus is already there”, I haven’t put the next time in yet.)

With his permission, I’m hosting the album here.

Download

You can also visit his Facebook page here.

Author insert a music with WS Audio Player.
(Download) this music.

Comment and rate on the contest site: http://bit.ly/cq5ZT8

So suddenly, it’s my fault that I didn’t *poke* them respond back to me when I was just doing my job with tech support, and they just didn’t get back to me because they didn’t understand. Of course they complained to my supervisor and told him “my site doesn’t work” or “why doesn’t this work yet” when I gave them easy fixes and instructions for the issues they wanted to solve. They just didn’t read or follow them.

Do all clients act this way? Or am I in some sort of twilight zone where people don’t respond to eachother when they need help?

Check it out.

http://www.ragingnerds.com

You can view the finished product and the source code here (right click to view source).

First, make sure you import all the classes you will need.

import as3isolib.display.IsoSprite;

import as3isolib.display.IsoView;

import as3isolib.display.scene.IsoScene;

import bit101.AStar;

import bit101.Grid;

import bit101.Node;

import caurina.transitions.*;

import com.adobe.viewsource.ViewSource;

import eDpLib.events.ProxyEvent;

import flash.display.Loader;

import flash.display.Sprite;

import flash.display.StageAlign;

import flash.display.StageScaleMode;

import flash.events.*;

import flash.net.URLRequest;

This uses an AStar class that I got from Papervision2. (In fact, this is a heavily modified version of that code)

Next we define our class, and create all the variables we will be using.

public class pathfindingtest extends Sprite
{
protected var cellSize:int = 50;//size of cubes/squares
protected var pathGrid:Grid;
protected var path:Array;
protected var isoView:IsoView;
protected var isoScene:IsoScene;
protected var dude:IsoSprite = new IsoSprite;
protected var speed:Number = 0.4;
protected var speed1:Number;
protected var delay:Number;
protected var delayfix:Number = 0;;
protected var speedcheck:Boolean = false;
protected var _numX:Number = 0;
protected var _numY:Number = 0;
protected var targetX:Number;
protected var targetY:Number;
protected var dudeDir:String;
protected var leftRightTempX:Number = 0;
protected var leftRightTempY:Number = 0;

private var loaderMario:Loader;
private var loaderGrass:Loader;

For our main function, we want to load the External SWFs we have for both Mario and the terrain. When they complete, we want to create our random terrain.

public function pathfindingtest(){
loaderMario = new Loader();
loaderMario.load(new URLRequest(“mario.swf”));
loaderGrass = new Loader();
loaderGrass.contentLoaderInfo.addEventListener(Event.INIT,makeGrid);
loaderGrass.load(new URLRequest(“grassSprites.swf”));
}

For our grid, we’re going to make a 10×10 grid with random obstacles every time the page loads. We also want to create an Event Listener on every frame that renders the IsoScene for us and updates Mario on his direction.

protected function makeGrid(e:Event):void
{
addEventListener(Event.ENTER_FRAME, render);
pathGrid = new Grid(10, 10);//makes a 10×10 grid
for(var i:int = 0; i < 15; i++)
{
pathGrid.setWalkable(Math.floor(Math.random() * 8 ) + 2,
Math.floor(Math.random() * 8)+ 2,
false);//randomly selects which tiles will be up or down
}
drawGrid();
}

Now we want to draw the grid, and place all the objects on our scene. We also want to randomize the terrain a bit so there will be small differences in grass and obstacles (4 different grass sprites, and 4 different obstacle sprites). On every grass sprite, we’ll make an event listener that will be our walking function (so we cannot click on an obstacle) Then we want to add it all to the IsoScene and then add the IsoScene to the IsoView so we can see all our sprites.

protected function drawGrid():void
{
isoScene = new IsoScene();
isoView = new IsoView();

isoView.clipContent = false;

var grassClass:Class = loaderGrass.contentLoaderInfo.applicationDomain.getDefinition(“Grass”) as Class;
var grass2Class:Class = loaderGrass.contentLoaderInfo.applicationDomain.getDefinition(“Grass2″) as Class;
var grass3Class:Class = loaderGrass.contentLoaderInfo.applicationDomain.getDefinition(“Grass3″) as Class;
var grass4Class:Class = loaderGrass.contentLoaderInfo.applicationDomain.getDefinition(“Grass4″) as Class;

var blockClass:Class = loaderGrass.contentLoaderInfo.applicationDomain.getDefinition(“Block”) as Class;
var block2Class:Class = loaderGrass.contentLoaderInfo.applicationDomain.getDefinition(“Block2″) as Class;
var block3Class:Class = loaderGrass.contentLoaderInfo.applicationDomain.getDefinition(“Block3″) as Class;
var block4Class:Class = loaderGrass.contentLoaderInfo.applicationDomain.getDefinition(“Block4″) as Class;

for(var i:int = 0; i < pathGrid.numCols; i++)
{
for(var j:int = 0; j < pathGrid.numRows; j++)//go through each column, and then each row
{
var node:Node = pathGrid.getNode(i, j);//grab the current node (or square) of the grid
var ground:IsoSprite = new IsoSprite();

if (node.walkable)//if it was determined that the tile is down, it makes the height 0 and adds an event listener
{
var grassPicker:int = Math.random()*4+1;
if(grassPicker == 1){
ground.sprites = [grassClass];
} else if (grassPicker == 2){
ground.sprites = [grass2Class];
} else if (grassPicker == 3){
ground.sprites = [grass3Class];
} else if (grassPicker == 4){
ground.sprites = [grass4Class];
}

ground.addEventListener(MouseEvent.CLICK, onGridItemClick);
}
else
{
var blockPicker:int = Math.random()*4+1;
if(grassPicker == 1){
ground.sprites = [blockClass];
} else if (grassPicker == 2){
ground.sprites = [block2Class];
} else if (grassPicker == 3){
ground.sprites = [block3Class];
} else if (grassPicker == 4){
ground.sprites = [block4Class];
}
}
ground.moveTo(i * cellSize, j * cellSize, 0);//places the box
isoScene.addChild(ground);
}
}

//Set properties for isoView
isoView.setSize(stage.stageWidth, stage.stageHeight);
isoView.showBorder = false;
dude.isAnimated = true;
dude.autoUpdate = true;

isoView.autoUpdate = true;

isoScene.addChild(dude);

//Add the isoScene to the isoView
isoView.addScene(isoScene);

//Add the isoView to the stage
addChild(isoView);
}

Next, we’ll create our function that runs when we click on a grass tile. We want it to grab where we clicked, and where Mario is right now.

protected function onGridItemClick(evt:ProxyEvent):void
{
var box:IsoSprite = evt.target as IsoSprite;

//Get and set End Nodes (where are we going)
var xpos:int = (box.x)/cellSize;
var ypos:int = Math.floor(box.y / cellSize);//grabs the center of what the player just clicked
pathGrid.setEndNode(xpos,ypos);

//Get and set Start Node (where are we now)
xpos = Math.floor(dude.x / cellSize);
ypos = Math.floor(dude.y / cellSize);

pathGrid.setStartNode(xpos, ypos);//grabs the position of the dude

//Find our path
findPath();
}

So now that we have out start and end points, we need to find the path to get there and plot a waypoint system (it gets a bit complicated here). For every point, we want to tween Mario so he goes through all the points. This works using the Tweener Delay system. We add a delay after every point. That way his start and end point will match up perfectly. I’ve also added a fix here which makes Mario move a bit slower when he goes directly left or right. This is because the regular tween between left and right goes about 125% faster than the rest of the tweens.

protected function findPath():void
{
var astar:AStar = new AStar();

if(astar.findPath(pathGrid))//if there is a path between the two nodes…
{
path = astar.path;//make our path using a waypoint system

for (var i:int = 1; i < path.length; i++) { //trace(path[i].x+’,'+path[i].y); targetX = path[i].x * cellSize; targetY = (path[i].y * cellSize);//for every spot on our waypoint, tween it through every point speedcheck = checkTween(targetX, targetY); moveDude(targetX, targetY, i); //trace(targetX+’,'+targetY); } speed1=0; delay = 0; delayfix = 0; speedcheck=null; } else { //if path is impossible, do something here. add a text message maybe? } } public function moveDude(targetX:Number, targetY:Number, i:int):void{ if(i > 1){
speed1 = speed;
}
//trace(speed1);
if(speedcheck == true){
speed = 0.65;
if(speed1 == 0.4){
delay = speed1;//finds out how much delay is needed from the last instruction
Tweener.addTween(dude, {x:targetX, y:targetY, delay:delay+delayfix , time:speed, transition:”linear”} );//tween the dude
Tweener.addTween(isoView, {x:((-targetX+targetY)/2)*2, y:(-targetY-targetX)/2, delay:delay+delayfix , time:speed, transition:”linear” } );//tween the camera
delayfix = delayfix+delay;//adds to the total delay time so the tweens stack on another
} else {
delay = speed;//finds out how much delay is needed from the current instruction
Tweener.addTween(dude, {x:targetX, y:targetY, delay:delay+delayfix , time:speed, transition:”linear”} );//tween the dude
Tweener.addTween(isoView, {x:((-targetX+targetY)/2)*2, y:(-targetY-targetX)/2, delay:delay+delayfix , time:speed, transition:”linear” } );//tween the camera
delayfix = delayfix+delay;//adds to the total delay time so the tweens stack on another
}
} else if(speedcheck == false) {
speed = 0.4;
if(speed1 == 0.65){
delay = speed1;//finds out how much delay is needed from the last instruction
Tweener.addTween(dude, {x:targetX, y:targetY, delay:delay+delayfix , time:speed, transition:”linear”} );//tween the dude
Tweener.addTween(isoView, {x:((-targetX+targetY)/2)*2, y:(-targetY-targetX)/2, delay:delay+delayfix , time:speed, transition:”linear” } ); //tween the camera
delayfix = delayfix+delay;//adds to the total delay time so the tweens stack on another
} else {
delay = speed;//finds out how much delay is needed from the current instruction
Tweener.addTween(dude, {x:targetX, y:targetY, delay:delay+delayfix , time:speed, transition:”linear”} );//tween the dude
Tweener.addTween(isoView, {x:((-targetX+targetY)/2)*2, y:(-targetY-targetX)/2, delay:delay+delayfix , time:speed, transition:”linear” } ); //tween the camera
delayfix = delayfix+delay;//adds to the total delay time so the tweens stack on another
}

}
//trace(i+’: Speed:’+speed+’ Delay:’+delayfix);//This trace would find the number of tweens happening at one time and their speeds and delays
}

//CHECKS IF DUDE IS GOING LEFT OR RIGHT(HE MOVES SLIGHTLY FASTER IN BOTH THOSE DIRECTIONS)
public function checkTween(leftrightX:Number, leftrightY:Number):Boolean{
if (leftrightX < leftRightTempX && leftrightY > leftRightTempY) {
leftRightTempX = leftrightX;
leftRightTempY = leftrightY;
//trace(“left”);
return true;
}else if (leftrightX > leftRightTempX && leftrightY < leftRightTempY) {
leftRightTempX = leftrightX;
leftRightTempY = leftrightY;
//trace(“right”);
return true;
} else {
leftRightTempX = leftrightX;
leftRightTempY = leftrightY;
//trace(“regular”);
return false;
}
}

Almost done, now all we have to do is have it check which direction Mario is going, and change his sprite accordingly on every frame. We load all his sprites from the external SWF (just like the terrain ones) and add them to Mario accordingly.

public function checkDude():void{
var marioFrontClass:Class = loaderMario.contentLoaderInfo.applicationDomain.getDefinition(“MarioFront”) as Class;
var marioBackLeftClass:Class = loaderMario.contentLoaderInfo.applicationDomain.getDefinition(“MarioBackLeft”) as Class;
var marioBottomRightClass:Class = loaderMario.contentLoaderInfo.applicationDomain.getDefinition(“MarioBottomRight”) as Class;
var marioBackClass:Class = loaderMario.contentLoaderInfo.applicationDomain.getDefinition(“MarioBack”) as Class;
var marioLeftClass:Class = loaderMario.contentLoaderInfo.applicationDomain.getDefinition(“MarioLeft”) as Class;
var marioRightClass:Class = loaderMario.contentLoaderInfo.applicationDomain.getDefinition(“MarioRight”) as Class;
var marioTopRightClass:Class = loaderMario.contentLoaderInfo.applicationDomain.getDefinition(“MarioTopRight”) as Class;
var marioBottomLeftClass:Class = loaderMario.contentLoaderInfo.applicationDomain.getDefinition(“MarioBottomLeft”) as Class;
if(_numX == 0 && _numY == 0){
_numX = dude.x;
_numY = dude.y;
if(dude.sprites.toString() != marioFrontClass.toString()){
dude.sprites = [marioFrontClass];
}
}else {
if (dude.x < _numX) {
if(dude.y < _numY){ if(dude.sprites.toString() != marioBackClass.toString()){ dude.sprites = [marioBackClass]; dudeDir = “Up”; } } else if(dude.y > _numY){
if(dude.sprites.toString() != marioLeftClass.toString()){
dude.sprites = [marioLeftClass];
dudeDir = “Left”;
}
}else {
if(dude.sprites.toString() != marioBackLeftClass.toString()){
dude.sprites = [marioBackLeftClass];
dudeDir = “UpLeft”;
}
}
} else if (dude.x > _numX) {
if(dude.y < _numY){ if(dude.sprites.toString() != marioRightClass.toString()){ dude.sprites = [marioRightClass]; dudeDir = “Right”; } } else if(dude.y > _numY){
if(dude.sprites.toString() != marioFrontClass.toString()){
dude.sprites = [marioFrontClass];
dudeDir = “Down”;
}
}else {
if(dude.sprites.toString() != marioBottomRightClass.toString()){
dude.sprites = [marioBottomRightClass];
dudeDir = “DownRight”;
}
}
} else {
if(dude.y < _numY){ if(dude.sprites.toString() != marioTopRightClass.toString()){ dude.sprites = [marioTopRightClass]; dudeDir = “UpRight”; } } else if(dude.y > _numY){
if(dude.sprites.toString() != marioBottomLeftClass.toString()){
dude.sprites = [marioBottomLeftClass];
dudeDir = “DownLeft”;
}
}
}
if(dude.x == _numX && dude.y == _numY){
dude.sprites = [marioFrontClass];//Mario faces forwards when stopped
}
_numX = dude.x;
_numY = dude.y;
}
}

And last, we’ll make our render function that runs every frame that renders the scene and checks for Mario to change direction.

protected function render(event:Event = null):void
{
//Render the isoScene
isoScene.render();
checkDude();//Checks the sprite for direction change and changes the sprite accordingly
}

After everything, it should look something like this.

Hope this helps anyone get a hold of as3isolib.