Exit
  • Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
  • 한국 커뮤니티
0

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

New Here ,
Nov 19, 2019 Nov 19, 2019

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.

TOPICS
Code , How to
2.8K
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

LEGEND , Nov 19, 2019 Nov 19, 2019

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;

 

 

 

Translate
Community Expert ,
Nov 19, 2019 Nov 19, 2019
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Nov 19, 2019 Nov 19, 2019

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;

 

 

 

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

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

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

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

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Nov 20, 2019 Nov 20, 2019

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

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Nov 20, 2019 Nov 20, 2019

there's a text input component.

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

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.

 

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Dec 05, 2019 Dec 05, 2019

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

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Dec 05, 2019 Dec 05, 2019
LATEST

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

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