Негладкая прокрутка в AS3

Question

Я пытаюсь сделать прокрутку в AS3, но когда я пытаюсь сделать простой бесконечный прокручиваемый фон, анимация негладкая. может ли кто-нибудь решить это?

вот ссылка на Swf (30 кадров в секунду):

http://megaswf.com/serve/1221647

код: `пакет {

import flash.display.*; 
import flash.events.*; 
public class testscroll extends MovieClip{ 
    public function testscroll(){ 
     var bg = new bg1(); 
     var bg2 = new bg1(); 
     addChild(bg); 
     addChild(bg2); 
     bg2.x = 500; 
     bg2.addEventListener(Event.ENTER_FRAME,mainloop); 
     bg.addEventListener(Event.ENTER_FRAME,mainloop); 
    } 
    public function mainloop(e:Event){ 
     var target = e.currentTarget as MovieClip; 
     target.x -= 5; 
     if(target.x<=-500){ 
      target.x = 500; 
     } 
    } 
} 

} `

Благодаря

Answer 1

Try принимая это часть кода:

target.x -= 5; 

и делает его более низкое значение, например:

target.x -= 1; 

Как прямо сейчас вы смещаются 5 пикселей в каждом кадре, которые могут появиться порывистый. Это замедлит скорость прокрутки, но сделает ее более гладкой. Вы можете захотеть поиграть с fps, чтобы изменить скорость.

Также, если ваш фон не является растровым изображением, вы должны кэшировать его как растровое изображение для улучшения скорости (проще прокручивать растровое изображение, чем вектор).

Answer 2

Нижеследующее использует blitting, чтобы уменьшить нагрузку на процессор и полезный трюк, который ограничивает область перерисовывания до минимальной видимой части.

Я прокомментировал довольно подробно за пределами темы: я понимаю, что это грубый и готовый тест, но они могут быть полезны для кого-то.

package 
{ 
    import flash.display.*; 
    import flash.geom.Rectangle; 
    import flash.utils.setTimeout; 
    import flash.utils.setInterval; 
    import flash.events.Event; 

    // Best practice naming convention: CamelCase for classes 
    public class TestScroll extends Sprite 
    { 
     private var __bmp:Bitmap; 


     public function TestScroll() 
     {   
      __bmp = addChild(new Bitmap(_bmpd)) as Bitmap; 

      // These two instructions act in concert to 
      // reduce the area redrawn onEnterFrame 
      // to that defined by the scrollRect 
      cacheAsBitmap = true; 
      scrollRect = new Rectangle(0, 0, 500, 400); 

      // Always a good habit to set the value for useWeakReference to true 
      // when adding event listeners: helps with garbage collection. 
      // See http://gskinner.com/blog/archives/2006/07/as3_weakly_refe.html 
      // That said, ALWAYS remove your listeners as soon as they're no longer required: 
      // http://gingerbinger.com/2010/07/actionscript-3-0-events-the-myth-of-useweakreference/ 
      addEventListener(Event.ENTER_FRAME, _onEnterFrame, false, 0, true); 
     } 

     public function _onEnterFrame(event:Event):void 
     { 
      // Running @ 60fps: reduced move rate    
      __bmp.x = (__bmp.x > -500) ? __bmp.x - 2 : 0; 
     } 

     // Personal preference of mine: break out basic instantiation 
     // into subfunctions to keep the constructor as terse as possible 
     // Renamed the references to the library items in line with naming 
     // convention for classes: bg1 -> Background 
     private function get _bmpd():BitmapData 
     { 
      var mc:Sprite = new Sprite(), 
       b1:Sprite = mc.addChild(new Background()) as Sprite, 
       b2:Sprite = mc.addChild(new Background()) as Sprite, 
       bmpd:BitmapData; 

      b2.x = 500; 

      bmpd = new BitmapData(mc.width, mc.height, true, 0); 
      bmpd.draw(mc); 

      return bmpd; 
     } 
    } 
} 

См http://jacksondunstan.com/articles/629 для более полного объяснения техники/cacheAsBitmap scrollRect.

Answer 3

Посмотрите на это:

http://megaswf.com/serve/1368761/

Он принимает иной подход к разработке оригинального тс в растровое изображение, а затем рисунок движущегося источника прямоугольник в статическом растровом изображении.

package 
{ 
    import flash.display.Bitmap; 
    import flash.display.BitmapData; 
    import flash.display.Sprite; 
    import flash.display.StageAlign; 
    import flash.display.StageScaleMode; 
    import flash.events.Event; 
    import flash.geom.Point; 
    import flash.geom.Rectangle; 

    [SWF(backgroundColor="#FFFFFF", frameRate="60", width="500", height="400")] 
    public class Main extends Sprite 
    { 
     [Embed(source="assets/swf/assets.swf", symbol="Background")] 
     private var Background:Class; 

     private var __app_w:int = 500; 
     private var __app_h:int = 400; 
     private var __src_rect:Rectangle = new Rectangle(0, 0, __app_w, __app_h); 
     private var __src_bmpd:BitmapData; 
     private var __dest_bmpd:BitmapData = new BitmapData(__app_w, __app_h); 
     private var __dest_pt:Point = new Point(); 


     /* Constructor 
     ----------------------------------------------------------------------------------------------*/ 
     public function Main() 
     { 
      stage.addEventListener(Event.RESIZE, _onStageResized, false, 0, true); 
      stage.align  = StageAlign.TOP_LEFT; 
      stage.scaleMode = StageScaleMode.NO_SCALE; 

      // Initialise 
      __src_bmpd  = _bmpd;    
      scrollRect  = __src_rect; 
      cacheAsBitmap = true; 
      opaqueBackground = 0xFFFFFF; 

      addChild(new Bitmap(__dest_bmpd)) as Bitmap; 
      addEventListener(Event.ENTER_FRAME, _onEnterFrame, false, 0, true); 
     } 

     private function _onStageResized(event:Event):void 
     {    
      x = (stage.stageWidth >> 1) - (__app_w >> 1); 
      y = (stage.stageHeight >> 1) - (__app_h >> 1); 
     } 

     public function _onEnterFrame(event:Event):void 
     { 
      __src_rect.x = (__src_rect.x == __app_w) ? 0 : __src_rect.x + 2;     
      __dest_bmpd.copyPixels(__src_bmpd, __src_rect, __dest_pt); 
     } 

     private function get _bmpd():BitmapData 
     { 
      var mc:Sprite = new Sprite(), 
       b1:Sprite = mc.addChild(new Background()) as Sprite, 
       b2:Sprite = mc.addChild(new Background()) as Sprite, 
       bmpd:BitmapData; 

      b1.x = 0; 
      b2.x = b1.width; 

      bmpd = new BitmapData(mc.width, mc.height, false); 
      bmpd.draw(mc); 

      return bmpd; 
     } 
    } 
}