My favorites | Sign in
Project Home Downloads Wiki Issues Source
Project Information
Members
Featured
Downloads
Links

Frontal is a markup and scripting language based on HTML, CSS3 and JavaScript. By embracing these well-known and successful technologies, we believe that we have given developers and designers a great new, open way to work with rich media. Our guiding principles for this approach are:

Flash should be simple & easy. Designers shouldn't have to toil their way through multiple development environments to get something running.

Rich media needs to be web-native. Full SEO, deep linking, and seamless integration with web standards like HTML and JavaScript should be the norm.

Rich media should be easy-to-maintain, reusable, and fully customizable. Recreating the wheel every time is no fun.

An example might be most illustrative – here is a brief document in the Frontal language that may be run at http://www.frontalcode.com/ws/:

<style><![CDATA[
	document {
		font-family: Swift LT Std;
		font-size: 24px;
		style-tween-duration: 10;
	}
	video {
		@onClick {
			video.playing ? video.pause ( ) : video.play ( );
		}
	}
	#content {
		shadow-quality: 3;
		shadow-strength: 0.5;
		shadow-distance: 5;
	}
	#content:hover {
		shadow-distance: 20;
	}
]]></style>
<include rel="assets" blocking="true" src="assets.swf" fontClasses="SwiftLTStd, SwiftLTStdBold, SwiftLTStdItalic" />
<div id="content" style="margin: auto; width: 640px; background-color: #f55100;">
	<video src="assets/video/chelsea.flv" style="width: 100%; resize-scale: showall;" />
	<text style="color: white; clear: both; float: left; margin: 5px 0px 0px 10px;">Click to play.</text>
	<img src="assets/images/frontal_logo.gif" style="float: right;" />
</div>

The primary renderer for Frontal is a SWF built in ActionScript 3 that processes the Frontal language and displays the results on the Flash stage. It is mainly comprised of these subsystems:

  • A Frontal document parser.
  • A script interpreter. (ECMAScript with Flash extensions.)
  • A style sheet implementation. (CSS3 plus extensions such as node attribute support and custom pseudoclasses.)
  • A rendering engine based on the CSS box model and visual formatting model.
  • A demand-based asset manager.
  • Implementations of various tags like img, video and form to name a few.
  • A document manager to support multiple Frontal documents in a single renderer.
  • A console for run-time debugging.

As with any Flash movie, the renderer may be run standalone or embedded in an HTML page. When in an HTML page, there are no limits to the number of renderers that may be instantiated. When running standalone or loaded as a guest in another SWF, a single renderer may handle any number of documents that will each be attached to the display list as specified.

And Frontal is a mature product. Check out a few of the sites already created w/ Frontal:

Powered by Google Project Hosting