nice, Ralph!

Hier, krijg je een aantal tips van me waarmee je wellicht je actionscript 3 programmeerkunsten ietwat kunt verbeteren. Deze post is niet bedoeld voor geavanceerde actionscript 3 programmeurs, maar voor de beginners en overstappers van actionscript 2.

1. probeer niet opnieuw het wiel uit te vinden
Je kunt zelf een fantastische 3D engine in actionscript gaan schrijven. Maar waarom zou je? Er is er inmiddels een aantal die al een tijdje meegaan en nagenoeg alle klappen van de zweep hebben gehad. Ander bekend voorbeeld; een tweening engine. Ook daar zijn er inmiddels zoveel van dat het eigenlijk zonde van de tijd is om er zelf een te gaan schrijven voor gebruik in je projecten. Een goed begin is riaforge.

2. verdeel en heers
Probeer je code -desnoods achteraf- in kleine classes en methods te verdelen. Je code blijft zo overzichtelijk en begrijpelijk. Een ander voordeel is dat je vaak een aantal kleine methods heel handig kan hergebruiken binnnen je class. Als je bijv. steeds een aantal clips gaat uitfaden en daarna verwijderen kun je ook een method maken die je een array met clips kan meegeven. Deze method handelt verder alle benodigde acties af voor elk van de clips en zo kun je ‘m keer op keer hergebruiken.

3. denk vooruit, hergebruik
Als je één keer een groot formulier hebt gechecked, wil je dat bij een nieuw project niet opnieuw programmeren. Bouw daarom je eigen framework op. Maak bijv. een class die alle mogelijke formulier elementen kan valideren. Of een class die de extentie uit een filenaam kan halen. Of wat dacht je van een DataManager class die een xml file inleest en meld wanneer dit gereed is. Als je dit niet steeds opnieuw hoeft te programmeren kun je je telkens meer bezighouden met innovaties.

4. ruim meteen op
Een enorm belangrijk -en nog steeds onderschat- aspect van programmeren is het opruimen. De player ruimt zelf een hoop op als objecten ineens niet meer bestaan, maar je wilt zelf de controle houden en zeker weten dat er geen listeners of timers blijven draaien. Daarom, telkens als je listeners aan objecten hangt, maak dan meteen een method die ze er weer af haalt. Maak je timers aan, maak een method die ze weer weghaalt. Maak bij grotere projecten bijv. een interface class aan die een cleanup method voorschrijft, zodat je telkens gedwongen word de boel op te ruimen. Dit kan het verschil maken tussen een stabiele of labiele applicatie.

5. gebruik proxies
Proxy classes zijn doorgeefluiken. Een goed voorbeeld is een proxy voor een verbinding met iets buiten je applicatie (bijv. een webservice). Stel je hebt een applicatie gemaakt die via verschillende classes met een database praat. Het script dat dit verzorgt is in php geschreven en je roept steeds een script aan met paramaters. Als je nu ooit deze scripts gaat veranderen naar asp, of je zet de boel op een andere plek, moet je in al je classes je methods aanpassen. Misschien gaat de afhandeling wel ineens heel anders of krijg je ineens objecten terug i.p.v. een simpele string.
Als je een procy class schrijft die alle handelingen overneemt en waar dus de volledige communicatie in zit met al deze scripts, hoef je in je applicatie classes alleen de proxy class aan te spreken. Verandert de backend volledig, dan hoef je alleen je proxy aan te passen (of je schrijft een nieuwe proxy, zodat je kunt wisselen).
Een simpeler voorbeeld is die ik zelf vaak gebruik: een proxy class voor statistieken. Deze class koppel ik in eerste instantie aan Google Analytics, zodat ik de proxy class kan opgeven wat ik wil meten en Google dit opslaat. Als ik nu een ander systeem kies, kan ik dit gewoon in mijn proxy class aanpassen, zonder dat de applicatie daarvoor op de schop hoeft.

6. doe onderzoek
Vaak heb je iets al eens geprogrammeerd en lijkt het voor de hand te liggen om dat weer zo te doen. Heel goed in het kader van hergebruik. Maar, elke situatie is een nieuwe en soms moet het anders aangepakt worden. Maak daarom zoveel mogelijk tests en kijk goed hoe je applicatie reageert m.b.t. geheugengebruik, framerate, stabiliteit, etc. Probeer bij een project met veel video wat beter werkt: video’s eerst helemaal inladen, of streamen met een juiste buffer instelling. Probeer in een game wat stabieler is, een vliegtuigje elke cycle naar al z’n enemies laten kijken of ie ze raakt, of een klein aantal denkbeeldige vlakken bijhouden waarin elke enemy z’n positie opslaat. Programmeer het en kijk wat er gebeurt.

7. gebruik een debugger
Onderschat nooit de kracht van debugging. Er wordt je ineens zoveel duidelijk als je ziet dat het bericht dat je wilt laten zien niet getoond wordt, dus dat je method helemaal niet eens wordt uitgevoerd. Je zult een hoop aha-erlebenissen beleven als je flink “om je probleem heen” debugt. Je kunt trace gebruiken, maar ik raad je echt een debugger / logger aan. Vaak kun je daar met kleuren veel duidelijkheid scheppen in je output. Daarnaast zijn deze eigenlijk allemaal voorzien van recursieve object explorers. Je geeft gewoon een object aan de debugger en in je output krijg je netjes alle properties en methods etc. te zien, zo diep als je aangeeft.

8. try … catch en if !null
Omdat actionscript 3 veel stricter is dan zijn oude vader, actionscript 2 en de player vanaf versie 9 veel professioneler en gestructureerder is dan oudere, bestaan er tegenwoordig runtime errors. “Vroeger” liep de applicatie gewoon vast en daarmee meteen je browser. Nu zie je runtime errors in een window met de mogelijkheid alle verdere scripting uit te schakelen. Deze meldingen wil je niet aan je gebruikers laten zien. Je wilt ze afvangen. Dat kan met try & catch of door na te kijken of je objecten wel bestaan.
Stel je hebt een flink aantal objecten die op elk moment verwijderd kunnen worden door bijv. interactie. Als je dan een timer hebt lopen die alle objecten telkens update zul je fouten krijgen op het moment dat er één wegvalt. Je moet in je update loop dus een check inbouwen of het object nog wel bestaan. Dat kan door te kijken of het object niet null is. Je kunt ook een array met de objecten bijhouden en als het object wordt verwijderd deze array updaten.
Als je dit soort situaties niet zelf in de hand hebt, kun je try & catch gebruiken. Je probeert daarmee de actie die je wilt uitvoeren en als dit niet lukt vang je de runtime error af en doe je er mee wat je wilt in je catch. Heel handig als je dit in een debugger met een rode kleur afbeeld, zodat je meteen ziet dat er iets misgaat.

Steeds meer banners worden tegenwoordig ook in actionscript 3 geprogrammeerd. En dat is voor veel bannerkoninkjes het begin van een hoop ellende, want er bestaat geen _root.clickTag meer (en getURL ook niet)!

Geen paniek jongens en meisjes! Hieronder kun je een actionscript 3 template downloaden waarmee je automatisch de clickTag weer gebruikt die als flashvar wordt meegegeven.

update: werkt ook op deze manier: [ link ]

[ download as3 banner template ]

Voor de copy-&-pasters onder jullie: Maak een hitBut op de stage en gooi deze code erbij. Recipe for succes.

var clickTagUrl:String;

try
{
 var keyStr:String;
 var paramObj:Object = LoaderInfo(this.root.loaderInfo).parameters;
 for (keyStr in paramObj)
 {
 if (keyStr == 'clickTag' || keyStr == 'clickTAG')
      clickTagUrl = String(paramObj[keyStr]);
 }
}
catch (error:Error)
{
 trace( error.toString() );
}
if (clickTagUrl == null)
{
  trace('!! no clickTag found !!');
}

hitBut.addEventListener(MouseEvent.CLICK, jumpToUrl);

function jumpToUrl(e:MouseEvent):void
{
  trace(clickTagUrl);

  try
  {
   navigateToURL(new URLRequest(clickTagUrl), '_self');
  }
  catch (error:Error)
  {
   trace("error: "+error.toString());
  }
}

“What? The singleton pattern is gone in FDT3 actionscript 3?” No it’s not! You just have to alter a bit of code to get it to work. FDT didn’t include this template in their version 3. I got the pattern from “Actionscript 3 with Design Patterns“. Here’s the template code to have the CTRL-space-singleton action back again :)

Open FDT preferences, goto templates, then add a new one for AS3 (see pic below)

package ${enclosing_package}
{
	/**
	 * @author ${user}
	 */
	public class ${enclosing_type}
	{
		private static var __instance:${enclosing_type};

		public function ${enclosing_type}(enforcer:SingletonEnforcer) {}

		public static function getInstance():${enclosing_type}
		{
			if (${enclosing_type}.__instance == null)
				__instance	= new ${enclosing_type}( new SingletonEnforcer() );

			return __instance;
		}
	}
}
class SingletonEnforcer {}

Soms kom je van die sites tegen op het wereldwijde web waaraan je ziet dat iemand (of meerdere mensen) er met liefde aan doorgeploeterd heeft.

Nachten werk, liters energy drinks en koffie, misschien een aantal pakjes sigaretten en flessen whisky. Uiteindelijk werkt het allemaal, je hebt alles gecheckt, in elk detail heb je al je concentratie en aandacht gestopt die je op kon brengen.

Dan mag je heel trots zijn als het over deze website ging.

Another dream of actionscript. Although this time a daydream ;-)

Here’s the source

As a flash programmer or designer, you must run into this as wel. You have a big pile of png’s with transparency. You want to crop them to have as minimum transparency as possible (while maintaining the 1px transparent border).

Now here’s a tool for ya, which I created in AIR with Flex. Select a dir with PNG’s, then an output dir and off you go. It even outputs the crop positions (left, top, right, bottom) for you in a textfile.

This has no error handling yet, I’m just too lazy to build that. Here’s the full code. All up to you from here ;-) Oh, you need the as3corelib from Adobe for PNG encoding purpose.

update: Here’s the compiled air file for direct install (you’ll need to have AIR installed)

Remember the old days, with that toy full of spikes? Where you could put your hand on, or face, and it would follow your shape? Man, I’ve put some funny things in there :-)

So, for all you perverts, and the rest for that matter, here’s the chance to do it all over again. But then in a digital manner..

check: www.nrg3.nl/lab/IsoCamFun

Alrighty then, here’s the source files.

Being human beings, it’s in our nature to wonder about the things to come in the near future. It’s one of the reasons we’re inventing and innovating as we stride along the yellow brick road.

Hence, as an actionscript programmer, I wonder what the future will hold for actionscript. I’m deliberately pointing the arrow at actionscript instead of Flash, for actionscript has undoubtedly outgrown it’s mothers womb. Among the output formats today are not only swf, but also AIRborne, mobile and native desktop applications on multiple operating systems.

So the question is: where will actionscript be in.. say.. 2020? Will it still exist? And in what form? Will we have actionscript 4? Or even 5? Or is 3 robust and professional enough to withstand a decade of innovation?

I for one cannot go past the thought that it will absolutely still be alive (and kicking, for that matter). I think it even might still be actionscript 3. The flash players will continue to have amazing new features with every new major build, but my guess would be that actionscript 3 is powerfull and fast enough to cope with these options. But.. I might very well be wrong.

Now, since all you actionscript developers out there must have these same wonderings, I hereby invite you to comment on this article and share your thougts. I’m very curious for your replies!

Zie hier drie briljant kleine functies om het leven van een programmeur wat aangenamer te maken: normalize, interpolate en map. Ideaal voor het maken van scrollbars, sliders of andere ellende waarbij je de properties van twee objecten met verschillend bereik met elkaar laat communiceren.

normalize geeft je een value tussen 0 en 1 terug op basis van de meegegeven value en bereik. Interpolate doet precies het tegenovergestelde. Deze geeft je de waarde terug van een genormalizede waarde binnen het meegegeven bereik. Map is de geniale combinatie van deze twee functies.

public static function normalize(value:Number, minimum:Number, maximum:Number):Number
{
return (value - minimum) / (maximum - minimum);
}

public static function interpolate(normValue:Number, minimum:Number, maximum:Number):Number
{
return minimum + (maximum - minimum) * normValue;
}

public static function map(value:Number, min1:Number, max1:Number, min2:Number, max2:Number):Number
{
return interpolate( normalize(value, min1, max1), min2, max2);
}

Je hebt ‘m nog niet? Ok. Stel je hebt een slider gemaakt en links en rechts de waarden 1kg en 500kg gezet. Je slider loopt van xpos = 50 t/m xpos = 250. Je wilt na het sliden van de user weten welke waarde in kg ie heeft gekozen.

Je normalized eerst de xpos door vNorm = normalize(xpos, 50, 250) te doen. Je weet nu waar je zit op de slider tussen 0 en 1. Deze waarde geef je door aan de interpolate: vInt = interpolate(vNorm, 1, 500) en deze geeft je dan het exacte aantal kg terug. En dat kan dan in één keer met val = map(xpos, 50, 250, 1, 500)!