AfterEffects, how to key your greenscreen footage [EN]

There are multiple ways to do this, i choose this method since it works for me. Be sure to light your green screen even, if the color is as even as possible you will get the best results. So try to avoid shadows and stuff.

Import your footage in AfterEffects and place it in a new composition. Rightclick on your video layer and choose: “effect” – “keying” – “color key”. In your Effect control panel you can choose the key color directly from your video with the dropper tool. With “Color Tolerance”, “Edge Thin” and “Edge Feather” you can smooth out your keying.

In the case of multiple tones of green in your footage i normally use the color key multiple times to get the best effect.

After you are done with the keying part it is time to either add a new layer under the keyed layer, or export your movie for use in Flash for example.

When you want to use your movie with the transparency in Flash, choose “Composition” – “Make Movie”. In your “Render Que” settings, click on “Output Module” – “Lossless”. Click behind “Format” on the pull-down menu and choose “FLV”. Click behind “Channels” on “RGB + Alpha”. Click OK. Now render your movie and once finished your footage is ready to be imported in Flash, with transparency!

3Ds max Work in progress

5 hours in the making, a Ford F-1 pick-up truck. Inspired by the great models a saw my students had made for my Game 3D art class i wanted to make yet another postapocalyptic vehicle. Not very postapocalyptic yet, but i have some really nice ideas and inspiration.

3Ds max time! Photoshop texture from scratch [EN]

After a workshop from Fransisco Peters about texturing from scratch in photoshop for the GAME Art 3D course. I had to make my own! Based on the style used in star wars the clonewars series (animated). I made a texture for a simple cube, the first assignment in the 3D course. Everything is handpainted in photoshop, using 32 layers.

I made a diffuse texture for the color, a specular for reflection and a normal map for extra detail in my model.

Flash AS3 CICA exercise video and interactivity

Voor bovenstaande flash exercise heb ik de volgende code gebruikt:

import flash.events.MouseEvent;
 
if (TekstShow==null) { // kijken of de vars bestaan, zo niet dan aanmaken
	var TekstShow=true;
	var isPlaying = false;
}
 
Mouse.hide();// muis verbergen
 
stage.addEventListener(MouseEvent.MOUSE_MOVE,follow);
 
function follow(evt:MouseEvent) {// movieclip met instance name "muis" koppelen aan muiscursor
	muis.x=mouseX;
	muis.y=mouseY;
}
// mouseover listeners die naar punten op de tijdlijn springen zodat je andere delen van de video ziet
Btn1.addEventListener(MouseEvent.MOUSE_OVER, goBtn1);
Btn2.addEventListener(MouseEvent.MOUSE_OVER, goBtn2);
Btn3.addEventListener(MouseEvent.MOUSE_OVER, goBtn3);
Btn4.addEventListener(MouseEvent.MOUSE_OVER, goBtn4);
Btn5.addEventListener(MouseEvent.MOUSE_OVER, goBtn5);
Btn6.addEventListener(MouseEvent.MOUSE_OVER, goBtn6);
 
function goBtn1(evt:MouseEvent) {
	gotoAndPlay(190);
}
function goBtn2(evt:MouseEvent) {
	gotoAndPlay(1);
}
function goBtn3(evt:MouseEvent) {
	gotoAndPlay(350);
}
function goBtn4(evt:MouseEvent) {
	gotoAndPlay(376);
}
function goBtn5(evt:MouseEvent) {
	gotoAndPlay(572);
}
function goBtn6(evt:MouseEvent) {
	gotoAndPlay(471);
}
// zelfde buttons als eerder, maar nu met een click om de tekst weg te halen, of te laten zien weer
Btn1.addEventListener(MouseEvent.CLICK, WegTekst);
Btn2.addEventListener(MouseEvent.CLICK, WegTekst);
Btn3.addEventListener(MouseEvent.CLICK, WegTekst);
Btn4.addEventListener(MouseEvent.CLICK, WegTekst);
Btn5.addEventListener(MouseEvent.CLICK, WegTekst);
Btn6.addEventListener(MouseEvent.CLICK, WegTekst);
//de functie om de tekst te hiden of showen, afhankelijk van of deze al zichtbaar is of niet
function WegTekst(evt:MouseEvent) {
	if(TekstShow==true) {
		DeTekst.visible=false;
		TekstShow=false;
	} else {
		DeTekst.visible=true;
		TekstShow=true;
	}
 
}
//geluid laden
var soundClip:Sound = new Sound();
var sndChannel:SoundChannel = new SoundChannel();
 
soundClip.load(new URLRequest("name.mp3"));
//als het geluid nog niet aan het spelen is, dan afspelen
if (isPlaying==false) {
	sndChannel = soundClip.play();
	isPlaying=true;
}
//luisteren of het geluid gestopt is, zo ja: weer afspelen
sndChannel.addEventListener(Event.SOUND_COMPLETE, onPlaybackComplete); 
 
function onPlaybackComplete(event:Event)
{
    sndChannel = soundClip.play();
}

Dutch or English? [NL]

Het lijkt erop dat google mijn site nogal leuk vind, wat betekend dat als je zoekt op flash, as3 drag and drop. Mijn site op de beginpagina verschijnt! Dus kies ik ervoor om de flash posts te gaan vertalen naar engels, inclusief engelse comments in de actionscript code.

In mijn post titels zal ik achter de post gaan zetten of deze in het engels is door [EN] toe te voegen.

For my english speaking visitors; i’m dutch and this is a dutch blog. But for your entertaining i have choosen to translate all flash explanations in english. One done, more to go 🙂 All english posts will have [EN] behind the post title.

3DS max les 2, de waterton

Les 2 van het semester GameArt 3D, maak een waterton in 3D en texture deze via een uvw unwrap. In deze tutorial behandel ik lowpoly modeleren op vertex niveau. Verder komt aan bod; inset, extrude en bevel. Zie bovenstaande video tutorial voor uitleg over het 3D gedeelte, zorg zelf voor een texture.

Flash AS3 over variabelen

Variabelen binnen flash zijn handig, maar lastig om goed te implementeren. Daarom hier kort en bondig uitleg over hoe aan te maken en te gebruiken binnen je flash applicatie.

Als je een variabele aanmaakt en wil gebruiken in hetzelfde frame is er niets aan de hand, flash kan hem dan gewoon vinden. Het probleem is, als je op frame 1 een variabele aanmaakt en deze op bijvoorbeeld frame 12 pas wil hergebruiken.

Of als je ergens binnen een movieclip een variabele weer wil inlezen. Hieronder staan enkele mogelijkheden om deze variabelen overal uit te kunnen lezen.

1
2
3
4
5
6
7
8
9
var deVariabeleNaam:String = de waarde;
 
// je kunt de variabele overal benaderen als je het 
// volgende doet:
MovieClip(this.root).deVariabeleNaam;
 
// stel je hebt de variabele aangemaakt in een movieclip
// dan gebruik je de volgende code:
MovieClip(this.root).MovieClipInstanceNaam.deVariabeleNaam

Onderstaande methode werkt alleen als je een var in een hoofdtijdlijn wil aanspreken.

1
2
3
4
// variabele aanmaken met this ervoor zorgt dat deze op 
// de hoofdtijdlijn overal te vinden is. Uitlezen doe je 
// op dezelfde manier
this.varName;

Flash AS3 variables and counting [EN]

To grow the flower, you have to turn on the light and give it water two times. You can do that in any order. You can only turn the light on one time. Since you can water it only two times, i used a little counter to check for the amount of clicks.

In the movieclips “flower” and “water” i placed stop(); codes to stop animations, until clicked again.

var LampTeller=false;// de lamp is uit, dus false
var GieterTeller=0;// de gieter is nog niet geweest dus 0
 
lamp.addEventListener(MouseEvent.CLICK, lampAan);//lamp aan zetten
gieter.addEventListener(MouseEvent.CLICK, GieterGiet);//gieter geeft water
 
function lampAan(evt:MouseEvent) {
	if (LampTeller==false) {//als de lamp nog niet aan is geweest (anders doet hij niets)
		lamp.nextFrame();//naar het volgende frame binnen de instance lamp (aan)
		bloem.play();//speel de animatie binnen de instance bloem af (tot hij daar een stop tegenkomt)
		LampTeller=true;//Lamp is aan
	}
}
 
function GieterGiet(evt:MouseEvent) {
	if (GieterTeller<=1) {//als de gieter 2 keer geweest is doet hij onderstaande (anders doet hij niets)
		gieter.play();//speel de animatie binnen de instance gieter af (tot hij daar een stop tegenkomt)
		bloem.play();//speel de animatie binnen de instance bloem af (tot hij daar een stop tegenkomt)
		GieterTeller++;//gieter met 1 optellen (hij begint met tellen bij 0)
	}
}

Flash AS3 schalen met toetsenbord update

Op verzoek een update op het schalen met + en – toetsen. Nu moet je eerst het schilderij (de meest linkse) klikken, voordat je hem kunt gaan schalen. Door gebruik te maken van verschillende instance names en variabele namen, kun je dit toepassen op zo veel verschillende objecten in je scene als je wenst.

var SchilderijClickStatus=false;//de click status van het schilderij op false zetten (er is niet op geklikt)
Schilderij.addEventListener(MouseEvent.CLICK, SchilderijGeklikt);//luisteren of er op het schilderij geklikt wordt
 
function SchilderijGeklikt(evt:MouseEvent) {
   SchilderijClickStatus=true;//zet de status van het schilderij op true, nu mag je hem schalen
}
 
stage.addEventListener(KeyboardEvent.KEY_DOWN, onKeyPress);
//een listener op de stage, die luisterd of er een toets ingedrukt wordt
 
function onKeyPress(e:KeyboardEvent):void
{
   if (SchilderijClickStatus==true) {//checked hier of de status van het schilderij true is, zo niet.. niets doen, anders schalen.
      if (e.keyCode == 187) {//als de keycode 187 is (+)
         Schilderij.scaleX += 0.5; //schaal 0.5 omhoog in de X-as
         Schilderij.scaleY += 0.5; //schaal 0.5 omhoog in de Y-as
      }
      if (e.keyCode == 189) {//als de keycode 189 is (-)
         Schilderij.scaleX -= 0.5; //schaal 0.5 omlaag in de X-as
         Schilderij.scaleY -= 0.5; //schaal 0.5 omlaag in de Y-as
      }
   }
}

Flash AS3 drag and drop


Klik op de munt om hem te draggen, zodra je bij het varkentje komt verdwijnt de munt in het varken.

munt.addEventListener(MouseEvent.MOUSE_DOWN, drag);//bij een klik op het muntje naar de functie dragstage.addEventListener(MouseEvent.MOUSE_UP, drop);//bij loslaten van het muntje naar de functie drop

function drag(e:MouseEvent):void
{
e.target.startDrag(false, new Rectangle(33,31,559,230));//starten van het draggen, de rectangle is het gebied waar buiten het muntje niet kan gedragt worden (x,y,w,h)
}

function drop(e:MouseEvent):void
{
stopDrag();//stoppen van het draggen
}

munt.addEventListener(Event.ENTER_FRAME, Hitding); //luisteren of de munt het varkentje raakt

function Hitding(event:Event):void
{
if (spaarvarken.hitTestObject(munt)) // als het muntje het varkentje raakt
{
munt.visible=false;//wordt de munt onzichtbaar

}
}

In bovenstaand voorbeeld komt het muntje ook weer terug, om dat voor elkaar te krijgen heb je de volgende extra code nodig (onderstaande code komt bovenin):

var Teller=10; //hierin het aantal seconden dat de timer moet gebruiken
var myTimer:Timer=new Timer(1000,30); //1000,30 betekend dat er 30 keer een seconde getimed wordt, aanpassen naar 60 voor een minuut.
myTimer.addEventListener(TimerEvent.TIMER, timerListener);//luisterd naar de timer

Vervang het laatste stuk code door de volgende codes:

function Hitding(event:Event):void
{
if (spaarvarken.hitTestObject(munt)) // als het muntje het varkentje raakt
{
munt.visible=false;//wordt de munt onzichtbaar
myTimer.start();//start de timer
}
}function timerListener(e:TimerEvent):void {
if (Teller==0) {//als de teller op 0 staat het volgende uitvoeren
munt.visible=true;//munt zichtbaar maken
munt.x=466.95;//verplaats naar deze x coordinaat
munt.y=200;//verplaats naar deze y coordinaat
Teller=10;//zet de teller weer op 10
myTimer.stop();//zet de teller stop
} else {
Teller–; //iedere seconde een afhalen van het getal in de variabele Teller
}
}