While playing with JSFL and trying to create a faster interface for my name it right.jsfl I stumbled across a very interesting function inside JSFL. There is a powerful function called fl.getDocumentDOM().xmlPanel which shows dialogs using .xml-files. Actually you could use XUL (XML User Interface Language), which kinda looks like a mix of HTML and Flex. If you need a GUI for your JSFL script, you can open a nice custom dialog using XUL.

Why create tools inside a tool?

Yes, the Flash is a very nice IDE. But with JSFL you can extend it. You can build your own snippets and tools. It could be very helpful to automate some boring things. I think it is very powerful to have the ability to extend your environment for your everyday tasks.

Show a dialog with JSFL

Create a dialog file
This is an example of XUL. Save it as test-dialog.xml in your local commands folder.

Open the dialog with JSFL
Save it as test-dialog.jsfl in the same folder as the .xml file.

Run it by clicking ‘Commands’ > ‘test-dialog’ in Flash; our custom dialog will show up. Nice!

Give me more; I want dynamic dialogs

If you check out the documentation of fl.getDocumentDOM().xmlPanel, you see you only can pass a uri to a xml file, but there is no way to pass a XML or Object to it. Adobe if you read this post; that would be nice. But I found a hack to create a dialog from JSFL by dynamically create a XML and save it as temporary file and open that one as xmlDialog. The file will be removed after showing the dialog.

This function displays a dialog from a (xml) string and returns the values like you would expect from the xmlPanel-function. You could use a XML object for this too, but I think it’s easier to hack some variables into it or make templates with strings.

Since you are dealing with strings, you can manipulate and add extra elements. This allows you to pass data from JSFL to your dialog.

So, can you make panels too?

I really hate custom panels, because I never get my workspace right for two screens (moving/closing/opening panels the whole day), so there is no room for other panels. I start loving JSFL-scripts because you can assign a shortcut-key to it, which runs the tool, without having a panel in my workspace.

Conclusion

I like to create handy snippets and will share more in the future. But if you thought (just like me) this is some kind of a new feature: It’s not. Let me know if you have some nice references or JSFL scripts to share.

Learn more:

• JSFL Reference (PDF)
• XUL controls
• XUL reference

Recently I found an interesting question on FlashFocus.nl, about creating light and shadows in a 2D environment. I started experimenting with this to see how far I could take it. I love to share the results and some insides about this fun project.

How to get started

The initial code that the topic starter used a loop through all objects, and used hitTestPoint-function to detect if the light hits a wall. Therefore he used a loop with 360 steps, used for all directions. In the innerloop it tries if it hits the wall, otherwise goes away from the light (using the direction of the outerloop), tries if it hits the wall. That loop goes on till it does hit a wall. It is a bit of trial and error, but I think it is very clever. At the end of each loop a lineTo is used to draw the light, so in the end it will be a shape with 360 vector points.

Speed of light

Now, that screams for optimization and speed. It’s a fun project to mix some things you have seen and want to try out for a long time. The first thing that I tried to make it faster, draw all objects into an BitmapData, and use the getPixel function instead of hitTestPoint, which is notable faster if you don’t move objects. I used that BitmapData object only too check if the light hits the objects; no one actually sees it. To use hitTestPoint, you must loop through all objects and detect if they hit. With a lot of objects, it would be slower. With BitmapData, you don’t need that loop, and you are free to use unlimited objects with even custom shapes. Less looping == faster, unlimited objects == awesome

More realism

I also wanted to make it look more realistic. Having light only is not close enough to realism. It needs shadows. I created an inverted shape of the light-shape and filled it with black (a). This creates a nice shadow, however has very hard bounds, which is ugly. So then I took the shape again and drawed with a nice transparent to black gradient (b). Those 2 layers have the BlendMode ALPHA. The holder of those has a solid shape fill (as big as the stage) with BlendMode LAYER. This creates a nice ‘hole’ which I think works very well as shadow if you make it half-transparent. Oh, the colored light-layer (c) is a gradient too, with the same shape as b, only with BlendMode ADD.

Re-using shape data

Another optimization I used was to use graphics data API. In this case I have 1 shape which could be reused 3 times. So before even drawing, I collect all points and commands in an Vector. When I have all data collected, it draws the light-layer and shadow-layer at first, then it pushes some extra points to the Array to make the outer shadow-layer. So with 1 Array of (manipulated) data I could draw multiple shapes. That’s a good case of using the graphics data, I guess.

Optimized trig functions

I also used the TrigLUT-class (Trigonometry LookUp Table) from jacksondunstan.com, since the loop heavily uses Math.sin and Math.cos. I could use the valNormalizedPositive() function from that class in this case. It’s very fast and for me it was fun to use that class.

But it is still too slow..

The most intense about this thing isn’t the calculation, but the rendering itself. The whole ‘canvas’ needs to be updated and redrawed every frame with lots of layers and blendmodes, which is very intense for the CPU. I don’t know if this would be possible with Stage3D, but that would be the last step to render really fast. And when that is possible, I’ll guess I could move the object real-time too, which makes it very interesting for games.

Check out the experiment:
» Lights and shadows

Let me know what you think about it and how does it perform on your computer?

I have created a JSFL script for those who are using the Flash IDE a lot. Renaming movieclips over a timeline with motion-tweens cost a lot of time. Assigning and replacing classes to a certain movieclip could also be done faster, and mostly name of the symbol relates to the names on stage. I have created a 3-step wizard called ‘name it right!’, to speed up your everyday workflow. This command helps you to update a layer name, base class, symbol name and instances on the timeline very fast.

Download/Save the .jsfl file directly:
» Name it right.jsfl (v1.1)

To indicate what happens when you run the command/script:

First select an instance on stage. Go to ‘Commands’ > ‘Name it right!’.
You’ll get these three questions.

Cancel means: do nothing.

Install / use the JSFL script

To get it inside the Flash IDE under ‘Commands’, copy the .jsfl file to:

Windows 7
C:\Users\{username}\AppData\Local\Adobe\Flash CS5 or CS5.5\en_US\Configuration\Commands

Windows Vista:
C:\Users\{username}\Local Settings\Application Data\Adobe\Flash CS5 or CS5.5\en_US\Configuration\Commands

Windows XP:
C:\Documents and Settings\{username}\Local Settings\Application Data\Adobe\Flash CS5 or CS5.5\en_US\Configuration\Commands

Mac OS X:
C:/Users/{username}/Library/Application Support/Adobe/Flash CS5 or CS5.5/en_US/Configuration/Commands

Run it by clicking the ‘Name it right!’ under ‘Commands’.

You could assign a key-combination under ‘Edit’ > ‘Keyboard shortcuts’ and then expand the ‘commands’-folder. I used CTRL-ALT-SHIFT-W for it.

Hope you could use it, post your feedback/suggestions below.

I hate removing listeners in AS3. So I created a work-around to autoremove them I know there are already some solutions for this, but some of them requires a complete new event system and it is just fun to create your own sources. This class overrides the default behavior of the addEventListener function. It stores references of the listeners inside a Dictionary. The class it selfs listens to the REMOVED_FROM_STAGE event, and when it is removed, then it removes all stored events.

UPDATE 11-10-2010: This code below is a bit outdated.
You’d better use this EventManagedSprite and this EventRemover. BTW: This is all included in FlashFlowFactory. This lightweight framework helps you to easily setup a flash website.

Make sure every class you add listeners extends this class to make the most out of it. Otherwise you just need to remove the listeners yourself. Let me know what you think about it.

Disclaimer: This class does not detect the eventlisteners on the children of the class. These children should extend the EventManagedSprite class too, otherwise you should remove it manually.

Who follows me on twitter already noticed I’ve created a little app inspired by scribbler from zefrank. I also found another cool version of Mario Klingemann aka Quasimondo called scribblerToo. But the one where it all started is the javascript version of Mr.Doob. I wanted to try this in flash, and called it findClosest. It’s not as great as the other versions, but I really think there are some interesting things in here.

See it in action
» FindClosest

The trick in this little application is to store each mouse position, locate the mouse position and find the closest points around it (from the stored data) and draw some lines between those points. Well that code isn’t very exiting, because most people know how to find the distance between 2 points, and basically there are 2 ways find this:

The results are amazing and I love the fact that even if you can’t draw, it looks really cool

Store lines as small as you can

I was already trying to find a way to store lines in a format I can reuse for my artworks. Most artworks are random but I am looking for a way to have more control. The first step would be the ability to control the (what I call) movements. So in this little experiment I’ve tried to find a way to store the lines into a compact file, which can be redrawed by the app. I’m really exited about this. So I’ve started to save as a plain-text file writing something like this:

{x:100,y:300},{x:110,y:340},{x:125,y:350},{x:125,y:350}

It’s readable code, and easy to These are 56 chars for 4 points. So I tried to make it more smaller using this:

{100,300},{110,340},{125,350},{125,350}

I’ve removed the x and y from the file, because I know that it’s always a pair of x and y values. Alright.. now I have 40 chars which represents 4 points, so that saves me 16 chars. Can this be done more smaller?

100,300,110,340,125,350,125,350

Yes, sometimes basic is the best. I removed the brackets. I know the odds are the x values, and the evens are the y values. It’s always x,y,x,y,x,y,x,y etc. So now I have 32 chars to store 4 points.

The application doesn’t know where I start pressing and releasing the mousebuttons. I have to know this, otherwise all my lines are just 1 big line instead of multiple lines. When pressing the mouse, I want to start with an graphics.moveTo function.

So what I did is this:

100,300,110,340,125,350,125,350&m=0,2

&m=0,2 means I have released the mouse on point 0 and point 2. A point referrers to the x and y position.

I think this is almost the smallest I can get. It’s easily to revert these values back to usable values using String.split().

But.. In real life there aren’t ints, but Numbers. The values mostly looks like 452.12070158. I stripped the value, and only use decimals. You don’t actually see the difference when redrawing between 10.04 and 10.042. This saves me a lot of chars too.

Compress it!
When saving the file, I push the data into a ByteArray using the bytes.writeUTFBytes() function. I realized ByteArrays can be compressed, so I also use the bytes.compress(); to make the file smaller again. This saves me about 50%! When importing the lines, I used bytes.uncompress(); to make it a normal string again.

This flower is 14kb Import this file in the app to see how I haved drawed it. You can also load it from an url: http://projects.stroep.nl/findClosest/flower2.stroep

flower on Flickr

Well this is a next step and I hope to create one day an editor for simple lines and merge this into my artwork process. I think it needs to be more complex but for now this will work. I hope you like it.

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.

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

Feeling creative; created a new serie with wild but odd colors. It has a happy abstract smoke-like feeling. It is hard to create good ribbons, but now I have find out a new way I kinda like. When I was experimenting with my ‘curved series’ (previous post), I already had the engine. But in this serie I left the borders, left the fade and added better movement and connection between the lines. It’s getting better every time. The curves and movements are based on a perlin noise. It took a lot of time till I get these four. The engine was right, but I have to deal with randomness. Mostly it doesn’t work and sometimes it does and now I have this:

I’ve created this one at 6000 x 6000 px. What do you think of it? if you are interested in buying one, please contact me info[at]stroep.nl.