Automate Drawing Circles

[charlesn79540358]

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

[ClayUUID]

It's blurry because Animate HTML5 Canvas documents render to a bitmap, and that's what bitmaps look like when you enlarge them. If you want it to stay sharp, you need to move your zooming functionality into the FLA itself.

[charlesn79540358]

So can we do that inside of Adobe Animate or do we need to make a zooming function before it gets converted to HTML5/Canvas or Can we create zooming function after it as been converted?

[ClayUUID]

charlesn79540358  wrote

So can we do that inside of Adobe Animate or do we need to make a zooming function before it gets converted to HTML5/Canvas...

Please explain how you think those first two options are different things.

[charlesn79540358]

I didn't know if you meant to open up the flash file in Adobe animate and create a zoom function using actionscript then converted to HTML5/Canvas. Or Convert the document to HTML5/Canvas right away then use javascript inside Adobe animate to create a zooming function. Sorry for the confusion.

[ClayUUID]

charlesn79540358  wrote

I didn't know if you meant to open up the flash file in Adobe animate and create a zoom function using actionscript then converted to HTML5/Canvas.

Uh, ActionScript doesn't get converted when you change a document's type from AS3 to Canvas. It just gets commented out. That's usually the very first thing people discover when doing that.

[charlesn79540358]

Hello,

I found a zoom function that you created and I got it to work on the example that you gave us but when I try to use it with the tool tip and hover code that you gave me a few months back it doesn't display the tool tip I wonder it is because I am converting the diagram to a movie clip.

Here is the zoom feature that I found Zooming and panning map in Animate CC movie html5 to Canvas

[JoãoCésar]

Hello.

That's awesome that you managed to apply that zoom function.

About the tooltip issue, I'll have to see your code. I need to check, among other possible things, how you are referencing things.

Thanks.

[charlesn79540358]

Sorry for the late response but I wanted to figure out the tool tip issue on my own which I did! The tool tip is working. Now all I have to do is figure out why the  drag response time is very slow.

Thank you!

[JoãoCésar]

Excellent! Congratulations!

About being slow:

- Try testing your file with and without exporting the document as texture (Publish Settings > JavaScript/HTML > Image Settings > Export document as texture);

- Consider turning off the advanced layers mode (Ctrl/Cmd + J) if you don't need advanced features like camera or parenting because this mode has some impact on performance;

- Avoid complex containers with lots of children;

- Avoid complex shapes;

- Make sure you're not using color effects/filters;

- Use cache whenever possible;

- Avoid using large bitmaps. This is specially true for mobile devices;

- Try to balance wisely when an asset should be made of a vector shape or of a bitmap;

- Avoid using too many static text fields because they are exported as raw vector shapes;

- Avoid adding too many listeners;

- Add mouse events to a container and use the event.target property instead of adding a separate mouse event to dozens or hundreds of children;

- If possible set a container.tickChildren to false so the tick will not be propagated to children of a container;

- If using a tick event it may be a good idea to change the Ticker.timingMode and see which one works best for your case;

- Avoid using motion tweens because they are exported as frame by frame animation;

- Avoid having a huge main timeline with lots of tweens;

- Avoing very large shape tween spans.

I hope this helps.

Regards,

JC

[charlesn79540358]

Thank you for the tips.

I have imported new arrow images because our diagrams are all on white stages. But every time I publish the new HTML5/Canvas project I have to modify the JS file because it doesn't save the path directory for the imported arrows. Am I doing something wrong? Are your original arrows not imported when you created your project?

Thank you,

Charles

[JoãoCésar]

Hi.

Which arrow images are you referring to? Also, how are you importing these images: to the Library, at runtime...?

[charlesn79540358]

Hello,

Never mind I got it to work. I am working on the drag which I does drag in some errors when I click on the diagram but not in all areas and the drag is very slow at responding. I did check some of the tips that you left me but I might have to send you the HTML5/Canvas project.

[ClayUUID]

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?

[charlesn79540358]

That is partially true.

[JoãoCésar]

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

[charlesn79540358]

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

[ClayUUID]

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

[JoãoCésar]

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.

[resdesign]

True, then again does he really want to record all these coordinate? In his case I think it is not very useful tho. it seems to me that adding buttons with code would be good only tor something more fluid.

But again you have given a very nice example which will I am sure help lots of people.