Boom! There’s a new version in (gotochina)town, again.

• Fully compatible with all browsers, including webkit on iPhone and iPad (without scroll-bugs)
• Does not need to fully load images before calculating scaling (shorter loading time)
• Letterboxes vertically oriented images
• Standalone — no library needed and no conflicts needed
• VERY light weight (under 3KB for uncompressed css and javascript)
• Easy to integrate into different gallery types (what additional examples would you like? Post your comment)
• Seamless fallback to pure css solution in latest version of all major browsers

So here you go, see the comments in the source code for intructions:


Download source View demo View transition demo

Since our last post about fullscreen scaling background without flash, we have received lots of feedback and suggestions for improvement. There has also been some further developement with implementing the gallery functionality we use at the GOTOCHINA-site. Now there’s a new version in town.

To sum up some of the changes:

• Mootools is used as a base
• You can now choose to letterbox vertically oriented images
• The script now automatically turns on gallery-mode if a “navigation-element” is found (see code for explanation)
• There’s been added some conditional settings, for example for preventing the ugly opera scroll bug

So here you go, see the comments in the source code for further explanations:

Download source

View demo

Step 1:

Unlike most full-size-background techniques, we want the image to remain relative to the center of the screen, and not to the default upper left corner coordinate. Example:

To do this, we start of by creating a holder that is 200% the size of our original area, and placing it equally outdented from the body on every side:

html,body{width:100%;height:100%;overflow:hidden} /*to give the #holder something to relate to and prevent scrollbars*/
#holder{position:absolute;width:200%;height:200%;top:-50%;left:-50%} /*with IE vertical centering-fix from http://www.jakpsatweb.cz/css/css-vertical-center-solution.html*/
#holder[id]{display:table} /*for standard-browsers*/

Step 2:

Inside this holder, we create a div that stays centered from the top:

#holder div{position:absolute;left:0;top:50%;width:100%} /*with IE-fix*/
#holder[id] div{display:table-cell;vertical-align:middle;position:static} /*for standard-browsers*/
*:first-child+html #holder div{position:absolute}/*force IE 7 back to position:absoulte*/

Step 3:

Now we can add our image and make it center, aligned to the parent div. The -ms-interpolation-mode-variable is trick to force IE to anti-alias when resizing the image.

#holder img{position:relative;top:-50%;margin:0 auto;display:block;-ms-interpolation-mode: bicubic;width:100%}/*Setting width here creates a look-alike fallback for browsers without javascript*/

Step 4:

Since the body now is all covered with a huge image, we need to make a “new” body, where we can put our content:

#body{position:absolute;top:0;left:0;z-index:2;width:100%;height:100%;overflow:auto}

Step 5:

Create a javascript file called scaler.js. To avoid the need of any “domready” or “onload” events, we are going to place this script just after our #body-div. The script:

(function(){
	var db=document.body;
	var img=document.getElementById('holder').getElementsByTagName('img')[0];

	var dbsize={}; //needed to store body size
	var imgsrc=img.src; //needed to store images src
	var keyStop=function(e){
		var e=window.event||e||{};
		var tag=e.target.tagName.toLowerCase();
		if(tag!='textarea'&&!(tag=='input'&&(e.target.type=='text'||e.target.type=='password'))){ //are the user not writing?
			if(e.keyCode==32||e.keyCode==39||e.keyCode==40){ //Did he press any of the "scrolling-keys"? (down, right, and space key)
				if(e.preventDefault)e.preventDefault();
				else e.returnValue=false;
			}
		}
	}

	if(this.addEventListener)window.addEventListener('keydown',keyStop,false);
	else window.attachEvent('onkeydown',keyStop);

	setInterval(function(){
		window.scrollTo(0,0);
		if(img.complete){ //check if image has loaded
			if(db.clientWidth!=dbsize.w||db.clientHeight!=dbsize.h||img.src!=imgsrc){ //check if size or img size has changed
				imgsrc=img.src; //store current src
				dbsize.w=db.clientWidth; //store current body width
				dbsize.h=db.clientHeight; //store current body height

				var newwidth=Math.round(dbsize.h*(img.offsetWidth/img.offsetHeight)); //calculate new width based on height

				img.style.width=(dbsize.w>newwidth?dbsize.w:newwidth)+'px'; //use the largest value of body-width and newwidht
				//and this is the real trick: if there's no specified height, the height is automaticly calculated relative to the with
			}
		}
	},300);
})();

Step 6:

The HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /><title>Scaler</title>
	<link rel="stylesheet" type="text/css" href="scaler.css" />
	<meta http-equiv="imagetoolbar" content="no" /> <!--Prevent IEs anoying imgage toolbar-->
</head>
<body>
	<div id="holder">
		<div><img alt="" src="your_photo.jpg" /></div>
	</div>
	<div id="body">
		Your content
	</div>
	<script type="text/javascript" src="scaler.js"></script>
</body>
</html>

Download source

View demo

The scripts-folder in After Effects is often something which is overlooked, by myself included. I’m almost embarrassed to say I just recently realized there’s a Scale Composition-function under scripts-menu which is incredibly handy. Apart from the default scripts, there’s also a very nice script package available for free from Adobe Exchange which I’m sure will improve anyone’s workflow.

First off, there’s the Active Shutter-script: quite simply, this script lets you adjust the motion blur settings of your composition without having to go into comp-settings every time. Instead you get a panel that gives you sliders for shutter angle, shutter phase and a small scrubber. Very handy!

Then there’s the Folder Setup-script: this is great for making a template folder structure to keep your project organized. I usually always like to start off a project with organizing folders, such as ‘assets’, ‘comps’, ‘audio’ etc, and this nifty script let’s you setup a project with just one click.

Next is the KeyEd-script which is one of my favorites. For a long time I was looking for an easy way to set up my own keyboard shortcuts in After Effects, and finally I found the simple solution. This script lets you easily configure your own keyboard shortcuts, which to me is a blessing in terms of increasing workflow speed.

There’s also the Kuler Shapes-script: this enables you to import color palettes from kuler.adobe.com and you get the colors neatly placed within their own composition, and lastly there’s the Launch Pad-script, that can launch certain scripts on start-up.

The package is available for both CS4 and CS3, here are the links:

• CS4 Version
• CS3 Version

While I’m at it, I’d also like to recommend the nice AE Background Renderer, which quite simply let’s you render stuff in the background so you can keep working in After Effects. Now that’s something — makes me wonder why all these scripts don’t ship with After Effects to begin with.

To install these; simply unpack the files into your Scripts-folder located within your After Effects folder and after you restart AE you’ll find them under the File > Scripts-tab (or under the Window-tab if you’ve placed the scripts in the ScriptUI Panels-folder). Hope you find them useful! What scripts couldn’t you live without? Feel free to share your favorite scripts in the comments field.

— Tip by Gustav

As most animators know, good easing can really make an animation go from decent to great. If an object is supposed to appear somewhat realistic; it has to emulate physics to a certain extent. Pretty basic animation knowledge, and a linear easing curve will rarely achieve that effect. After Effect’s in-built graph editor has gotten slightly better with time but I still find it difficult to make it act like I want it to, and it always seems to take a lot of time getting it right, especially if you’re trying to produce some quick drafts.

One of the plugins I couldn’t have managed without would have to be the simple yet quite genius Ease and Wizz-plugin by Ian Haigh. Best part is, it’s free! Version 2.0 was also just released with support for animation curves as you can see in the screencast. This little tool basically let’s you get access to every easing type in a mouseclick — just select the keyframes, select easing type and press apply and that’s all there is to it. Easing types like bounce, elastic and back are also included, which is great since these would usually take some more time to reproduce by using the graph editor.

The possibilities are endless. Just imagine using different easing types on the X/Y/Z-properties of a 3D-enabled object, camera positions and/or point of interest — different settings will yield completely different results. It won’t do much for opacity-related parameters, but for just about every other property it works magic. The plugin is very easy to install, it’ll make the workflow smoother and usually give a more professional looking result. For anyone new to After Effects or who haven’t heard about this one before;  download, install it and give it a try. The Expo (exponential) easing-type will pretty much work anywhere :)

Tip by Gustav — I’ll try to keep posting more similar tips and tricks in the time to come.