I am a bit proud to present you my first own framework: flashflowfactory. This mini-framework for actionscript 3 helps you to easily setup a flash website. flashflowfactory makes use of SWFAddress for deeplinking and TweenLite for transitions. When you need to create small/medium websites with deeplinking and basic transitions, flashflowfactory could help you develop faster. I mostly used it for custom projects like viral websites. The best of flashflowfactory is its simplicity (no need to learn hard design-patterns, it is really straight-forward if you know the basics). You don’t have to develop a page setup or start from scratch, but keep the freedom to build the site in your style.
// optional page name, which indicates where to start pageFactory.defaultPageName = “/home”;
// add default page settings, can also be overridden from the Page class pageFactory.defaultSettings = new PageSettings( new SlideTransition(), // transition (there are more transitions + you can easily create your own) Elastic.easeOut, // easing of the in-transition Strong.easeIn, // easing of the out-transition 1, // duration of the in-transition 0.7, // duration of the out-transition Alignment.MIDDLE_CENTER, // alignment of the page on the stage Alignment.LEFT_TOP // centerpoint position of the page );
// add page holder to stage addChild( pageFactory.view );
// load first page pageFactory.init();
This is the first release. The framework is still under development, and I really need some feedback. Some example projects will follow soon.
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.
package nl.stroep.display { import flash.display.Sprite; import flash.events.Event; import flash.utils.Dictionary; /** * Simple event managing sprite which automatically removes eventlisteners when the sprite is removed from stage. This class should be extended. * @author Mark Knol */ public class EventManagedSprite extends Sprite { private var eventsList:/*Array*/Dictionary = new Dictionary();
public function EventManagedSprite() { super.addEventListener(Event.REMOVED_FROM_STAGE, onRemoveEventManagedSprite) }
private function onRemoveEventManagedSprite(e:Event):void { super.removeEventListener(Event.REMOVED_FROM_STAGE, onRemoveEventManagedSprite);
for (var type:String in eventsList) { var events:Array = eventsList[type] as Array;
for (var i:int = 0; i < events.length; i++)
{
var eventObject:EventObject = events[i];
super.removeEventListener( type, eventObject.listener, eventObject.useCapture );
//trace("Auto removed listener ", type, eventObject.listener, "from", this);
eventObject.listener = null;
eventObject = null;
if (events.length == 0)
delete eventsList[type];
}
}
}
override public function addEventListener(type:String, listener:Function, useCapture:Boolean = false, priority:int = 0, useWeakReference:Boolean = false):void
{
super.addEventListener(type, listener, useCapture, priority, useWeakReference);
if (!eventsList[ type ])
{
eventsList[ type ] = [ new EventObject( listener, useCapture ) ];
}
else
{
eventsList[ type ].push( new EventObject( listener, useCapture ) );
}
}
}
} final internal class EventObject
{
public var listener:Function
public var useCapture:Boolean
public final function EventObject ( listener:Function, useCapture:Boolean ):void
{
this.listener = listener;
this.useCapture = useCapture;
}
}[/as]
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.
Quick post here. I’d like to share this very quick way to create an automatic ID or index to your class instances. Mostly I pass an index as parameter to the class instance, or I use a public var to set the index. Using this way it is very easy to create an automatically filled index, since you have to set this up once and never worry again 🙂
Take a look at this code: package { public class MyObject { private static var global_index:int = 0; public const INDEX:int = global_index ++; } }
As you see, I have created a static variable global_index, which is always the same to all MyObject classes. I also created a public constant ‘INDEX’, which would be unique in every instance. When the MyObject instance is created the index will be set to the global_index, and the global_index will increase by one. So that’s basically the trick to create the auto-increment index for your AS3 class.
[i]update: Changed global_index to a private static + removed constructor[/i]
Quick post here, a simple solution I found to have multiple keys enabled. Maybe most real game developers know better or more elegant solutions, but I found this useful enough to share it with you.
Here we go. Add these variable to your class. This is a Dictionary, which allows you to associate a value with an object key. private var currentKeys:Dictionary = new Dictionary();
Then, in your constructor or wherever you assign eventListeners, add these (well-known) listeners, with the callback functions: import flash.events.KeyboardEvent;
private function onKeyDown(e:KeyboardEvent):void { currentKeys[e.keyCode] = true; }
private function onKeyUp(e:KeyboardEvent):void { currentKeys[e.keyCode] = false; }
Inside your enterframe-event or timer (were you want to detect which keys are pressed), you could these kind of detection. import flash.ui.Keyboard; import flash.events.Event;
private function onUpdate(e:Event):void { if ( currentKeys[ Keyboard.SPACE ] ) { tank.shoot(); } if ( currentKeys[ Keyboard.RIGHT ] ) { tank.targetDirection -= 0.1; } if ( currentKeys[ Keyboard.LEFT ] ) { tank.targetDirection += 0.1; } if ( currentKeys[ Keyboard.UP ] ) { tank.speed += tank.acceleration; } if ( currentKeys[ Keyboard.DOWN ] ) { tank.speed /= 1.8; } }
I found that if you use some 3 or 4+ combinations of keys at the same time, the keyboard events are not triggered anymore, which is a bit of annoying bug in the FlashPlayer. I mean pressing forward and left and shooting at the same time could be a problem? Well; Hope this helps, I think its very easy and a great usage of the Dictionary.
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.
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: // option 1: Using the build-in function var distance:Number = Point.distance( point1, point2 );
// option 2: Using Math var distance:Number = Math.sqrt( point1.x * point2.x + point1.y * point2.y );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:
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.
Quick post, this time no Flash but a Photoshop and Illustrator action that saves me a lot of time. 🙂 First of all, I don’t use slides in Photoshop and Illustrator, but often I just make a selection, copy/paste that in a new window and then press ctrl-alt-shift-s to ‘save for the web’. I am doing this a lot of times when slicing objects. Since a while now I use an action for that. I hope this will help you too work faster. Key thing you have to remember is to create a selection and press F2..
It automatically does the copy/new/paste+’save for the web’+close for you.
Mocha ArtHouse is an experimental space that fuses the experience of art, culture and food, and exist as a platform for young artist and performers. ArtHouse brings new artist and audiences together in a manner that is accessible and inspirational.
The gallery was 21 december 2009. Unfortunately, I couldn’t see it in real life, because it was in India, and I live in the Netherlands (yes, almost other side of the world, 6.400km). It was great to work with those guys, they have showed some of my favorites and send me nice photo’s. Hope to have an gallery like this in Holland ever too (someone interested to do this?) 🙂
I am a bit proud to present you my first own framework: flashflowfactory.
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.
Quick post here, a simple solution I found to have multiple keys enabled. Maybe most real game developers know better or more elegant solutions, but I found this useful enough to share it with you.
Who follows me on twitter already noticed I’ve created a little app inspired by 
Quick post, this time no Flash but a Photoshop and Illustrator action that saves me a lot of time. 🙂 First of all, I don’t use slides in Photoshop and Illustrator, but often I just make a selection, copy/paste that in a new window and then press ctrl-alt-shift-s to ‘save for the web’. I am doing this a lot of times when slicing objects. Since a while now I use an action for that. I hope this will help you too work faster. Key thing you have to remember is to create a selection and press F2..
