Highlighted

Automate Drawing Circles

Explorer ,
Jan 03, 2019

Copy link to clipboard

Copied

Hello,

I know you can't convert actionscript actions to javascript. But can you automate drawing circles on a parts diagram? So you don't have to manually create 50 circles.

Thank you

Adobe Community Professional
Correct answer by JoãoCésar | Adobe Community Professional

Hi.

Here's one suggestion.

JavaScript code:

// advanced layers off

// export document as texture is off

// tested in Animate CC 2019 (version 19.1, build 349)

var hoverColor = "#E59A18";

var that = this;

var captionText = this.dtext;

var tip;

var parts =

{

    hot1_btn:"Description 1",

    hot1b_btn:"Description 1b",

    hot2_btn:"Description 2",

    hot2b_btn:"Description 2b",

    hot3_btn:"Description 3",

    hot4_btn:"Description 4",

    hot5_btn:"Description 5",

    hot6_btn:"Description 6",

    hot7_btn:"Description 7",

    hot8_btn:"Description 8",

    hot9_btn:"Description 9",

    hot10_btn:"Description 10",

    hot11_btn:"Description 11",

    hot12_btn:"Description 12"

};

function start()

{

    stage.enableMouseOver();

    tip = new lib.Tip();

    that.children.forEach(function(child)

    {

          if (parts[child.name])

          {

              child.startColor = child.shape.graphics._fill.style;

              child.on("click", function(e)

              {

                    captionText.text = parts[child.name];

              });

              child.on("mouseover", function(e)

              {

                    child.shape.graphics._fill.style = hoverColor;

                    tip.x = e.currentTarget.x;

                    tip.y = e.currentTarget.y - tip.nominalBounds.height * 0.5;

                    tip.txt.text = e.currentTarget.name.replace("hot", "").replace("_btn", "");

                    that.addChild(tip);

              });

              child.on("mouseout", function(e)

              {

                    child.shape.graphics._fill.style = child.startColor;

                    that.removeChild(tip);

              });

          }

    });

}

stage.on("drawstart", start, null, true);

FLA download:

animate_cc_html5_canvas_many_circles_02.zip - Google Drive

I hope this helps.

Regards,

JC

Views

733

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

Automate Drawing Circles

Explorer ,
Jan 03, 2019

Copy link to clipboard

Copied

Hello,

I know you can't convert actionscript actions to javascript. But can you automate drawing circles on a parts diagram? So you don't have to manually create 50 circles.

Thank you

Adobe Community Professional
Correct answer by JoãoCésar | Adobe Community Professional

Hi.

Here's one suggestion.

JavaScript code:

// advanced layers off

// export document as texture is off

// tested in Animate CC 2019 (version 19.1, build 349)

var hoverColor = "#E59A18";

var that = this;

var captionText = this.dtext;

var tip;

var parts =

{

    hot1_btn:"Description 1",

    hot1b_btn:"Description 1b",

    hot2_btn:"Description 2",

    hot2b_btn:"Description 2b",

    hot3_btn:"Description 3",

    hot4_btn:"Description 4",

    hot5_btn:"Description 5",

    hot6_btn:"Description 6",

    hot7_btn:"Description 7",

    hot8_btn:"Description 8",

    hot9_btn:"Description 9",

    hot10_btn:"Description 10",

    hot11_btn:"Description 11",

    hot12_btn:"Description 12"

};

function start()

{

    stage.enableMouseOver();

    tip = new lib.Tip();

    that.children.forEach(function(child)

    {

          if (parts[child.name])

          {

              child.startColor = child.shape.graphics._fill.style;

              child.on("click", function(e)

              {

                    captionText.text = parts[child.name];

              });

              child.on("mouseover", function(e)

              {

                    child.shape.graphics._fill.style = hoverColor;

                    tip.x = e.currentTarget.x;

                    tip.y = e.currentTarget.y - tip.nominalBounds.height * 0.5;

                    tip.txt.text = e.currentTarget.name.replace("hot", "").replace("_btn", "");

                    that.addChild(tip);

              });

              child.on("mouseout", function(e)

              {

                    child.shape.graphics._fill.style = child.startColor;

                    that.removeChild(tip);

              });

          }

    });

}

stage.on("drawstart", start, null, true);

FLA download:

animate_cc_html5_canvas_many_circles_02.zip - Google Drive

I hope this helps.

Regards,

JC

Views

734

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
Jan 03, 2019 0
Adobe Community Professional ,
Jan 03, 2019

Copy link to clipboard

Copied

Hi.

Can you provide more details?

Regards,

JC

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

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...
Jan 03, 2019 0
Explorer ,
Jan 04, 2019

Copy link to clipboard

Copied

Hello,

Here is a small example. So we get these diagrams created with circles on them and we have to convert it to a flash file with using actionscript so the user can click on the circle and it will highlight them in a orange color and put the matching part number to the top of the list.

Since Flash is going away I found Adobe Animate can convert it to a HTML5/Canvas but we have to create all the buttons and the action clicks still. I found the duplicate button feature in Adobe Animate but most of our diagrams have 50 circles or more. Just trying to find a fast solution.

diagramCapture.PNG

Thank you,

Charles

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...
Jan 04, 2019 0
Adobe Community Professional ,
Jan 04, 2019

Copy link to clipboard

Copied

Hi.

Thanks for the example.

But I'll have to apologize because I'm still not getting...

Do you have it all setup in Animate for an AS3 document but now you want the same interactivity in a HTML5 canvas document, right?

But what is the issue you want to solve? You need a code to add the buttons at runtime for you, to add interactivity to them, to design/build them...?

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

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...
Jan 04, 2019 0
Explorer ,
Jan 04, 2019

Copy link to clipboard

Copied

Hello,

I take the flash file and convert it to a HTML5/Canvas document but none of the high lightening or user clicks don't work. So I just create another circle with a textbox that has a number 4 and convert it to a symbol using that symbol you can add javascript code to let the user click on the circle then I lay it over top of the matching number 4 on the diagram. I have to do this with all the circles. Just trying to find a fast way to duplicate the circles. Because we have 2,400 diagrams and a lot of them have 50-60 hotspot circles. 

Hopefully this makes sense.

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...
Jan 04, 2019 0
Advocate ,
Jan 04, 2019

Copy link to clipboard

Copied

charlesn79540358  wrote

Because we have 2,400 diagrams and a lot of them have 50-60 hotspot circles. 

Hi Charlesn

are you serious. 2,400 diagrams with so many hotspot circles. Do you need support, I'm looking currently for work, 😉 just kidding.

charlesn79540358  wrote

I take the flash file and convert it to a HTML5/Canvas document but none of the high lightening or user clicks don't work.

This sounds like as you would have all illustrations incl. hotspot-circles incl. Actionscript ready. In AS3. In that case, you don't need to create other circles. Re-use the circle-symbols (whatever they are, buttons or movieclips? - doesn't matter really). But you have to write new Javascript-code. And here it depends very much how you organised your code in AS3 (was it AS3 by the way?) in the first place to tell how much effort the re-write to Javascript will be. If you'd share one illustration that might help here to answer your question more sufficiently.

In short: In my view you don't need new circles. what you need is new code (JS). But maybe I dunno what you really mean. And for sure João will reply soon.

Klaus

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...
Jan 04, 2019 2
Adobe Community Professional ,
Jan 04, 2019

Copy link to clipboard

Copied

Thanks.

If I'm understanding what you want, my suggestion is:

- Create the buttons with all numbers you need;

- Create an empty container;

- Add all buttons to this container by dragging and dropping from the Library or alt + dragging the ones already on stage;

- Them with one single code you can add a listener to this container and make all buttons work no matter how many are in there or their names.

Here is a video of this process:

animate_cc_html5_canvas_many_circles.mp4 - Google Drive

JavaScript code:

var that = this;

var buttons = this.buttons;

var previousButton;

this.start = function()

{

    buttons.on("click", function(e)

    {

          if (previousButton)

              that.toggleButton(previousButton, {outLabel:0, overLabel:1, downLabel:2});

          that.toggleButton(e.target, {outLabel:2, overLabel:2, downLabel:2});

          previousButton = e.target;

    });

};

this.toggleButton = function(button, frames)

{

    var listeners = button._listeners;

    if (!listeners)

          return;

    for (var key in listeners)

    {

          var listener = listeners[key][0];

          if (typeof(listener.outLabel) !== 'undefined')

              listener.outLabel = frames.outLabel;

          if (typeof(listener.overLabel) !== 'undefined')

              listener.overLabel = frames.overLabel;

          if (typeof(listener.downLabel) !== 'undefined')

              listener.downLabel = frames.downLabel;

    }

    button.gotoAndStop(frames.outLabel);

};

this.start();

FLA download:

animate_cc_html5_canvas_many_circles.zip - Google Drive

I hope this helps. If this is not what you want, please tell us how can we help you make this whole process easier.

Regards,

JC

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

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...
Jan 04, 2019 2
Explorer ,
Jan 04, 2019

Copy link to clipboard

Copied

Hello,

Thank you for the video and code you are on the right track on how I tried to explain it. You still had to create all the buttons manually right? There was no way to feed coordinates into Adobe animate to draw the circles for you. Or feed in any information that Adobe Animate would draw the circles.

Thank you,

Charles

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...
Jan 04, 2019 0
Adobe Community Professional ,
Jan 04, 2019

Copy link to clipboard

Copied

I honestly don't understand what you're hoping for that would be less effort than pressing Ctrl-V.

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...
Jan 04, 2019 1
Explorer ,
Jan 04, 2019

Copy link to clipboard

Copied

When you do convert the diagram to html5/canvas I notice that Adobe Animate recognizes that buttons are there but they are movie clips and I really didn't know how to work with them so I just created new buttons with javascript but if there is an easier way to use the current movie clips that are already place then it would save us some time.

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...
Jan 04, 2019 0
Adobe Community Professional ,
Jan 04, 2019

Copy link to clipboard

Copied

Yeah. If you have the coordinates, things will be way easier.

It will be just a matter of referencing an array with the coords and linkage names.

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

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...
Jan 04, 2019 2
Adobe Community Professional ,
Jan 04, 2019

Copy link to clipboard

Copied

Hi.

Can you provide a working AS3 FLA you had before converting to HTML5 so we can understand better what you want to achieve?

Thanks.

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

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...
Jan 04, 2019 0
Adobe Community Professional ,
Jan 04, 2019

Copy link to clipboard

Copied

charlesn79540358  wrote

When you do convert the diagram to html5/canvas I notice that Adobe Animate recognizes that buttons are there but they are movie clips and I really didn't know how to work with them so I just created new buttons

And... you thought that creating hundreds of new buttons would be less effort than figuring out how to reuse the existing ones?

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...
Jan 04, 2019 0
Explorer ,
Jan 04, 2019

Copy link to clipboard

Copied

That is partially true.

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...
Jan 04, 2019 0
Explorer ,
Jan 04, 2019

Copy link to clipboard

Copied

See if this will work

test1.zip - Google Drive

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...
Jan 04, 2019 0
Adobe Community Professional ,
Jan 04, 2019

Copy link to clipboard

Copied

Thanks.

There are two classes you forgot to include. So I couldn't see the code running.

I could only assume that you want to show some text when each button is clicked. What I did was to create an object containing placeholder text to be shown in that text field on top.

The good thing is that you won't have to create any button.

JS code:

var that = this;

var captionText = this.dtext;

var parts =

{

    hot1_btn:"Description 1",

    hot1b_btn:"Description 1b",

    hot2_btn:"Description 2",

    hot2b_btn:"Description 2b",

    hot3_btn:"Description 3",

    hot4_btn:"Description 4",

    hot5_btn:"Description 5",

    hot6_btn:"Description 6",

    hot7_btn:"Description 7",

    hot8_btn:"Description 8",

    hot9_btn:"Description 9",

    hot10_btn:"Description 10",

    hot11_btn:"Description 11",

    hot12_btn:"Description 12"

};

function start()

{

    that.on("click", function(e)

    {

          var caption = parts[e.target.parent.name];

          if (!caption)

              return;

          captionText.text = caption;

    });

}

start();

FLA download:

test_html5_canvas.zip - Google Drive

Regards,

JC

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

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...
Jan 04, 2019 1
Explorer ,
Jan 07, 2019

Copy link to clipboard

Copied

Thank you so much.

I am using adobe animate 2017 don't know if that is a difference but I couldn't get your project to work. What the webpage is suppose to do is if you hover over one of the buttons it changes the background to an orange color but say you have a number multiple times. Example hotspot #1 hover over one of the hotspots number #1 and it will change all the #1's background to an orange color and have a pop up circle with the same number in it. 

Hopefully this makes sense.

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...
Jan 07, 2019 0
Explorer ,
Jan 07, 2019

Copy link to clipboard

Copied

I did get it to work in 2019

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...
Jan 07, 2019 1
Explorer ,
Jan 09, 2019

Copy link to clipboard

Copied

I am trying to add on to your code if you hover over the button it changes the background color to a orange color and a tool tip pops up that has the button number in it.

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...
Jan 09, 2019 0
Adobe Community Professional ,
Jan 09, 2019

Copy link to clipboard

Copied

Hi.

Here's one suggestion.

JavaScript code:

// advanced layers off

// export document as texture is off

// tested in Animate CC 2019 (version 19.1, build 349)

var hoverColor = "#E59A18";

var that = this;

var captionText = this.dtext;

var tip;

var parts =

{

    hot1_btn:"Description 1",

    hot1b_btn:"Description 1b",

    hot2_btn:"Description 2",

    hot2b_btn:"Description 2b",

    hot3_btn:"Description 3",

    hot4_btn:"Description 4",

    hot5_btn:"Description 5",

    hot6_btn:"Description 6",

    hot7_btn:"Description 7",

    hot8_btn:"Description 8",

    hot9_btn:"Description 9",

    hot10_btn:"Description 10",

    hot11_btn:"Description 11",

    hot12_btn:"Description 12"

};

function start()

{

    stage.enableMouseOver();

    tip = new lib.Tip();

    that.children.forEach(function(child)

    {

          if (parts[child.name])

          {

              child.startColor = child.shape.graphics._fill.style;

              child.on("click", function(e)

              {

                    captionText.text = parts[child.name];

              });

              child.on("mouseover", function(e)

              {

                    child.shape.graphics._fill.style = hoverColor;

                    tip.x = e.currentTarget.x;

                    tip.y = e.currentTarget.y - tip.nominalBounds.height * 0.5;

                    tip.txt.text = e.currentTarget.name.replace("hot", "").replace("_btn", "");

                    that.addChild(tip);

              });

              child.on("mouseout", function(e)

              {

                    child.shape.graphics._fill.style = child.startColor;

                    that.removeChild(tip);

              });

          }

    });

}

stage.on("drawstart", start, null, true);

FLA download:

animate_cc_html5_canvas_many_circles_02.zip - Google Drive

I hope this helps.

Regards,

JC

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

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...
Jan 09, 2019 0
Explorer ,
Jan 10, 2019

Copy link to clipboard

Copied

Thank You so much

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...
Jan 10, 2019 1
Adobe Community Professional ,
Jan 10, 2019

Copy link to clipboard

Copied

You're welcome!

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

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...
Jan 10, 2019 0
Explorer ,
Jan 10, 2019

Copy link to clipboard

Copied

Sorry but I have one more question. I got your project to work and it works awesome. I am trying to replicate what you did on a new project using the same flash file.

Did you have to modify it before converting to HTML5/Canvas? I saw that there is a UI layer and a JS layer.

Sorry for all the questions.

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...
Jan 10, 2019 0
Explorer ,
Jan 10, 2019

Copy link to clipboard

Copied

Nevermind I got it

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...
Jan 10, 2019 1
Adobe Community Professional ,
Jan 10, 2019

Copy link to clipboard

Copied

No problem.

You don't need to organize layers as I have done. You only need to have the code in any layer of the frame 1 of the main timeline.

But please notice that you must keep Use Advanced Layers off:

And Export document as texture off as well.

You won't need to change these two settings because they didn't exist in the AS2 era.

Also, you need that Tip symbol in your Library.

Regards,

JC

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

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...
Jan 10, 2019 2
Explorer ,
Jan 11, 2019

Copy link to clipboard

Copied

Thanks for helping me.

I have one more thing so I found this code out side of Adobe animate. The function lets you zoom in and out on the diagram would it be easier to add it to the Adobe Animate project or keep it outside. The only thing the diagram starts getting blurry when zooming is that because of the quality of the diagram?

Thank you.

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...
Jan 11, 2019 0
Explorer ,
Mar 08, 2019

Copy link to clipboard

Copied

I have another question is there a way to loop through the movie clip names to get the instance name using javascript?

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...
Mar 08, 2019 0
Adobe Community Professional ,
Mar 08, 2019

Copy link to clipboard

Copied

Hi again.

Yeah, there is.

Supposing you have a container called rec with some Movie Clip instances inside of it. The code should look like:

var tl = this;

tl.getNames = function(e)

{

    tl.recs.children.forEach(function(rec) // tl.recs.children works if advanced layers mode is off

    {

        console.log(rec.name);

    });

  

    stage.off("drawstart", tl.getNames);

};

stage.on("drawstart", tl.getNames, null, true); // make sure the children are ready

I hope this helps.

Regards,

JC

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

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...
Mar 08, 2019 0