Tag Archives: Flash

Actionscript 3 full browser background & tweening positioned elements upon browser resize

There are tons of tutorials on how to do this in AS2, but since my site required AS3, and because I’m migrating away from AS2 anyways – I had to figure this out.

Here’s how to position a background image to scale proportionally while never revealing the stage AND how to make movie clips tween to their correct position when the browser is resized.

Again, this is how to resize the background while not revealing the stage, and how to make your site content animate or “tween” to the center (or whatever position really) of the screen while the client resizes their browser window.

This is not how to animate the background resize event, or work with any  javascript plugins that alter the flash movie size on the fly like swffit. Although I’m working on those.

Full browser background:
Create a new AS3 document. Import an image to the stage that is large enough so that it has to scale down. Convert that image to a movieclip and give it an instance name of bg_mc. Create a new layer – You can name it actionscript or AS – it’s always a good idea to stay organized! Now select that layer & open up your actions panel.
First you want to tell the stage not to scale & how it should be aligned:
stage.scaleMode = StageScaleMode.NO_SCALE;stage.align = StageAlign.TOP_LEFT;Next we need to import some stuff into our document:import flash.display.Sprite;import flash.display.StageAlign;import flash.display.StageScaleMode;import;Add our event listener:stage.addEventListener(Event.RESIZE, resizeHandler);Now we’re going to create a function that will tell our background movieclip “bg_mc” how to scale:function setBackground() {var reg2 = stage.stageWidth / 2;var reg1 = stage.stageHeight / 2;bg_mc.x = reg2;bg_mc.y = reg1;bg_mc.width = stage.stageWidth;bg_mc.height = stage.stageHeight;bg_mc.scaleX <= bg_mc.scaleY ? (bg_mc.scaleX = bg_mc.scaleY) : (bg_mc.scaleY = bg_mc.scaleX);}Now we’re going to call that function we just created:setBackground();function resizeHandler(event:Event):void {setBackground();}Hit Cmd+Return (Ctrl+Enter on PC) to test the movie. Try scaling etc;

Repositioning movie clips with a tween:
Create a new movie clip on the stage with an instance name of “site” – for now this can just be a shape.Import some basic transitions:import fl.transitions.Tween;import fl.transitions.easing.*;Create variables that will tween:var xTween:Tween;var yTween:Tween;Create an event listener for the stage resize:stage.addEventListener(Event.RESIZE, resizeListener);Create a function that will tell our movie clip (site) to tween to it’s new position on stage:function resizeListener (e:Event):void {xTween = new Tween (site, “x”, Strong.easeOut, site.x, (stage.stageWidth / 2), 2, true);yTween = new Tween (site, “y”, Strong.easeOut, site.y, (stage.stageHeight / 2), 2, true);}Instead of Strong try using any of these (taken from Adobe’s AS3 online reference) to see how it changes the animation:

Class Description
Back The Back class defines three easing functions to implement motion with ActionScript animations.
Bounce The Bounce class defines three easing functions to implement bouncing motion with ActionScript animation, similar to a ball falling and bouncing on a floor with several decaying rebounds.
Elastic The Elastic class defines three easing functions to implement motion with ActionScript animation, where the motion is defined by an exponentially decaying sine wave.
None The None class defines easing functions to implement nonaccelerated motion with ActionScript animations.
Regular The Regular class defines three easing functions to implement accelerated motion with ActionScript animations.
Strong The Strong class defines three easing functions to implement motion with ActionScript animation.

And that’s it! It’s not as complicated as some would have you believe.

If you want a .zip of working files just send me a donation and let me know in the comment that you want them.
Click here to be taken to a PayPal donation page.

stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT
Leave a comment

Posted by on June 28, 2009 in Actionscript 3, Flash


Tags: , , , , , , ,

Flash XML image ticker (scrolling images that load from an external text file)

There are tons of paid options like’s FlashTickerFX (34.99) which I recommend if 1. you have flash 2. you are familiar with flash and flash components and 3. are going to be reimbursed – and there are also a ton of free options that use javascript or ajax/jquery.  But the only GOOD free option that I could find using flash that loaded images from an xml file was by – his flash ticker is free, and there is a healthy amount of community support in his forums. I’m going to go through a very quick how to guide on how I got it to work..


  • FTP access to your webserver
  • Dreamweaver or a text editor


The only limitation I ran into was that the images have to be a perfect square. (if you want it to look decent anyways – it works off of a perfect square model, so images that are not a perfect square will work – but you have to make sure you alter the ‘size’ to be the largest value of width or height of any of your images, otherwise they will be cut off.) If you are OK with that, you’re good to go on to the next step.


Download my altered version (I am going to write this article assuming that you downloaded this archive)
or you can opt to download the latest release from his site if you’re comfortable with code (in which case you won’t need this tutorial..) Latest release was 1.71 at the time this article was written – and that is what my altered version is based off of.


Extract the zip file to a folder


You are going to need to make your images 55×55 resolution, and in .jpg format. I included some as examples – be sure to delete these if you are adding your own.
If you want to use a different size go ahead, but as I mentioned in the limitations you will need to alter some code in the index.html file: Alter the size of the image on line 30 in the index.html file. Match/change the stage height in line 29 above it. And if you want a different width for the whole flash movie that is line 28 – it’s set to 680 (pixels) right now.


Open up info.xml

Enter in the full URL of each image between the <thumbURL> & </thumbURL> tags (like this: ). If you run out of thumbURL tags, just go ahead and copy and paste everything between the <item> and </item> tags (including those tags). You can also add your info to the other parameters if you wish. LinkURL is the link that the image leads to when clicked. caption (untested) is text that describes the image & target is specifying whether or not you want the link to open in a new window or a specific frame. You can use “_blank” for a new window. (without the quotation marks of course) – if you don’t put anything in the target field it will default to the window that the ticker is in and the visitor will leave your page.

That’s pretty much it! If it doesn’t look how you want you can open up index.html and alter some of the parameters – see Benjamin’s comprehensive list here (click on configuration options in the right hand menu). And if you copy and paste any of them into the index.html file, be sure to add a 3 after “so” like this: so3.addVariable   instead of so.addVariable – you will get an error on the page if you forget to do this.

The Lazy way

If you just want to load a whole folder in favor of identifying each image in the info.xml file do this:
open index.html and change lines 25 & 26 from this:

so3.addVariable(“sourceFile”, “info.xml”);
so3.addVariable(“fileType”, “xml”);

to this:

so3.addVariable(“sourceFile”, “get_folder_images.php”);
so3.addVariable(“fileType”, “text”);

Then open the get_folder_images.php file and change lines 26 & 27 from this:

$image_folder_dir = “./images”;
$image_folder_url = “;;

to reflect your personal website URL. Unless you changed the name of the images folder in the zip you downloaded, leave the first line alone- and just substitute with your URL. And you should be good to go – doesn’t get much easier than that.

Did you appreciate this article? Please click here to donate.


Posted by on April 22, 2009 in Flash


Tags: , , , , ,

%d bloggers like this: