• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

ok why does my button stop getting the little hand or mouseover effects as soon as I connect a class

Participant ,
Jan 01, 2023 Jan 01, 2023

Copy link to clipboard

Copied

Hey team,

So when I create a new html5 canvas and make one button with a roll over colour, a down colour and a hit area.

If I just press cntl+enter from animate it works fine.

If I use the web server and open the project from the index.file - the button is still there - its still working or showing the down colour when you click but the cursor doesnt change to a little hand anymore and there is no roll over change?

Do you have to mouseEnable or something from the class.js file?    (the only code in there so far is the constructor)

class Game
{
    constructor(root, lib)
    {
        this.root = root;
        this.stage = this.root.stage;
        this.lib = lib;
        this.init();
    }
    
    init()
    {
        
    }
}

Views

187

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Participant , Jan 01, 2023 Jan 01, 2023

so I dont know - I have gone back, started again and recreated this simple test - 

and now it is working  - here is the code in the external class

class Game{
    constructor(exportRoot, stage){
        this.root = exportRoot;
        this.stage = stage;
        this.str1 = "start";
        this.init();
        this.setstate;
    }
    
    init(){
        const game = this;
    this.main_Txt = this.root.main_Txt;
        this.root.start_bt.on("click", function(){ game.update(); })
           this
...

Votes

Translate

Translate
Community Expert ,
Jan 01, 2023 Jan 01, 2023

Copy link to clipboard

Copied

stage.enableMouseOver()

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Jan 01, 2023 Jan 01, 2023

Copy link to clipboard

Copied

Sorry kglad that didnt work, but I did notice this

you are putting the constructor (root, lib)

the other guy is saying contstructor (exportRoot, stage)   ?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jan 01, 2023 Jan 01, 2023

Copy link to clipboard

Copied

i just copied your code while fixing this.stage.

 

lib i didn't understand and questioned it in your thread where you posted the issue about loading failing to appear.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Jan 01, 2023 Jan 01, 2023

Copy link to clipboard

Copied

Yeh ok -

so there is a tutorial that I have paid for -where the guy goes through and sets up this external class - 

he goes through and makes changes to the .html file of the orginal .fla project and then saves that file as index.html so that the webserver will just open index.html automatically (and also when you then make changes or republish you dont have to go back and make those changes evey time because the fla ---> html file gets rewritten. 

Its his code that I have been using in the external class file as well - but that is why I was coming here on the forums because it just seems like unless I am making the exact project from the tutorial --> I am having trouble applying what I think I had learnt there to a new project.   I was trying to follow the steps but make a new project instead and this is why I have stuff in there that I (and you) dont understand I guess.

ok in order. I know you need to add your external script right 

<script src="game.js"></script>

1.  Do you need to create a game variable in the index.html file line 28 

 

<script>
var canvas, stage, exportRoot, anim_container, dom_overlay_container, fnStartAnimation, game;

 

 then do you need a function to create a new game - after the tick event is created

 

stage.addEventListener("tick", handleTick);
 
function handleTick(event){
    if (game === undefined) game = new Game(exportRoot, stage);
} 

 

and then you obviously dont think you need the lib statement?

 

I am also getting confused about the external script being called game and the game new Game inside the code - they arent related are they - I have started to call my external class     class.js instead on my new experiments - is that ok?  

So sorry for being a pain, I watched a youtube vid that said that by paying for a dedicated tutorial and only listening to one voice I would save time (and anguish) - but I really want to understand what I am building (its death to try to teach a ratbag class and not know what you are talking about) and I want to be able to build something from the beginning - not have to rely on the "magic file" that works but heaven help us if it got lost, broken or whatever!

Thanks again for your efforts

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Jan 01, 2023 Jan 01, 2023

Copy link to clipboard

Copied

Hey I am not trying to dis on this tutorial either - a bad workman blames the tools - its fine, its just that I want to be able to make something from scratch (and so will my students) 

 

index

<!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>XXXX</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/createjs-2015.11.26.min.js"></script>
<script src="rhino.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("F67AF913B7324C5E921F85667DB56F67");
	var lib=comp.getLibrary();
	var loader = new createjs.LoadQueue(false);
	loader.addEventListener("fileload", function(evt){handleFileLoad(evt,comp)});
	loader.addEventListener("complete", function(evt){handleComplete(evt,comp)});
	var lib=comp.getLibrary();
	loader.loadManifest(lib.properties.manifest);
}
function handleFileLoad(evt, comp) {
	var images=comp.getImages();	
	if (evt && (evt.item.type == "image")) { images[evt.item.id] = evt.result; }	
}
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();
	var queue = evt.target;
	var ssMetadata = lib.ssMetadata;
	for(i=0; i<ssMetadata.length; i++) {
		ss[ssMetadata[i].name] = new createjs.SpriteSheet( {"images": [queue.getResult(ssMetadata[i].name)], "frames": ssMetadata[i].frames} )
	}
	exportRoot = new lib.Rhino();
	stage = new lib.Stage(canvas);
	stage.enableMouseOver();
    
	//Registers the "tick" event listener.
	fnStartAnimation = function() {
		stage.addChild(exportRoot);
		createjs.Ticker.setFPS(lib.properties.fps);
		createjs.Ticker.addEventListener("tick", stage)
		stage.addEventListener("tick", handleTick)
		function getProjectionMatrix(container, totalDepth) {
			var focalLength = 528.25;
			var projectionCenter = { x : lib.properties.width/2, y : lib.properties.height/2 };
			var scale = (totalDepth + focalLength)/focalLength;
			var scaleMat = new createjs.Matrix2D;
			scaleMat.a = 1/scale;
			scaleMat.d = 1/scale;
			var projMat = new createjs.Matrix2D;
			projMat.tx = -projectionCenter.x;
			projMat.ty = -projectionCenter.y;
			projMat = projMat.prependMatrix(scaleMat);
			projMat.tx += projectionCenter.x;
			projMat.ty += projectionCenter.y;
			return projMat;
		}
		function handleTick(event) {
            if (game === undefined) game = new Game(exportRoot, stage);
			var cameraInstance = exportRoot.___camera___instance;
			if(cameraInstance !== undefined && cameraInstance.pinToObject !== undefined)
			{
				cameraInstance.x = cameraInstance.pinToObject.x + cameraInstance.pinToObject.pinOffsetX;
				cameraInstance.y = cameraInstance.pinToObject.y + cameraInstance.pinToObject.pinOffsetY;
				if(cameraInstance.pinToObject.parent !== undefined && cameraInstance.pinToObject.parent.depth !== undefined)
				cameraInstance.depth = cameraInstance.pinToObject.parent.depth + cameraInstance.pinToObject.pinOffsetZ;
			}
			applyLayerZDepth(exportRoot);
		}
		function applyLayerZDepth(parent)
		{
			var cameraInstance = parent.___camera___instance;
			var focalLength = 528.25;
			var projectionCenter = { 'x' : 0, 'y' : 0};
			if(parent === exportRoot)
			{
				var stageCenter = { 'x' : lib.properties.width/2, 'y' : lib.properties.height/2 };
				projectionCenter.x = stageCenter.x;
				projectionCenter.y = stageCenter.y;
			}
			for(child in parent.children)
			{
				var layerObj = parent.children[child];
				if(layerObj == cameraInstance)
					continue;
				applyLayerZDepth(layerObj, cameraInstance);
				if(layerObj.layerDepth === undefined)
					continue;
				if(layerObj.currentFrame != layerObj.parent.currentFrame)
				{
					layerObj.gotoAndPlay(layerObj.parent.currentFrame);
				}
				var matToApply = new createjs.Matrix2D;
				var cameraMat = new createjs.Matrix2D;
				var totalDepth = layerObj.layerDepth ? layerObj.layerDepth : 0;
				var cameraDepth = 0;
				if(cameraInstance && !layerObj.isAttachedToCamera)
				{
					var mat = cameraInstance.getMatrix();
					mat.tx -= projectionCenter.x;
					mat.ty -= projectionCenter.y;
					cameraMat = mat.invert();
					cameraMat.prependTransform(projectionCenter.x, projectionCenter.y, 1, 1, 0, 0, 0, 0, 0);
					cameraMat.appendTransform(-projectionCenter.x, -projectionCenter.y, 1, 1, 0, 0, 0, 0, 0);
					if(cameraInstance.depth)
						cameraDepth = cameraInstance.depth;
				}
				if(layerObj.depth)
				{
					totalDepth = layerObj.depth;
				}
				//Offset by camera depth
				totalDepth -= cameraDepth;
				if(totalDepth < -focalLength)
				{
					matToApply.a = 0;
					matToApply.d = 0;
				}
				else
				{
					if(layerObj.layerDepth)
					{
						var sizeLockedMat = getProjectionMatrix(parent, layerObj.layerDepth);
						if(sizeLockedMat)
						{
							sizeLockedMat.invert();
							matToApply.prependMatrix(sizeLockedMat);
						}
					}
					matToApply.prependMatrix(cameraMat);
					var projMat = getProjectionMatrix(parent, totalDepth);
					if(projMat)
					{
						matToApply.prependMatrix(projMat);
					}
				}
				layerObj.transformMatrix = matToApply;
			}
		}
	}	    
	//Code to support hidpi screens and responsive scaling.
	function makeResponsive(isResp, respDim, isScale, scaleType) {		
		var lastW, lastH, lastS=1;		
		window.addEventListener('resize', resizeCanvas);		
		resizeCanvas();		
		function resizeCanvas() {			
			var w = lib.properties.width, h = lib.properties.height;			
			var iw = window.innerWidth, ih=window.innerHeight;			
			var pRatio = window.devicePixelRatio || 1, xRatio=iw/w, yRatio=ih/h, sRatio=1;			
			if(isResp) {                
				if((respDim=='width'&&lastW==iw) || (respDim=='height'&&lastH==ih)) {                    
					sRatio = lastS;                
				}				
				else if(!isScale) {					
					if(iw<w || ih<h)						
						sRatio = Math.min(xRatio, yRatio);				
				}				
				else if(scaleType==1) {					
					sRatio = Math.min(xRatio, yRatio);				
				}				
				else if(scaleType==2) {					
					sRatio = Math.max(xRatio, yRatio);				
				}			
			}			
			canvas.width = w*pRatio*sRatio;			
			canvas.height = h*pRatio*sRatio;
			canvas.style.width = dom_overlay_container.style.width = anim_container.style.width =  w*sRatio+'px';				
			canvas.style.height = anim_container.style.height = dom_overlay_container.style.height = h*sRatio+'px';
			stage.scaleX = pRatio*sRatio;			
			stage.scaleY = pRatio*sRatio;			
			lastW = iw; lastH = ih; lastS = sRatio;            
			stage.tickOnUpdate = false;            
			stage.update();            
			stage.tickOnUpdate = true;		
		}
	}
	makeResponsive(true,'both',true,1);	
	AdobeAn.compositionLoaded(lib.properties.id);
	fnStartAnimation();
}
</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>

 

I have taken out the title of this project - again really not trying to flame anybody or say its bad - jsut asking about it

When I create a new animate file and publish the project1.html has about 55 lines- this one is full of stuff that I dont know where it came from.  I know that if you dont have anything moving on the timeline that your .html wont have the handletick event built in because there is nothing moving on the timeline - but everyting else I dont know- I am only posting this to see if it clears up the Lib statement for you (or any other things that are going wrong)

Like the differences in the constructor method that I asked about earlier in this thread.

Does this make anything more clear?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Jan 01, 2023 Jan 01, 2023

Copy link to clipboard

Copied

LATEST

so I dont know - I have gone back, started again and recreated this simple test - 

and now it is working  - here is the code in the external class

class Game{
    constructor(exportRoot, stage){
        this.root = exportRoot;
        this.stage = stage;
        this.str1 = "start";
        this.init();
        this.setstate;
    }
    
    init(){
        const game = this;
    this.main_Txt = this.root.main_Txt;
        this.root.start_bt.on("click", function(){ game.update(); })
           this.setstate = 0;
        };
update(){
    if(this.setstate == 0){
    this.str1 = "this is setstate 0"
    }
    this.setText();
}
    setText(){
    this.main_Txt.text = this.str1;
    }
    }

:). mouse effects working and text box loading

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines