14 Replies Latest reply on Feb 14, 2012 6:49 AM by kglad

    Turn lines (vector) into bitmap at runtime?

    prodigalmaster Level 2

      After drawing some lines with moveTo and lineTo, how to convert them to bitmap so they do not lag if there are many. Thanks.

        • 1. Re: Turn lines (vector) into bitmap at runtime?
          prodigalmaster Level 2

          mcLine.cacheAsBitmap = true;

           

          Might work?

          just tested and it still lags with too many lines...

          • 2. Re: Turn lines (vector) into bitmap at runtime?
            kglad Adobe Community Professional & MVP

            are all the lines applied to the same object's graphics property?  if so, apply cacheAsBitmap to that object.  if not, is there a reason to use different objects?

            • 3. Re: Turn lines (vector) into bitmap at runtime?
              prodigalmaster Level 2

              Im pretty sure it's the same object.. here is my code, see if im doing something wrong...:

              var pressing:Boolean = false;
              var layer = 1;
              _root.createEmptyMovieClip("mcLine",layer);
              with (mcLine) {
                        lineStyle(6,0,100,true,"normal","none","round",1);
                        xPointA = _xmouse;
                        yPointA = _ymouse;
              }
              onMouseDown = function () {
                        pressing = true;
                        xPointA = _xmouse;
                        yPointA = _ymouse;
              };
              onMouseUp = function () {
                        pressing = false;
                        mcLine.cacheAsBitmap = true; // or is it: mcLine.cacheAsBitmap = !mcLine.cacheAsBitmap; like in help docs?
              };
              onMouseMove = function () {
                        if (pressing) {
                                  with (mcLine) {
              //draws a line from the previous mouse position to the new mouse position..
                                            moveTo(xPointA,yPointA);
                                            xPoint = _xmouse;
                                            yPoint = _ymouse;
                                            lineTo(xPoint,yPoint);
                                            xPointA = _xmouse;
                                            yPointA = _ymouse;
              .
                                  }
                        }
              };
              
              • 5. Re: Turn lines (vector) into bitmap at runtime?
                prodigalmaster Level 2

                Thanks. However, it doesn't seem to affect performance. It seems the more lines there are, the slower it gets.. Surely when bitmap it would not matter?

                • 6. Re: Turn lines (vector) into bitmap at runtime?
                  kglad Adobe Community Professional & MVP

                  what's moving on stage?

                  • 7. Re: Turn lines (vector) into bitmap at runtime?
                    prodigalmaster Level 2

                    when you draw, the lines are smooth at first, with many connections. After many lines are drawn, the lines take longer to be made, and so make it seem less smooth and less responsive.

                    • 8. Re: Turn lines (vector) into bitmap at runtime?
                      kglad Adobe Community Professional & MVP

                      while you're adding lines, you're changing the bitmap so you're not getting any benefit from cacheAsBitmap.

                       

                      it's only after you stop adding lines that you'll see a benefit.

                      1 person found this helpful
                      • 9. Re: Turn lines (vector) into bitmap at runtime?
                        prodigalmaster Level 2

                        Yes. Surely if the lines already drawn are bitmap, they wont affect the newly drawn lines. but this is not the case. Even if you draw lots of small lines, it will be laggy for newer lines, even after the previous lines are cached as bitmaps.

                        Confusing.

                        http://s14.postimage.org/ojnwpfgsv/laggy_Lines.png

                        • 10. Re: Turn lines (vector) into bitmap at runtime?
                          kglad Adobe Community Professional & MVP

                          the previously drawn lines are not cached.  you're caching mcLine.  mcLine has a bitmap representation in memory when you enable its cacheAsBitmap property.  if you change that bitmap's _x,_y properties, flash should be able to handle that without regard to the individual lines that make up mcLine giving much better performance.

                           

                          however, if you do something that changes the bitmap in memory (like rotating mcLine, changing its alpha or adding a new line), you're no longer getting any benefit from enabling mcLine's cacheAsBitmap property and may even decrease performance because that bitmap has to be repeatedly updated while you're drawing a new line.  to prevent that performance hit, you should disable the cacheAsBitmap property while drawing.

                           

                          but, that will just put you back where you started with regards to performance.

                           

                          so, you're next step would be to create a new movieclip each time there's a mousedown, and draw using that movieclip.  on mouseup, cacheAsBitmap that movieclip.   you will end up with lots of movieclips instead of one and performance may still be an issue if there are hundreds of movieclips but it's worth a try.

                          1 person found this helpful
                          • 11. Re: Turn lines (vector) into bitmap at runtime?
                            prodigalmaster Level 2

                            Ok thanks, it makes more sense now.

                             

                            Ive now made it so it uses multiple movieclips, and caches each of them and a new line moves onto a new movieclip.. but it still has the same amount of lag, even if you draw 1 or 2 lines (2 movieclips)...

                             

                            here is the code:

                            var layer = 1;

                            var i = 0;

                            var mcLine = "mcLine"+i;

                            _root.createEmptyMovieClip(mcLine,layer);

                            with (mcLine) {

                                      lineStyle(6,0,100,true,"normal","none","round",1);

                                      xPointA = _xmouse;

                                      yPointA = _ymouse;

                            }

                            onMouseDown = function () {

                                      _root.createEmptyMovieClip(mcLine,layer);

                                      pressing = true;

                                      xPointA = _xmouse;

                                      yPointA = _ymouse;

                            };

                            onMouseUp = function () {

                                      i++;

                                      mcLine = "mcLine"+i;

                                      pressing = false;

                                      mcLine.cacheAsBitmap = true;

                                      trace(mcLine);

                            };

                            var pressing:Boolean = false;

                            onMouseMove = function () {

                                      if (pressing) {

                                                with (mcLine) {

                                                          moveTo(xPointA,yPointA);

                                                          xPoint = _xmouse;

                                                          yPoint = _ymouse;

                                                          lineTo(xPoint,yPoint);

                                                          xPointA = _xmouse;

                                                          yPointA = _ymouse;

                                                }

                                      }

                            };

                            • 12. Re: Turn lines (vector) into bitmap at runtime?
                              kglad Adobe Community Professional & MVP

                              at most one movieclip will exist with that code.  use:

                               

                               

                               

                              var i = 0;

                               

                              onMouseDown = function () {

                                     _root.createEmptyMovieClip("mcLine"+i,i);

                              with(_root["mcLine"+i]){

                                lineStyle(6,0,100,true,"normal","none","round",1);

                              }

                              xPointA = _xmouse;

                                        yPointA = _ymouse;

                                        pressing = true;

                                     

                              };

                              onMouseUp = function () {

                              this["mcLine"+i].cacheAsBitmap=true;

                                        i++;

                                        pressing = false;         

                               

                              };

                              var pressing:Boolean = false;

                              onMouseMove = function () {

                                        if (pressing) {

                                                  with (_root["mcLine"+i]) {

                                                            moveTo(xPointA,yPointA);

                                                            lineTo(_xmouse,_ymouse);

                                                            xPointA = _xmouse;

                                                            yPointA = _ymouse;

                                                  }

                                        }

                              };

                              • 13. Re: Turn lines (vector) into bitmap at runtime?
                                prodigalmaster Level 2

                                ah right yeah, you're right. And, brilliant, thank you very much!