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

Forum|Forum|6 years ago
November 19, 2019
3 replies
2982 views

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.

This topic has been closed for replies.

Correct answer ClayUUID

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;

P

philpaAuthor

Known Participant

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.

C

ClayUUID

Legend

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

P

philpaAuthor

Known Participant

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

C

ClayUUIDCorrect answer

Legend

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;

P

philpaAuthor

Known Participant

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

P

philpaAuthor

Known Participant

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 .......