Table of Contents

Ripple Data Structure

All information that you want to display in a Ripple movie should be in external XML files, but it is recommended that you use XHTML. This is not a requirement but the Ripple classes currently look for information in a <link> element, which limits what you can use, unless you are using a custom XML format, that you have designed especially. Additionally, for search engine integration, it is required that a web browser can execute JavaScript on the page.

In general, you should structure your external documents, so that they form a fully functional html site. This will mean that search engines can follow links and find all the pages. If you use relative links, Ripple will automatically handle that so that they will work correctly in Flash.

Note: Ripple is NOT an XHTML renderer. It does not infer any meaning from the structure of your XHTML document, but it does provide tools to help you to retrieve information from it.

In Ripple, all external data are referred to in terms of documents. All data is loaded into a Document object. This object provides methods to help you easily access the information you need.

It is expected that your XHTML documents will have a dual purpose as an html fall-back site. Therefore, it is likely that you will want some flexibility in being able to modify the files and their structure. For this reason, Ripple uses Descriptors. These are a separate XML file, that provides locations of all the data in the document and how to handle it inside Flash.

Example Document data

<html>
<head>
<link href="myDesciptor.xml" rel="descriptor" media="ripple" />
<script src="js/ripple.js" type="text/javascript"></script>
 
<script>
<!--
ripple = new RippleManager("pageWithFlash.html");
ripple.initPage();
//-->
</script>
 
<title>The Title</title>
</head>
<body>
 
<h1>The title</h1>
 
<div id="content">
	<p>This is the main content.</p>
</div>
 
<div id="menu">
   <div class="link"><a href="http://www.peterjoel.com">peter</a></div>
   <div class="link"><a href="http://www.flashant.org">aral</a></div>
   <div class="link"><a href="http://www.jessewarden.com">jesse</a></div>
</div>
 
</body>
</html>

ActionScript Access

As each document loads, you can access its Document object via the DocManager, which is Ripple’s central class.

The following code assumes that the descriptor linked to this document (above) is the example here. 

// _url is passed to give a root for relative url resolution
var docManager = DocManager.create(this._url);
docManager.addEventListener("load", onDocLoaded);
 
function onDocLoaded(event:Object){
    var doc = docManager.document;
    var title:String = doc.getData("title");
    var content:String = doc.getData("content");
    var menuItems:Array = doc.getData("menu");
}