Tyler Larson's Quick Start Guide
Wrapper is a new technology that overlays your HTML web page, enabling your content to render consistently in all browsers, while adding the features of the Flash Player (think anything that can be done with Flash, Flex, and ActionScript) to any part of your HTML and CSS.
How is this possible? We've created an HTML/CSS browser that runs in the Flash Player. After your standard HTML page has loaded, the contents are taken over and rendered within Wrapper --this is the key to cross-browser consistency. Even more exciting is what can be done in Wrapper to enhance your page.
Wrapper is based on standard XHTML and CSS, but you can also add logic to your Wrapper page with scripts, by calling JavaScript Object Notation (JSON) methods, and using runtime-loaded plugins written in ActionScript 3. Most of Wrapper's features are tied directly to how HTML and CSS render in every modern browser but now you can add some exciting, enhanced features such as: filters, custom fonts, blend modes, custom shapes, gradient fills --and so much more.
So how do I get started?
Just open any text editor and make something like this.
and save this document as index.html
Then make a new document called main.css and make something like this inside:
Save this and put both files into a folder on any web server (including localhost).
At this point we have to make a crossdomain.xml file which will allow Wrapper to read the content on you page, If you use the downloaded version of Wrapper you wont need this. To make this go back to your text editor and create a new file named crossdomain.xml and place this inside.
All done, just navigate to that location on your server and you should see what you've made. If everything worked you should see "Hello World" inside of a orange box with rounded corners inside a blue box. It's a simple example, but you can see how easy it is to use custom shapes and fonts. Adding more complex interaction or creating an AJAX style application is not much more difficult.
How is this possible? We've created an HTML/CSS browser that runs in the Flash Player. After your standard HTML page has loaded, the contents are taken over and rendered within Wrapper --this is the key to cross-browser consistency. Even more exciting is what can be done in Wrapper to enhance your page.
Wrapper is based on standard XHTML and CSS, but you can also add logic to your Wrapper page with scripts, by calling JavaScript Object Notation (JSON) methods, and using runtime-loaded plugins written in ActionScript 3. Most of Wrapper's features are tied directly to how HTML and CSS render in every modern browser but now you can add some exciting, enhanced features such as: filters, custom fonts, blend modes, custom shapes, gradient fills --and so much more.
So how do I get started?
Just open any text editor and make something like this.
<!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" lang="en">
<head>
<meta http-equiv="content-type" content="text/html" charset="utf-8" />
<title>main</title>
<link rel="stylesheet" href="main.css" type="text/css" />
<script type="text/javascript" src="http://0in1.com/wrapper.js"></script>
</head>
<body id="wrapper" onload="wrapper('http://0in1.com');">
<div id="box">
<p>Hello World!</p>
</div>
</body>
</html>
and save this document as index.html
Then make a new document called main.css and make something like this inside:
/* hide from ie on mac \*/
html { height: 100%; }
/* end hide */
body {
margin: 0; padding: 0; height: 100%;
background-color: #0099FF;
}
#box {
left: center;
width: 600px;
height: 50%;
background-color: #FF9900;
shape: json('{ "type":"rounded", "w":10 }');
}
p {
font-file: url("http://0in1.com/assets/fonts/MankSans.swf");
font-family: "MankSans";
color: #FFFFFF;
font-size: 100;
}
Save this and put both files into a folder on any web server (including localhost).
At this point we have to make a crossdomain.xml file which will allow Wrapper to read the content on you page, If you use the downloaded version of Wrapper you wont need this. To make this go back to your text editor and create a new file named crossdomain.xml and place this inside.
<?xml version="1.0"?>
<cross-domain-policy>
<allow-access-from domain="0in1.com" />
</cross-domain-policy>
All done, just navigate to that location on your server and you should see what you've made. If everything worked you should see "Hello World" inside of a orange box with rounded corners inside a blue box. It's a simple example, but you can see how easy it is to use custom shapes and fonts. Adding more complex interaction or creating an AJAX style application is not much more difficult.
posted by tyler at
3:03 PM
0 Comments:
Post a Comment
Subscribe to Post Comments [Atom]
<< Home