Mike R :: R ekim » flash

Gorillaz Submatronic Game

Mike — Fri, 11 Feb 2011 18:23:33 +0000

A few months ago we stuck a new game up on Gorillaz.com that I think is great!

It’s built using the the box2d WCK found here http://www.sideroller.com/wck/ that is an awesome system. It’s got a c++ alchemy version of box2d in it so it’s really fast and the world creator kit lets you drag items around in the IDE and even use the timeline to animate bodies.

For this game we created a proxy system that let us layout the levels graphically on stage in their own swfs. This was then replaced with the physics objects from the base swf once they were loaded and added to the stage. After the initial load each level load was just a few KBs, quick to compile and behaviours could be changed for all the levels by editing the base.

All the crazy physics stuff was topped off with some really great graphics from Adam Gale. The last level of the story mode where you’re floating round inside a whale is brilliant!

http://gorillaz.com/g-player/games/submatronic

Flash Google Analytics Lite

Mike — Tue, 27 Jul 2010 22:37:30 +0000

I’ve been using Google analytics to track events and page views. It works really well and using the events for levels and play length can be extremely helpful. The big problem though is the file size. An empty swf compiled in flashdevelop with just my google analytics class comes to nearly 70k.

I took a look around for anyone who’d made a light weight version and couldn’t find any so in the end I had a go myself.

The obvious place to start seemed to be the debug code. It’s very woven into the main code, I think it would be extremely useful if they provide a version without the debug system for final versions.

Anyway, here is a quick guide on how to quickly strip a few kbs.

Quick Start

Download the latest version over svn from here http://code.google.com/p/gaforflash/source/checkout

If you want a quick start I have a quick Tracking class, I haven’t got the original to hand but I recreated it off my the top of my head. download here . You use it like so.

//Setup the on stage display object required for GA and the account
Tracking.GAaccountID = "GAXXXXX-XXXX";
Tracking.root_display_object = this;

Tracking.trackPage("/link/link");
Tracking.trackEvent("Game","start level","game title",1);

Start Stripping

com.google.analytics.debug.DebugConfiguration.as seems be the main file we can start with.

You want to strip out ever mention of layout:ILayout. First comment out the

public var layout:ILayout;

then head down and comment out any if containing layout. You can clear the whole contents of any if with it like so:

private function _initializeVisual():void
{
/*if( layout )
{
layout.init();
_visualInitialized = true;
}*/
}

Once you’ve cleared out any ifs mentioning layout there’s only one more mention of it inside com.google.analytics.GATracker.as. Remove the import of layout and in the _factory() function comment out the contents of the if( visualDebug ){
Compiling that lops the file down by 13KB
You can carry on hacking away. Staying in GATracker.as I found that as I was only using the AS3 mode so I removed the case and the factory function mentioned in the following switch

/*case TrackerMode.BRIDGE :
{
activeTracker = _bridgeFactory();
break;
}*/

after deleting the _bridgeFactory function I removed the import of Bridge as well this takes off a few more KB.
There’s plenty more that you can play with but the above is a 2 minute job that can get about 20KB off you’re project.
OK Bye

connecting to a .htaccess passworded server without access

Mike — Mon, 28 Dec 2009 18:34:24 +0000

I wanted to do some work over christmas on a site that uses an amfphp connection to get data. Where I was going didn’t have a fixed IP so we opened the port access up and put a username and password on it using .htaccess.

This was great until I realised that I needed to authorise the connection before I could use amfphp and flash wasn’t prompting for it or allowing me to use the proxy-authorization header I needed without access to the crossdomain.xml. One easy way of sorting it is to open the swf in a browser, go to a static page that prompts the login then load the flash but this was too faffy and I wanted the debugging from flashdevelop or the flash IDE.

Anyway heres a quick bodge way of getting it temporarily working in the flash IDE and Flash Develop

In flash changing the publishing to AIR meant that it now pops up login and it all works fine. (I had to remove a few allowDomain lines out ).

In Flash Develop set the “project settings” – “Test Movie” to “play in new tab”.
I can’t remember if this prompts automatically but if not the 401 error message that appears in the output window shows the url it was trying to connect to and clicking it will prompt you for a login.

Any easy options I’ve missed?

graphics.curveTo through point

Mike — Sun, 15 Nov 2009 21:21:02 +0000

When I was doing the rope demo a few posts down I had to use the graphics.curveTo, but get it curve through a point instead of using the point as a control. I found a function a while back that I’ll try to source so I take no credit for it, but this is my revision of if.

function curveThroughPoint($start:Point,$mid:Point, $end:Point ):Point
{
return new Point( 2 * $mid.x - 0.5 * ( $start.x + $end.x ), 2 * $mid.y - 0.5 * ( $start.y + $end.y ) );
}

Then you can use something like

var startPos:Point = new Point( 100, 100 );
var midPos:Point = new Point( 200, 200 );
var endPos:Point = new Point( 300, 300 );

midPos = curveThroughPoint( startPos, midPos, endPos );

this.graphics.lineStyle( 2,0x000000 );
this.graphics.moveTo( startPos.x, startPos.y );
this.graphics.curveTo( midPos.x, midPos.y, endPos.x, endPos.y );

here’s me quickbox2d rope example that used it

facebook style post dates

Mike — Sat, 14 Nov 2009 18:24:55 +0000

A very quick bodge function for returning a nice post time.
Returns stuff like “2 seconds ago”,”23 minutes”, “about an hour”, “3 hours ago”,”yesterday at 3:00pm”,”wed at 3:00pm”, “Nov 2 at 3:00pm”

Haven’t tested it much so might want a tweak and I haven’t added year as I don’t really need it. Leave the second parameter out to use the system date as current.

trace( postTime( new Date( "18:07:12 2009/11/14" ) ) );

function postTime( dateToCheck:Date, currentDate:Date = null ):String
{
if( currentDate == null ){
currentDate = new Date( );
}
var day_name:Array = ["Sun","Mon","Tues","Wed","Thurs","Fri","Sat"];
var month_name:Array = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sept","Oct","Nov","Dec"];
var theTime:String;
var day_dif:int;
var seconds:int = ( currentDate.valueOf() - dateToCheck.valueOf() ) / 1000;
if( seconds < 60 ){
return Math.max( 2, seconds ) + " seconds ago ";
}else if( seconds < 3540 ){
return Math.round(seconds/60) + " minute"+ ( seconds<120?"":"s" ) + " ago ";
}else if( seconds < 6500 ){
return "About an hour ago";
}else if( seconds < 86400 && ( currentDate.day == dateToCheck.day ) ){
return Math.round(seconds/3600) + " hours ago";
}else{
theTime = ( dateToCheck.hours % 12 ) + ":" + dateToCheck.minutes + (( dateToCheck.hours>12 )?"pm":"am");
dateToCheck.hours = currentDate.hours;
day_dif = Math.round( ( currentDate.valueOf() - dateToCheck.valueOf() ) / 86400000 );
if( day_dif == 1 ){
return "Yesterday at " + theTime;
}else if( day_dif < 7 ){
return day_name[ dateToCheck.day ] + " at " + theTime;
}else{
return month_name[ dateToCheck.month ] + " " + dateToCheck.date + " at " + theTime;
}
}
}

Chaos Pendulum

Mike — Sat, 07 Nov 2009 13:51:58 +0000

We saw a program that had a double pendulum called the chaos pendulum and my girlfriend said I should try and make it, so I had a quick play in quickbox2d. It was being used as an example of chaotic looking movement that wasn’t random. Here’s a real one.

and here’s the flash on, it’s not as good but box2d does an interesting job.

let’s test putting some code on here.. then you need to get quickbox2d…

import com.actionsnippet.qbox.*;
stage.frameRate = 60;

var sim:QuickBox2D = new QuickBox2D(this);

var $x:Number = 9
var $y:int = 4
var $length:int = 5
var $radius:Number = 0.5

var pin_to:QuickObject = sim.addBox({x:$x, y:$y, width:0.5, height:0.25,density:0, maskBits:0x0008 } );
var top_pendulum:QuickObject = sim.addBox({x:$x, y:$y+($length * 0.5), height:$length,width:1.5,friction:0,restitution:0 } );
var bottom_pendulum:QuickObject = sim.addBox({x:$x, y:$y + ( $length * 1.3 ), height:$length,width:0.75,friction:0,restitution:0 } );

//SET UP JOINTS
sim.addJoint( {type:"revolute",a:pin_to.body,b:top_pendulum.body,collideConnected:false, x1:$x, y1:$y, x2:$x, y2:$y } );
sim.addJoint( {type:"revolute",a:top_pendulum.body,b:bottom_pendulum.body,collideConnected:false, x1:$x, y1:$y+( $length * 0.9 ), x2:$x, y2:$y+$length-0.25 } );

sim.start();
sim.mouseDrag();

//ADD RANDOM ANGULAR VELOCITY ON CLICK
//JUST SETTING THE bottom_pendulum SEEMS TO WORK
stage.addEventListener( MouseEvent.CLICK, clicked );

function clicked( e:MouseEvent ):void
{
bottom_pendulum.body.SetAngularVelocity( 10000-Math.random() * 20000 )
}

Quickbox2d string and balls

Mike — Fri, 06 Nov 2009 00:15:43 +0000

Right my first geeky quick flash experiment…… Skip past the text and take a look at the fun.

A few games I’ve been working on at the mo have required some 2d physics so I’ve been looking at box2d again. The last thing I did with it was “banana cannon” balancing game for Gorillaz Bananaz. Since then actionsnippet.org has packaged up box2d into quickbox2d making it “quick”. It’s worth a look.

Anyway one of the things needed was a nice looking rope/wire effect connecting 2 objects that would allow them to move freely when the rope wasn’t tort. I couldn’t find a single joint that didn’t affect the rotation of the other object while moving around. I’m sure there’s probably a better way, but I managed to achieve the effect by creating a an extra hidden object like a knee inbetween the 2 and applying a distance joint from the knee to each object. Then to cheat a nice bendy/rubbery rope look I drew a line using curveTo going from one object to the other bending towards the knee. Take a look below.

And behind the scenes

UPDATE:
I’ve added a post about calculating a point to make curveTo curveThrough a point. It’s how the string curves towards the knee.
graphics-curveto-through-point