Flash AS3 pinch and zoom [EN]

For a project i’m working on i needed a pinch and zoom function, the project is for use on a tablet. After many hours of using google i found different scripts and together they made the solution to my problem! It’s not only that it had to zoom in and out, but it had to have a minimum and maximum zoom range. So, here is the complete sollution for this nifty interaction:

Multitouch.inputMode = MultitouchInputMode.GESTURE;
 
McName.addEventListener(TransformGestureEvent.GESTURE_ZOOM , onZoom);
var MIN_ZOOM:Number = 0.8;//minimal zoom percentage 80%
var MAX_ZOOM:Number = 2;//maximal zoom percentage 200%
 
function onZoom(e:TransformGestureEvent):void{
	McName.scaleX *=  e.scaleX;
	McName.scaleY *=  e.scaleY;
	McName.scaleX = Math.max(MIN_ZOOM,McName.scaleX);
	McName.scaleY = Math.max(MIN_ZOOM,McName.scaleY);
	McName.scaleX = Math.min(MAX_ZOOM,McName.scaleX);
	McName.scaleY = Math.min(MAX_ZOOM,McName.scaleY);
}

Flash AS3 movieclips as buttons [EN]

Somewhere i made the choice to use movieclips as buttons. It seems easier somehow. Most important thing you have to do is; use the next actionscript to change the mousecursor on mouseover.

McName.buttonMode=true;
McName.mouseChildren=false;

You can name framelables inside of the movieclip to respond as if it was a button. If you use the following framelabels: _up, _over, en _down the movieclip will work as button.

The following code is needed to make the button work:

McNaam.addEventListener(MouseEvent.CLICK, FunctionNaam); //listener for the MC with instance name: McNaam
 
//the function for the above MC
function FunctionNaam(evt:MouseEvent) {
   gotoAndStop("ruimte1");//go to framelabel ruimte1 and stop over there
}

Flash AS3 timer event, start and stop timers. [EN]

This is a short little code to start a timer in flash and after a click (or after the time is up) the timer is stopped and you are taken to another frame in the document.

This is the code i used for this example:

stop();
// the number of seconds you have the time to answer
var count:Number = 10;
// the timer
var myTimer:Timer = new Timer(1000,count);
// start the listener for the timer
myTimer.addEventListener(TimerEvent.TIMER, countdown);
// and start counting down
myTimer.start();
 
function countdown(event:TimerEvent):void
{
	// fill the text block with the time left
	myText_txt.text = String((count)-myTimer.currentCount);
	// if the time is 0 go to frame nr 4 and stop the timer and remove the listener
	if (myText_txt.text == "0")
	{
		myTimer.removeEventListener(TimerEvent.TIMER, countdown);
		myTimer.stop();
		gotoAndStop(4);
	}
}
// the buttons, wich take you to their respective frames and stop the timer
// and remove the listener
Fout_btn.addEventListener(MouseEvent.CLICK, ToFrame3);
 
function ToFrame3(evt:MouseEvent)
{
	myTimer.removeEventListener(TimerEvent.TIMER, countdown);
	myTimer.stop();
	gotoAndStop(3);
}
 
Goed_btn.addEventListener(MouseEvent.CLICK, ToFrame2);
 
function ToFrame2(evt:MouseEvent)
{
	myTimer.removeEventListener(TimerEvent.TIMER, countdown);
	myTimer.stop();
	gotoAndStop(2);
}

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!

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();
}

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
}
}

Flash AS3 Custom muis cursor & vergrootglas


Beweeg de muis om het vergrootglas te bewegen, zodra je over de munten gaat komt er een glow om het vergrootglas (frame 2 binnen de movieclip die als muis gebruikt wordt).

stage.addEventListener(MouseEvent.MOUSE_MOVE,moveGlass);
//luisterd of de muis beweegt en zorgt voor de vergroting;
function moveGlass(myEvent:MouseEvent)
{
	groot.x = (mouseX * -1);// groot is een tweede versie van je achtergrond, die groter op het scherm staat
	groot.y = (mouseY * -1);
	Glass_mc.x = (mouseX);//Glass_mc is een solid rondje (movieclip) die als masker dient voor de grotere versie van de achtergrond
	Glass_mc.y = (mouseY);
	Mouse.hide(); // verberg de normale muis;
}
 
 
// checken of de muis beweegt
stage.addEventListener(MouseEvent.MOUSE_MOVE,follow);
 
// de functie om de movieclip de muis te laten volgen, de instancename van de movieclip is cursor;
function follow(evt:MouseEvent)
{
	muis.x = mouseX;//muis is de instancename van de movieclip die als muis gebruikt wordt
	muis.y = mouseY;
}
 
// custom muiscursor veranderen in hand zodra je over het knopje gaat
Knopje.addEventListener(MouseEvent.MOUSE_OVER,MuisHand);
// op frame 2 zit het vergrootglas met een extra glow;
function MuisHand(evt:MouseEvent)
{
	Object(root).muis.gotoAndStop(2);
}
// custom muiscursor veranderen in pijl zodra je van het knopje af gaat;
Knopje.addEventListener(MouseEvent.MOUSE_OUT,MuisPijl);
// op frame 1 zit het gewone vergrootglas;
function MuisPijl(evt:MouseEvent)
{
	Object(root).muis.gotoAndStop(1);
}