We Keep Coding

Adobe Animate CC JavaScript: Mouse follower is not aligned when responsive is active

I have started a website on Adobe Animate CC, I have done mouse follower with this code snippet:
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;
}
When I check on make it responsive at publish settings the follower is not aligned with mouse cursor, it only get aligned when I position the cursor at the browser top left corner then it get far as I move the cursor.

I found the solution from Adobe forum by ClayUUID:
I divided the coordinates by stage.scaleX and scaleY.
Here is the correct code to make the page responsive with cursor follower aligned:
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 / stage.scaleX;
this.plus_mc.y = stage.mouseY / stage.scaleY;
this.black_plus_mc.x = stage.mouseX / stage.scaleX;
this.black_plus_mc.y = stage.mouseY / stage.scaleY;
}
Thank you

Adding pointer on rollover in Adobe Animate CC

I am starting to use Adobe Animate CC to make a 300x250 banner. I added this code from the code snippet section to my movieclip EDIT using HTML5 Canvas option.
this.bg_clickTag.addEventListener("click", fl_ClickToGoToWebPage);
function fl_ClickToGoToWebPage() {
window.open("http://www.google.com", "_blank");
}
var frequency = 3;
stage.enableMouseOver(frequency);
this.bg_clickTag.addEventListener("mouseover", fl_MouseOverHandler);
function fl_MouseOverHandler()
{
//this.bg_clickTag.cursor = "pointer";
//bg_clickTag.cursor = "pointer";
//cursor = "pointer";
//alert("Moused over");
}
I get the click though just fine, the issue I am having is the the cursor/pointer is not changing once I mouse over.
I am able to get the cursor/pointer change if I change the movieclip to a button, but I would rather keep it a movieclip.
Seems like a easy fix just having trouble combining my previous flash experience and Javascript.
thanks!

Put the cursor = "pointer" line outside the mouseover handler. When you set the cursor it will only show the cursor when the mouse is over the object:
this.bg_clickTag.cursor = "pointer";
this.bg_clickTag.addEventListener("click", fl_ClickToGoToWebPage);
function fl_ClickToGoToWebPage() {
window.open("http://www.google.com", "_blank");
}
var frequency = 3;
stage.enableMouseOver(frequency);

Resizing a game in browser

I have problem with resize windows game. I've read various posts on the forum but I could not get the correct resize the view of the game.
If you rotate the device screen size, I would like to display the game has adapted to the width / height of the display device both horizontally and vertically.
When the game started, it is properly scaled up, just turning your exchange device scaling is incorrect. Return to the previous screen orientation device retains its proportions.
In template html I add:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
First script:
function preload() {
...
Global.game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
Global.game.scale.pageAlignHorizontally = true;
Global.game.scale.pageAlignVertically = true;
Global.game.scale.forceOrientation(true, false);
Global.game.scale.setMaximum();
Global.game.scale.setScreenSize(true);
...
}
function resize() {
Global.game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
Global.game.scale.pageAlignHorizontally = true;
Global.game.scale.pageAlignVertically = true;
Global.game.scale.forceOrientation(true, true);
Global.game.scale.setShowAll();
Global.game.scale.refresh();
}
When I use this code, game scale correct when game started. When in device:
change position with horizontal on vertical, game is bigges and show
scroll
change position with vertical on horizontal, game is flat
Second script:
function preload() {
...
Global.game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
Global.game.scale.parentIsWindow = true;
...
}
function resize () {
Global.game.scale.refresh();
}
When I use this code, game scale correct when game started. When in device:
1. change position with horizontal on vertical, game is scaled but on left and right is see white background
2. change position with vertical on horizontal, game is scaled but on bottom I see white background
I use Phaser 2.3
Does anyone know the solution to my problem?
Thank you =)
BEST SOLUTION
Phaser 2.3 have a bug - not change resize site. I download 2.4.3 version.
I've added features that is loaded at the beginning, which guards the resolution change
var attacks.base.x = 110;
var attacks.base.y = 190;
$(document).ready(function () {
handleScreenResize();
});
function handleScreenResize() {
$(window).resize(function () {
clearTimeout(timeoutResize);
timeoutResize = setTimeout(function () {
var xButtonBase;
var yButtonBase;
/* resize game */
game.scale.scaleMode = Phaser.ScaleManager.RESIZE;
game.scale.pageAlignHorizontally = true;
game.scale.pageAlignVertically = true;
game.scale.forceLandscape = true;
game.scale.parentIsWindow = true;
game.scale.refresh();
/* get new width and height*/
var gameWidth = game.width < game.world.width ? game.width : game.world.width;
/** If you have static button you have change position use "cameraOffset.x" and "cameraOffset.y" set new position*/
/* change position buttons attack */
if(settings.control_option === 'RIGHTHAND') {
xButtonBase = attacks.base.x;
yButtonBase = game.height - attacks.base.y;
} else {
xButtonBase = gameWidth - attacks.base.x;
yButtonBase = game.height - attacks.base.y;
}
/** set position buttons with attack and assist (down screen)*/
attacks.base.button.cameraOffset.x = xButtonBase;
attacks.base.button.cameraOffset.y = yButtonBase;
}, 1000);
});
}
In preload add this script
function preload() {
...
Global.game.scale.scaleMode = Phaser.ScaleManager.RESIZE;
Global.game.scale.pageAlignHorizontally = true;
Global.game.scale.pageAlignVertically = true;
Global.game.scale.forceLandscape = true;
Global.game.scale.parentIsWindow = true;
Global.game.scale.refresh();
...
}

This sounds like an issue that my friend and I were getting when we were trying to re-size our game to a larger resolution if our window changed size.
See this issue: https://github.com/photonstorm/phaser/issues/1881
It should be fixed in Phaser 2.4 (RC1 is out now).

Changing cursor to pointer on roll over in HTML5 canvas with Flash CC

I'm working on adding some interactivity to some buttons in an HTML5 canvas document in FLASH CC. The functionality works great, but I can't figure out how to add the JS to it for adding a rollover so that the handcursor/pointer appears when the buttons are rolled over.
I know how to do this in AS3 through the buttonMode, but I'm a total noob to JS.
Below is the code that I have currently for the buttons in the HTMl5 canvas doc, Thanks in advance for any help!
var frequency = 1;
stage.enableMouseOver(frequency);
this.btn_yes.addEventListener("click", clickYes.bind(this));
this.btn_no.addEventListener("click", clickNo.bind(this));
this.btn_yes.addEventListener("mouseover", MouseOverYes);
this.btn_yes.addEventListener("mouseout", MouseOutYes);
this.btn_no.addEventListener("mouseover", MouseOverNo);
this.btn_no.addEventListener("mouseout", MouseOutNo);
function clickYes()
{
this.gotoAndPlay("chooseYes");
}
function clickNo()
{
this.gotoAndPlay("no");
}
function MouseOverYes()
{
this.btn_yes.style.cursor = 'pointer';
}
function MouseOutYes()
{
this.btn_yes.style.cursor = 'default';
}
function MouseOverNo()
{
this.btn_no.style.cursor = 'pointer';
}
function MouseOutNo()
{
this.btn_no.style.cursor = 'default';
}

Maybe try this one.
stage.enableMouseOver();
var root = this;
root.theButtonName.cursor = "pointer";

stage.canvas.style.cursor = "default";
will set the mouse cursor to it's normal state.
stage.canvas.style.cursor = "none";
This will make the mouse cursor disappear, there's a serious lack of documentation on everything right now. Trying to find a good resource for coding in flash canvas as well. if you find one please let me know.

#user3570797
If you are using FlashCC, this can be done easily by creating button symbols. Try something like this: http://grab.by/Ktw2
Then reference these buttons by name via the 'ExportRoot' object and attach event handlers to those buttons.
Example:
function init() {
canvas = document.getElementById("canvas");
exportRoot = new lib.Button();
stage = new createjs.Stage(canvas);
stage.addChild(exportRoot);
stage.update();
stage.enableMouseOver();
var yesBtn = exportRoot.yesBtn;
var noBtn = exportRoot.noBtn;
yesBtn.addEventListener("click", handleClick);
noBtn.addEventListener("click", handleClick);
createjs.Ticker.setFPS(lib.properties.fps);
createjs.Ticker.addEventListener("tick", stage);
}
function handleClick(event) {
//doSomething...
}

Hide the cursor and make it stop moving using Javascript

I'm making a 3D game where the camera needs to be pretty much identical to the World of Warcraft one. That means, that once the screen is clicked, the cursor disappears, and when the mouse is moved, the camera rotates around a focus point (the player).
I made most of the code, the cursor does disappear when the screen is clicked, but the problem is that it is still moving, even though it isn't shown. That feels unnatural, and I'd like to have the cursor to stay at the same spot for the whole time.
So, how do I achieve this with Javascript?
The only support reqs are the latest versions of Chrome and Firefox.

You can't manipulate the position of the cursor like that in JavaScript because of the security implications that it incurs.

If I am getting your question right,
Not possible via javascript, you will need flash.
But yes, some progess is really going on,
Pointer lock api
Update: (I had free time, so I played with it)
You can try something like this, its not perfect,not recommended and it fails when original mouse reaches the screen borders (however you can restrict the mouse movements in a wrapper, that will solve the problem).
Html:
<body style='width:100%;min-height:800px;overflow:hidden'>
<img id='fakeCursor' src='http://i50.tinypic.com/359d3km.jpg' style='z-index:1000;position:absolute;display:none' />
<div href='javascript:void(0);' style='position:absolute;left:50px;top:10px;width:100px;height:100px;background:gray;' onclick='console.log("fake click 1");return false;'>Fake click 1</div>
<div href='javascript:void(0);' style='position:absolute;left:50px;top:130px;width:100px;height:100px;background:gray;' onclick='console.log("fake click 2");return false;'>Fake click 2</div>
</body>
Javascript:
var clientX,clientY;
var fakeCursor = document.getElementById('fakeCursor');
var isFakeMouse = false;
document.onclick = function(e){
if(isFakeMouse){
if(document.elementFromPoint(fakeCursor.style.left,fakeCursor.style.top)!=null){
document.elementFromPoint(fakeCursor.style.left,fakeCursor.style.top).click();
return false;
}
fakeCursor.style.display = 'inline';
fakeLeft = clientX;
fakeTop = clientY;
var mouseLastLeft = -1;
var mouseLastTop = -1;
document.onmousemove = function(e){
if(mouseLastLeft ===-1 && mouseLastTop ===-1){
mouseLastLeft = e.clientX;
mouseLastTop = e.clientY;
return;
}
fakeCursor.style.left = (parseInt(fakeCursor.style.left) + ((mouseLastLeft - e.clientX)*-1)) + 'px';
fakeCursor.style.top = (parseInt(fakeCursor.style.top) + ((mouseLastTop - e.clientY)*-1)) + 'px';
mouseLastLeft = e.clientX;
mouseLastTop = e.clientY;
}
}
else{
isFakeMouse = true;
document.body.style.cursor = "none";
fakeCursor.style.display = 'none';
fakeCursor.style.left = clientX = e.clientX;
fakeCursor.style.top = clientY = e.clientY;
document.onmousemove = null;
}
}
Here, at first click on document, the real mouse hides. When user clicks document again, real mouse would be still hidden and a new fake mouse (an image) will take its place. Position of the fake mouse would be the same where user has left the real mouse. fake mouse works (tries) to work like real mouse.
Sorry for inline css and javascrict