Highlighted

Performance issues - where to start looking for issues?

Community Beginner ,
May 08, 2019

Copy link to clipboard

Copied

Hello!

I am currently working on a small flash application as a supplementary gimmick to a job application ( as 2D artist ). It has been the first time working with flash for both me and my friend who took over coding, already noting that both flash as an engine and AS3 are a bit particular at times.

The flash file lags but we cannot figure out the issues causing the lag. For the graphics, mostly photoshop processed pngs and a few illustrator files for the hitboxes are used.

There are no overly elaborate functions, if not for segments that needed workarounds because AS3 and flash can be a bit particular at times. If you hover over some items, they jump to a second frame (same with the textbox that just jumps to framelabels according to the item triggered), some have an additional listener for inventory items to show up when clicked and then there is a couple of functions dealing with the animations - the fish - log exchange and the trapdoor trigger ( switching between played animations and locking hitboxes to prevent retriggering before animation has finished playing).

Code can be found on pastebin : [ActionScript 3] Flash game code - Pastebin.com

Since the game lags that much at the moment, I can only offer the file on my google drive as trying to do anything with that on my webpage causes the browser to ask if there is faulty script because of reaction times.

Full Animate file: https://drive.google.com/open?id=1E0AdJ6RKmVuua9LyWfVL4-D9G7_FPeA_

SWF file: https://drive.google.com/open?id=1SnsX-LULbFCGdqTJWkzqkhe7Ie5qCZOR

According to Adobe Scout, the goToAndPlay commands are using up the most power, but even after disabling them nothing changed.

Is there anything one should keep in mind for the graphics and code?

A big thank you in advance for any possible help

(As someone on StackOverflow already pointed out, AS3 and flash are the unloved stepchilds of coding and are apparently running out of support in near future. Nevertheless, the reason why I chose flash for this endeavor was that I grew up with newgrounds and Kongregate so I know that flash can do neat stuff -i if handled properly, that is)

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

Hi.

My suggestions are:

- Try to always keep your project as organized as possible so you can better visualize which parts need more attention;

- Lower the number of instances and containers as much as possible;

- Use the most efficient and manageable instance type for each case. For example: you were using Movie Clips instances for the items in the scene and in the inventory and applying AS3 for hover effect. But it's much easier and efficient to use the default Button which will do this automatically for you. Also, you were duplicating the scene items for hit detection. This is not necessary. If you don't need a timeline, use Sprites instead of MovieClips, and so on.

- If you need mouse events for multiple instances that belongs to the same parent, assign one single listener to the parent and then check which instance received the event using the event.target property.

- Instead of creating various containers for animations of a same character, distribute the animations in one single container and assign labels to them;

- Avoid using very large bitmaps;

- Disable the advanced layers mode (Ctrl/Cmd + J) if you don't need it because this mode has some impact on performance;

- Your framerate was too high (120 fps). I think 60 fps is enough.

I grabbed your file and did a overal restructuring in your instances, timelines, and Library. I rewrote the code as well. I think it's easier to understand and maintain now.

You of course may need to apply some tweaks here and there but I think the general idea was kept.

AS3 code:

import flash.events.MouseEvent;

import flash.display.FrameLabel;

import flash.text.TextField;

function showDialog(e:MouseEvent):void

{

    for each (var s:FrameLabel in dialog.currentLabels)

    {

          if (s.name == e.target.name)

          {

              var textField:TextField;

              dialog.gotoAndStop(e.target.name);

              textField = dialog.getChildAt(0) as TextField;

              if (textField.numLines == 1)

                    char.gotoAndPlay("shortTalk");

              else

                    char.gotoAndPlay("longTalk");

              break;

          }

    }

}

function checkItem(e:MouseEvent):void

{

    if (e.target.name == "poster")

          inventory.cvinv.visible = true;

    else if (e.target.name == "laptop")

          inventory.triforce.visible = true;

    else if (e.target.name == "hat")

          inventory.pickles.visible = true;

    else if (e.target.name == "chair")

          inventory.rkcard.visible = true;

    else if (e.target.name == "paper")

          inventory.portfolioinv.visible = true;

    else if (e.target.name == "trash")

          credits.visible = true;

    else if (e.target.name == "karpfen")

    {

          sceneItems.karpfen.visible = false;

          sceneItems.log.visible = true;

          smoke.gotoAndPlay(1);

    }

    else if (e.target.name == "log")

    {

          sceneItems.karpfen.visible = true;

          sceneItems.log.visible = false;

          smoke.gotoAndPlay(1);

    }

}

function botherLuke(e:MouseEvent):void

{

    e.currentTarget.play();

}

function dismissCredits(e:MouseEvent):void

{

    if (e.target.name == "closeButton" || e.target.name == "hit")

          credits.visible = false;

}

function start():void

{

    sceneItems.log.visible = false;

    sceneItems.addEventListener(MouseEvent.MOUSE_OVER, showDialog);

    sceneItems.addEventListener(MouseEvent.CLICK, checkItem);

    inventory.addEventListener(MouseEvent.MOUSE_OVER, showDialog);

    luke.addEventListener(MouseEvent.CLICK, botherLuke);

    credits.addEventListener(MouseEvent.CLICK, dismissCredits);

}

start();

FLA download:
room_proto11_scaled_edited.zip - Google Drive

This is only a suggestion. You don't have to follow everything I did.

Regards,

JC

Views

343

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

Performance issues - where to start looking for issues?

Community Beginner ,
May 08, 2019

Copy link to clipboard

Copied

Hello!

I am currently working on a small flash application as a supplementary gimmick to a job application ( as 2D artist ). It has been the first time working with flash for both me and my friend who took over coding, already noting that both flash as an engine and AS3 are a bit particular at times.

The flash file lags but we cannot figure out the issues causing the lag. For the graphics, mostly photoshop processed pngs and a few illustrator files for the hitboxes are used.

There are no overly elaborate functions, if not for segments that needed workarounds because AS3 and flash can be a bit particular at times. If you hover over some items, they jump to a second frame (same with the textbox that just jumps to framelabels according to the item triggered), some have an additional listener for inventory items to show up when clicked and then there is a couple of functions dealing with the animations - the fish - log exchange and the trapdoor trigger ( switching between played animations and locking hitboxes to prevent retriggering before animation has finished playing).

Code can be found on pastebin : [ActionScript 3] Flash game code - Pastebin.com

Since the game lags that much at the moment, I can only offer the file on my google drive as trying to do anything with that on my webpage causes the browser to ask if there is faulty script because of reaction times.

Full Animate file: https://drive.google.com/open?id=1E0AdJ6RKmVuua9LyWfVL4-D9G7_FPeA_

SWF file: https://drive.google.com/open?id=1SnsX-LULbFCGdqTJWkzqkhe7Ie5qCZOR

According to Adobe Scout, the goToAndPlay commands are using up the most power, but even after disabling them nothing changed.

Is there anything one should keep in mind for the graphics and code?

A big thank you in advance for any possible help

(As someone on StackOverflow already pointed out, AS3 and flash are the unloved stepchilds of coding and are apparently running out of support in near future. Nevertheless, the reason why I chose flash for this endeavor was that I grew up with newgrounds and Kongregate so I know that flash can do neat stuff -i if handled properly, that is)

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

Hi.

My suggestions are:

- Try to always keep your project as organized as possible so you can better visualize which parts need more attention;

- Lower the number of instances and containers as much as possible;

- Use the most efficient and manageable instance type for each case. For example: you were using Movie Clips instances for the items in the scene and in the inventory and applying AS3 for hover effect. But it's much easier and efficient to use the default Button which will do this automatically for you. Also, you were duplicating the scene items for hit detection. This is not necessary. If you don't need a timeline, use Sprites instead of MovieClips, and so on.

- If you need mouse events for multiple instances that belongs to the same parent, assign one single listener to the parent and then check which instance received the event using the event.target property.

- Instead of creating various containers for animations of a same character, distribute the animations in one single container and assign labels to them;

- Avoid using very large bitmaps;

- Disable the advanced layers mode (Ctrl/Cmd + J) if you don't need it because this mode has some impact on performance;

- Your framerate was too high (120 fps). I think 60 fps is enough.

I grabbed your file and did a overal restructuring in your instances, timelines, and Library. I rewrote the code as well. I think it's easier to understand and maintain now.

You of course may need to apply some tweaks here and there but I think the general idea was kept.

AS3 code:

import flash.events.MouseEvent;

import flash.display.FrameLabel;

import flash.text.TextField;

function showDialog(e:MouseEvent):void

{

    for each (var s:FrameLabel in dialog.currentLabels)

    {

          if (s.name == e.target.name)

          {

              var textField:TextField;

              dialog.gotoAndStop(e.target.name);

              textField = dialog.getChildAt(0) as TextField;

              if (textField.numLines == 1)

                    char.gotoAndPlay("shortTalk");

              else

                    char.gotoAndPlay("longTalk");

              break;

          }

    }

}

function checkItem(e:MouseEvent):void

{

    if (e.target.name == "poster")

          inventory.cvinv.visible = true;

    else if (e.target.name == "laptop")

          inventory.triforce.visible = true;

    else if (e.target.name == "hat")

          inventory.pickles.visible = true;

    else if (e.target.name == "chair")

          inventory.rkcard.visible = true;

    else if (e.target.name == "paper")

          inventory.portfolioinv.visible = true;

    else if (e.target.name == "trash")

          credits.visible = true;

    else if (e.target.name == "karpfen")

    {

          sceneItems.karpfen.visible = false;

          sceneItems.log.visible = true;

          smoke.gotoAndPlay(1);

    }

    else if (e.target.name == "log")

    {

          sceneItems.karpfen.visible = true;

          sceneItems.log.visible = false;

          smoke.gotoAndPlay(1);

    }

}

function botherLuke(e:MouseEvent):void

{

    e.currentTarget.play();

}

function dismissCredits(e:MouseEvent):void

{

    if (e.target.name == "closeButton" || e.target.name == "hit")

          credits.visible = false;

}

function start():void

{

    sceneItems.log.visible = false;

    sceneItems.addEventListener(MouseEvent.MOUSE_OVER, showDialog);

    sceneItems.addEventListener(MouseEvent.CLICK, checkItem);

    inventory.addEventListener(MouseEvent.MOUSE_OVER, showDialog);

    luke.addEventListener(MouseEvent.CLICK, botherLuke);

    credits.addEventListener(MouseEvent.CLICK, dismissCredits);

}

start();

FLA download:
room_proto11_scaled_edited.zip - Google Drive

This is only a suggestion. You don't have to follow everything I did.

Regards,

JC

Views

344

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

Copy link to clipboard

Copied

as3 is definitely NOT running out of support.  flash player is scheduled for eol at the end of 2020.

and your as3 is problematic:

first, you need to learn about arrays (but that wouldn't cause a performance problem).

second, your creation of endless functions may cause a performance problem by using increasing amounts of memory.  (it actually looks like it was written by some sort of automated coding device.)

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...
May 08, 2019 0
Community Beginner ,
May 08, 2019

Copy link to clipboard

Copied

Not automated coding device but coder who is not used to AS3 and usually also not working with Java. In what ways could the code be improved exactly, then or where to start improving the wording?

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

Copy link to clipboard

Copied

i'm not sure about that person's java skills because returning endless functions would be a problem in java, too and using arrays is standard in java.  anyway, that code needs to be completely re-written.

to start:

var objA:Array = [chair, credits, cup, cvinv, doll, hat, kaktus, karpfen, karpfenhit, laptop, log, luke1, luke3, mini, paper, pickles,portfolio, portfolioinv, poster, pylon, rkcard, smoke, sylvanas, talk_long, talk_short, textbox, trash, triforce, trophy, worbla];

// stop all movieclips. set hitboxes transparent

for(var i:int=0;i<objA.length;i++){

objA.stop();

this[objA+'hit'].visible=false;

objA.addEventListener(MouseEvent.MOUSE_OVER,inflate);

objA.addEventListener(MouseEvent.MOUSE_OUT,deflate);

}

function inflate(e:MouseEvent):void{

var s:String = e.currentTarget.name.split('hit')[0];

this.gotoAndStop('bump');

textbox.gotoAndStop(s);

etc

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...
May 08, 2019 0
Community Beginner ,
May 08, 2019

Copy link to clipboard

Copied

I'd like to thank you too, of course.

There was quite a lot we could take away from your approach; it's always fascinating to see people experienced with one particular program restructure and simplify overly complicated code.

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

Copy link to clipboard

Copied

you're welcome.

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...
May 08, 2019 1
Adobe Community Professional ,
May 08, 2019

Copy link to clipboard

Copied

Hi.

My suggestions are:

- Try to always keep your project as organized as possible so you can better visualize which parts need more attention;

- Lower the number of instances and containers as much as possible;

- Use the most efficient and manageable instance type for each case. For example: you were using Movie Clips instances for the items in the scene and in the inventory and applying AS3 for hover effect. But it's much easier and efficient to use the default Button which will do this automatically for you. Also, you were duplicating the scene items for hit detection. This is not necessary. If you don't need a timeline, use Sprites instead of MovieClips, and so on.

- If you need mouse events for multiple instances that belongs to the same parent, assign one single listener to the parent and then check which instance received the event using the event.target property.

- Instead of creating various containers for animations of a same character, distribute the animations in one single container and assign labels to them;

- Avoid using very large bitmaps;

- Disable the advanced layers mode (Ctrl/Cmd + J) if you don't need it because this mode has some impact on performance;

- Your framerate was too high (120 fps). I think 60 fps is enough.

I grabbed your file and did a overal restructuring in your instances, timelines, and Library. I rewrote the code as well. I think it's easier to understand and maintain now.

You of course may need to apply some tweaks here and there but I think the general idea was kept.

AS3 code:

import flash.events.MouseEvent;

import flash.display.FrameLabel;

import flash.text.TextField;

function showDialog(e:MouseEvent):void

{

    for each (var s:FrameLabel in dialog.currentLabels)

    {

          if (s.name == e.target.name)

          {

              var textField:TextField;

              dialog.gotoAndStop(e.target.name);

              textField = dialog.getChildAt(0) as TextField;

              if (textField.numLines == 1)

                    char.gotoAndPlay("shortTalk");

              else

                    char.gotoAndPlay("longTalk");

              break;

          }

    }

}

function checkItem(e:MouseEvent):void

{

    if (e.target.name == "poster")

          inventory.cvinv.visible = true;

    else if (e.target.name == "laptop")

          inventory.triforce.visible = true;

    else if (e.target.name == "hat")

          inventory.pickles.visible = true;

    else if (e.target.name == "chair")

          inventory.rkcard.visible = true;

    else if (e.target.name == "paper")

          inventory.portfolioinv.visible = true;

    else if (e.target.name == "trash")

          credits.visible = true;

    else if (e.target.name == "karpfen")

    {

          sceneItems.karpfen.visible = false;

          sceneItems.log.visible = true;

          smoke.gotoAndPlay(1);

    }

    else if (e.target.name == "log")

    {

          sceneItems.karpfen.visible = true;

          sceneItems.log.visible = false;

          smoke.gotoAndPlay(1);

    }

}

function botherLuke(e:MouseEvent):void

{

    e.currentTarget.play();

}

function dismissCredits(e:MouseEvent):void

{

    if (e.target.name == "closeButton" || e.target.name == "hit")

          credits.visible = false;

}

function start():void

{

    sceneItems.log.visible = false;

    sceneItems.addEventListener(MouseEvent.MOUSE_OVER, showDialog);

    sceneItems.addEventListener(MouseEvent.CLICK, checkItem);

    inventory.addEventListener(MouseEvent.MOUSE_OVER, showDialog);

    luke.addEventListener(MouseEvent.CLICK, botherLuke);

    credits.addEventListener(MouseEvent.CLICK, dismissCredits);

}

start();

FLA download:
room_proto11_scaled_edited.zip - Google Drive

This is only a suggestion. You don't have to follow everything I did.

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...
May 08, 2019 3
Community Beginner ,
May 08, 2019

Copy link to clipboard

Copied

Holy batman,

We both were taken aback by that massive rework and restructurization which is beyond amazing.

I'll obviously throw you into the credits as the life saving code reworker (if I am allowed to use your rework to continue). Since it is the first flash project for both of us, we would have been sitting quite some time to figure out how to improve on it, you did a LOT of pre-emptive work here and I can't fully express how thankfull I am right now.

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...
May 08, 2019 1
Adobe Community Professional ,
May 08, 2019

Copy link to clipboard

Copied

Haha!

Awesome!

I'm so glad it helped you.

And don't feel obligated to credit me. I really did this work to help you both and future Animate CC navigators that may drop by.

And of course you're allowed to use the edited FLA. The file is yours and the pleasure is mine!

I wish you success on your project, happy coding, designing, drawing, and animating, and have a excellent week!

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...
May 08, 2019 2