Skip to main content
Hunsy
Hunsy
Known Participant
November 1, 2018
Answered

Image Panning Animate CC HTML5 project

  • November 1, 2018
  • 1 reply
  • 738 views

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?

This topic has been closed for replies.
Correct answer JoãoCésar17023019

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

1 reply

JoãoCésar17023019
Community Expert
JoãoCésar17023019Community ExpertCorrect answer
Community Expert
November 1, 2018

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
    HunsyAuthor
    Known Participant
    November 2, 2018

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

      JoãoCésar17023019
      Community Expert
      JoãoCésar17023019Community Expert
      Community Expert
      November 2, 2018

      You're welcome!

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices