Background Stretching or Tiling

[el pescado]

So, I am really trying to get these fluid Flash sites down.  It's been a real headache but I think I am getting somewhere finally.  I have read a bunch on the subject and I am making a site where the main area (movie clip called "box") will always be centered and tween into place.  I finally have this working fine. 

When I stretch out the screen, all works just fine.  It takes on the color of my stage (controlled by the properties menu).  Now, I want to add a background image I have or tile one.  I have tried some things and have bot real close but I am not getting what I want.  I want it to be smooth.  I found this code here and like how the site in the tutorial looks (link at very top of article).

Any help would be great.......thanks.

http://www.republicofcode.com/tutorials/flash/as3fluidresize/

import fl.transitions.Tween;

import fl.transitions.easing.*;

var xTween:Tween;

var yTween:Tween;

stage.scaleMode = StageScaleMode.NO_SCALE;

stage.align = StageAlign.TOP_LEFT;

stage.addEventListener(Event.RESIZE, resizeListener);

function resizeListener (e:Event):void {

xTween = new Tween (ball_mc, "x", Elastic.easeOut, ball_mc.x, (stage.stageWidth / 2), 2, true);

yTween = new Tween (ball_mc, "y", Elastic.easeOut, ball_mc.y, (stage.stageHeight / 2), 2, true);

}

[Colin Holgate]

Funnily, his site has an issue that he could avoid, or would have noticed if he used Macs! If you're on a Mac, it might be why you're not fully happy with the effect. The problem is that Macs don't get Flash events when the right button is pressed, or when you're dragging on some of the browser window chrome. As you resize the window you'll see some jerky motion, because when the resize event itself happens Flash gets a chance to try to catch up. Trying his site on Windows, even in an emulator on the same Mac that doesn't do so well, gives the fluid motion you wanted. You can get the same effect on a Mac by resizing the window and quickly releasing the mouse and pointing into the window again. If you're quick enough you get some of the tweening effect.

So, don't do things that way! Instead instantly move your elements to the right place when the resize event happens. Your user becomes your tween engine, and having everything instantly lay out according to to the user's window resizing movements is gratifying enough.

Incidentally, there's already a request into the Flash team to solve the problem about right-clicking stopping Flash events, I'll add a note to that request to point out that browser window resizing shouldn't stop the Flash movie too.

[el pescado]

Hey Colin,

Thank you for getting back to me on my issue.  I am working on a Mac and for some reason the Elastic Tweening effect seems to be working OK. 

My issue is just getting a nice fluid background working.  I was working on some full screen issues a few weeks ago and a very helpful person pointed me to a tutorial on goandlearn.com.  However, the tiling effect is in AS2 and I want to learn in AS3.

I am not a coder by nature, however, you would not believe the time I have spent reading about proper layouts and that sort of thing.  I am simply trying to understand the proper way of laying out fluid flash websites.

So, I basically created a .fla to test this code out.  I have a few items floating on the screen, one being a main content symbol (box) that tweens to center.

This effect works fine if I choose a solid color as my stage.  However, I tried adding a large jpg for my background (1024 X 768) and I am not sure how to get it to stretch.  I'd also like to know how to tile properly as well.  

I can send you the .fla if you like. 

Thanks again.

[Colin Holgate]

In stretching an image you're going to have to decide whether to distort it or not. Distorting it is the simplest way, but probably not the best option. But starting with doing it that way, and assuming you loaded the background with a Loader (or it's a movieclip on the stage), you can just set its scaleX and scaleY:

ldrOrMc.scaleX=stage.stageWidth/ldrOrMcOriginalWidth;

ldrOrMc.scaleY=stage.stageHeight/ldrOrMcOriginalHeight;

You would have either set the original width and height variables when the image first appeared, or hard coded it. If you want to make the image keeps its aspect ratio, you would work out what it takes to scale it to fill the width, what it takes to fill the height, and use the bigger of the two in scaling both X and Y. Like this:

var widthScale:Number = stage.stageWidth/ldrOrMcOriginalWidth;

var heightScale:Number = stage.stageHeight/ldrOrMcOriginalHeight;

var bothScale:Number = Math.max(widthScale,heightScale);

ldrOrMc.scaleX= bothScale:Number;

ldrOrMc.scaleY= bothScale:Number;

You might want to also shift the image if you want it to remain centered:

ldrOrMc.x = (ldrOrMc.width-stage.stageWidth)/2 * -1;

ldrOrMc.y = (ldrOrMc.height-stage.stageHeight)/2 * -1;

As for the general subject of learning AS3, at our local Flash meetings (in NYC) we dedicate every other week to covering AS3101 topics, following Rich Shupe's Learning ActionScript 3 book as a guide.

[el pescado]

Hey Colin,

I'll give this a go when I get home. I actually don't mind the image distorting a bit in this case but I would like to learn both methods.

So, the "ldrOrMc" is the instance name for the background I am assuming.  I can then just put those 2 lines of code in the code I provided in this string and I should be good, correct?

I had something close to working yesterday but it was jerky.  I would see white for a second as it scaled.  Maybe this is what you are talking about.  However, the symbols scaled nicely though.

When I click on this site on the Mac or no a PC (IE) all works fine.

http://www.rmdinteractive.com/

If that is wrong I would be interested in the best practice.  Also, for the AS3 sessions..............I am located in SF.  Any other suggestions would be greatly appreciated.

Thanks again.  Cool of you to take the time.

[Colin Holgate]

I'm not sure if tweeners work on real time or frames entered, but if it's real time I can imagine that the resizing background image might work at a slower rate than other elements. I still think it's a bad idea, and you're only being lucky if it works anywhere near correctly on a Mac!

If the background image is already on the stage, then yes, it could be named ldrOrMc and the lines I gave should work. You would still need to have remembered its original width and height for the math to work.

I don't know SF groups, but you might look here:

http://sanflashcisco.com/

and at least ask about other meetings. They seem to meet only once a month, and we're every week. Learning a bit more AS3 once a month might drag the learning curve out a bit too long! Just bear in mind that AS3 is easy to use, unless you try doing things in hard ways, in which case it would have been hard as AS2 too.