Fluid Layout

From Frontal Wiki

Jump to: navigation, search

This is an example of a "fluid width" layout. As you resize your browser, notice how the blocks readjust on the page. A scrollbar will also appear if necessary.

In addition, this example shows how Style Classes use Interactions to achieve: image movement on-rollover and the hiding and revealing of text on-click.

Namespaces allow multiple interactions on an object. See the Frontal User's Guide for more information about interactions. 

<script><![CDATA[
	document.node.addNamespace ( new Namespace ( "imageMove", "http://frontalcode.com/imagemove/" ) );
]]></script>
 
	<style><![CDATA[
 
		text
			{
				font-family: Swift LT Std;
				font-size: 12px;
				color: white;
				flash-text-anti-alias-type: advanced;
			}
 
		text:link { color: #F55100; }
		text:visited { color: #F55100; }
		text:hover { color: #FFFFFF; underline: false; }
 
		.footer:link { color: #666666; }
		.footer:visited { color: #666666; }
		.footer:hover { color: #333333; underline: false; }
 
		.background
			{
				width: 100%;
				height: 100%;
				scroll: auto;
				scrollbar-width: 15px;
			}
 
		/* 	
			Adding float: left; to the image style is all that is necessary
			to create the basic fluid layout.
		*/
 
		.image
			{ 
				float: left;
				width: 200px;
				height: 100px;
				margin-left: 2px;
				margin-top: 2px;
				overflow: hidden;
				background-color: #e5e5e5;
			}
 
		.caption
			{
				width: 100%;
				height: 45px;
				top: 100px;
				background-color: black;
				padding: 10px;
			}
 
		/*
			mouseScroll is the custom style class 
			that creates the rollover effect.
		*/
 
		.mouseScroll
			{
				@imageMove|onEnterFrame
					{
						if ( dynamic.over === undefined )
						{
							removeInteraction ( com.frontalcode.FrontalEvent.ENTER_FRAME, movie );
							return;
						}
 
						if ( dynamic.over )
						{
							dynamic.targetX = scrollLeftMax * movie.mouseX / containerWidth;
							dynamic.targetY = scrollTopMax * movie.mouseY / containerHeight;
						}
 
						scrollLeft += ( dynamic.targetX - scrollLeft ) / 10; 
						scrollTop += ( dynamic.targetY - scrollTop ) / 10;
 
						if ( ! dynamic.over && Math.abs ( dynamic.targetX - scrollLeft ) < 0.5 && Math.abs ( dynamic.targetY - scrollTop ) < 0.5 )
						{
							scrollLeft = dynamic.targetX; 
							scrollTop = dynamic.targetY;
							removeInteraction ( com.frontalcode.FrontalEvent.ENTER_FRAME, movie );
						}
					}
				@imageMove|onRollOver
					{
						dynamic.over = true;
						applyInteraction ( com.frontalcode.FrontalEvent.ENTER_FRAME, movie );
					}
				@imageMove|onRollOut
					{
						dynamic.over = false;
					}
			}
 
		/*
			The slide and slideMouse styles 
			create the on-click transition effect.
		*/
 
		.slide
			{
				style-tween-ease: fl.transitions.easing.Strong.easeOut;
				style-tween-duration: 10;
				style-tween-use-secs: false;
 
			}
 
		.slideMouse
			{			
				@onClick
					{
						if ( dynamic.open == null ) dynamic.open = false;
 
						if ( ! dynamic.open )
 
							{
								parent.prepStyleTween ( ); 
								parent.sS ( 'width', '200', true ); 
								parent.sS ( 'height', '145', true ); 
 
								parent.tweenStyles ( );
							}
 
						else
 
							{
								parent.prepStyleTween ( ); 
								parent.sS ( 'width', '200', true ); 
								parent.sS ( 'height', '100', true ); 
 
								parent.tweenStyles ( );
							}
 
							dynamic.open = ! dynamic.open;
 
					}
 
			}
 
		/* 
			openZoom and closeZoom control 
			the fullscreen image view.
		*/
 
		.openZoom
			{
				@onClick
					{
						var c = gC (gA ('zoomId')  ); 
						c.sS ( 'visibility', 'visible' ); 
						c.prepStyleTween ( ); 
						c.sS ( 'alpha', 1 ); 
						c.tweenStyles ( );
 
						if ( c.movie.parent != null ) c.movie.parent.removeChild ( c.movie );
						movie.stage.addChild ( c.movie ); 
						movie.stage.displayState = 'fullScreen';
					}
			}
 
		.closeZoom
			{
				@onClick 
					{
 
						prepStyleTween ( ); 
						sS ( 'alpha', 0 ); 
						tweenStyles ( );
						com.frontalcode.Scheduler.setTimeoutInFrames ( sS, gS ( 'style-tween-duration' ), 'visibility', 'hidden' ); 
 
						movie.stage.displayState = 'normal';
						movie.parent.removeChild ( movie );
						show ( );
					}
			}
 
		.thumbnail
			{ 
				width: 200px; 
				height: 100px; 
				resize-scale: none; 
			}
 
		// The following styles are customizations of the scrollbar.
 
		.frScrollbarVert [name=trackButton]
			{
				background-color: #cccccc;
				border-color: #999999;
				border-width: 0px;
			}
 
		.frScrollbarVert [name=slider]:hover
			{
				background-color: #000000;
				style-tween-ease: fl.transitions.easing.Strong.easeOut;
				style-tween-duration: 20;
				style-tween-use-secs: false;
			}
 
		.frScrollbarVert [name=slider]:active
			{
				background-color: #000000;
			}
 
	]]></style>
 
<!-- 
	Below is a straightforward way to create the page by associating a div tag 
	with each rectangle. A way to implement a more dynamic version of this 
	layout (creating it from a datafeed, for instance) would be to use Templates.
 -->
 
<div class="background">
		<div class="image" />
		<div class="image" />
		<div class="image" />
		<div class="image" />
		<div class="image" />
		<div class="image" />
		<div class="image" />
		<div class="image" />
		<div class="image slide">
			<img src="assets/images/image_1.jpg" class="slideMouse mouseScroll thumbnail" />
			<div class="caption">
				<text><![CDATA[The essence of design]]></text><text zoomId="zoom1" class="openZoom" style="is-link: true;"><![CDATA[+]]></text>
			</div>
		</div>
		<div class="image slide">
			<img src="assets/images/image_2.jpg" class="slideMouse mouseScroll thumbnail" />
			<div class="caption">
				<text><![CDATA[lies in the process]]></text><text zoomId="zoom2" class="openZoom" style="is-link: true;"><![CDATA[+]]></text>
			</div>
		</div>
		<div class="image slide">
			<img src="assets/images/image_3.jpg" class="slideMouse mouseScroll thumbnail" />
			<div class="caption">
				<text><![CDATA[of discovering]]></text><text zoomId="zoom3" class="openZoom" style="is-link: true;"><![CDATA[+]]></text>
			</div>
		</div>
		<div class="image slide">
			<img src="assets/images/image_4.jpg" class="slideMouse mouseScroll thumbnail" />
			<div class="caption">
				<text><![CDATA[a problem]]></text><text zoomId="zoom4" class="openZoom" style="is-link: true;"><![CDATA[+]]></text>
			</div>
		</div>
		<div class="image slide">
			<img src="assets/images/image_5.jpg" class="slideMouse mouseScroll thumbnail" />
			<div class="caption">
				<text><![CDATA[shared by many people]]></text><text zoomId="zoom5" class="openZoom" style="is-link: true;"><![CDATA[+]]></text>>
			</div>
		</div>
		<div class="image slide">
			<img src="assets/images/image_6.jpg" class="slideMouse mouseScroll thumbnail" />
			<div class="caption">
				<text><![CDATA[and trying]]></text><text zoomId="zoom6" class="openZoom" style="is-link: true;"><![CDATA[+]]></text>
			</div>
		</div>
		<div class="image slide">
			<img src="assets/images/image_7.jpg" class="slideMouse mouseScroll thumbnail" />
			<div class="caption">
				<text><![CDATA[to solve it.]]></text><text zoomId="zoom7" class="openZoom" style="is-link: true;"><![CDATA[+]]></text>
			</div>
		</div>
		<div class="image slide">
			<img src="assets/images/image_8.jpg" class="slideMouse mouseScroll thumbnail" />
			<div class="caption">
				<text><![CDATA[- Kenya Hara]]></text><text zoomId="zoom8" class="openZoom" style="is-link: true;"><![CDATA[+]]></text>
			</div>
		</div>
		<div class="image" />
		<div class="image" />
		<div class="image" />
		<div class="image" />
		<div class="image" />
		<div class="image" />
		<div class="image" />
		<div class="image" />
		<div class="image" />
		<div class="image" />
		<div class="image" />
		<div class="image" />
		<div class="image slide">
			<img src="assets/images/logo.jpg" class="slideMouse mouseScroll thumbnail" />
			<div class="caption">
				<text><![CDATA[Try resizing your browser.]]></text>
			</div>
		</div>
		<div class="image" />
		<div class="image" />
		<div class="image" />
		<div class="image" />
		<div class="image" />
		<div class="image" />
		<div class="image" />
		<div class="image" />
		<div class="image" />
		<div class="image" />
		<div class="image">
			<text class="frLink footer" style="bottom: 100%; padding: 10px;" href="http://www.frontalcode.com/" target="_blank" >Created w/ Frontal</text>
		</div>
</div>
 
<!-- Here the mouseScroll style is again used for the fullscreen images. -->
 
<img id="zoom1" class="mouseScroll closeZoom" src="assets/images/big_image_1.jpg" style="button-mode: true; visibility: hidden; alpha: 0; left: 0; top: 0; width: 100%; height: 100%; pin-to-stage: true; resize-scale: showmost; resize-scale-origin: center middle;" />
<img id="zoom2" class="mouseScroll closeZoom" src="assets/images/big_image_2.jpg" style="button-mode: true; visibility: hidden; alpha: 0; left: 0; top: 0; width: 100%; height: 100%; pin-to-stage: true; resize-scale: showmost; resize-scale-origin: center middle;" />
<img id="zoom3" class="mouseScroll closeZoom" src="assets/images/big_image_3.jpg" style="button-mode: true; visibility: hidden; alpha: 0; left: 0; top: 0; width: 100%; height: 100%; pin-to-stage: true; resize-scale: showmost; resize-scale-origin: center middle;" />
<img id="zoom4" class="mouseScroll closeZoom" src="assets/images/big_image_4.jpg" style="button-mode: true; visibility: hidden; alpha: 0; left: 0; top: 0; width: 100%; height: 100%; pin-to-stage: true; resize-scale: showmost; resize-scale-origin: center middle;" />
<img id="zoom5" class="mouseScroll closeZoom" src="assets/images/big_image_5.jpg" style="button-mode: true; visibility: hidden; alpha: 0; left: 0; top: 0; width: 100%; height: 100%; pin-to-stage: true; resize-scale: showmost; resize-scale-origin: center middle;" />
<img id="zoom6" class="mouseScroll closeZoom" src="assets/images/big_image_6.jpg" style="button-mode: true; visibility: hidden; alpha: 0; left: 0; top: 0; width: 100%; height: 100%; pin-to-stage: true; resize-scale: showmost; resize-scale-origin: center middle;" />
<img id="zoom7" class="mouseScroll closeZoom" src="assets/images/big_image_7.jpg" style="button-mode: true; visibility: hidden; alpha: 0; left: 0; top: 0; width: 100%; height: 100%; pin-to-stage: true; resize-scale: showmost; resize-scale-origin: center middle;" />
<img id="zoom8" class="mouseScroll closeZoom" src="assets/images/big_image_8.jpg" style="button-mode: true; visibility: hidden; alpha: 0; left: 0; top: 0; width: 100%; height: 100%; pin-to-stage: true; resize-scale: showmost; resize-scale-origin: center middle;" />
Retrieved from "http://www.frontalcode.com/wiki/index.php/Fluid_Layout"
Personal tools
Get Adobe Flash player