Animate CC JS mouse follower is not aligned with responsive

  You are currently not logged in. You can view the forums, but cannot post messages. Log In | Register

15-Feb-17 10:52
Hello everyone,
I have started a website on Adobe Animate CC, I have done mouse follower with this code:


this.stage.canvas.style.cursor = "none";
this.mouseEnabled = true;
this.addEventListener("tick", fl_CustomMouseCursor.bind(this));

function fl_CustomMouseCursor() {
this.plus_mc.x = stage.mouseX;
this.plus_mc.y = stage.mouseY;
this.black_plus_mc.x = stage.mouseX;
this.black_plus_mc.y = stage.mouseY;
}


Now when I do the website responsive at publish setting the follower is not aligned with mouse cursor it only get aligned when I position the cursor at top left corner.
I Hope some one can help me!

Thank you,

Khalil

--
Thanks
15-Feb-17 14:27
From the minuscule amount of code you have provided, ... ...

Haven't got a clue.


And what is "Adobe Animate CC"

--
Chris.
So long, and thanks for all the fish.
http://webmaster-talk.eu/
15-Feb-17 14:40
Adobe Animate CC is the New Adobe Flash CC using action script and action script for HTML5 Canvas

you can consider it as new Adobe Flash

To make my question more clear, it is javascript code inside html5 canvas

So the code I provided was to make a custom mouse cursor follower

I hope I am clear

--
Thanks
16-Feb-17 08:35
"I hope I am clear"

No.

Where is "stage" defined and what is it?

What does 'this' actually refer to in your code snippet??

('this' in javascript would be a reference to the 'local' or 'parent' object, but your code snippet does NOT include whatever object 'this' is supposed to refer to.)

--
Chris.
So long, and thanks for all the fish.
http://webmaster-talk.eu/
16-Feb-17 09:04
this is the code that make it work:



(function (lib, img, cjs, ss, an) {

var p; // shortcut to reference prototypes
lib.ssMetadata = [];


// symbols:
// helper functions:

function mc_symbol_clone() {
var clone = this._cloneProps(new this.constructor(this.mode, this.startPosition, this.loop));
clone.gotoAndStop(this.currentFrame);
clone.paused = this.paused;
clone.framerate = this.framerate;
return clone;
}

function getMCSymbolPrototype(symbol, nominalBounds, frameBounds) {
var prototype = cjs.extend(symbol, cjs.MovieClip);
prototype.clone = mc_symbol_clone;
prototype.nominalBounds = nominalBounds;
prototype.frameBounds = frameBounds;
return prototype;
}


(lib.rightsidepage1 = function(mode,startPosition,loop) {
if (loop == null) { loop = false; } this.initialize(mode,startPosition,loop,{});

// Layer 1
this.shape = new cjs.Shape();
this.shape.graphics.f("#666666").s().p("AirYaMAAAgwzIFXAAMAAAAwzg");
this.shape.setTransform(1.2,-0.4);

this.shape_1 = new cjs.Shape();
this.shape_1.graphics.f("#121212").s().p("AirYaMAAAgwzIFXAAMAAAAwzg");
this.shape_1.setTransform(1.2,-0.4);

this.timeline.addTween(cjs.Tween.get({}).to({state:[{t:this.shape}]}).to({state:[{t:this.shape_1}]},3).wait(1));

}).prototype = p = new cjs.MovieClip();
p.nominalBounds = new cjs.Rectangle(-16,-156.6,34.4,312.5);


(lib.righthoveringpage1 = function(mode,startPosition,loop) {
if (loop == null) { loop = false; } this.initialize(mode,startPosition,loop,{});

// Layer 1
this.shape = new cjs.Shape();
this.shape.graphics.f("#121212").s().p("AuBfTMAAAg+lIcDAAMAAAA+lg");
this.shape.setTransform(-89.8,0);
this.shape._off = true;

this.timeline.addTween(cjs.Tween.get(this.shape).wait(3).to({_off:false},0).wait(1));

}).prototype = p = new cjs.MovieClip();
p.nominalBounds = null;


(lib.line = function(mode,startPosition,loop) {
this.initialize(mode,startPosition,loop,{});

// Layer 1
this.shape = new cjs.Shape();
this.shape.graphics.f().s("#EBEBEC").ss(12.3,1,1).p("AqJAAIUTAA");
this.shape.setTransform(65,0);

this.timeline.addTween(cjs.Tween.get(this.shape).wait(1));

}).prototype = getMCSymbolPrototype(lib.line, new cjs.Rectangle(-6.1,-6.1,142.3,12.3), null);


(lib.bg = function(mode,startPosition,loop) {
this.initialize(mode,startPosition,loop,{});

// Layer 1
this.shape = new cjs.Shape();
this.shape.graphics.f("#0099FF").s().p("Eg8sAk8MAAAhJ3MB5aAAAMAAABJ3g");
this.shape.setTransform(-388.5,0);

this.timeline.addTween(cjs.Tween.get(this.shape).wait(1));

}).prototype = getMCSymbolPrototype(lib.bg, new cjs.Rectangle(-777.1,-236.3,777.1,472.8), null);


(lib.cursor = function(mode,startPosition,loop) {
if (loop == null) { loop = false; } this.initialize(mode,startPosition,loop,{right:1,"static":7});

// timeline functions:
this.frame_0 = function() {
this.stop();
}
this.frame_6 = function() {
this.stop();
}
this.frame_12 = function() {
this.stop();
}

// actions tween:
this.timeline.addTween(cjs.Tween.get(this).call(this.frame_0).wait(6).call(this.frame_6).wait(6).call(this.frame_12).wait(1));

// cursor2 copy
this.line = new lib.line();
this.line.parent = this;
this.line.setTransform(68.4,11.1,0.232,0.232,90,0,0,64.6,-0.5);

this.timeline.addTween(cjs.Tween.get(this.line).wait(1).to({regX:0,regY:0,x:68.6,y:-3.7},0).to({rotation:219.6,x:83.1,y:11.1},5).wait(1).to({rotation:90,x:68.6,y:-3.7},5).wait(1));

// cursor1 copy
this.line_1 = new lib.line();
this.line_1.parent = this;
this.line_1.setTransform(68.4,11.1,0.232,0.232,0,0,0,65.2,0.2);

this.timeline.addTween(cjs.Tween.get(this.line_1).wait(1).to({regX:130,regY:0.5,x:83.5},0).to({regX:129.7,regY:0,rotation:-45,x:83.1},5).wait(1).to({regX:130,regY:0.5,rotation:0,x:83.5},5).wait(1));

}).prototype = p = new cjs.MovieClip();
p.nominalBounds = new cjs.Rectangle(51.8,-5.4,33.1,33.1);


// stage content:
(lib.test = function(mode,startPosition,loop) {
if (loop == null) { loop = false; } this.initialize(mode,startPosition,loop,{});

// timeline functions:
this.frame_0 = function() {
this.stop();
/* Custom Mouse Cursor
Replaces the default mouse cursor with the specified symbol instance.
*/
stage.canvas.style.cursor = "none";
this.plus_mc.mouseEnabled = false;
this.addEventListener("tick", fl_CustomMouseCursor.bind(this));

function fl_CustomMouseCursor() {
this.plus_mc.x = stage.mouseX / stage.scaleX;
this.plus_mc.y = stage.mouseY / stage.scaleY;
}
//To restore the default mouse pointer, uncomment the following lines:
//this.removeEventListener("tick", fl_CustomMouseCursor.bind(this));
//stage.removeChild(plus_mc);
//stage.canvas.style.cursor = "default";



//var frequency = 3;
//stage.enableMouseOver(frequency);
this.righthoveringpage1.addEventListener("mouseover", fl_MouseOverHandler_1.bind(this));

function fl_MouseOverHandler_1() {
this.plus_mc.gotoAndPlay("static");
}

//var frequency = 3;
//stage.enableMouseOver(frequency);
this.rightsidepage1_mc.addEventListener("mouseover", fl_MouseOverHandler_2.bind(this));


function fl_MouseOverHandler_2() {
this.plus_mc.gotoAndPlay("right");
}
}

// actions tween:
this.timeline.addTween(cjs.Tween.get(this).call(this.frame_0).wait(1));

// cursor
this.plus_mc = new lib.cursor();
this.plus_mc.parent = this;
this.plus_mc.setTransform(275.7,200.6,0.993,0.993,0,0,0,68.5,11.2);

this.timeline.addTween(cjs.Tween.get(this.plus_mc).wait(1));

// Layer 6
this.text = new cjs.Text("Khalil", "96px 'GE SS Text Light'", "#121212");
this.text.lineHeight = 115;
this.text.lineWidth = 334;
this.text.parent = this;
this.text.setTransform(142.6,133);

this.timeline.addTween(cjs.Tween.get(this.text).wait(1));

// side_grey_button
this.rightsidepage1_mc = new lib.rightsidepage1();
this.rightsidepage1_mc.parent = this;
this.rightsidepage1_mc.setTransform(701.6,0.7,4.39,1.341,0,0,0,18.7,-156.3);
new cjs.ButtonHelper(this.rightsidepage1_mc, 0, 1, 2, false, new lib.rightsidepage1(), 3);

this.timeline.addTween(cjs.Tween.get(this.rightsidepage1_mc).wait(1));

// fullscreen_button
this.righthoveringpage1 = new lib.righthoveringpage1();
this.righthoveringpage1.parent = this;
this.righthoveringpage1.setTransform(0,0.6,3.902,1.05,0,0,0,-179.4,-199.8);
new cjs.ButtonHelper(this.righthoveringpage1, 0, 1, 2, false, new lib.righthoveringpage1(), 3);

this.timeline.addTween(cjs.Tween.get(this.righthoveringpage1).wait(1));

// solid_bg
this.bg = new lib.bg();
this.bg.parent = this;
this.bg.setTransform(349.6,202.3,1,1,0,0,0,-388.6,0);

this.timeline.addTween(cjs.Tween.get(this.bg).wait(1));

}).prototype = p = new cjs.MovieClip();
p.nominalBounds = new cjs.Rectangle(312.1,168.5,777.1,472.8);
// library properties:
lib.properties = {
width: 702,
height: 405,
fps: 24,
color: "#000000",
opacity: 0.00,
manifest: [],
preloads: []
};




})(lib = lib||{}, images = images||{}, createjs = createjs||{}, ss = ss||{}, AdobeAn = AdobeAn||{});
var lib, images, createjs, ss, AdobeAn;



And this is HTML file



<!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>test</title>
<!-- write your code here -->
<style>
body {
overflow:hidden;
}
#animation_container {
position:absolute;
margin:auto;
left:-100%;right:-100%;
}
</style>
<script src="libs/createjs-2015.11.26.min.js"></script>
<script src="test.js?1487204911854"></script>
<script>
var canvas, stage, exportRoot, anim_container, dom_overlay_container, fnStartAnimation;
function init() {
canvas = document.getElementById("canvas");
anim_container = document.getElementById("animation_container");
dom_overlay_container = document.getElementById("dom_overlay_container");
handleComplete();
}
function handleComplete() {
//This function is always called, irrespective of the content. You can use the variable "stage" after it is created in token create_stage.
exportRoot = new lib.test();
stage = new createjs.Stage(canvas);
stage.addChild(exportRoot);
stage.enableMouseOver();
//Registers the "tick" event listener.
fnStartAnimation = function() {
createjs.Ticker.setFPS(lib.properties.fps);
createjs.Ticker.addEventListener("tick", stage);
}
//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;
}
}
makeResponsive(true,'both',true,2);
fnStartAnimation();
}
</script>
<!-- write your code here -->
</head>
<body onload="init();" style="margin:0px;">
<div id="animation_container" style="background-color:rgba(0, 0, 0, 0.00); width:702px; height:405px">
<canvas id="canvas" width="702" height="405" style="position: absolute; display: block; background-color:rgba(0, 0, 0, 0.00);"></canvas>
<div id="dom_overlay_container" style="pointer-events:none; overflow:hidden; width:702px; height:405px; position: absolute; left: 0px; top: 0px; display: block;">
</div>
</div>
</body>
</html>


and here is the link http://arabizingdesign.net/blackduck/test/test.html

[Edited by khalil111 on 16-Feb-17 09:09]

--
Thanks
16-Feb-17 10:20
"this is the code that make it work:"

??

do you mean;

" made it work" as in now it is fully functional

OR

" should make it work"

as in;

additional code for us / me to look at"??

--
Chris.
So long, and thanks for all the fish.
http://webmaster-talk.eu/
16-Feb-17 11:40
I meant this is the the code been generated by Adobe Animate CC, and I solved aligning the the mouse cursor with the follower by this code

this.plus_mc.x = stage.mouseX / stage.scaleX;
this.plus_mc.y = stage.mouseY / stage.scaleY;

highlighted bold is the fix


But the mouse default cursor was still showing, I could hide the default mouse cursor by css only



canvas { cursor: none !important }


I hope I can hide it within javascript code

The problem is the addEventListener uses "tick"

then when I use this code



var frequency = 3;
stage.enableMouseOver(frequency);
this.righthoveringpage1.addEventListener("mouseover", fl_MouseOverHandler_1.bind(this));

function fl_MouseOverHandler_1() {
this.stage.canvas.style.cursor = "none";
this.plus_mc.gotoAndPlay("static");
}


The default cursor appeared again, I tried to comment out



var frequency = 3;
stage.enableMouseOver(frequency);


but it didn't work

Also I can't make the canvas fully responsive.

I hope I am clear, and I am sorry for the confusion in my question

Thank you very much

[Edited by khalil111 on 16-Feb-17 11:53]

--
Thanks
17-Feb-17 04:18
Used in the way you seem to be attempting to do, 'this' is only a valid reference within a class (or object) declaration, so it operates as a reference to the derived or parent object, and there is no object instantiation in the code you have provided so far, or if there is; It is broken across several posts.

Post ALL of the code in a thread at my forum (webmaster-talk.eu) so it can be seen in it's entirety.

--
Chris.
So long, and thanks for all the fish.
http://webmaster-talk.eu/
17-Feb-17 05:24
I couldn't register to webmaster-talk.eu, as I got error

Any way, I have created a page in my server explaining the problem with links to all source files that runs the website plus I show the running website inside iframe.

I think at previous post the library was missing

Here is the explanation link http://arabizingdesign.net/blackduck/test/index.html

Khalil

[Edited by khalil111 on 17-Feb-17 05:30]

--
Thanks
17-Feb-17 17:35
given this;

The problem is when I created a custom mouse cursor follower, the default cursor pointer still appears


The error is probably to do with whatever you are using for the custom cursor.

--
Chris.
So long, and thanks for all the fish.
http://webmaster-talk.eu/
17-Feb-17 17:50
By the way, what was the error message on WMTeu registration?

--
Chris.
So long, and thanks for all the fish.
http://webmaster-talk.eu/
17-Feb-17 17:55
can't remember the error message, it disappear after few seconds, but when I tried again it says I am already registered, but I didn't get any confirmation email

--
Thanks

 
New posts
Old posts

Follow Elated