Highlighted

Animate: How do I use code to draw a line inside a movie clip?

New Here ,
Nov 19, 2019

Copy link to clipboard

Copied

I can do this in AS5 where m_paper is my movie clip:

 

m_paper.graphics.lineStyle(5, 0xFF0000, 75);
m_paper.graphics.moveTo(h1, h2);
m_paper.graphics.lineTo(v1, v2);

 

   I extract the h and v values from arrays and the line just draws using an EnterFrame Event (now a "tick"). I insert 'this.' before the m_ during HTML Canvas conversion but the #*#*#* thing does not run.

Adobe Community Professional
Correct answer by ClayUUID | Adobe Community Professional

To draw in CreateJS in Animate, you must first create a Shape object. Then you use the graphics methods on the shape to draw whatever. Then you must add the shape as a child of whatever object you want it to appear on.

 

var thing = new createjs.Shape();
thing.graphics.beginFill("red").drawCircle(0, 0, 50);
this.addChild(thing);
thing.x = thing.y = 100;

 

 

 

TOPICS
Code, How to

Views

549

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Animate: How do I use code to draw a line inside a movie clip?

New Here ,
Nov 19, 2019

Copy link to clipboard

Copied

I can do this in AS5 where m_paper is my movie clip:

 

m_paper.graphics.lineStyle(5, 0xFF0000, 75);
m_paper.graphics.moveTo(h1, h2);
m_paper.graphics.lineTo(v1, v2);

 

   I extract the h and v values from arrays and the line just draws using an EnterFrame Event (now a "tick"). I insert 'this.' before the m_ during HTML Canvas conversion but the #*#*#* thing does not run.

Adobe Community Professional
Correct answer by ClayUUID | Adobe Community Professional

To draw in CreateJS in Animate, you must first create a Shape object. Then you use the graphics methods on the shape to draw whatever. Then you must add the shape as a child of whatever object you want it to appear on.

 

var thing = new createjs.Shape();
thing.graphics.beginFill("red").drawCircle(0, 0, 50);
this.addChild(thing);
thing.x = thing.y = 100;

 

 

 

TOPICS
Code, How to

Views

550

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Nov 19, 2019 0
Adobe Community Professional ,
Nov 19, 2019

Copy link to clipboard

Copied

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 19, 2019 0
Adobe Community Professional ,
Nov 19, 2019

Copy link to clipboard

Copied

To draw in CreateJS in Animate, you must first create a Shape object. Then you use the graphics methods on the shape to draw whatever. Then you must add the shape as a child of whatever object you want it to appear on.

 

var thing = new createjs.Shape();
thing.graphics.beginFill("red").drawCircle(0, 0, 50);
this.addChild(thing);
thing.x = thing.y = 100;

 

 

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 19, 2019 0
New Here ,
Nov 20, 2019

Copy link to clipboard

Copied

Thanks very much. It works great, but now I need to draw inside a Movie Clip.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 20, 2019 0
New Here ,
Nov 20, 2019

Copy link to clipboard

Copied

   Thanks to both of you. For those who may be interested, I can draw a (black) line 1 pixel wide in a Movie Clip (called m_paper) using the following code:

var thing = new createjs.Shape();
thing.graphics.setStrokeStyle(1);
thing.graphics.beginStroke("#000000");
thing.graphics.moveTo(50, 50).lineTo(150, 150);
this.m_paper.addChild(thing);
thing.x = 0;
thing.y = 0;

   This solves a huge problem for me; thank you so much. Now I get to convert a mountain of Flash files to Animate, but then what's time when you're having so much fun!

   If only Animate had Input fields .......

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 20, 2019 0
Adobe Community Professional ,
Nov 20, 2019

Copy link to clipboard

Copied

You don't have explicitly set x and y to 0. Those are the default values.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 20, 2019 0
Adobe Community Professional ,
Nov 20, 2019

Copy link to clipboard

Copied

there's a text input component.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 20, 2019 0
New Here ,
Dec 05, 2019

Copy link to clipboard

Copied

You people provided a wonderful solution to my problem, and I am really grateful. As I am sure you know, you solve one problem and another arises.... How do I erase (clear) the lines in the movie clip?

Thanks.

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 05, 2019 0
Adobe Community Professional ,
Dec 05, 2019

Copy link to clipboard

Copied

Any non-additive change requires clearing the shape and redrawing the entire thing from scratch.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 05, 2019 0
New Here ,
Dec 05, 2019

Copy link to clipboard

Copied

   I expected that. Can you give me a source, please?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 05, 2019 0