Create from code

By default editor calls demo state and all tweens are played from main timeline. What if you want to create animation from JavaScript code?

At first we will create 3 animations for character: walk, idle, jump. Check detailed graphical tutorial how to do it.

Remember that you can create additional tween for your object group by clicking Settings -> Add Movie on top right part of timeline panel (nr.1 in picture). Rename movie by double clicking on active tab (nr.2 in picture). By default a new tween is called “NewMovie”.

After that go to source editor and create character group. When character is ready you can add movies to it.

this.character = mt.create("character");
mt.createTweens(this.character);

“mt.createTweens” adds 3 tweens to this.character.mt.movies

   console.log(this.character.mt.movies);

   // result
   {
      idle: {...},
      walk: {...},
      jump: {...},
   }

Here is a full code:

"use strict";
window.animation_in_code.state.play = {
	create: function(){
		mt.create("intro");
		this.response = mt.create("response");
		this.response.setText('');
		
		this.character = mt.create("character");
		mt.createTweens(this.character);
		this.movie;
		
		this.game.input.onDown.add(function(event, mouse){ 
			if(this.movie){
				this.movie.stop();
			}
			
			switch(mouse.button){
				case 0: // mouse left click
					this.movie = this.character.mt.movies.walk;
					this.response.setText('Left');
					break;
				case 1: // mouse scroll click
					this.movie = this.character.mt.movies.idle;
					this.response.setText('Scroll');
					break;
				case 2: // mouse right click
					this.movie = this.character.mt.movies.jump;
					this.response.setText('Right');
					break;
			}
			this.movie.start().loop();
		}, this);
		
	}
};

You can find project here.