Mouseover panning image within container Javascript for Html Canvas

[matthewh23593695]

Hello,

I am very new to animate cc and only know the basics. I would like to recreate this Magic Mouse Pan Image Windows Flash AS3 Tutorial CS3 CS4 - YouTube but with Javascript not ActionScript. I need it to place within my muse site once created.

Hoping someone out there can help. I have searched the internet and found many things close to what I want to achieve but the code just isn't quite right.

Many Thanks,

Matt

[kglad]

forums are a good place to get help.

there not as helpful if you want someone to do your work for you (unless you're asking for something basic) and you're not asking us to check another link and spend time watching a video.

so, if what you want is simple and basic, explain what's in the video.

[matthewh23593695]

All I want is to create a layer with a big image,  a layer with a rectangle within that rectangle you can pan around the image using code.

However this needs to be for Html canvas and exported as an oam file so an actionscript 3 code will not work.

Well it does seem quite basic however I haven't managed to find a solution on the interent so its actually probaby quite challenge.

Tried to covert the videos code to javascript

// Set variables for numbers we need in our equations

var activatorWidth:int = activator.width;

var activatorHeight:int = activator.height;

var boundX:int = bigPic.x + activator.x * 2;

var boundY:int = bigPic.y + activator.y * 2;

var diffX:int = bigPic.width - activatorWidth;

var diffY:int = bigPic.height - activatorHeight;

var easeSpeed:int = 7;

// Function that activates the movement (MOUSE_OVER activator)

function activate(event:Event):void {

  var divX:Number = mouseX / activatorWidth;

  var divY:Number = mouseY / activatorHeight;

  var moveX:Number = divX * diffX;

  var moveY:Number = divY * diffY;

  bigPic.x += (boundX - moveX - bigPic.x) / easeSpeed;

  bigPic.y += (boundY - moveY - bigPic.y) / easeSpeed;

}

// Listeners on the activator to Add / Remove Enter Frame Events

activator.addEventListener(MouseEvent.MOUSE_OVER, addEnterFrameEvent);

activator.addEventListener(MouseEvent.MOUSE_OUT, removeEnterFrameEvent);

// Add Enter Frame Event Function

function addEnterFrameEvent (event:MouseEvent):void {

  addEventListener(Event.ENTER_FRAME, activate);

}

// Remove Enter Frame Event Function

function removeEnterFrameEvent (event:MouseEvent):void {

  removeEventListener(Event.ENTER_FRAME, activate);

}

Need an experienced coder.

[AMULI]

To convert to JavaScript, you should use CreateJS, a JavaScript library whose API is very near from AS3.

[ClayUUID · Accepted solution]

Correction, the CreateJS API is very near to AS2, not AS3. In part because it's native JavaScript, which AS2 more closely resembles than AS3. For example JavaScript and AS2 do not have explicit variable typing, like AS3 does.

[AMULI]

ClayUUID a écrit:

Correction, the CreateJS API is very near to AS2, not AS3. In part because it's native JavaScript, which AS2 more closely resembles than AS3. For example JavaScript and AS2 do not have explicit variable typing, like AS3 does.

You're right, ClayUUID​, considering JavaScript being not strongly typed, CreateJS is nearer AS2 which isn't than AS3 which is.

But what I meant is CreateJS, as a graphics programming API, is very near from AS3, with the same principle of display list – though with little differences. Put another way, for someone with graphics programming experience in AS3, it's rather easy to transition to CreateJS API, as properties and methods are familiar ones

Enregistrer

[matthewh23593695]

Awesome thank you very much. Will look into converting the code.

Hopefully it will work.

[kglad]

oh, it will work. you have (or someone else has) to just do the work of converting.