Skip to main content
Z
Zainuu
Inspiring
May 31, 2011
Answered

Randomly show bitmap every second

  • May 31, 2011
  • 1 reply
  • 564 views

Hi, I'm doing an AIR/FLASH PROJECTOR random bitmap application. The bitmaps(pictures) are stored in a server. In my application, there are 1 button 'ROLL', which will toggle the randomly picking of butmap and show them out.

Q1:

Currently, I'm able to retrieve the picture from server when I clicked the 'ROLL' button and show it on flash stage, but how do I set a limit to stop the same bitmap from showing up again and again on my next roll? (it should only show up 1 time)

Q2:

The other issue that I dont know how to create an animation every 0.5second, changing the picture to another picture (trying to show the thrilling feeling).For example, when I clicked the ROLL button, the application will randomly pick 1 picture and some other pictures to do a simple animation. The picture will keep changing at an interval of 0.1seconds or so, and will slow down to interval of 0.2seconds, and slow down again and again. Finally, after doing that animation for like 5seconds or so, the "randomly picked picture" will show up. And this randomly picked picture will not show up again at the next roll.

That's it, that picture is the winner for that moment. (It's kinda like a lucky draw application) Can anyone give me some advice on this please?

Thank you very much for reading this!

This topic has been closed for replies.
Correct answer Kenneth Kawamoto

I can give you a quick example. You have 5 images in the "assets" folder, and the following will display them one after the other at random with 1 second intervals. Hope you get the general idea.

// list of images
var images:Array = [{source:"1.jpg"}, {source:"2.jpg"}, {source:"3.jpg"}, {source:"4.jpg"}, {source:"5.jpg"}];
// number of images
var imageCount:uint = images.length;
// load counter
var loadCounter:uint = 0;
// image timer delay
var delay:uint = 1000;
// timer
var timer:Timer;
// image index
var index:uint = 0;
// image on display
var image:Bitmap;
// load images
for(var i:uint = 0; i < imageCount; i++){
    var loader:Loader = new Loader();
    loader.contentLoaderInfo.addEventListener(Event.COMPLETE, imageLoadComplete, false, 0, true);
    loader.load(new URLRequest("assets/" + images.source));
    images["loader"] = loader;
}
// image load complete
function imageLoadComplete(e:Event):void {
    if(++loadCounter >= imageCount) startShow();
}
// shuffle images and start timer
function startShow():void {
    images = fisherYates(images);
    timer = new Timer(delay, imageCount);
    timer.addEventListener(TimerEvent.TIMER, timeout, false, 0, true);
    timer.addEventListener(TimerEvent.TIMER_COMPLETE, timerComplete, false, 0, true);
    timer.start();
}
// time out
function timeout(e:TimerEvent):void {
    showImage();
}
// show image
function showImage():void {
    if(image != null){
        removeChild(image);
        image = null;
    }
    image = addChild(images[index].loader.content) as Bitmap;
    ++index;
}
// timer complete
function timerComplete(e:TimerEvent):void {
    trace("complete");
}
// shuffle array
function fisherYates(a:Array):Array {
    var b:Array = new Array(a.length);
    b[0] = a[0];
    for(var i:uint = 1, n:uint = a.length; i < n; i++){
        var j:uint = Math.round(Math.random()*i);
        b = b;
        b = a;
    }
    return b;
}

1 reply

Kenneth Kawamoto
Community Expert
Kenneth KawamotoCommunity Expert
Community Expert
May 31, 2011

One way is to have an array of images and randomise it at the beginning, and pick first x number of images from the randomised array. So that the second x number of images will not contain the images already picked.

Your roll animation can be like a roulette, i.e. the order of image sequence does not change during the duration of the animation, or you can reshuffle on each sequence. This will affect how you'd code, but in essence you'd use Timer and adjust delay at the beginning of each sequence.

Z
ZainuuAuthor
Inspiring
May 31, 2011

Hi kennethkawamoto2,

That's very helpful piece of information but is there any sample code lying around in the internet? I'm not really proficient in AS3 scripting since I just joined not long ago..

-Zainuu

Kenneth Kawamoto
Community Expert
Kenneth KawamotoCommunity ExpertCorrect answer
Community Expert
June 1, 2011

I can give you a quick example. You have 5 images in the "assets" folder, and the following will display them one after the other at random with 1 second intervals. Hope you get the general idea.

// list of images
var images:Array = [{source:"1.jpg"}, {source:"2.jpg"}, {source:"3.jpg"}, {source:"4.jpg"}, {source:"5.jpg"}];
// number of images
var imageCount:uint = images.length;
// load counter
var loadCounter:uint = 0;
// image timer delay
var delay:uint = 1000;
// timer
var timer:Timer;
// image index
var index:uint = 0;
// image on display
var image:Bitmap;
// load images
for(var i:uint = 0; i < imageCount; i++){
    var loader:Loader = new Loader();
    loader.contentLoaderInfo.addEventListener(Event.COMPLETE, imageLoadComplete, false, 0, true);
    loader.load(new URLRequest("assets/" + images.source));
    images["loader"] = loader;
}
// image load complete
function imageLoadComplete(e:Event):void {
    if(++loadCounter >= imageCount) startShow();
}
// shuffle images and start timer
function startShow():void {
    images = fisherYates(images);
    timer = new Timer(delay, imageCount);
    timer.addEventListener(TimerEvent.TIMER, timeout, false, 0, true);
    timer.addEventListener(TimerEvent.TIMER_COMPLETE, timerComplete, false, 0, true);
    timer.start();
}
// time out
function timeout(e:TimerEvent):void {
    showImage();
}
// show image
function showImage():void {
    if(image != null){
        removeChild(image);
        image = null;
    }
    image = addChild(images[index].loader.content) as Bitmap;
    ++index;
}
// timer complete
function timerComplete(e:TimerEvent):void {
    trace("complete");
}
// shuffle array
function fisherYates(a:Array):Array {
    var b:Array = new Array(a.length);
    b[0] = a[0];
    for(var i:uint = 1, n:uint = a.length; i < n; i++){
        var j:uint = Math.round(Math.random()*i);
        b = b;
        b = a;
    }
    return b;
}
Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices