Responsive Image Scaling While Keeping Focus

I’m detailing a nifty little css technique here to have a large hero image while keeping the subjects in focus and at their original relative position.

Screen shot 2012-12-12 at 2.30.00 PM

 

The key here is the background-position property using percentage values.

First, lets see the demo.

When you set  background-position with a percentage, the background image is positioned at that percentage of its parent with that percentage of the image itself centered at that point. You really have to see the demo to understand.

Let me know how this works for you!

AS3 liquid layout class

I’m sure everyone has needed one of these at one time or another. I just decided to finally get one together for myself.

To use, you first call StageAlignTool.init() and pass in the stage, and optionally a minimum width and a minimum height (defaults to 1024×768).
Next, you call StageAlignTool.registerLocation() and pass in the displayObject you wish to register, which position you wish it to lock to (StageAlignTool .TL means Top Left, StageAlignTool.MC means Middle Center), and optionally if you want it to stay relative to where it is now (true) or snap to the edge of the stage (false).
The class automatically sets your stage scale mode to NO_SCALE and the stage align to TOP_LEFT. It also expects the display objects you pass it to have their registration points in the top left corner.

Download

Usage:


//StageAlignTool.init(Stage reference[, min width = 1024, min height = 768]);
StageAlignTool.init(stage, 1024, 768);

//StageAlignTool.registerLocation(a DisplayObject, position to lock to[, stay relative to current = false]);
//possible locations are [StageAlignTool.]TL, TC, TR, ML, MC, MR, BL, BC, BR

StageAlignTool.registerLocation(bg, StageAlignTool.MC);

Give it a try and tell me what you think.

My TextFormat won’t stick to my TextField

Run this SWF and click the button, the text stays pink.
Then run this and click on the text, then click the button.
The text defaults size and color. Why??????textFormatBug

var titleTF:TextFormat = new TextFormat();
titleTF.color = 0xFF00FF;
titleTF.size = 22;
//titleTF.font = avantBold.fontName;
var titleText:TextField = createTF(10, 10, 200, 26, true, titleTF, “This is a test”);
addChild(titleText);

function createTF(_x:Number, _y:Number, _width:Number, _height:Number, _autoSize:Boolean, _defaultTF:TextFormat, _text:String):TextField {
var tf:TextField = new TextField();
tf.x = _x;
tf.y = _y;
tf.width = _width;
tf.height = _height;
tf.autoSize = (_autoSize) ? TextFieldAutoSize.LEFT : TextFieldAutoSize.NONE;
tf.wordWrap = true;
tf.multiline = true;
tf.defaultTextFormat = _defaultTF;
tf.htmlText = _text;
//tf.setTextFormat(_defaultTF);
return tf;
}

clicker.addEventListener(MouseEvent.CLICK, swapText);

function swapText(e:*):void{
titleText.htmlText = “This is now a changed test” + String(Math.random());;
}

Latest project: save-my-relationship.com

See my latest at:

http://save-my-relationship.com/

It is a landing page for a banner campaign for Energizer’s Energi To Go iPod charger. The concept was mocking ‘relationship aide’ products such as Viagra or even dating sites. One huge bug though is that something with the Tween class in ActionScript 3 makes some tweens just decide to up and stop when running in Firefox, which means that if you’re visiting with FF you’ll only see the HTML page 🙁 If you would like to give me your feedback on the Flash version it’s directly linked here