Over met XML afbeeldingen laden gesproken, ik vraag me af wat voor manieren andere studenten hebben gebruikt. Ikzelf heb een XML bestand met in tags mijn bestandsnamen. Die laad ik dan in in een XMLList (een soortement Array waar ieder element 1 bestandsnaam omvat). Ik maak dan ook nog een array van Loaders (zie verder).. Vervolgens overloop ik die XMLList in een for-lus, ik steek de tekst van het huidige element in de List in een URLRequest (die dus constant overschreven wordt) en daar komt die Loader Array van pas => elk element zal de huidige URLRequest van dat moment laden.

Dan is het maar een kwestie van een paar variabelen te voorzien om de X en Y-positie te doen veranderen.

Om de afbeeldingen weer te verwijderen (als ik naar een andere pagina ga) check ik eerst of ik op het frame zit dat toegewezen is aan mijn picturespagina, als dat zo is overloop ik terug mijn XMLList en doe ik voor elk element uit de loader array stage.removeChild(loaderArray[index]).

Lijkt in orde te zijn.. alleen heb ik daarmee dus nog geen gallery waar je een afbeelding kan aanklikken en vergroten ofzo, maar soit.. het is genoeg geweest voor Flash vind ik

In case you care, de volledige code voor mijn XML images laden:

// XML loading
var xmlData:XML = new XML();
var xmlLoader:URLLoader = new URLLoader();
var imagesList:XMLList;

xmlLoader.addEventListener(Event.COMPLETE, displayPics)

xmlLoader.load(new URLRequest("images.xml"));

function displayPics(e:Event):void  {
	xmlData = new XML(e.target.data);
	parseURL(xmlData);
}

// Get data out of XML file, put it into a variable
function parseURL(xmlData:XML):void {
	imagesList = xmlData.Image.url.text();

	for (var i:uint = 0; i < imagesList.length(); i++) {
		var myLoader:Loader = new Loader();
		var myURL = new URLRequest(""+imagesList[i]);

		myLoader.contentLoaderInfo.addEventListener(Event.INIT, imageLoadHandler);
		myLoader.load(myURL);
	}
}

var positionXIndex = 0;
var positionYIndex = 0;
var teller = -1;
var loaderArray:Array = new Array();

// Put the images on the screen
function imageLoadHandler (evt:Event): void {
	teller++;
	//getting the loader object which casted the event:
	loaderArray[teller] = evt.target.loader;

        // 3 images are next to eachother on one line..
	if (teller == 3) {
		positionXIndex = 0;
		positionYIndex++;
	}
	//adding the loader to the stage:
	stage.addChild(loaderArray[teller]);
	loaderArray[teller].x = positionXIndex*250+150;
	positionXIndex++;
	loaderArray[teller].y = positionYIndex*200+200;
}

If you don’t understand Dutch then you can skip all of this and just read the complete code I posted below. It should make things clear enough!

Voor ik deftig aan mijn sidescroller-project ga beginnen is het wel nodig om vooraf te ontdekken hoe bepaalde dingen werken. Dingen die ik vooraf ga checken zijn: hoe kan je keyboard inputs gebruiken om een object te laten bewegen, om een (al dan niet geneste) animatie te starten, hoe je een soortement “zwaartekracht” kan implementeren en hoe je dan kan bepalen wat mid-air is of wat de begane grond is.

De twee eerste punten heb ik inmiddels afgerond. Keyboard inputs gebruiken op zich is eigenlijk zo moeilijk niet. Zie volgende code:

stage.addEventListener(KeyboardEvent.KEY_DOWN, keyPressed);

function keyPressed (event:KeyboardEvent):void {
       trace("you pressed a key!");
}

We moeten vooreerst aan het hele project een eventListener toevoegen. Het hele project heeft gewoon de naam “stage” (waar bvb vroeger de naam van een button stond). Het event is logischerwijs een KeyboardEvent en we willen registreren of een toets op het toetsenbord is ingedrukt. Dit kan met KEY_DOWN. Het omgekeerde hiervan is KEY_UP, dwz KeyboardEvent.KEY_UP zal zich voordoen als het toetsenbord niet wordt ingedrukt.

De “signatuur” van de functie keyPressed zou moeten begrijpbaar zijn.

Stel nu dat we de boodschap enkel willen tracen als de gebruiker een bepaalde toets indrukt en niet gewoon eender welke. Omdat we over een sidescrolling game bezig zijn zal ik maar meteen als voorbeeld het linkerpijltje gebruiken. Iedere toets heeft zijn eigen keyCode, die je kan gebruiken in ActionScript. Hier vind je al een vrij uitgebreide lijst met een aantal keyCodes maar het staat je vrij om verder te zoeken naar andere. In plaats van de keyCodes te gebruiken kan je ook gebruik maken van aliases, (zoals ipv te checken of de keyCode “39″ is, kan je ook checken of de keyCode de waarde heeft van “Keyboard.RIGHT”). Die heb ik hier echter eventjes niet bij de hand, maar je kan die natuurlijk gewoon zelf opzoeken.

Nu, om te checken of het linkerpijltje is ingedrukt:

function keyPressed (event:KeyboardEvent):void {
         if (event.keyCode == 37) {
                         trace("you pressed the left cursor key!");
         }
}

De event bij event.keyCode komt van de event bij event:KeyboardEvent in de signatuur. Zoals je wellicht weet kan je in de signatuur ipv ‘event’ ook gebruik maken van ‘e’ of ‘evt’. Dan vervang je gewoon event.keyCode door bijvoorbeeld e.keyCode. 37 is de keyCode voor de linkerpijl.

Je begrijpt nu (hopelijk) hoe we kunnen checken òf er een toets is ingedrukt èn welke toets dat dan wel moge zijn.

Als effect willen we niet dat er een boodschap getraced wordt maar wel dat ons ventje naar links/rechts zal bewegen. Dit is heel simpel en doe je gewoon door bij de positie op de x-as bij te tellen of op te tellen. Bvb we hebben een movieclip “ventje”, dan zetten we bij de if-functie gewoon:

function keyPressed (event:KeyboardEvent):void {
         if (event.keyCode == 37) {
                 ventje.x -= 3;
         }
}

En ons ventje zal 3 (pixels, neem ik aan?) naar links verschuiven. Analoog voor opschuiven naar rechts, alleen dat we daar dan uiteraard moeten optellen. Let wel dat er bij beweging op de y-as een soort “omgekeerde logica” (maar niet heus: de x en y-positie zijn ten opzichte van een oorsprong in de linkerbovenhoek) geldt: om naar boven te gaan moet je aftrekken, om naar onder te gaan moet je optellen.

Nu ons ventje schuift nu wel naar links of rechts, maar een echte mens moet ook zijn benen bewegen om te kunnen lopen. We willen m.a.w. dat een animatie afspeelt zolang we een toets indrukken. Jullie zijn vertrouwd met geneste animaties en dat is ook wat we hier zullen voor gaan gebruiken. De geneste animatie kan eender wat zijn, je zal in mijn voorbeeldfile zien dat dit gewoon een rotatie is, maar het gaat hem hier om het principe. Geneste animaties zijn makkelijk aanspreekbaar via ActionScript. Je hebt vast wel al over een heel project animaties beïnvloedt door middel van bvb stop(); of gotoAndPlay(0).

Bij geneste animaties is dit niet anders, alleen moeten we voor die instructies nog de naam van de parent movieclip zetten gevolgd door een punt. De parent is “ventje”, dus dit geeft bijvoorbeeld ventje.stop();.

Je zou dus het volgende kunnen bedenken:

function keyPressed (event:KeyboardEvent):void {
         if (event.keyCode == 37) {
                 ventje.x -= 3;
                 ventje.gotoAndPlay(0);
         }
}

En dan zou je denken “als we naar links gaan speelt een animatie af vanaf de 0de frame van die animatie”. Helaas zal je merken dat dit in de praktijk niet het geval is als je de toets blijft indrukken, omdat Flash hier roet in het eten komt gooien. Het zal lijken alsof de animatie niet verder komt dan de eerstvolgende frame. De verklaring hiervoor is simpel: als je een toets blijft indrukken in Flash, wordt dit niet herkend als 1 blijvende indruk, maar van een verzameling van allemaal aparte indrukken. Het komt er dus op neer dat de keyDown functie zal uitgevoerd worden.. en opnieuw en opnieuw… totdat we de toets loslaten. Dit heeft tot gevolg dat ventje.gotoAndPlay(0); zal uitgevoerd worden zolang we de toets indrukken, dus zal het lijken alsof de animatie niet start.

We moeten dus een manier verzinnen om toetsindrukken te blijven herkennen. Enter het event ENTER_FRAME. Dit is een constant event dat zich voordoet zolang je project loopt. We zullen gebruik maken van dit event en enkele variabelen om een blijvende toetsindruk mogelijk te maken.

We hebben een variabele van het type Object nodig met bvb de naam isPressed. Dan kunnen we gebruik maken van, ik verzin even een term, “deelvariabelen”, zoals bvb left en right:

var isPressed:Object = { left:false, right:false };

We zullen deze variabelen op true/false moeten zetten naargelang een toets wordt ingedrukt. Ik zeg jullie enkel dat je de deelvariabelen, zoals ze hierboven zijn opgebouwd, kan aanspreken als volgt: isPressed.left en isPressed.right. We zullen in totaal 3 EventListeners nodig hebben. Een eerste voor KeyboardEvent.KEY_DOWN. Deze zal een functie oproepen waarin we isPressed.left of isPressed.right op “true” zetten naargelang welke toets is ingedrukt. Jullie zouden ondertussen zelf moeten kunnen beredeneren hoe dit te doen.

We hebben nu ook expliciet een EventListener nodig voor KeyboardEvent.KEY_UP, die gewoon hetzelfde doet als de functie voor KEY_DOWN maar dan omgekeerd: de twee deelvariabelen moeten terug op false staan.

De derde EventListener is voor de voorgenoemde ENTER_FRAME.

stage.addEventListener(Event.ENTER_FRAME, update);

Indien de event ENTER_FRAME zich voordoet, roepen we een functie “update” op. Remember: ENTER_FRAME doet zich constant voor, dus de functie “update” zal keer op keer heropgeroepen worden, met een delay die niet merkbaar is voor het blote oog.

De signatuur voor de functie update ziet eruit als volgt:

function update(e:Event=null):void

Nieuw is dat we na een Event ook nog “=null” zetten. Meer weet ik daar niet van, maar het werkt voor mij dus laat ik het zo maar staan.

Het is in deze functie dat we ons ventje zullen doen bewegen en de geneste animatie zullen starten. M.a.w. wat daarnet in onze keyPressed functie stond, zetten we nu hier, als volgt (ik doe het nu enkel voor een beweging naar links):

function update(e:Event=null):void {
	if (isPressed.left == true) {
		ventje.x += 3;
		ventje.gotoAndPlay(0);
	}

	else {
		ventje.gotoAndStop(0);
	}
}

Het is belangrijk dat wie die else niet vergeten – anders zal de animatie blijven lopen, zelfs als we de toets loslaten.

Maar je zal alweer iets opmerken: het animeert nog steeds niet! De fout is dezelfde als daarnet, toen we nog sukkelden met “flash herkent geen blijvende toetsindrukken”. Herinner u dat ik zei dat de update functie constant zal heruitgevoerd worden. Dit betekent dat de instructie ventje.gotoAndPlay(0); zal blijven uitgevoerd worden zolang we de linkerpijl indrukken, dus de animatie zal steeds herstarten.

We moeten een geneste if-toevoegen:

function update(e:Event=null):void {
	if (isPressed.left == true) {
		ventje.x += 3;
		if (ventje.currentFrame == 1) {
			ventje.gotoAndPlay(0);
		}
	}

	else {
		ventje.gotoAndStop(0);
	}
}

Met die geneste-if check ik of de geneste animatie aan het lopen is, en indien niet, om die te starten. Indien de animatie wel loopt, laat die dan maar lopen tot we de toets loslaten (dan zitten we bij “else”). Hiervoor maak ik gebruik van currentFrame. De naam zegt het zelf, we checken op welke frame we zitten. Merk op dat ik check of hij op 1 staat. Je zou denken dat als je een animatie de instructie gotoAndStop(0) geeft, dat die dan naar de 0de frame gaat, maar er bestaat niet zoiets als de “0de frame” (check uw timelines maar). gotoAndStop(0) zal de animatie doen stoppen op de 1ste frame, dus currentFrame moet gelijk zijn aan 1.

Test het uit en dat zou moeten werken!

Ikzelf heb als voorbeeld niet gebruik gemaakt van een “ventje”, maar gewoon van 2 vierkanten (dit had ook met 1 vierkant gekunt, maar het gaat hem alweer om de principes)

http://megaswf.com/view/4f20a6973db2a8f5ae42e455709a3d1a.html

Je zal merken dat je de vierkanten met de pijltjes naar links en rechts kan doen bewegen, en dat het groene vierkantje enkel roteert terwijl je beweegt. Die rotatie doe ik met een geneste animatie (motion tween).

Voor de geïnteresseerden, mijn volledige code (comments in English):

// Gotta import some stuff
import flash.events.Event;
import flash.events.KeyboardEvent;
import flash.ui.Keyboard;

// Stop the entire animation and the nested animation of the green square
stop();

// A couple of variables we'll use in loops, these ones store if a key is being pressed or not
var isPressed:Object={ left:false, right:false };

// These Listeners will check if you're holding/not holding a key
stage.addEventListener(KeyboardEvent.KEY_DOWN, moveSquare);
stage.addEventListener(KeyboardEvent.KEY_UP, stopSquare);

// Now there is one important thing to remember: holding down a key does not count as one
// continuous keypress, but rather as a bunch of keypresses. Therefore, simply having a function
// when the key is pressed that says "move left, start movement animation" is not sufficient,
// because the animation would keep restarting.
// To counteract this, we have to listen for the event ENTER_FRAME, which is a constant event
// that occurs as long as you have the SWF file open.
stage.addEventListener(Event.ENTER_FRAME, update);

// This function is executed when we press the left or right cursor key. It will set
// the corresponding "isPressed" variable to true.
function moveSquare(e:KeyboardEvent):void {
	if (e.keyCode == 39) {
		isPressed.right = true;
	}

	if (e.keyCode == 37) {
		isPressed.left = true;
	}
}

// And this function does the opposite, it sets the corresponding variables to "false".
function stopSquare(e:KeyboardEvent):void {
	if (e.keyCode == 39) {
		isPressed.right = false;
	}

	if (e.keyCode == 37) {
		isPressed.left = false;
	}
}

// And this is the function that will constantly be executed. All we have to do in here
// is make our movieclip move, and start / stop the nested animation.
function update(e:Event=null):void {
	if (isPressed.right == true) {
		red_square.x += 3;
		green_square.x += 3;

		// If the currentFrame = 1, this means the animation has stopped. Contrary to what you
		// might think.. telling an animation to gotoAndStop(0) will actually bring its
		// currentFrame to 1, and not 0!
		// This if checks if the animation is not moving and if it's not, then make it move!
		//
		// This is necessary because, as said, the EVENT_FRAME event is a constant one, so if
		// we didn't have this if, the animation would keep being restarted anyway, defeating
		// the entire purpose of this function!
		if (green_square.currentFrame == 1) {
			green_square.gotoAndPlay(0);
			trace("right hit");
		}
	}		

	else if (isPressed.left == true) {
		red_square.x -= 3;
		green_square.x -= 3;

		if (green_square.currentFrame == 1) {
			green_square.gotoAndPlay(0);
			trace("left hit");
		}
	}

	else {
		green_square.gotoAndStop(0);
	}
}

With thanks to the people at ActionScript Forums for helping me out with this!

Next up: gravity and surfaces..

http://www.pcpro.co.uk/blogs/2010/03/24/photoshop-cs5-demonstrates-its-stunning-new-party-piece/

Be sure to watch the video, it’ll blow your minds!

For the lazy: Photoshop CS5 introduces a feature that allows you to quite easily remove elements out of a picture, for example, a tree in front of a blue sky. Using this content-aware fill thing the tree would be removed but it would be replaced by the blue sky, so you can keep the background intact! That’s really awesome.

Het resultaat:

Ik ben er persoonlijk nog niet zo zeker van. Het fleurt de boel wel een beetje op misschien, maar is het niet te afleidend? Hoe zorg ik dan dat het minder afleidt? Als ik de opacity lager zet dan is de foto te bleek.. Opinions please!

ps: ja ik weet dat er meer releases van NiN zijn geweest maar ik beperk me (althans voorlopig) tot de belangrijkste album releases..

Also now my “homepage” shows up and that’s my animation right there. It’s very simple and only uses some motion tweens but I can’t for the life of me think of anything better.

What I also added are ‘buttons’, ones that “trace a message” and everything, too! Navigation isn’t in there yet. The menu demanded a bit more time than I expected, after all every link is its own button. The menu that flies in during the intro is actually a completely different layer which is text-only decoration. I wouldn’t want to go through the hassle of creating seperate motion tweens for all of those buttons as well so this seemed like the simplest solution, only having all the buttons align properly with their fake-menubar counterparts was precision work and it’s still not perfect. Close enough though I guess.

So, yeah, check out the results here:

http://megaswf.com/view/c523e983c926e9d4f36aeecbf17dea25.html

Here’s the new intro SWF in all its glory:
http://megaswf.com/view/6ec2c30700d5c508baa80af7dcfc8fc8.html

Trent Reznor source picture (I cut it out myself, it didn’t turn out too badly I think):

Here’s a link to Starfuckers Inc. on YouTube but don’t expect too much of it, the song isn’t exactly the best one.. I just needed the scream

Let wel dat die foto op de achtergrond niet op iedere pagina zal verschijnen, dit is een placeholder waar ik uiteindelijk misschien mijn “masked video” zou kunnen zetten.

Ondertussen heb ik ‘m al geïmporteerd in Flash maar ik heb totaal geen idee wat voor intro-animatie ik wel zou moeten maken. Nu heb ik gewoon het NIN logo dat vergroot en meer belicht wordt in een ~5-tal seconden, maar het ziet er niet zo best uit:

http://megaswf.com/view/e3c7471f53ccaf23af836dfdd2078dbc.html

Vandaag was een productieve dag, de homepagina heb ik nog niet ontworpen aangezien daar later flash animaties zullen in moeten.. en ik ben nog niet meteen zeker hoe ik ze daarin zal onderbrengen. Ondertussen geen tijd verspillen natuurlijk, ik ben dan maar begonnen met iets simpelere pagina’s (waar er I guess geen flashfilmpjes ofzo moeten draaien) zoals deze. Please tell me what you think!

I’ve decided to which “band” I’d like to devote my Flash website – Nine Inch Nails! I’ve also started working on a Photoshop design for my site. So far, I’ve only got a pretty basic header but for some reason I kindof like it.

The first step was to obviously get the iconic NIN logo:

Next up was importing it into the Photoshop document, changing the colour (at this point, everything is the same solid colour) and making it partially transparent. The logo is a lot smaller now, what you see below is a straight print-screen meaning the logo is actually of that size in my PSD.

Fine and dandy but it looks pretty bland. If you search the internet for more NIN logos and sites, you’ll find that almost all of them have some effects put onto them, it never is just one colour. Obviously this version of the logo won’t be good enough so I dug around in Photoshop to see if I could improve it.

I am not a Photoshop expert at all, so that meant applying some random effects, tweaking it a bit without really knowing how it worked and seeing if the end result looked cool or not. After a little while I stumbled upon Bevel and Emboss and Contour. I actived them and put the “Highlight Mode” on Screen and it came out looking like this:

I don’t know about you people but I kindof like it in all its simplicity.

Now, time to start working on the rest..

Wat?: LAN-Party voor de ICT-studenten aan KAHO Sint Lieven (Technologiecampus Gent)

Wanneer?: Vrijdag 26 maart vanaf 19u30 tot Zondag 28 maart 16u

Waar?: J-Blok

Prijs?: Prijs voor een ticket dat heel het weekend geldig is is 12 euro, de prijs voor een dagticket is 9 euro (dagticket is geldig van ofwel vrijdag 19u30 tot zaterdag 14u ofwel van zaterdag 14u tot zondag 16u)

Hoe betaal ik?: Stort het juiste bedrag op 979-1449457-88 en vermeld je nickname en echte naam. Ben je geen Blue-lid maar wel bevriend met iemand die dat wel is? Laat die dan zeker een PM sturen naar een van de admins!

What else?:
Er worden maximaal 100 inschrijvingen toegelaten, snel zijn is dus de boodschap.

Drank:
De eerste 25 betaalde inschrijvingen krijgen een gratis drankconsumptie. Als je geluk hebt trakteer ik misschien nog een paar mensen Uiteraard is er op de GameEvent zelf een bar met frisse drank, betalen gebeurt via drankbonnetjes.

Food:
Food zal ter plekke aanwezig zijn, gekookt door de Bluecrew!

Games & competitions:
Er zal ter plekke een server draaien met dedicated servers voor games (oa UT, UT2k4, TF2). Een volledige lijst zal binnenkort online gezet worden, suggesties zijn altijd welkom, gelieve die te posten op het forum of naar een admin te PM’en!

Furthermore zal het op de GameEvent zelf mogelijk zijn om in te schrijven voor een competitie van een van die games. Wie het er het best vanaf brengt zal een prijs krijgen (welke? dit is nog onder voorbehoud, check back soon)

More info?:
Stuur gerust een mailtje naar mijn KAHO-adres (cedric.haegeman[at]kahosl.be) of stuur een PM op ICT-Blue.
Zie ook de topic op ICT-Blue zelf:
http://www.ict-blue.be/index.php/topic,19513.0.html

Please forward this blogpost to your families, friends and pets!
See you there!