How to convert this code to HTML 5 Canvas

[alexanderp79115696]

drag_mc.buttonMode = true;

drag_mc.addEventListener(MouseEvent.MOUSE_DOWN, startDragging);

drag_mc.addEventListener(MouseEvent.MOUSE_UP, stopDragging);

function startDragging(evt:MouseEvent):void {

    evt.target.startDrag(true);

}

function stopDragging(evt:MouseEvent):void {

    evt.target.stopDrag();

}

//test to see if objects intersect

stage.addEventListener(Event.ENTER_FRAME, checkHitArea);

function checkHitArea(evt:Event){

    if(this.hotspot_mc.hitTestObject(drag_mc)){

        trace("Hitting");

    }else{

        trace("Not hitting");

    }

}

[ClayUUID]

EaselJS Tutorial: Mouse Interaction

EaselJS Tutorial: Using hitTest

[alexanderp79115696 · Accepted solution]

I can give you much better links with code , but it don't work in Adobe Animae CC.

Here is what i need:

var stage, containerDrag, dragOffset;

    function init(){

        //setup stage

        stage = new createjs.Stage('canvas');

        createjs.Ticker.addEventListener("tick", tick);

        createjs.Ticker.setFPS(60);

        //drag container

        containerDrag = new createjs.Container();

        stage.addChild(containerDrag);

        //stage listeners

        stage.addEventListener("stagemousedown", startDrag);  

        stage.addEventListener("stagemouseup", stopDrag);

        dragOffset = new createjs.Point();

        //add random shape to container

        for(var i = 0; i < 100; i++){

            var rect = new createjs.Shape();

            rect.graphics.beginFill('#ffffff').drawRect(0,0,getRandom(1, 3), getRandom(1, 3));

            rect.x = getRandom(0, 1000);

            rect.y = getRandom(0, 1000);

            containerDrag.addChild(rect);

        }

    }   

    //draggable listeners

    function startDrag(){

        dragOffset.x = stage.mouseX - containerDrag.x;

        dragOffset.y = stage.mouseY - containerDrag.y;

        stage.addEventListener("stagemousemove", moveDrag);  

    }  

    function stopDrag(){

         stage.removeEventListener("stagemousemove", moveDrag);  

    }

    function moveDrag(e){

      containerDrag.x = e.stageX - dragOffset.x;

      containerDrag.y = e.stageY - dragOffset.y;

    }   

    //Random utility function   

    function getRandom(min, max){

        return min + (Math.random() * (max-min));

    } 

    function tick(e){

        stage.update();

    }

in js file - it work perfect , but in Adobe Animate CC i see only white screen.

And i need to replace draggable container to any symbol on my stage.

[ClayUUID]

Rip out the parts of that code that you don't need in Animate. You don't need to create a stage. You don't need to create a ticker. You don't need to set the frame rate.

[alexanderp79115696]

I remove this :

       //setup stage

        stage = new createjs.Stage('canvas');

        createjs.Ticker.addEventListener("tick", tick);

        createjs.Ticker.setFPS(60);

Nothing works.

Then i remove this:

    function tick(e){

        stage.update();

    }

Nothing works.

How i can understand what i need to remove?

I'm not programmer.

[ClayUUID]

Sigh. The sample code doesn't set a color for the rectangles it draws, so it's defaulting to white.

[alexanderp79115696]

it does not matter if i replace the container scene symbol.Need just drag and drop functional.

[ClayUUID]

I just pasted in that code, changed the stage color to something other than white, and it worked fine.

Of course you do have to actually call the init() function. Otherwise it's just going to sit there like a lemon.