Building a fullscreen background image with AS3

Today I’ll show you how to build a fullscreen background image using AS3 classes in Adobe Flash. You will learn the meaning of words resize, proportional scale or fullscreen mode. Also you will need a simple image as background.


Preview

Settings all files

Create a new ActionScript File and save it as “MainClass.as” (com.fladev.background.MainClass) – this will be the main class for our flash file; The package classes extends the Sprite class (since we don’t have a timeline animation).
Finnaly create a new AS3 Flash file(550×400px) and open it, so that we have both files opened.


MainClass.as

So we will create a loader that will load the image and then we will resize this image according to stage dimensions.
Let’s add some variables:

private var loader:Loader;
private static const IMAGE_PATH:String = "bg.jpg";//path for external image

The Constructor Function

In constructor function we will add some stage properties like align or scaleMode:

stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.addEventListener(Event.RESIZE, stageResize);

On resize, the hole objects will start to move from top left side (0, 0 coordonates). Also see that listener for stage resize that we didn’t created yet.

We need to load the image from outside before resize, so we need to create a loader.  First create a movieclip symbol on stage with instance name “pic” and set him X and Y to 0,0. Then here in MainClass. in constructor function we create the loader and we attach him as a child to the movieclip created on stage, “pic”.

loader = new Loader();
loader.load(new URLRequest(IMAGE_PATH));
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, showImage);
pic.addChild(loader);

So we load the image through a loader and now we need to show his content.


ShowImage

private function showImage(e:Event):void
		{
			try {
				e.target.content.alpha = 0;
				Tweener.addTween(e.target.content, { alpha:1, time:1, transition:"easeOutSine" } );
				e.target.content.smoothing = true;

			} catch (e:Error) { };
		}

After we load the image trough a loader and the loading process was done, we set this to alpha = 0 and then with Caurina visible to alpha = 1.

The hole function that do the job is stageResize:

private function stageResize(e:Event=null):void
		{
		        //set the movieclip "pic" to 0,0 and scales X and Y to 1;
			pic.x = 0;
			pic.y = 0;
			pic.scaleX = pic.scaleY = 1;

                      //check if the result between stageHeight and stageWidth divided is smaller then the result of pic.height divided with pic.width;
			if ((stage.stageHeight / stage.stageWidth) < pic.height / pic.width) {
				pic.width = stage.stageWidth; //if so the width of "pic" movieclip will take the value of stageWidth;
				pic.scaleY = pic.scaleX;
			} else {
				pic.height = stage.stageHeight;//if not will take the value of stageHeight
				pic.scaleX = pic.scaleY;
			};

                       //pic position (we can set this to 0,0 too)
			pic.x = stage.stageWidth / 2 - pic.width / 2;
			pic.y = stage.stageHeight / 2 - pic.height / 2;

		}

All right, test the movie and see what happenes. Try to resize the window, you can observe the image is resizing as stage. Next step is to create a fullscreen button.


Fullscreen button

In main movie draw a rectangle with background color “#333333“, convert this symbol to be movieclip with instance name fullscreen_btn and make inside 2 frames. On first frame simple write “fullscreen on” and on second frame write “fulscreen off” over the grey background. Create another layer over this, open the actions panel (F9) and put a “stop” action in first frame.


Final step

We need to add a listener for “fulscreen_btn” button, so we can activate the fullscreen function. In constructor add this:

fullscreen_btn.addEventListener(MouseEvent.CLICK, goFullscreen);

Then create a new function goFullscreen:

private function goFullscreen(e:MouseEvent):void
		{
			if( stage.displayState == StageDisplayState.NORMAL ){
				stage.displayState = StageDisplayState.FULL_SCREEN;
			} else {
				stage.displayState = StageDisplayState.NORMAL;
			}
		}

Make a test, see the result so far. The last thing you need to know is that when the display is fullscreen we need a way to know that this happened, or when the display is normal. Add a listener for stage in constructor:

stage.addEventListener(FullScreenEvent.FULL_SCREEN, onFullscreen);

And the function onFullscreen:

private function onFullscreen(e:FullScreenEvent):void
		{
			fullscreen_btn.gotoAndStop(e.fullScreen?2:1);
		}

On fullscreen the button fulscreen_btn will stop to frame 2 “Fulscreen off” and on normal screen will go to frame 1.

Test the movie, see if background have same size as stage and then press the fullscreen button.
When you embed this in html make sure allowFullscreen parameter is true and width or height of .swf is 100%.

That’s it, thank you for your time.


Twitter Digg Delicious Stumbleupon Technorati Facebook

78 Responses to “Building a fullscreen background image with AS3”

  1. I changed the bg image and published the flash again but the new image is not showing, any ideas?

  2. Hi Robert,
    It is wonderful.. Its great… Its working wonderful…. Thank You very very much….
    A Garden of Thanks… I’m big Fan of you!!!!

    Best Regards…

  3. Hi Robert,

    Is it possible if you make a tutorial like this website, Which he has develop mouse interactivity with background images…. Panning and One level Zoom.. in Gallery Section… Example:(http://asylum.fr)

  4. Hello Robert!! I Want Your Help! I Hae Cs4 And I Can’t Open your File… The Flash Alert Me!! “Unescpected File Format”
    Can you Save as…/Cs4 document please?

  5. Ahh…take pls CS5, it’s best anyway then CS4 and with few bugs less.

  6. how can i replace the image with an video .flv file.
    thank you very much for your tutorial.

  7. try to see if you can change the extension into .flv

  8. Hi Robert!

    Thanks for the post.
    As Im trying to learn, I also did try to edit the index.fla, includede in your .zip, and when republished, the .swf changes and there’s no bakcground anymore.
    The following error appears:

    Scene 1, Layer ‘Layer 3′, Frame 2, Line 1 1172: Definition caurina.transitions:Tweener could not be found.
    Scene 1, Layer ‘Layer 3′, Frame 2, Line 1 1172: Definition caurina.transitions:Tweener could not be found.
    Scene 1, Layer ‘Layer 3′, Frame 2, Line 46 1120: Access of undefined property Tweener.

    Any idea what Im missing? Im using CS5
    Thanks so mucho for your time!

    Ezequiel

  9. You have to import caurina in your project. Check here, I have a post already for this.

    Cheers

  10. Hi,
    Great tutorial! It works great for what I need, but just wondering, how would I go about placing this into a website already have? I have a fluid website that I created, but I really need to have a full screen background like this one, what would be the best way going about doing this? Is there certain files I would need to import into my flash file? Do I need to edit the .as file somehow?

  11. Hi, is any way to do in AS2

  12. Hello. How would you write this code in a file in a layer of flash?
    thank you very much

  13. Inside in a fla

  14. Hi Robert,
    I download the fla sample you posted and compiled/published it but it is just a small static image on the page that doesn’t move when I resize the browser window. Do you know what I am doing wrong? I am using CS5.
    Thanks,

    Kris

  15. I got it working by replacing the html with the original you sent after complilation. My next question is how to replace the image with an FLV file. I changed the code to point to the video file but it doesn’t load anything. Do you know how to make it work with an FLV file?
    Thanks,

    Kris

  16. @Kris – you need to load a .flv in a different way then a loader. Check my other post, with building a simple videoplayer. After you load the video, you should resize him to full screen ;)

  17. Wow, this is great. Just what I’ve been trying to do :) …I hate to get greedy but do you know of any way to expand on it by possibly having buttons to change the background picture?

    Either way, this is great. Thank You!

  18. Unfortunately I am not able to put a background to replace the images automatically.
    ‘@ Dejan: In the header you have a single image

    image_path private static const String = “bg.jpg”;

    Now, you should make an array with a few other images, such as
    private var images: Array;

    Then in the constructor function, you will:
    images = ["img1.jpg, img5.jpg ....];

    Locate where the loader loads the image:
    loader.load (new URLRequest (image_path));

    here to create a variable that will give a random number, say:
    var n: Number = Math.floor (1 + Math.random () * your_images_length_number) ;/ / here you will get a number from 1 to n.

    then modify the boot line:
    loader.load (new URLRequest (images [i]));

    Recompile and that’s it. Let me know if you have any other questions’

    Can you explain?

  19. Hi Robert!

    What could i do to change the background image by adding some buttons at stage?
    The objective is to create a menu that changes background with every button.
    The upscaling of images in this example is really good!
    Congrats!

    Thanks,

    Diogo

  20. where you are stucked?

  21. first of all, you need a function that will do that. let’s say function changePic(imagePath:String):void { loader.load(new URLRequest(imagePath)};

    then, let’s say you have an array with buttons:
    var menuArray:Array = ["btn1", "btn2", "btn3"];
    var picsArray:Array = ["pic1.jpg", "pic2.jpg", "pic3.jpg"];

    //you put 3 buttons on stage, with same names – btn1, btn2, btn3;

    var btn:SimpleButton;
    for(var i:int = 0; i< menuArray.length; i++) {
    btn = getChildByName("btn" + (i+1)) as SimpleButton;
    btn.addEventListener(MouseEvent.CLICK, onClick);
    }

    function onClick(e:MouseEvent):void {
    var id:String = String(e.target.name).substring(0, 3); // trace(id);
    trace(picsArray[Number(id)-1]); // should be pic1.jpg, pic2.jpg, pic3.jpg;
    //now we call the changePic

    changePic(picsArray[Number(id)-1]);
    }

    that's it ;)

  22. Hello, thank you so much for this. I really appreciate it.

    Happy holidays!

  23. Hi Mr. Robert
    I am beginner in flash action script i will try this to create fullscreen background. Thankyou very much

  24. Hi, your code works even on smartphones very well. I would like to instanciate this in my Flash Builder project, but i have no clue how to. I have imported the class set a
    private var pic:Sprite = new Sprite();
    but iam not able to add it correct to my mxml. Any help would be nice.ki

  25. Hi, I’m not a guru unfortunately in Flash Builder..google it, I’m sure there is a way ;)