October 2, 2008

Fullscreen background images in Flash

Filed under: Flash, Freebies — Tags: , , , , — admin @ 12:38 am

Here’s a freebie – Flash source code to use fullscreen scaling images that maintain their aspect ration when scaling (AS2). I am using smoothImageLoad to convert the loaded png, jpg or gif to a smooth bitmap. Enjoy!

Download Source View Example

// Use Tween class to fade in the image
import mx.transitions.Tween;
import mx.transitions.easing.*;
 
var stageListener:Object=new Object();
stageListener.onResize=function(){
	position();
};
 
Stage.align="TL";
Stage.scaleMode="noScale";
Stage.addListener(stageListener);
 
// Reposition objects when the movie is resized
function position() {
	// Find new value of stage size
	var W:Number = Stage.width;
	var H:Number = Stage.height;
	// Find center of stage
	var centerX:Number = W/2;
	var centerY:Number = H/2;
	// Center main bg clip
	background_mc._x = centerX;
	background_mc._y = centerY;
	// Center target clip inside the main bg clip
	background_mc.target_mc._x = -_global.BGW/2;
	background_mc.target_mc._y = -_global.BGH/2;
	var imageRatio:Number;
	var imageXRatio = W/_global.BGW;
	var imageYRatio = H/_global.BGH;
	// Determine if the width is larger than the height
	if (imageXRatio>imageYRatio) {
		imageRatio = imageXRatio;
	} else {
		imageRatio = imageYRatio;
	}
	// Scale the image to fit fullscreen
	background_mc._xscale = background_mc._yscale=imageRatio*100;
}
 
// Function for smoothing resizable bitmaps
function smoothImageLoad(imgURL, targetMovie) {
	var i = 0;
	do {
		i++;
	} while (eval("_root.smoothImageLoadTemp"+i) != undefined);
	tmc = targetMovie.createEmptyMovieClip("smoothImageLoadTemp"+i, targetMovie.getNextHighestDepth());
	tmc.createEmptyMovieClip("ti",tmc.getNextHighestDepth());
	tmc.tm = targetMovie;
	with (tmc) {
		tmcl = new MovieClipLoader();
		tmcl.onLoadComplete = function() {
			var fadeBG:Tween = new Tween(targetMovie, "_alpha", None.easeOut, 0, 100, 1, true);
			ti.onEnterFrame = function() {
				pixelData = new flash.display.BitmapData(ti._width, ti._height);
				_global.BGW = ti._width;
				_global.BGH = ti._height;
				pixelData.draw(ti);
				tm.attachBitmap(pixelData,1,true,true);
				tm.smoothImageLoadComplete();
				_parent._parent._parent.position();
				removeMovieClip(ti._parent);
			};
		};
		tmcl.loadClip(imgURL,tmc.ti);
	}
}
// Load your image
smoothImageLoad("image.jpg",background_mc.target_mc);

9 Comments »

  1. Hey there, I am attempting to use this script, but no matter what I do, my content movie clip is always aligned left. Backround scales and works great.

    Any ideas?

    Comment by BG — January 16, 2009 @ 10:51 am

  2. Inside of the position() function do this:

    Assuming your content is named content_mc

    content_mc._x = centerX;
    content_mc._y = centerY;

    Comment by admin — January 16, 2009 @ 11:11 am

  3. Great script! I was wondering if you came up(or knew) how to had a loading to the JPG you are loading?

    Thanks a lot for the awesome script

    Comment by Antoine — January 29, 2009 @ 10:16 pm

  4. Very nice, works great!

    Is it hard to make a slideshow of this?

    Comment by marc — February 3, 2009 @ 2:40 am

  5. Hy, this is a great script!! thanks, i know some action script!!! but not enough to resolve my problem!!! i just want to know if i nedd to load the images with a prev and next image buttons, how can i do that using the script !!! if some one have an answer i will appreciate a lot your help, thanks!!!

    Comment by Luis — March 6, 2009 @ 5:50 pm

  6. Sweet script…
    any chance setting limit on how small may the image be resized to…
    thanks…

    Comment by • — May 18, 2009 @ 3:49 pm

  7. This is very cool. My only problem is setting this up in an HTML doc. I used your code from the example link, but it doesn’t recognize the swf. Any suggestions?

    Thanks!!!

    Comment by Nathan Hill — June 21, 2009 @ 10:20 am

  8. full screen background will not work in FireFox.
    somebody any idea ?

    Comment by brugge — November 9, 2009 @ 8:09 am

  9. Im’ interested on using this code but with a loop of a fullscreen slide show for the home page.
    Do you think is it possible to use this code and adapt it for a slide show with crossfade between one jpeg to another?
    And how can I do it?

    Many thanks

    Comment by maco — December 10, 2009 @ 5:27 am

RSS feed for comments on this post. TrackBack URL

Leave a comment

© 2010 Aaron Benson. All rights reserved.

Powered by WordPress