I like to generate art and objects with Flash/actionscript. Mostly I use a bitmapdata for that and export this as a PNG-24. This works perfect in most cases. But sometimes I wish there was a simple way to export my art to a scalable vector graphic. This would save a lot of data, and I’ll be able to create unlimited large and sharp prints.

I started searching and found some nice-to-know options.

Save as PDF
If you have a PDF-printer installed, you could save the vectors as PDF (drawed with lineTo, curveTo etc). Just right-click on your flashmovie, and choose ‘print..‘. Then choose ‘Adobe PDF‘ or another PDF printer. This is very simple!
Downside; My flash movie is becoming very slow when I create a lot of shapes.. After all; That’s the reason I use BitmapData objects. Sometimes I let Flash render a whole night before saving it and maybe it create more then a million shapes. To be realistic; I think a million shapes wouldn’t be cool as vector graphic, I guess my Illustrator doesn’t like that or the printshop-dude starts crying 😉 However.. I think there are tools to optimize/clean shapes that could be helpful too.

Open vector formats
I didn’t know this exist (because I never searched for something like this), but there is a lot information about a SVG file format. A lot of vector programs support it already and even modern browser could show SVG file formats too.
I found this and this link. The opposite would be an great idea; It could be cool if we could export SVG. While rendering we could write/add into a file. Then I could use a small bitmapdata object, just show it and render it real-time. Downside; I think SVG doesn’t support blendmodes or filters.

I really think there is a lot more to explore. If anyone have some other suggestions or ideas, feel free to post it.

Since I’ve never updated my blog; Today was the day. Now I use WordPress 2.8 too. It took half an hour to backup my old files and setup the new one, so it was easier than I thought. The admin looks great!

Introduction

AS3 puzzle block game. Just for fun I created this puzzle-game. It is not very innovative, but it’s cool (and a little bit hard) to explore how to build this kind of game.  Don’t know the exact name for this game, so I called it block.game 😉

How to play

Click on groups of the same color. The bigger group, the more score. You get a message when no moves can be done, or when the board is empty.

How I created it – braindump

I’ve learned you need to think twice before starting coding. This game had some really challenges in it.

Challenge 1:
I know what you are thinking; the map is just an array. Well; that’s true. A challenge while creating the game was to find out what a left or right side in the game was. My array doesn’t know what rows are, because I choose to not use a multidimensional one. So I created a way to calculate what a row was. I used modulo for this. Take a look at this code to see how easy the problem could be fixed. It just took me a long time to get to this point, I guess. 🙂if ( index % mapWidth == 0 ) { // left side of board }
if ( index % mapWidth == mapWidth ) { // right side of board }
Conclusion: Modulo makes live easy. We need to use it more.

Challenge 2:
How to find all blocks around the active block? It loops around the active block to see if they had the same type (=color). If not; stop looping. If it does; repeat function from that point again with exception below the imaginary boundaries created in challenge 1. Well, this is a typical example to use recursive loops; I used it for this. Recursive programming is a bit hard to understand if you don’t work a lot with them. My conclusion: Learning recursive function is cool.

Challenge 3:
When you clear a column, the column should move to the left, right? I thought that would be very easy; just move all columns after the newest empty column just one position to the left and that’s it.
But it wasn’t that easy. I needed to loop through all the columns after the empty one, and push it them the left. But.. At the right side of the board there are empty columns too (if you clicked a empty row before). So Flash was thinking; Cool I’ve found some empty rows at the right side of the board. Yeah; put more to the left. 🙂 But there wasn’t more, because the column before the last empty column at the right side is the last one (you still get me?). Flash was recursively looping and after 15 seconds he gave up.. an infinite never ending loop. Conclusion; I needed to calculate the last not-empty-column first. Then find the empty columns between the first empty column in the middle of the board and the calculated not-empty-column. If found it; move that columns one position to the left.

I hope you like the game. I haven’t implemented a highscore (yet).

Code will be available soon on flashden.

Play @ games.stroep.nl
Buy source @ flashden.net

I’ve experimented with some tentacle/swirls. Every tentacle starts in the center and becomes smaller every time. I love it’s design; It looks like it is done with illustrator or something 🙂 but maybe a little bit more complex. I used fresh colors to make it look very trendy. The flowers and random letters are also generatively created.

All tentacle experiments can be found here.

Easily create an image without taking care of loaders and URLRequest etc.
Most simple usage of the Image class:
import nl.stroep.utils.Image

var myImage:Image = new Image(“myImage.jpg”);
this.addChild(myImage)
You can also add the most common eventListeners to the image:
import nl.stroep.utils.Image

var myImage:Image = new Image(“myImage.jpg”);
this.addChild(myImage);

myImage.addEventListener(Event.COMPLETE, onImageLoaded );
myImage.addEventListener(IOErrorEvent.IO_ERROR, onImageError );
myImage.addEventListener(ProgressEvent.PROGRESS, onImageLoading );

function onImageLoaded (e:Event):void {
trace(“image loaded!”);
}

function onImageError (e:IOErrorEvent):void {
trace(“image error”, e.text);
}

function onImageLoading (e:ProgressEvent):void {
trace(“loading image.. bytesLoaded=” + e.bytesLoaded + ” bytesTotal=” + e.bytesTotal );
}


Download
Check out the Image class at googlecode

Class to work/calculate with colors. You can easily abstract the red, green or blue values from a color.

Usage:import nl.stroep.utils.Color

// create orange color
var myColor:Color = new Color(0xFFCC00);

trace(“value”, myColor.value);
trace(“red”, myColor.red);
trace(“green “, myColor.green);
trace(“blue”, myColor.blue);


Download
Check out the Color class at googlecode

Today I created a googlecode account. Now I can easily share actionscript classes with you guys 🙂

check it out
http://code.google.com/p/stroep/
..or directly go to the source:
http://code.google.com/p/stroep/source/browse/