Adobe Edge Animate and variables, a bouncing ball [EN]

On stage we want a ball, two buttons and a textfield. The ball can roll and bounce. The two buttons make the ball roll or bounce. The textfield is to show in text what button is clicked, if the ball is rolling or bouncing.

Screen Shot 2014-09-26 at 14.49.21
The stage, two buttons, a symbol with animation inside and a textfield.

Make a circle on stage and convert it to a symbol. In the ball symbol you would have two animations, one where the ball rolls and one where it bounces. Be sure to put the labels at the right point in time by going to where you want to have the label and click on the insert label button.

Screen Shot 2014-09-26 at 14.55.02Just before the second label i have placed a stop function (the little symbol underneath the “insert label” button and make sure your playhead is at the right position):

sym.stop(0);
the timeline inside the ball symbol

To have the symbol react to different variables, use the following code for clicking on the “roll the ball” button (select the button and in properties, click on “open actions” and select “click”):

// set the variable varName with the value "roll"
sym.setVariable("varName", "roll");
 
//get value variable
var myVarName = sym.getVariable("varName")
 
// change text in element with id textField and play the symbol "ball" from label "roll" 
sym.$("textField").html(myVarName);
sym.getSymbol("ball").play("roll");

To make the ball bounce by clicking on the “bounce the ball” button (select the button and in properties, click on “open actions” and select “click”):

// set the variable varName with the value "bounce"
sym.setVariable("varName", "bounce");
 
//get value variable
var myVarName = sym.getVariable("varName")
 
// change text in element with id textField and play the symbol "ball" from label "bounce" 
sym.$("textField").html(myVarName);
sym.getSymbol("ball").play("bounce");

If you find a better solution for doing this, please let me know.

Adobe Edge Animate and variables, collect coins [EN]

To create an interactive environment in Edge Animate, we need to have some code. And one of the most important things are variables. To declare a variable, select your stage and click on “open actions” button near the title of your project (properties). Select “creationComplete” and add all the following code below:

sym.setVariable("varName", 0);

Where “varName” is your variable name. The number behind that is the start value of this variable.

When you have a coin you can collect, select the coin symbol and click on “open actions” in the properties window.
Add the following code:

// lets get the variable "varName" and put it into another variable named "Name"
var Name = sym.getVariable("varName");
// this is the important part, counting. Add 1 to the value of the variable "Name"
Name = Name + 1;

This code gets the variable name varName and puts it in a new var “Name”. After that we add a plus 1 to this variable, so we know that someone has clicked on the coin and that we can keep track of it.

sym.setVariable("varName", Name);
sym.$("TextField").html(Name);

We want to keep counting, so we have to put the 1 back in our global variable. After that we want to show the variable in a textfield. This textfield has an id “TextField”.

// when you have clicked on the coin, make it disappear with a fadeout
sym.$("coin").fadeOut(200);
 
// if we have clicked on 3 coins, show a symbol.
if (Name ==3){
sym.$("CongratsSymbol").show();
}

When the user has clicked on the coin, it has to disappear. That’s where we use the “fadeOut” function. The number between the brackets is how long the fade can take.

If the user has clicked on 3 coins, we want to show a symbol. So that’s where the check if the varName is 3 comes into place. Use the same code for the other 2 coins and be sure to use other id’s for the coins.

This is one way to do this, there could be others. If you have another way to do the same, please let me know.

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

BrandDesign en photoshop

Het nieuwe schooljaar is weer begonnen en vanmiddag geef ik weer de eerste praktijkles bij het vak BrandDesign. Naast het opzetten van een wordpress blog en twitter account ga ik het hebben over photoshop. Geen hele uitgebreide les, maar een basis. Van daar mogen ze zelf op onderzoek gaan naar alle mogelijkheden van het programma.

Zoals dit bijvoorbeeld:

Kitbashing 101 [EN]

Just before the start of the new school year myself and two colleagues went to Koln for the Game Developers Conference. I attended a seminar about the Concept Art Learnings From Game Of Thrones To… Games!

“Using his work for HBO’s Game of Thrones TV series as an example, Karakter’s Tobias Mannewitz (a longtime game concept artist for titles like Anno 1404, Gothic 4, and Killzone 3) points out differences between games and films with regards to concept art creation. What methods from filmmaking could be transferred back to the world of AAA game-making that would help to further raise the quality bar?”

In this seminar he spoke of the advantages maquettes and models have in getting your ideas into reality. That’s when i thought, let’s do this in GameArt 3D! Building in real life, using the 3D scanner at FabLab and make some of the complex 3D models like this. Let’s see how it will turn out.