Loop image in Flash

Question

Я хочу иметь сцену, где изображение высотой 5000 пикселей поднимается на 5 пикселей при каждом обновлении кадра. Когда изображение все в порядке, я хотел бы увидеть верх изображения, связанного с нижней частью изображения. Это должно быть сделано до тех пор, пока уровень не будет выполнен. Как я могу «зациклять» такой образ?

Answer 1

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

Вот основной фрагмент, чтобы проиллюстрировать идею, используя класс DisplayObject и свойство scrollRect:

//ignore this, you have your content already 
var dummyContent:BitmapData = new BitmapData(100,100,false); 
dummyContent.perlinNoise(10,10,8,12,true,true); 

//important stuff starts here 
var container:Sprite = addChild(new Sprite()) as Sprite;//make a container 
container.scrollRect = new Rectangle(0,0,dummyContent.width,dummyContent.height);//set a scrollRect/'mask' 
var part1:DisplayObject = container.addChild(new Bitmap(dummyContent));//add two copies 
var part2:DisplayObject = container.addChild(new Bitmap(dummyContent));//of the same content 
part2.y -= part2.height;//set the 2nd at the top of the 1st 

addEventListener(Event.ENTER_FRAME,update); 
function update(e:Event):void{ 
    //move both 
    part1.y += 5; 
    part2.y += 5; 
    //check if any reach the bottom so they can be moved back up 
    if(part1.y >= part1.height) part1.y = -part1.height; 
    if(part2.y >= part2.height) part2.y = -part2.height; 
    //the above can also be nicely placed in a loop if you plan on using more seamless looping clips/images 
} 

Очевидно, что вы будете иметь различное содержание, но принцип тот же.

Если вы работаете с изображениями, вы можете просто использовать метод copyPixels BitmapData в:

var s:int = 5;//scroll speed 
//make some content 
var w:int = 100; 
var h:int = 100; 
var dummyContent:BitmapData = new BitmapData(w,h,false); 
dummyContent.perlinNoise(10,10,8,12,true,true); 

//prepare for stiching 
var renderPos:Point = new Point();//position to render the current image to 
var prenderPos:Point = new Point();//position to render the previous image (the 'hidden' copy above) 
var render:BitmapData = new BitmapData(w,h,false);//create a bitmap data instance to render updated pixels int 
addChild(new Bitmap(render));//and add it to the stage 

addEventListener(Event.ENTER_FRAME,update); 
function update(e:Event):void{ 
    renderPos.y = (renderPos.y+s)%h;//update the scroll position for the 1st part, % is used to loop back to 0 when the position gets to the content height 
    prenderPos.y = renderPos.y - h;//update the scroll position for the 2nd part (above) 
    render.lock();//freeze pixel updates 
    render.copyPixels(dummyContent,dummyContent.rect,renderPos);//copy pixels from the scroll position to the bottom 
    render.copyPixels(dummyContent,dummyContent.rect,prenderPos);//copy pixels from the top to the scroll position 
    render.unlock();//unfreeze/update ALL THE PIXELS 
} 

Вы можете попробовать использовать объект Rectangle, который изменяет высоту (высота-scrollPosition), так что вы потенциально получить доступ меньше пикселей каждый или вы можете вручную выработать одиночные для циклов с использованием метода getVector BitmapData, но это то, на что нужно обратить внимание, если производительность на самом деле является проблемой для такой простой задачи, и стоит проверить, что быстрее (копировать полный растровый файл прямо или копировать частичное растровое изображение rect vs вручную копировать значения с использованием вектора)

Answer 2

Будьте предупреждены, Flash cannot load an image greater than 16,769,025 пикселей (или 4095x4095). Высота 5000 пикселей будет работать до тех пор, пока ширина не будет больше 3353.

Это говорит о том, что я бы зацикливал изображение, сохранив две копии изображения на сцене, одновременно перемещаясь вместе с родительским объектом , и сбрасывается в исходное состояние после выполнения точки петли.

Рассмотрим следующую установку этапа:

Stage ¬ 
    0: MainTimeline:MovieClip ¬ 
     0: Container:MovieClip ¬ 
      0: img1:Bitmap 
      1: img2:Bitmap 

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

function onEnterFrame(e:Event):void { 
    Container.y = Container.y - 5; 

    if (Container.y < -5000) { 
     Container.y = -5; 
    } 
}