parentNode.org

Speed|90 (from over at http://www.flashbookmarks.com/ and #flash) decided to put a challenge to me. He pointed out people have been making pong in smaller and smaller versions, and my task was to try and make a version of pong in 200 bytes. I sort of failed only managing 393 bytes. I was tempted to do the old __bytecode__() trick, though you would be suprised that it doesnt actually reduce much in terms of size (in my tests it increased in size). So I cut down the variable count, removed and calls to Stage and such, removed as many compares and ALU calls. The origonal was drawing the square using API calls, very wasteful, so I used the API to create a static square and re-sized it. I also used the with() { … } command to save the compiler from making explicit calls to b every time. Here it places it on the stack at the start but doesnt pop it off till you exit the with clause, saves 2*n+1 bytes where n is the number of calls to b within the block. I did have to sacrafice alot to get it to this size though, it no longer scales (calls to Stage take up a few bytes too many). This isnt the sort of approach I usually take to programming so it was fun to play around with what changes the size of a flash file for an hour. I took a screenshot to prove I did it, the irony being the screenshot is around 100x as big as the file itself…

Here is my version:

//
// Pong.4k (393 bytes game)
// by Matthew Lloyd
//
// inspired by monoPong-1k and mrdoob and Kirstof Neirynck
// http://www.crydust.be/blog/2008/01/30/pong05k-a-game-in-510bytes/
// http://pouet.net/prod.php?which=48976
// http://mrdoob.com/blog/post/485/

// speed
var v:Number = -10;
var w:Number = 10;

// player 1
var p:MovieClip = attachMovie("a", "p", 1);//createEmptyMovieClip("p", 1);

// player 2
var q:MovieClip = attachMovie("a", "q", 2);//createEmptyMovieClip("q", 2);

p._height = q._height = 80;

// ball
var b:MovieClip = attachMovie("a", "b", 3);//createEmptyMovieClip("b", 3);

// magic loop
function onEnterFrame() {

  q._x = 550;

  p._y = _ymouse;
  q._y = 400-_ymouse;

  // bounce top or bottom border
  with(b)
  {
	  _x += v;
	  _y += w;
	  if (_y<10 || _y>390)
		w = -w;

	  // bounce player1 or left border
	  // or player 2 or right border
	  if ((hitTest(p))
	  || (hitTest(q)))
		v = -v;

	  // someone scored
	  if (-10>_x || _x>540) {
		_x = 275;
		_y = 200;
		v = -v;
	  }
  }
};

Here is the screenshot: http://www.devslash.com/wp-content/smallpong.jpg
Here is the fla: http://www.devslash.com/wp-content/smallpong.fla
and here is the final file: http://www.devslash.com/wp-content/smallpong.swf

Playing around with our live communication technology we decided it would be cool to try to visualize how our users navigate our site realtime.

The result was great enough that I thought I would show it here.

http://nonoba.com/labs

Screenshot for those of you who are to lazy to goto the site:

One of the really cool things is that you can open this up in a separate window and see yourself navigate around on the site in realtime.

A friend of mine Seldaek pointed out a problem which to all intent and purpose seems incredibly stupid. It was a situation where the outcome is predictable and should be certain but the flash program disagreed…

More…Now the problem came down to a very simple program you can try for yourself if you have Adobe CS3 installed. Create a new AS2 Flash file, add a movieclip, give it an instance name. Now type this code on to a frame:

myMovieClip._alpha = 0;
myMovieClip.onEnterFrame = function()

{

  trace(this._alpha);

  this._alpha += 5;

  if(this._alpha >= 100)

    delete this.onEnterFrame;

}

If you go ahead and test this, you should see the fairly obvious effect of the MovieClip fading in and then sitting there. Effect wise this is nothing special. What is interesting however is that in the output window you should have something along the lines of:

0
4.6875
9.375
…
93.75
98.4375

Now then this isnt right! We are adding 5 to the alpha not 4.6875! What if we wanted to do something when the alpha == 50 ? It would essentially skip past this value and ignore our if trigger! Now yes we can get around this using round values or diffrent if clauses, but thats not what this article is about, so what is going on here?

Well it is due to the internal format of the _alpha value. The _alpha is held in a byte this gives us 256 possible values of _alpha. Now basically this means the minimum we can increment _alpha by is 0.390625 (100/256 because we are transforming the 0-100 values we have to to internal values) So when ever we read off from _alpha it will be a multiple of 0.390625. Lets prove this, 4.6875 / 0.390625 = 12 see the result is an integer, which says 4.6875 is a multiple of 0.390625. It is the same for all of these numbers in that list.

Now as you maybe thinking, this is stupid. Why cant it just hold a float value or integer instead of a byte, and make my life easier! Well on one hand I agree with you, on the other hand I can see why Adobe did this. Why have 4294967296 (2^32, unsigned integer max value) values for alpha ? Can you honestly tell me you can tell the diffrence between having millions of values and 256 values ? At the end of the day this was a compromise to save memory because we only need 256 alpha values.

Thanks to Seldaek and to Chris Benjaminsen.

Intro

This article is part 3 of 3 of a series of articles

I often find myself doing small self contained projects which has no relation to work nor my larger pet projects, these are either proof of concept tests, or simply me trying to help someone in #flash on Quakenet. Back in the days I would only share the files with the people involved, but I realized that that others might possible benefit from the example code. Although this might sound contradicting I am not a big fan of writing articles about everything I do, so therefore I just decided to dump the files (including source) into a folder on my server with directory browsing enabled.

The code is fare from anything I am proud about, but they are all just proof of concept or tests. Regarding license for the source, all are some form of open source, the one that does not specify a specific license is released under DWTHYW as defined below. I assumed that this was due to the collision detection and just wanted to see if I could do a faster implementation.

DWTHYW Licence 1.0
Do what the hell you want

Anyway lets look at some files:

Floating tabs

This specific file was made for a friend of mine who atually needed something like this in javascript. I just prototyped it in flash as I find it one of the fastest languages for doing visual things. The system fits in an any number of tabs into a defined area, and uses ordinary events for hover effects and such.
View
Download Source

Chain Reaction

This example I made for myself after playing boomshine. I noticed the game would lag when there was 50+ balls on the stage. I assumed that this was due to the collision detection and I just wanted to see if I could make anything that was faster. The swf have 500 balls, using a collision detection system that runs in O(n) time.
View
Download Source

Rain

Most of the users in the #flash irc channel on Quakenet is ofcouse notices trying to get started on flash. Flash not being the easiest framework to get the hang of creates alot of confusion, so what we to do is wrap new people up into groups and have a little shared development session. This is one of the results of such. No it does not use AS2.0 but the purpose is more to introduce people to the library and such.
View
Download Source

Blurring windows

This example was made after discussing on IRC about how one would do so. Shortly described it uses a bitmap canvas for each window and a costume controller for render order to ensure that everything is rendered and blurred in the correct order. Ohh and the apple logo was added after someone said that it was almost like Windows Vista.
View
Download Source

Epilogue

Again thease are just some of the files found in my dump folder. I have actually written separate articles about a few of the things found there before.

• Influence map based boids in Flash
• Flash 3D earth. (Including .fla)
• Flash 8 Bitmap plasma. (Including .fla)

Anyway I hope you like it all.

Intro

This article is part 2 of 3 of a series of articles

The 20th of February we where contacted by Svenn Andersen from TV2 zulu who wanted us to produce an online multi player racing game in flash. Svenn was one of the original stake holders in the Barda game for DR but left when the game was still in its design phase for an employment at TV2 zulu. Svenn did however still like the final Barda project and therefore decided to use us for the production of the racing game.

As the game was meant to be part of a site for a tv show called Zulu Djævleræs we of course had to be up and running before the first episode was aired. This presented a bit of a problem as the first episode was to air the 12th of April giving us less than two months to make the entire game. However after discussing back and forrth with Tv2 Zulu for about a week, we agreed to do the production of the game if we where allowed in broad terms to decide on how the game would work and look. Tv2 Zulu accepted these terms and on the 5th of April the game went online.

(more…)

Intro

This article is part 1 of 3 of a series of articles

So the first project I have chosen to show off is essentially a clone of google maps I wrote as a pet project a few months ago.

Technically there is nothing really special about this, and it has indeed been done before by the guys over at flashearth.com. I did however make my own implementation anyway as it seemed like a fun challenge, and a chance to play around with the tween class.

The system can currently show data from 3 different data sources; Blur marble, Second Life and SDSS. Notice that I did not implement any earth data, except for blue marble which was my original test data, as the people over at flashearth.com has already master that to perfection.

Hint: Drag with your mouse to move the map, use the zoom buttons or your mouse wheal to zoom.

(more…)

During an ordinary month I generate between 10 and 20 different flash projects, varying in complexity from realtime multiplayer games like Barda, and simple examples for people in #flash on quakenet like my Plasma effect. Sadly I rarely get around to write about these, so no one really knows what I am working on — except of course for the people I have on IM which i fanatically spam with everything i do.

Therefore I have decided to collect my best work from the the last 3 months, split it into 3 posts; one for each workday left in this week

• Part 1 of 3 - Monday - Google maps clone in flash
• Part 2 of 3 - Tuesday - Online multi player racing game
• Part 3 of 3 - Wednesday - Best open-source from #flash

I hope you will enjoy it.

Preface

During 2006 I had the pleasure to work on a fair amount of interesting flash projects, of tease the most advanced by any measure was Barda. Barda is a fully functional Isometric MORPG (Multi-player Online Role Playing Game). Currently players can create instances of two basic levels, in which they can hunt NPC’s for items and loot. To to progress from one basic level to the next, the player has to face a and defeat two boss-mobs (A minion and the master). Each game instance can support up to 8 players.

Go try the game

Sadly the game currently only exist in Danish. This is however not a large problem as the game is pretty self-explanatory as soon as you created a user. Therefore I have devised the following translated screen-shots of the process.
(more…)

Lately I have received quite a lot of emails about my barcode scanner. Most of these emails are by people requesting a ready to use version of the scanner. Apparently flash components are not so easy to use as I want them to be.

Therefore for anyone who wants to just put a working scanner on there website I suggest just using the following code:
(more…)

My friend Jonas Flensbak is about to finish his bachelor project in Computer Science. His subject of choice is flock behavior, with a focus on simulating flocks in computer games.

The study and simulation of flock behavior, which is called boids, was pioneered by Craig W. Reynolds who defined the following three simple rules for each member of a flock.

• Separation steer to avoid crowding local flockmates
• Alignment steer towards the average heading of local flockmates
• Cohesion steer to move toward the average position of local flockmates

(more…)