Login / Status
developer.Resource
Home . Documentation . Document Library . Extension Manuals
Sponsors
hosted by punkt.deTYPO3 and Open Source Magazine

1.5. Tutorial

Customizing the replacement picture

The replacement picture is a standard GIFBUILDER object. You can customize it through your TS template, to display what you want on it. For example, to display the title and the subtitle of the page:

plugin.tx_flashpageheader_pi1 {
/**
 * Replacement picture
 */
noFlash.file {  
// Title
20 = TEXT
20 {
text = {page:title}

text.insertData = 1

offset = 30,25
fontFile = t3lib/fonts/arial.ttf
fontSize = 20
fontColor = #FFFFFF
}
// Subtitle
30 = TEXT
30 {
text = {page:subtitle}

text.insertData = 1

offset = 30,40
fontFile = t3lib/fonts/arial.ttf
fontSize = 14
fontColor = #FFFFFF
}
}
}

As you can see, you can really do what you want. You just have to remember not to use the 10 object, because it will be used for placing the replacement picture. If you try to define that object, it will be unset to allow the picture to display. So just begin with the 20 object, as in the example.

Creating a Flash file

Then, what if you want to build your own dynamic Flash header?

The first thing to do is to take a look at the example files that comes with the extension. The are located in the pi1/ directory.

You got the complete Flash source code in the default.fla.zip file. Just uncompress it and open it with Macromedia Flash (unfortunately, this is only commercial stuff).

Three variables are passed to the Flash file.

For example:

xmlPageId=1&xmlPageType=10000&xmlPagePath=/

xmlPageId is the id of the page you're on, xmlPageType the typeNum of the XML page (10000 is the default one), and xmlPagePath the relative path to your Typo3 site. With those variables, you can load the XML content into your Flash movie.

This is how we do it, in Flash:

// XML file URL
var xmlPageURL = xmlPagePath add "index.php?id=" add xmlPageId add "&type=" add xmlPageType;
// Storage
var pageInfos = new Array();
// New XML object
var xmlFile = new XML();
// Ignore white spaces in XML file
xmlFile.ignoreWhite = 1;
// Parse function to launch after the XML file is loaded

xmlFile.onLoad = getXML;

// Load XML file
xmlFile.load(xmlPageURL);
// Stops the timeline
stop();

The process is simple. First, we recreate the URL of the XML file to load, with the three variables, and we create an array to store the results. Then, we can create a new XML object. The ignoreWhite option is required. Without that option set, Flash won't handle the generated XML file correctly. We have also added a function call to handle the XML file, when it will be loaded (in red). You'll find that function below. Then, the last step is to load the file itself, and it will be processed by our function.

/** 
 * Parse an XML file.
 *
 * This function parses an XML file, and pushes its
 * content into an array.
 *
 * @returnNothing.
 */
function getXML() {
// Storage
var xmlNodes = new Array();
// Get XML nodes
xmlNodes = xmlFile.firstChild.childNodes;
// XML parsing
for (i = 0; i < xmlNodes.length; i++) {
// Push each node into the storage array
pageInfos[xmlNodes[i].nodeName] = unescape(xmlNodes[i].firstChild.nodeValue);
}
}

That's it. At the end, your pageInfos array will contain every XML node. The key will be the XML tag, and the value the XML content. So to get the page title, you'll use the following, for example:

var title = xmlInfos['title'];

You are then free to manipulate this array as you want, and to use its content in your animation to create some nice effects. Please take a look at the example file to see some example. I'll try to produce a tutorial about this on the next version.