Inspiring

Question

please help with assigning commands from a class - easelJS/animate cc/html5

Forum|Forum|3 years ago
December 28, 2022
3 replies
915 views

Hi team,

So I have a tutorial (paid) but I am trying to understand something that I don't know what is going on.. I am (trying to be) running the interaction from a game.js file where all the code will be stored. I think I have worked out how to set up a web server and run the project as an index file (otherwise the interactions being read from the game.js file do not work)- this seems like a PITA but I have it working now.

So I have started a new project. I have a movie clip that has two frames in it (off and on) and the switch moves depending on if the light is off or on. Then I have a button instance name gobutt that can be used to call the lightAndSwitch movie clip to be on or off -

here is the code

So its all connected - no errors being thrown, but it doesn't work!

This is the same pathway as the example given (That works) but I am changing something by making my own project. How do I address the button and the movie clip from the game.js file?

class Game{
    constructor(exportRoot, stage){
        this.root = exportRoot;
        this.stage = stage;
        this.init();
    }
    
    init(){
        const game = this;
        this.root.gobutt.on('click', function(){
               game.root.lightAndSwitch.gotoAndPlay("on");
            
        });
    }
}

Thanks for your help

sub

This topic has been closed for replies.

JoãoCésar17023019

Community Expert

Hi again.

Instantiate the Game class in the main timeline (in an action frame) and not the in the index.html.

B

Bundaberg North5E42Author

Inspiring

ok guys I am really trying to make this happen, what tutorials do you recommend? I want to teach a class how to do this. I have a little money if it needs payment. What am I searching for here- is it specific to easelJS and animate cc? I dont understand all the variation in what I am seeing when I try to search

B

Bundaberg North5E42Author

Inspiring

I thought the whole point of x old mate's tutorial was to get the code out of the main timeline and on to game.js. This is a hassle because you cant test and debug straight from animate and you are using a text editor to write the code. You need to create a web server and open the index file each time to debug/run the project.

Ok this is how its done I am trying to make it work. It does work but I want to be able to draw things on the stage and then control/move them with code.

So now I dont know what to think - the debug guy was just putting code into his project and laughing about burying code in there- I thought this was bad. I also thought the idea of the game.js file was getting me closer to making the code from the easelJS asteroids work- but I just dont know what I am doing now!!

kglad

Community Expert

(and you should probably check for a different tutorial.)

B

Bundaberg North5E42Author

Inspiring

Ah yes you were right, here is the updated code with the line added - now I think its working, but still any tips will be helpful. What tuts do you suggest?

<!DOCTYPE html>
<!--
	NOTES:
	1. All tokens are represented by '$' sign in the template.
	2. You can write your code only wherever mentioned.
	3. All occurrences of existing tokens will be replaced by their appropriate values.
	4. Blank lines will be removed automatically.
	5. Remove unnecessary comments before creating your template.
-->
<html>
<head>
<meta charset="UTF-8">
<meta name="authoring-tool" content="Adobe_Animate_CC">
<title>javaTest</title>
<!-- write your code here -->
<style>
  #animation_container {
	position:absolute;
	margin:auto;
	left:0;right:0;
	top:0;bottom:0;
  }
</style>
<script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
<script src="x-javaTest.js"></script>
<script src="game.js"></script>
<script>
var canvas, stage, exportRoot, anim_container, dom_overlay_container, fnStartAnimation, game;
function init() {
	canvas = document.getElementById("canvas");
	anim_container = document.getElementById("animation_container");
	dom_overlay_container = document.getElementById("dom_overlay_container");
	var comp=AdobeAn.getComposition("A21967C6DB7943FE8681899B44492054");
	var lib=comp.getLibrary();
	handleComplete({},comp);
}
function handleComplete(evt,comp) {
	//This function is always called, irrespective of the content. You can use the variable "stage" after it is created in token create_stage.
	var lib=comp.getLibrary();
	var ss=comp.getSpriteSheet();
	exportRoot = new lib.javaTest();
	stage = new lib.Stage(canvas);	
	//Registers the "tick" event listener.
	fnStartAnimation = function() {
          game = new Game(stage, exportRoot, lib);
		stage.addChild(exportRoot);
		createjs.Ticker.framerate = lib.properties.fps;
		createjs.Ticker.addEventListener("tick", stage);
	}	    
	//Code to support hidpi screens and responsive scaling.
	AdobeAn.makeResponsive(true,'both',true,1,[canvas,anim_container,dom_overlay_container]);	
	AdobeAn.compositionLoaded(lib.properties.id);
	fnStartAnimation();
}
    function handleTick(event) {
            if (game === undefined) game = new Game(exportRoot, stage);
    }
</script>
<!-- write your code here -->
</head>
<body onload="init();" style="margin:0px;">
	<div id="animation_container" style="background-color:rgba(255, 255, 255, 1.00); width:960px; height:640px">
		<canvas id="canvas" width="960" height="640" style="position: absolute; display: block; background-color:rgba(255, 255, 255, 1.00);"></canvas>
		<div id="dom_overlay_container" style="pointer-events:none; overflow:hidden; width:960px; height:640px; position: absolute; left: 0px; top: 0px; display: block;">
		</div>
	</div>
</body>
</html>

JoãoCésar17023019

Community Expert

Hi.

Where are you instantiating the Game class?

You should have a line somewhere in the main timeline like this:

const game = new Game(exportRoot, stage);
// or const game = new Game(this, stage);

Please let us know.

Regards,

JC

B

Bundaberg North5E42Author

Inspiring

Hey thanks JC!

Here is the new code - I think I am getting somewhere

<!DOCTYPE html>
<!--
	NOTES:
	1. All tokens are represented by '$' sign in the template.
	2. You can write your code only wherever mentioned.
	3. All occurrences of existing tokens will be replaced by their appropriate values.
	4. Blank lines will be removed automatically.
	5. Remove unnecessary comments before creating your template.
-->
<html>
<head>
<meta charset="UTF-8">
<meta name="authoring-tool" content="Adobe_Animate_CC">
<title>javaTest</title>
<!-- write your code here -->
<style>
  #animation_container {
	position:absolute;
	margin:auto;
	left:0;right:0;
	top:0;bottom:0;
  }
</style>
<script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
<script src="x-javaTest.js"></script>
<script src="game.js"></script>
<script>
var canvas, stage, exportRoot, anim_container, dom_overlay_container, fnStartAnimation, game;
function init() {
	canvas = document.getElementById("canvas");
	anim_container = document.getElementById("animation_container");
	dom_overlay_container = document.getElementById("dom_overlay_container");
	var comp=AdobeAn.getComposition("A21967C6DB7943FE8681899B44492054");
	var lib=comp.getLibrary();
	handleComplete({},comp);
}
function handleComplete(evt,comp) {
	//This function is always called, irrespective of the content. You can use the variable "stage" after it is created in token create_stage.
	var lib=comp.getLibrary();
	var ss=comp.getSpriteSheet();
	exportRoot = new lib.javaTest();
	stage = new lib.Stage(canvas);	
	//Registers the "tick" event listener.
	fnStartAnimation = function() {
          game = new Game(stage, exportRoot, lib);
		stage.addChild(exportRoot);
		createjs.Ticker.framerate = lib.properties.fps;
		createjs.Ticker.addEventListener("tick", stage);
	}	    
	//Code to support hidpi screens and responsive scaling.
	AdobeAn.makeResponsive(true,'both',true,1,[canvas,anim_container,dom_overlay_container]);	
	AdobeAn.compositionLoaded(lib.properties.id);
	fnStartAnimation();
}
    function handleTick(event) {
            if (game === undefined) game = new Game(exportRoot, stage);
    }
</script>
<!-- write your code here -->
</head>
<body onload="init();" style="margin:0px;">
	<div id="animation_container" style="background-color:rgba(255, 255, 255, 1.00); width:960px; height:640px">
		<canvas id="canvas" width="960" height="640" style="position: absolute; display: block; background-color:rgba(255, 255, 255, 1.00);"></canvas>
		<div id="dom_overlay_container" style="pointer-events:none; overflow:hidden; width:960px; height:640px; position: absolute; left: 0px; top: 0px; display: block;">
		</div>
	</div>
</body>
</html>

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded