Image Panning Animate CC HTML5 project

[Hunsy]

Hello evrybody,

I am trying to make bitmap/image pan when im moving cursor left or right of the screen.

Currently browser console shows coordinates when I move my mouse on the screen but the bitmap image doesnt move.

Project link energy_html5

Project .fla file http://allan.cm.ee/asjad/energy/energy_html5.fla

I have been following JSFiddle projects:

Edit fiddle - JSFiddle

or

Edit fiddle - JSFiddle

I would like to just insert JS into Animate CC actions,  not write it in manually in html file.

$(document).ready(function(){
   $('#canvas').mousemove(function(e){
      var mousePosX = (e.pageX/$(window).width())*100;
      $('#canvas').css('background-position-x', mousePosX +'%');
      var mousePosY = (e.pageY/$(window).height())*100;
      $('#canvas').css('background-position-y', mousePosY +'%');
      console.log(mousePosX, mousePosY);
   });
});

I don't understand following:

$('#canvas').css('backgr...

how do I specify this following line, code I took from JSFiddle has the image link inserted into CSS code, but my image is on canvas?

[JoãoCésar · Accepted solution]

Hi.

If you are going to use Animate CC it makes more sense and it will be easier to use regular objects like Movie Clip, IMO.

Here is a suggestion:

JavaScript code:

var image = this.image;
stage.mouseMoveOutside = true;
stage.on("stagemousemove", function(e)
{
    var canvasWidth = canvas.width / stage.scaleX;
    var canvasHeight = canvas.height / stage.scaleY;
    image.x = (canvasWidth - image.nominalBounds.width) * ((e.stageX / stage.scaleX) / canvasWidth);
    image.y = (canvasHeight - image.nominalBounds.height) * ((e.stageY / stage.scaleY) / canvasHeight) ;
});

FLA download:

animate_cc_html5_image_pan.zip - Google Drive

Regards,

JC

[Hunsy]

Thank you for your help, JoãoCésar you are brilliant!

[JoãoCésar]

You're welcome!