Highlighted

Very slow HTML5 movement.

Explorer ,
Aug 06, 2020

Copy link to clipboard

Copied

Hello,

I am a great beginner in Animate HTML5, I use the following code to move, with the mouse, an object named "myClip". This code works very well and also allows not to center the mouse on the object to move:

this.myClip.addEventListener("mousedown", fctIA.bind(this));

function fctIA(evt)
{
var pm = this.globalToLocal(evt.stageX, evt.stageY);

differenceX = (this.myClip.x - pm.x);
differenceY = (this.myClip.y - pm.y);

}

this.myClip.on("pressmove", fctIB.bind(this));

function fctIB(evt)
{
var pm = this.globalToLocal(evt.stageX, evt.stageY);

this.myClip.x = (pm.x + differenceX);
this.myClip.y = (pm.y + differenceY);
stage.update();
}

 

On the other hand, when several layers and clips are present, the movement of myClip becomes very slow: a delay of a few seconds occurs when I try to make a movement.
What is my mistake? How can I fix it?

Thanks to everyone who can help me.

Translated with www.DeepL.com/Translator (free version)

Views

72

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

Very slow HTML5 movement.

Explorer ,
Aug 06, 2020

Copy link to clipboard

Copied

Hello,

I am a great beginner in Animate HTML5, I use the following code to move, with the mouse, an object named "myClip". This code works very well and also allows not to center the mouse on the object to move:

this.myClip.addEventListener("mousedown", fctIA.bind(this));

function fctIA(evt)
{
var pm = this.globalToLocal(evt.stageX, evt.stageY);

differenceX = (this.myClip.x - pm.x);
differenceY = (this.myClip.y - pm.y);

}

this.myClip.on("pressmove", fctIB.bind(this));

function fctIB(evt)
{
var pm = this.globalToLocal(evt.stageX, evt.stageY);

this.myClip.x = (pm.x + differenceX);
this.myClip.y = (pm.y + differenceY);
stage.update();
}

 

On the other hand, when several layers and clips are present, the movement of myClip becomes very slow: a delay of a few seconds occurs when I try to make a movement.
What is my mistake? How can I fix it?

Thanks to everyone who can help me.

Translated with www.DeepL.com/Translator (free version)

Views

73

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
Aug 06, 2020 0
Explorer ,
Aug 07, 2020

Copy link to clipboard

Copied

Continued:

You can find an example of the file by following the link below.

https://svtanim.pagesperso-orange.fr/Page(2).htm

The HTML file is 3kb and the js 1205 kb. I don't know if that's a lot. It's been many hours that I've been trying to solve my problem but nothing works.

Thank you for any answer.

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...
Aug 07, 2020 0
Adobe Community Professional ,
Aug 07, 2020

Copy link to clipboard

Copied

Hi.

 

There are several possible reasons. By taking a quick look at your code, one of the possible ones may be:

 

- You seem to be exporting your content as raw vector shapes. Have you tried the texture output?

image.png

 

- Your artwork may be composed of several layers and or groups, drawing objects, and raw shapes. Try to simplify your artwork as much as you can.

 

- After applying the optimizations above, try rasing the framerate to 60 fps.

 

Here's a list of general optimizations that I would like to suggest:

- 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 low resolution values for exported bitmaps (Publish Settings > JavaScript/HTML > Image Settings > Resolution);

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

 

 

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...
Aug 07, 2020 0
Explorer ,
Aug 07, 2020

Copy link to clipboard

Copied

Thank you very much for your response. I had already removed all the bitmaps from the document by transforming them into vectorials.
On the other hand, it turns out that I can't publish under "Texture": the software refuses it. Your colleagues couldn't give me a solution (if you have an idea). When I do it, the page is blank but the file size is indeed considerably reduced. This seems to me to be the solution.
Concerning the ticker, I don't know where to place it: I tried several formulas but nothing conclusive. Concerning the bitmap caching, can we do it using the code (I found some information but nothing works) or in the property panel?
I don't know how to use eventTarget.

Many thanks for your time.

Translated with www.DeepL.com/Translator (free version)

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...
Aug 07, 2020 0