Fullscreen background images rotation

[Flep]

This free utility is a Flash fullscreen background (100%) which displays the images in rotation.

Manageable from an external XML file, it loads external images and display them with a "stripes" effect.

Minimum requirements are as usual Flash CS3 or higher, Actionscript 3.0 and Flash Player 9 or higher.

CLICK HERE VIEW DEMO

Included files

• main.fla


• package com.flepstudio


• images folder


• file xml/config.xml


• package tween caurina

Source files:

[uacomp]

thank you, flep. it is very simple but very useful :)

[Bwad231]

Your my hero Flep!

[assist]

Is it possible to change the stripe effect for a fade effect?

[Flep]

Hi assist,
replace Background.as with this new one:

/*
 *************************************      
 * @author Filippo Lughi - www.flepstudio.org
 * version Actionscript 3.0                  
 *************************************
 */
package com.flepstudio
{
    import flash.display.*;
    import flash.text.*;
    import flash.events.*;
    import flash.net.*;
    import flash.utils.*;
    import caurina.transitions.Tweener;
    
    public class Background extends MovieClip
    {
        /*//////////////////////////////////////
        *
        *     PROPERTIES
        *
        *///////////////////////////////////////
        private const SPEED:int=4;
        private const MASKS:int=10;
        
        private var main:MovieClip;
        private var container_mc:MovieClip;
        
        private var counter:int=0;
        private var ratio:Number;
        private var partial:Number=0;
        
        private var img_array:Array=new Array();
        private var holders_array:Array=new Array();
        
        private var timer:Timer;
        
        
        /*//////////////////////////////////////
        *
        *     CONSTRUCTOR
        *
        *///////////////////////////////////////
        public function Background()
        {
            addEventListener(Event.ADDED_TO_STAGE,init);
        }
        
        private function init(evt:Event):void
        {
            removeEventListener(Event.ADDED_TO_STAGE,init);
            
            main=parent as MovieClip;
            
            ratio=100/Main.bg_images_array.length;
            
            loadImage();
        }
        
        
        /*//////////////////////////////////////
        *
        *     LOADING IMAGES
        *
        *///////////////////////////////////////
        private function loadImage():void
        {
            var request:URLRequest=new URLRequest(Main.bg_images_array[counter].path);
            var loader:Loader=new Loader();
            loader.contentLoaderInfo.addEventListener(Event.OPEN,onLoadingOpen);
            loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS,onLoadingProgress);
            loader.contentLoaderInfo.addEventListener(Event.COMPLETE,onLoadingComplete);
            loader.load(request);
        }
        
        private function onLoadingOpen(evt:Event):void
        {
            evt.target.removeEventListener(Event.OPEN,onLoadingOpen);
            trace("loading image "+counter);
        }
        
        private function onLoadingProgress(evt:ProgressEvent):void
        {
            var percentage:Number=(evt.bytesLoaded/evt.bytesTotal)*ratio;
            var total_percentage:Number=Math.floor(partial+percentage);
            main.position_bar_mc.scaleX=total_percentage/100;
        }
        
        private function onLoadingComplete(evt:Event):void
        {
            evt.target.removeEventListener(Event.COMPLETE,onLoadingComplete);
            
            var bitmap:Bitmap=evt.target.loader.content as Bitmap;
            bitmap.smoothing=true;
            img_array.push(bitmap);
            
            partial+=ratio;
            
            if(counter<Main.bg_images_array.length-1)
            {
                counter++;
                loadImage();
            }
            else
            {
                main.hideLoader();
                
                counter=0;
                
                createImages();
            }
        }
        
        
        /*//////////////////////////////////////
        *
        *     CREATING IMAGES AND MASKS
        *
        *///////////////////////////////////////
        private function createImages():void
        {
            container_mc=new MovieClip();
            
            for(var i:int=0;i<img_array.length;i++)
            {
                var clip_mc:MovieClip=new MovieClip();
                holders_array.push(clip_mc);
                img_array[i].width=stage.stageWidth;
                img_array[i].height=stage.stageHeight;
                clip_mc.addChild(img_array[i]);
                
                container_mc.addChild(clip_mc);
            }
            
            addChild(container_mc);
            
            main.resizeBg();
            slideImages();
            startTimer();
        }
        
        
        /*//////////////////////////////////////
        *
        *     START TIMER
        *
        *///////////////////////////////////////
        private function startTimer():void
        {
            timer=new Timer(SPEED*1000,0);
            timer.addEventListener(TimerEvent.TIMER,slideImages);
            timer.start();
        }
        
        
        /*//////////////////////////////////////
        *
        *     SLIDE IMAGES
        *
        *///////////////////////////////////////
        private function slideImages(evt:TimerEvent=null):void
        {
            trace(counter);
            var counter2:int=counter+1;
            if(counter2>Main.bg_images_array.length-1)
                counter2=0;
            container_mc.setChildIndex(holders_array[counter],container_mc.numChildren-1);
            var clip_1_mc:MovieClip=holders_array[counter];
            var clip_2_mc:MovieClip=holders_array[counter2];
            clip_2_mc.alpha=0;
            
            Tweener.addTween(clip_1_mc,{alpha:1,time:1,transition:"easeOutCubic"});
            
            counter++;
            if(counter>=Main.bg_images_array.length)
                counter=0;
        }
    }
} 

and re-create the swf.

[assist]

Hi Flep,

Thank you so much for the prompt reply, I have replaced the code and it works. Once again thanks.

[jakes]

Very nice indeed. Would it be possible to add more transitions and control? Such as loading an AS library of random transitions and being able to set it to pick one or use "random" transitions.

[assist]

Hi Flep, one more question if you don't mind. I would like to implement this fullscreen background to a website I am creating, to use as a background. I would like to place it on a keyframe within my site. Is there a simple way of doing it?

[mazook]

Highly enjoyable! Thanks Man!!!!!!

[freesty]

First of all thank you for the example. Works great with original version. However, if I try to replace the Background.as I get a few errors.

It seems to me that there is something wrong in this part?

if(counterMain.bg_images_array.length-1)
counter2=0;

Like counter2 is not declared, and also counterMain?

I tried to alter to something like this:

var counter2:int=counter+1;

if(counter2>Main.bg_images_array.length-1)
counter2=0;

But didnt work. Wondering how you guys further up managed?