CODEWITHSUNDEEP
flashjquery-animatecreatejseaseljs
user3111433
user3111433

Reputation: 1

How to add symbols to a container using createJS in Flash (or Animate CC)

I've done this in action script, but can't figure out how to do it in javascript for a html5 canvas project in Animate CC.

Basically, I have two buttons on the stage that add a symbol instance to a container. The symbols added to the container contain action script that makes them drag and dropable. There is also a reset button that clears empties the container. I am trying to figure out how to do this same thing in javascript (specifically adding the symbol instances to a container). Here is my action script on the main timeline:

import flash.display.Sprite;


//creates container that we'll add instances to
var container:Sprite = new Sprite();
addChild(container);
container.x = 577;
container.y = 500; 

//*******Button Man 1******//
slider.btn_man1.addEventListener(MouseEvent.CLICK, fl_MouseClickHandler);
function fl_MouseClickHandler(event:MouseEvent):void
{
    //adds symbol instance of man1_Instance to the container
    var man1:man1_Instance = new man1_Instance();
    container.addChild(man1);
}


//*******Button Man 2******//
slider.btn_man2.addEventListener(MouseEvent.CLICK, fl_MouseClickHandler1);
function fl_MouseClickHandler1(event:MouseEvent):void
{
    //adds symbol instance of man2_Instance to the container
    var man2:man2_Instance = new man2_Instance();
    container.addChild(man2);
}

//****Reset button****//
btn_reset.addEventListener(MouseEvent.CLICK, fl_MouseClickHandler_4);

function fl_MouseClickHandler_4(event:MouseEvent):void
{
    container.removeChildren();

}

Upvotes: 0

Views: 2778

Answers (1)

Lanny
Lanny

Reputation: 11294

Most of your code is fine, just needs to be JavaScript-ified (remove types and return values).

//creates container that we'll add instances to
var container = new createjs.Container();
stage.addChild(container); // Will need a reference to the stage.
container.x = 577;
container.y = 500; 

//*******Button Man 1******//
slider.btn_man1.addEventListener("click", fl_MouseClickHandler);
function fl_MouseClickHandler(event)
{
    //adds symbol instance of man1_Instance to the container
    var man1 = new lib.man1_Instance(); // Symbols are part of the lib object
    container.addChild(man1);
}


//*******Button Man 2******//
slider.btn_man2.addEventListener("click", fl_MouseClickHandler1);
function fl_MouseClickHandler1(event)
{
    //adds symbol instance of man2_Instance to the container
    var man2 = new lib.man2_Instance();
    container.addChild(man2);
}

//****Reset button****//
btn_reset.addEventListener("click", fl_MouseClickHandler_4);

function fl_MouseClickHandler_4(event:MouseEvent):void
{
    container.removeAllChildren();
}

You will have to refer the the CreateJS documentation with regards to the classes and APIs you need, but it is very similar to Flash. The main issue with porting AS3 to JavaScript is scope, as variables (especially frame-script variables in Flash/Animate) may be defined on this.

Upvotes: 1

Related Questions