FlashFocus.nl - Weblogs

Performance tips

marcvz — Tue, 25 May 2010 21:18:47 GMT

Het leek me handig om een artikel te plaatsen met wat kleine performance tips.
Je performance in de gaten houden is een belangrijk onderdeel bij het maken van goede applicaties.
Bij de gemiddelde fotogallery of portfolio site is dit misschien niet zo'n big deal. Maar wanneer je met particles of games aan de slag gaat en je bepaalde code uitvoert in onEnterFrame handlers en veel door loops loopt, is het zeker de moeite waard om zo effici�nt mogelijk te programmeren.
Vaak zijn het kleine handigheidjes die je jezelf even aan moet wennen.

Als jullie toevoegingen hebben of onjuistheden opmerken. Dan hoor ik het graag.

Math.max en Math.min zijn traag

Het gebruik van Math.max en Math.min is erg traag in vergelijking met een if statement.

ActionScript 3 Code:

//In plaats van

var v1:Number = 10;
var v2:Number = 20;
var v3:Number = Math.max(v1,v2);

//prefereer ik (� 8.5x zo snel)

var v1:Number = 10;
var v2:Number = 20;
var v3:Number = (v1 >= v2) ? v1 : v2;

Math.abs is traag.

Het gebruik van Math.abs is erg traag in vergelijking met een if statement.

ActionScript 3 Code:

//In plaats van

var v1:Number = -10;
var v2:Number = Math.abs(v1);

//prefereer ik (� 7.5x zo snel)

var v1:Number = -10;
var v2:Number = (v1 < 0) ? -v1 : v1;

Math.floor is trager dan casten naar int.

Je kunt Math.floor eenvoudig vermijden door te casten naar int.

ActionScript 3 Code:

var v1:Number = 10.5;
var v2:int;

//In plaats van
v2 = Math.floor(v1);

//prefereer ik (� 3.5x zo snel)
v2 = int(v1);

Er is nog een snellere methode. Deze is wat minder leesbaar, maar 1.5x sneller dan de int(value) methode.

ActionScript 3 Code:

var v1:Number = 10.5;
var v2:int;

v2 = v1>>0;

Bovenstaande methodes werken alleen bij positieve getallen!
Als het getal ook negatief kan zijn moet je hier een check voor maken.
Dit is iets trager, maar nog steeds veel sneller dan Math.floor.

ActionScript 3 Code:

v2 = (v1>0) ? v1 >>0 : (v1>>0)-1;

Math.ceil is ook trager dan casten naar int.

Voor Math.ceil geldt eigenlijk hetzelfde als voor Math.floor.
Alleen kun je niet zomaar naar int casten en er 1 bij optellen:

Math.ceil(1.2) == 2;
int(1.2)+1 == 2;
Math.ceil(1) == 1;
int(1)+1 == 2;

Daarom gebruiken we een inline if statement.

ActionScript 3 Code:

var v1:Number = 10.5;
var v2:int;

//In plaats van
v2 = Math.ceil(v1);

//prefereer ik (� 2.5x zo snel)
v2 = (int(v1) == v1) ? v1 : int(v1) + 1;

En de bitwise methode zoals bij Math.floor geeft hier zelfs nog iets meer winst dan bij Math.floor het geval is.

ActionScript 3 Code:

var v1:Number = 10.5;
var v2:int;

v2 = (v1 >> 0 == v1) ? v1 : (v1 >> 0) + 1;

Bovenstaande methodes werken alleen bij positieve getallen!
Als het getal ook negatief kan zijn moet je hier een check voor maken.
Dit is iets trager, maar nog steeds veel sneller dan Math.ceil.

ActionScript 3 Code:

v2 = (v1 >> 0 == v1) ? v1 : (v1 < 0) ? (v1 >> 0) : (v1 >> 0) + 1;

Vermenigvuldigen is sneller dan delen.

ActionScript 3 Code:

20 / 2 
//is � 7% langzamer dan 
20 * .5;

Bitwise operations zijn super snel!

Het gebruik van bitwise operations kan je project een flinke performanceboost geven.
Deze zijn echt super snel mits ze gebruikt worden in combinatie met integers.
Als je Numbers gebruikt kun je zomaar voor verrassingen komen te staan.

ActionScript 3 Code:

var v1:Number = 20;
var v2:Number;

v2 = v1 * .5;
//is � 1.4x zo snel als
v2 = v1 >> 1;

Maar als we integers gebruiken:

ActionScript 3 Code:

var v1:int = 20;
var v2: int;

v2 = v1 >> 1;
//is � 1.6x zo snel als
v2 = v1 * .5;

Bitwise operations ronden je getallen wel af op hele getallen. Maar dat zie ik vaker als een voordeel dan een nadeel.
Bijvoorbeeld bij het uitlijnen van textfields. Je wilt textfields altijd op hele pixels plaatsen.
Vaak wil je een textfield in het midden van een knop zetten. Ik gebruik daarvoor de volgende code:

ActionScript 3 Code:

_txt.x = width-_txt.width >> 1;

Een aantal bitwise tricks die in je voordeel kunnen werken mits je ze gebruikt met integers:

ActionScript 3 Code:

//delen door 2
value >> 1;

//vermenigvuldigen met 2
value << 1;

//positief/negatief omdraaien (� 1.2x zo snel)
~value + 1; // is gelijk aan: value * -1; //en is gelijk aan:  -value

//even/oneven controleren
(value & 1) == 0; //is gelijk aan: (value % 2) == 0;

Integers zijn sneller dan Numbers.

Sommige van de hierboven beschreven methode gaan uit van een bepaald datatype.
De behaalde resultaten kunnen namelijk nogal verschillen tussen bepaalde datatypen.

Voorbeeld:

ActionScript 3 Code:

var v1:int = -11;
var v2:int;
//dit:
v2 = v1*-1;
//is sneller dan
v2 = -v1;

Maar, als je ditzelfde met Numbers doet:

ActionScript 3 Code:

var v1:Number = -11;
var v2: Number;
//is dit � 15% sneller:
v2 = -v1;
//dan:
v2 = v1*-1;

Over het algemeen zijn integers sneller.
Gebruik daarom ook altijd integers in loops en bij voorkeur uints als de loop optelt.
In flash player 9 was de performance van uints belachelijk slecht. In veel gevallen waren uints zelfs trager dan Numbers.
Hierom kozen veel developers voor ints als loop counter. Ik ben hier eigenlijk nooit in mee gegaan, omdat het meer sense maakt om uints te gebruiken in een positieve loop. Daar zijn ze immers voor.
Gelukkig is de performance van uints in flash player 10 zoals deze moet zijn. (hetzelfde of zelfs iets sneller dan ints)

loop voorbeeld:

ActionScript 3 Code:

for(var i:uint = 0; i<100; i++)
ipv
for(var i:int = 0; i<100; i++)
en ipv
for(var i:Number = 0; i<100; i++)

Als je loop counter negatief kan worden gebruik je natuurlijk ints.

Gebruik geen array.push als dit niet nodig is.

ActionScript 3 Code:

var arr:Array = [];

for(var a:uint = 0; a < 10000000; a++)
{
	arr[a] = a ;
}

is eens zo snel als:

ActionScript 3 Code:

var arr:Array = [];

for(var a:uint = 0; a < 10000000; a++)
{
	arr.push(a);
}

Gebruik Vectors waar je maar kunt.

ActionScript 3 Code:

var arr:Vector.<uint> = new Vector.<uint>();

for(var a:uint = 0; a < 10000000; a++)
{
	arr[a] = a ;
}

is eens zo snel als:

ActionScript 3 Code:

var arr:Array = [];

for(var a:uint = 0; a < 10000000; a++)
{
	arr[a] = a;
}

Sla de length van je array/vector op in een variable voor je gaat loopen.

ActionScript 3 Code:

var l:Number = arr.length;
for (var i:uint = 0; i < l; i++ )
{
	v2 = arr[i];
}

is 5x! sneller dan:

ActionScript 3 Code:

for (var i:uint = 0; i < arr.length; i++ )
{
	v2 = arr[i];
}

De 'one dot' regel.

Als je meerdere keren een property aan wilt spreken waar je meer dan ��n . voor nodig hebt, sla hem dan op in een lokale variable.

Voorbeeld:

ActionScript 3 Code:

var mc:MovieClip = new MovieClip();
mc.data = {};
mc.data.x = 10;

var value:Number;

var prop:Number = mc.data.x;

for(var a:uint = 0; a < 10000000; a++)
{
value = prop;
}

is 10x! zo snel als:

ActionScript 3 Code:

var mc:MovieClip = new MovieClip();
mc.data = {};
mc.data.x = 10;

var value:Number;

for(var a:uint = 0; a < 10000000; a++)
{
value = mc.data.x;
}

Gebruik de ternary operator.

De ternary operator is niet zozeer sneller dan een 'normaal' if statement, maar het maakt je code wel een stuk compacter en leesbaarder. Let wel op dat je het condition gedeelte altijd tussen ( ) zet. Doe je dit niet werkt je code prima, geen error aan de lucht. Maar het is 10% langzamer dan wanneer het condintion gedeelte tussen ( ) staat.

Dus:

ActionScript 3 Code:

result = (value1==value2) ? x : y;
//ipv
result = value1==value2 ? x : y;

ActionScript 3 Code:

var v1:Number = -10;
var v2:Number;

//dit:
v2 = (v1 < 0) ? -v1 : v1;
// is iets langzamer dan:
(v1 < 0) ? v2 = -v1 : v2 = v1;

In het bovenstaande voorbeeld gebruik ik persoonlijk altijd de langzamere methode.
We praten hier over een paar milliseconden op 10000000 checks. En ik vind de eerste methode een stuk leesbaarder.

Nog een lijstje met tips:

* Gebruik een zo strikt mogelijk datatype.
* Enterframes zijn sneller dan timers.
* Gebruik zo min mogelijk enterframe handlers en/of timer handlers.
* Constanten zijn sneller dan variablen.
* Zet geen 'zware' code in je constructors. Maak liever een init functie die je aanroept in je constructor.
* Callbacks meegeven is sneller dan events dispatchen.
* Test zelf hoe bepaalde optimalisaties uitpakken in jouw project.
* Draaf niet te ver door met optimaliseren. Een paar milliseconden winst in ruil voor een moeilijk leesbare code zou ik niet aan willen raden.

Stellingen in bovenstaand document zijn gebaseerd op testresultaten behaald met de flash 10.1 IDE player van CS5 op Windows Vista 64bit.
Vooral in flash player 9 kunnen de resultaten nog wel eens anders uitpakken. Test daarom altijd zelf en neem niet zomaar aan wat je op internet leest.

FF-Experiment voorbeeld : SFX

Neuro — Tue, 13 Apr 2010 12:56:24 GMT

Voor het eerste FlashFocus experiment een voorbeeld met particles en bitmapdata.

http://www.neuroproductions.be/ff/FFparticles.swf

Ik ga er wel vanuit dat je al een redelijke basis kennis hebt als je hieraan begint. Ik geef enkel een korte uitleg voor de iets 'moeilijkere' stukken. Maar als je specifieke vragen over dit voorbeeld hebt, mag je die natuurlijk altijd hier stellen. :)

De sourcecode kan je hier downloaden.

De 2 classe

Main class ( FFparticles.as)

ActionScript 3 Code:

package
{
	import flash.events.MouseEvent;
	import flash.display.Bitmap;
	import flash.display.BitmapData;
	import flash.display.BitmapDataChannel;
	import flash.display.Sprite;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import flash.events.Event;
	import flash.filters.BlurFilter;
	import flash.geom.ColorTransform;
	
	
	public class FFparticles extends Sprite
	{
		private var bmd : BitmapData;
		private var bmdPerlin : BitmapData;
		private var sizeH : int = 400;
		private var sizeW : int = 600;
		private var particles : Vector.<Particle> = new Vector.<Particle>();
		
		
		private var colorTransform : ColorTransform = new ColorTransform(0.999, 0.95, 0.6, 1, 0, 0, 0, 0);
		private var filter : BlurFilter = new BlurFilter(2,2, 1);
		
		
		
		public function FFparticles()
		{
			stage.scaleMode = StageScaleMode.NO_SCALE;
			stage.align = StageAlign.TOP_LEFT;
			
			bmd = new BitmapData(sizeW, sizeH, false, 0);
			var bm : Bitmap = new Bitmap(bmd);
			
			addChild(bm);
			
			bmdPerlin = new BitmapData(sizeW, sizeH, false, 0);
			
			var bmPerlin : Bitmap = new Bitmap(bmdPerlin);
			bmdPerlin.perlinNoise(200, 200, 5, Math.random() * uint.MAX_VALUE, false, true, BitmapDataChannel.RED | BitmapDataChannel.GREEN, false);
			bmPerlin.x = sizeW;
			addChild(bmPerlin);
			
			
			buildParticles();
			this.addEventListener(Event.ENTER_FRAME, loop, false, 0, true);
			stage.addEventListener(MouseEvent.CLICK, refreshNoise);
		}
		
		private function refreshNoise(event : MouseEvent) : void
		{
			bmdPerlin.perlinNoise(200, 200, 5, Math.random() * uint.MAX_VALUE, false, true, BitmapDataChannel.RED | BitmapDataChannel.GREEN, false);
		}
		
		private function loop(event : Event) : void
		{
			
			
			bmd.lock();
			bmd.colorTransform(bmd.rect, colorTransform)
			
			for each (var part : Particle in particles)
			{
				
				var kleur : uint = bmdPerlin.getPixel(part.x, part.y);
				var rood : int = kleur >> 16 & 0xFF;
				var groen : int = kleur >> 8 & 0xFF;
				part.speedx += (rood - 128) * 0.002;
				part.speedy += (groen - 128) * 0.002;
				
				
				
				
				part.x += part.speedx;
				part.y += part.speedy ;
				
				part.speedx *= 0.985;
				part.speedy *= 0.985;
				
				
				if (part.x > sizeW)
				{
					part.x -= sizeW;
				}else if(part.x < 0)
				{
					part.x += sizeW;
				}
				if (part.y > sizeH)
				{
					part.y -= sizeH;
				}else if(part.y < 0)
				{
					part.y += sizeH;
				}
				
				
				bmd.setPixel(part.x, part.y, 0xFFFFFF);
			}
			bmd.applyFilter(bmd, bmd.rect, bmd.rect.topLeft, filter);
			bmd.unlock();
			
		}
		
		private function buildParticles() : void
		{
			for (var i : int = 0;i < 20000;++i)
			{
				var part : Particle = new Particle();
				part.x = Math.random() * sizeW;
				part.y = Math.random() * sizeH;
				
				particles.push(part);
			}
			
			particles.fixed = true;
		}
	}
}

particle class ( Particle.as)

ActionScript 3 Code:

package
{
	
	
	public class Particle
	{
		public var x:Number;
		public var y:Number;
		
		public var speedx:Number =0;
		public var speedy:Number =0;
	}
}

Een korte uitleg

Als je heel veel particles wil gebruiken, kan je best geen individuele display objecten gebruiken, maar render je ze beter in een bitmap.
Hier doe ik dat door elke frame de pixels op de positie van de particles wit te kleuren.

ActionScript 3 Code:

for each (var part : Particle in particles)
{
	bmd.setPixel(part.x, part.y, 0xFFFFFF);
}

Om de richting te bepalen hoe de particles vliegen gebruiken ik perlin noise
Ik maak eerst een perlinnoise bitmap met enkel een rood en een groen waarde.
we geven de perlin noise ook een random seed, zodat de particles elke keer als we refreshen anders vliegen

Doormiddel van getPixel kijk ik welke kleurwaarde perlinnoise bitmap heeft op de posite van de particle.

Die kleur splitsen ik op in rood en groen waarde. De rood waarde bepaald de beweging in de x richting en het groen waarde de beweging in de y richting

ActionScript 3 Code:

bmdPerlin.perlinNoise(200, 200, 5, Math.random() * uint.MAX_VALUE, false, true, BitmapDataChannel.RED | BitmapDataChannel.GREEN, false);
var kleur : uint = bmdPerlin.getPixel(part.x, part.y);
var rood : int = kleur >> 16 & 0xFF;
var groen : int = kleur >> 8 & 0xFF;

part.x += (rood - 128)/10;
part.y += (groen - 128)/10 ;

Dit werkt, maar op deze manier komen de particles al snel tot stilstand in hun ideale positie.
Dit kunnen we opllosen door ipv de rood en groen waarde te gebruiken voor de verplaatsing, deze te gebruiken voor de versnelling. We tellen ze dus op bij de snelheid. Om de snelheid te dempen voeg ik nog een soort van wrijving toe (de *0.985 ). Die waarde 0.002 en 0.985 zijn proefondervindelijk gekozen. wijzigingen hierin geven een ander resultaat.

ActionScript 3 Code:

part.speedx += (rood - 128) * 0.002;
part.speedy += (groen - 128) * 0.002;

part.x += part.speedx;
part.y += part.speedy ;

part.speedx *= 0.985;
part.speedy *= 0.985;

Om de oude particles te laten weg te faden + om een trail effect te krijgen, bluren we de nog eens bitmap elke frame.

De keur van de trails wijzig ik door elke frame de volledige bitmap te laten colortransformen.

De colortransform werkt door de rood groen en blauw kleur waarde van elke pixel te vermenigvuldigen
we beginnen met wit 0xFFFFFF= rood 0xFF + groen0xFF + blauw 0xFF . Door de blauw waarde te vermenigvuldigen met een kleiner getal dan de rood en de groen waarde, daalt deze erg snel, en krijg je iets als 0xFFFF00 =geel, Het zelfde effect heb je met het verschil tussen de rood en groen multiplier , zodat je daarna ongeveer 0xFF0000 = rood krijgt. Op die manier fade de witte pixels van wit naar geel naar rood naar zwart. Door de multipliers te wijzigen kan je andere kleuren bekomen.

ActionScript 3 Code:

private var colorTransform : ColorTransform = new ColorTransform(0.999, 0.95, 0.6, 1, 0, 0, 0, 0);
private var filter : BlurFilter = new BlurFilter(2,2, 1);


bmd.colorTransform(bmd.rect, colorTransform)
bmd.applyFilter(bmd, bmd.rect, bmd.rect.topLeft, filter);

Je kan hier een hoop variaties op maken door het perlin noise te manipuleren (of zelfs een andere bitmap te gebruiken) Of door de berekening van de snelheid wat te wijzigen en met zijn parameters te spelen.

Veel plezier met dit experiment! Heb je leuke idee�n opgedaan en/of er je eigen experiment van gemaakt?
Post jouw inzending hier!

FlashDevelop Event Templates

mknol — Tue, 06 Apr 2010 07:24:02 GMT

Dit is geen superuitgebreidde blog, maar meer een handigheid voor FlashDevelop-gebruikers. Ik heb een aantal templates gemaakt die je kunt gebruiken om makkelijk events met parameters (met een mini-wizard) aan te maken:

http://projects.stroep.nl/flashdevelop/

Hoe te installeren

Ga naar FlashDevelop > Tools > Application files
- Ga naar templates/AS3Project
- Maak een folder, noem deze 'Events'
- Plaats de bestanden uit de zip in die folder
- Herstart FlashDevelop

Sorteren op datum, UTC string

marcvz — Tue, 23 Feb 2010 16:51:31 GMT

Ik ben bezig een eenvoudige class te maken om tweets in een swf te tonen.
De bestaande API's vind ik wat overkill voor hetgeen ik zoek. Ik wil gewoon een xml met de laatste 20 tweets van een bepaalde user en verder niets.

Die xml kun je gewoon ophalen bij Twitter:
http://twitter.com/statuses/user_tim...marcvanzon.xml

Omdat ik de mogelijkheid wil hebben om tweets van verschillende users in 1 array te hebben staan, moet ik sorteren op het created_at veld.

Twitter geeft hier een zogenaamde UTC string met de datum en tijd mee.
Leuk en aardig, maar hoe ga je dat sorteren?
Mon komt namelijk altijd voor Sat als je dat gewoon met een array.sortOn functie aanpakt.

Uren gezocht op internet leverde geen eenvoudige oplossing op. Dus ben ik zelf wat gaan proberen.
Uiteindelijk was het veel eenvoudiger dan ik had durven hopen.

ActionScript 3 Code:

//we maken een array met wat datums erin volgens het UTC format
var arr:Array = ["Tue Feb 23 00:11:49 +0000 2010", "Sat Jan 24 22:14:29 +0000 2009", "Wed Oct 28 19:41:35 +0000 2009", "Sun Feb 21 19:39:10 +0000 2010", "Sun Feb 21 19:39:11 +0000 2010"];
trace(arr);

//we maken een lege array.  Hierin maken we dalijk objecten met de datum in UTC string en in miliseconden.
var arr1:Array = new Array();
//we lopen door de array met datum
for (var a in arr) {
	//hier maken we de objecten met UTC string en de tijd in miliseconden vanaf  January 1, 1970, UTC.
	//uit de livedocs:
	/*
	* parse(date:String):Number
	* [static] Converts a string representing a date into a number equaling the number of milliseconds elapsed since January 1, 1970, UTC.
	*/
	arr1.push( { date:arr[a], time:Date.parse(arr[a]) } );
}
//vervolgens sorteren we de nieuwe array op miliseconden. Het item met de hoogste waarde komt vooraan in de array te staan.
arr1.sortOn("time", Array.NUMERIC);
//we draaien de array om, we willen immers niet het oudste maar het recentste item vooraan hebben.
arr1.reverse();
//en we loopen nog een keer door de array om te kijken of het gelukt is.
for (var a in arr1) {
	//we tracen het veld met de UTC string en concluderen dat het nog werkt ook :D
	trace(arr1[a].date);
}

3D Fractals

Neuro — Mon, 08 Feb 2010 20:29:17 GMT

Dit weekend heb ik wat zitten experimenteren met 3D fractals.

Maar in plaats van gewoon wat formules te copy-pasten an het internet, heb ik geprobeerd om zelf
nieuwe volumes te vinden. En dat bleek eigenlijk niet zo moeilijk.
Ze zijn natuurlijk niet zo spectaculair als de bekende mandelbulb en Julia fractals. Maar ik ben toch tevreden
over het resultaat. :)

Om de volumes te renderen, heb ik een simpele (en trage :p ) ray-tracer gemaakt die normal-maps genereerd.

Daarna heb ik en Pixel Bender filter gebruikt om de shading op de renders te zetten.

Een paar volumes die ik heb 'ontdekt':
(Het bizare is dat het allemaal puur wiskundige vormen zijn)

Hierbij de source code zodat je zelf ook kunt zoeken naar coole 3D vormen. :)

Custom Brushes met ActionScript

Neuro — Sun, 10 Jan 2010 13:43:31 GMT

Custom brushes in Flash, ik had ze al een paar keer tegen gekomen op het world wide interweb en steeds vroeg ik me af hoe ze dat deden. Dus heb ik dit weekend ook een poging gewaagd.

� Bekijk de swf

Het resultaat is nog lang niet perfect, maar goed, voorlopig voldoende...

Source code (het is een puinhoop) :)

Een 64K in Flash

dcm360 — Mon, 07 Dec 2009 20:22:21 GMT

Zo af en toe blader ik wel eens wat rond op scene.org, en hoewel dit eigenlijk weinig met Flash te maken heeft, kwam ik er vandaag toch iets tegen dat in Flash gemaakt is.

Een korte introductie voor degenen die niet precies weten wat een 64K precies is: Een 64K is over het algemeen een programma van 64KB groot, die dankzij zeer goede compressie en programmeerwerk een animatie laat zien die tot wel enkele minuten kan duren (inclusief geluid!).

Dus ik kwam nu een 64K tegen die niet een win32 programma is, maar een swf. Ik zou zeggen, neem eens een kijkje, en vergeet vooral niet dat al dit moois uit een swf van slechts 64KB komt!

Mijn migratie naar AS3: width, height en co�rdinaten

tijmen_4real — Sat, 28 Nov 2009 13:21:11 GMT

In een reeks blogs wil ik mijn migratie van ActionScript 2 naar 3 delen.
Hier weer eventjes een praktisch voorbeeld van nog een verschil tussen ActionScript 2 en 3.

Voorheen (in AS2) kon je de co�rdinaten van een MovieClip bepalen door naar de instantienaam te verwijzen en er een _x voor de horizontale en een _y voor de verticale co�rdinaat ernaast te zetten.

ActionScript Code:

mijnMovieClip_mc._x = 100;
mijnMovieClip_mc._y = 100;

In ActionScript 3 is het echter wat logischer gemaakt, door het _ teken weg te laten.

ActionScript 3 Code:

mijnMovieClip_mc.x = 100;
mijnMovieClip_mc.y = 100;

Dit maakt het allemaal wat makkelijker. Het stomme was dat als je dan een MovieClip afstemde op de width of height van de Stage dat het er een beetje verwarrend uit zag:

ActionScript Code:

mijnMovieClip_mc._x = Stage.width/2;
mijnMovieClip_mc._y = Stage.height/2;

De Stage.height of Stage.width werkte zonder het _ teken, maar bij een MovieClip moest je deze wel gebruiken.
Nu is er voor de Stage.height en Stage.width ook iets veranderd:

ActionScript 3 Code:

// co�rdinaten 
mijnMovieClip_mc.x = stage.stageWidth/2;
mijnMovieClip_mc.y = stage.stageHeight/2;

// afmetingen
mijnMovieClip_mc.width = stage.stageWidth;
mijnMovieClip_mc.height = stage.stageHeight;

Allemaal even wennen om het zo te doen, maar de manier van werken maakt het wel een stuk logischer! :D
En voor mijn migratie van AS2 naar AS3: to be continued....

Overstap van ActionScript 2 naar 3

tijmen_4real — Tue, 17 Nov 2009 16:16:58 GMT

Ik zat dus al een tijdje te twijfelen om over te stappen van ActionScript 2 naar ActionScript 3.
Nu ga ik dan toch over, en heb ik een duidelijke PDF gelezen van Adobe waarin in hoofdlijnen de verschillen tussen 2 en 3 worden behandeld.
Om iedereen die ook nog twijfelt ook mee te krijgen schijf ik deze blog waarin ik de, althans voor mij, belangrijkste veranderingen bespreek.
Eigenlijk is dit niet meer dan een directe vertaling van de Engelstalige PDF uit de bijlage, waar ik in heb geknipt en geplakt.

De onderstaande voorbeelden laten eerste de werkwijze in AS2 zien met daaronder de nieuwe werkwijze in AS3.

Voorbeeld 1: Naar een functie op de _root/main timeline verwijzen

ActionScript Code:

// de functie op de main timeline
function dumber():Void {
	trace("dumber");
}

// aanroepen vanuit ergens in je content
_root.dumber();

ActionScript 3 Code:

// de functie op de main timeline
function dumber():Void {
	trace("dumber");
}

// aanroepen vanuit ergens in je content
MovieClip(root).dumber();

Voorbeeld 2: Met interactiviteit van buttons omgaan

ActionScript Code:

function onButtonRelease():Void {
	trace("er is op de button geklikt");
}

function onButtonRollOver():Void {
	trace("de muis ging over de button heen");
}

mijnButton_btn.onRelease = onButtonRelease;
mijnButton_btn.onRollOver= onButtonRollOver;

ActionScript 3 Code:

function onButtonClick(event:MouseEvent):void {
	trace("er is op de button geklikt");
}

function onMouseOver(event:MouseEvent):void {
	trace("de muis ging over de button heen");
}

mijnButton_btn.addEventListener(MouseEvent.CLICK, onButtonClick);
mijnButton_btn.addEventListener(MouseEvent.MOUSE_OVER, onMouseOver);

Voorbeeld 3: Een link openen

ActionScript Code:

getURL("http://www.google.nl","_blank");

ActionScript 3 Code:

var url:URLRequest = new URLRequest("http://www.google.nl");
navigateToURL(url, "_blank");

Voorbeeld 4: Een keypress opvangen

ActionScript Code:

function onKeyDown():Void {
	var code:Number = Key.getCode();
	var char:String = String.fromCharCode(code);
	trace("Ingedrukte key : code : " + code + "char : " + char);
}

Key.addListener(this);

ActionScript 3 Code:

function onKeyDownHandler(event:KeyboardEvent):void{
	var code:uint = event.keyCode;
	var char:String = String.fromCharCode(code);
	trace("Ingedrukte key : code : " + code + "char : " + char);
}

stage.addEventListener(KeyboardEvent.KEY_UP, onKeyDownHandler);

Voorbeeld 5: Een MovieClip dynamisch toevoegen vanuit de Library/Bibliotheek

ActionScript Code:

attachMovie("mijnMovie", "clip", 10);

clip._x = 100;
clip._y = 100;
clip._alpha = 50;

ActionScript 3 Code:

var clip:MovieClip = new mijnMovie();


clip.x = 100;
clip.y = 100;
clip.alpha = .5;

addChild(clip);

Dit waren 5 voorbeelden van verandering als je overstapt van AS2 naar AS3.
Je vindt nog meer voorbeelden in de bijlage, het originele Migration CookBook van Adobe.

Er zullen ongetwijfeld een aantal typfouten in bovenstaand artikel staan. Mijn excuses hiervoor ;)....

Bijgevoegde bestanden

BA843910d01.pdf (599,3 KB, 280x geopend)

Chain [updated]

mknol — Sat, 14 Nov 2009 12:22:28 GMT

Ik heb een handige util class geschreven die ik graag met jullie wil delen. Het is om functies met verschillende intervallen (in ms) in een sequence aan te roepen. De 'Chain' kan gemakkelijk meerdere keren afgespeeld worden, zelfs in omgekeerde volgorde. :D

Bij deze een klein voorbeeldje, hoe je Chain kan gebruiken:

ActionScript 3 Code:

var myChain:Chain = new Chain();    
myChain.addEventListener( Event.COMPLETE, onComplete);
myChain.add(one, 2000).add(two, 500).add(three, 1000).play(2);

function one():void { trace("one") }
function two():void { trace("two") }
function three():void { trace("three") }
function onComplete(e:Event):void { trace("done.") }

/* trace output:
one two three one two three done.
*/

Wat gebeurt hier? Op de eerste regel maken we de classe Chain aan.Op de volgende regel gebeuren meerdere dingen: We roepen een add-function aan. Dit is een belangrijk onderdeel in de class. Hier geef je aan na hoeveel delay er is voor de volgende functie, en welke functie er nu uitgevoerd moet worden. add(one,2000); betekent dus dat functie 1 wordt uitgevoerd en dat er daarna 2 seconden gewacht moet worden voor de volgende functie. Zo gaat hij door met de volgende functies.
Aan het einde zie je de play-functie. Wat aangeeft dat er vanaf dat punt de functies uitgevoerd gaan worden, hoeveel keer het herhaald wordt. Daarna wordt het event COMPLETE dispatched.
Je kunt met deze classe dus je eigen patronen,sequenties en/of ritmes maken.

Ik ben een beetje ge�nspireerd door jQuery (wat hier niets mee te maken heeft), om de mogelijkheid te geven om add-functies achter elkaar te plakken.

Dat is wat de classe doet. Een koel ding vind ik dat je het ook in omgekeerde volgorde kunt afspelen:

ActionScript 3 Code:

myChain.playReversed(2);

/* trace output:
three two one three two one
*/

Natuurlijk kunt je ook tussentijds stoppen/doorgaan met de stop() / doContinue() functies, en je kunt nagaan of hij momenteel afspeelt met de isPlaying-getter

Dit zijn alle functies:

ActionScript 3 Code:

/// Constructor
public function Chain()

/// Voeg functies toe met een specifieke interval (in milliseconden).
public function add(func:Function, delay:Number = 0):Chain

/// Speel de  sequence af en roep de functies aan.
public function play(repeatCount:int = 0):void

/// Speel de  sequence in omgekeerde volgorde af en roep de functies aan.
public function playReversed(repeatCount:int = 0):void

/// Maakt sequest lijst leeg. Alle data wordt leeggemaakt
public function clear():Chain

/// Stop met spelen, gebruik doContinue() om verder te spelen
public function stop():void

/// Doorspelen na een stop 
public function doContinue():Chain

/// Reset indexen om naar begin te springen
public function reset():void

public function toString():String

/// Retourneerd of je momenteel aan het afspelen bent
public function get isPlaying():Boolean

Download: Chain (googlecode)

Ik hoop dat iemand er wat mee kan. Laat maar weten als je nog extra functies verwacht

updates 15-nov-'09
- private functions zijn protected
- add function is nu add(func,delay), dus andersom, en func is verplicht.
- Classe extend EventDispatcher en play/playReversed dispatchen Event.COMPLETE na afspelen van sequence
- code geoptimaliseerd/opgeschoont.

getBounds voor TextFields

mknol — Thu, 05 Nov 2009 19:45:05 GMT

Ik kwam erachter dat getBounds op een textfield niet de Rectangle teruggaf die ik verwacht :( Hij pakt namenlijk de omgrenzing van de background/border, ook al heb je die niet eens aan staan. Ik wilde zelf echt puur de omgrenzing van de tekst hebben. Ik heb hier een functie voor geschreven. Ik maak hier gebruik van getColorBoundsRect van een bitmapdata object. :)

Bekijk hier het voorbeeld (op mijn blog)
http://blog.stroep.nl/2009/11/getbitmapbounds/

Automatische code indentatie en copy-paste bug

Dauntless — Tue, 03 Nov 2009 23:59:29 GMT

Hallo,

Met de overstap naar de laatste versie van vbulletin werd ook heel de code highlighter onder handen genomen. Er waren toen echter nog enkele bugs: Zo werden linebreaks niet mee gekopieerd bij het copy-pasten van een volledig code blok en was er geen automatische indentatie, iets wat we vroeger wel hadden.

Na lang zwoegen, testen en hacken is het ons toch gelukt om deze twee problemen van de baan te schuiven. Vanaf nu kan je volledige stukken code vlekkeloos kopi�ren en worden talen die gebruik maken van accolades ({ en }) automatisch van indentatie voorzien.

Happy coding!

Tutorial voor een basic image viewer (in de oktober editie van Publish)

Ea.Z — Fri, 30 Oct 2009 20:08:54 GMT

Ik mocht voor Publish (sponsor van de zomercompetitie) een workshop schrijven over hoe je een basic image viewer maakt.

In de oktober-uitgave (die eerder deze week verschenen is) kun je deze tutorial volgen.

Voor de geinteresseerden: het magazine is zijn geld (�12�/uitgave) meer dan waard. ;)

Er werden ook wat foto's van mijn Flickr page getoond. (Ja, ik ben uiterst trots :D )

Beetje meer info kun je hier lezen (in het Engels)
Dit wou ik even meedelen ^^

Updates via Twitter

Tha Narie — Wed, 28 Oct 2009 22:46:20 GMT

Vanaf vandaag worden updates van de site automatisch naar Twitter gepost. Momenteel geldt dit voor Nieuws, Showcase items en Freaking sites.

Mochten jullie nog andere dingen op twitter gepost willen zien, of suggesties hebben voor andere manieren waarop updates naar buiten gebracht kunnen worden horen we dat graag!

[Tutorial] Cloth-Twist spin in After Effects

Ea.Z — Fri, 16 Oct 2009 23:25:49 GMT

Ik was daarnet 4 uur lang op zoek naar een oplossing voor een heel makkelijk effect. Echter is uitleg daarvoor vinden uiterst moeilijk. Ook ben ik op allerlei plugins voor AE gestoten die hopen geld kosten, en waar ik niets aan had... Uiteindelijk heb ik de oplossing gevonden maar ik vond het iets TE gemakkelijk om jullie in het duister te laten...

Korte uitleg:
Wat we hier gaan doen is een object rond zijn Y-as laten draaien. Maar op zich gebeurt dat vrij 'stijf' (zie plaatje)

Dit wil ik (we?) niet. We willen een beetje verbuiging tijdens het draaien, alsof de onderkant niet direct kan volgen. (zie plaatje)

Hoe doen we dat?

1.
Maak een composition (a) met daarin je te draaien onderwerp (ik heb hier het Devine logo gepakt). Enable de 3D switch, en maak een korte animatie waarbij je je item rond de y as draait over een aantal seconden tijd heen (zodat je later het effect duidelijk kunt zien) (ik ga ervan uit dat je weet hoe je dit moet doen)

2.
Maak nog een composition (b). plaats hier een gradient in. Orienteer hem verticaal (zodat de gradient van wit (boven) naar zwart (beneden) overloopt

3.
Maak nu een laaste composition (c). Plaats hier eerst de gradient composition (b) in. Plaats de logo composition (a) erboven.

4.
Rechtsklik de logo layer, en kies voor 'Effects >Time > Time displacement'.

5.
Ga naar de instellingen van de Time Displacement in de 'logo'-layer (a) effects. Bij de instelling 'Time Displacement Layer' kies je voor de gradient layer (deze waar de b composition op staat ;) )

6.
Bekijk nu de RAM preview. Je zult zien dat het stijve vlak van daarnet nu wat verbuigt tijdens het draaien. Speel met de Time Displacement settings tot je het naar je zin hebt :)

Final tip: Als je die gradient niet meer wilt zien kun je in deze comp (c) de gradient layer gewoon onzichtbaar maken ;) Time remapping zal nog altijd werken, en de gradient is niet meer zichtbaar.

Dit is natuurlijk maar ��n manier van de inzetbaarheid van Time Remapping. Ik kan me zeker voorstellen dat er nog veel meer leuke toepassingen zijn waar dit van pas kan komen.
Wat je hiervan moet onthouden is dat je time remapping kunt uitvoeren aan de hand van gradients. De snelheid van de gradient en de settings in de Time Displacement options laten je hierover heel wat controle hebben.

Veel plezier ermee.
Als er vragen zijn: kom maar op