Objects used in your project

First of all, you must have these XML files in the SAME directory the flash .swf is in. you can go into the .fla file, and change the loading parameters if needed, but only an experienced coder should do that.

XML & CSS files needed in same directory:

The XML Files

They should all be pretty simple to read and change, but here are the general guidelines.

images.xml

<images>

<picture title = "Surfer"
image = "surfer2.png" />

<picture title = "Biker"
image = "biker1.png" />

<picture title = "Biker 2"
image = "biker2.png" />

<picture title = "Skater"
image = "skater.png" />

</images>

Above you can see that image = 'URL TO IMAGE YOU WANT LOADED', and it can be in http://xxx.com/xxx.jpg,png,gif. You can also just leave the files in the .swf base directory, and just type the image filename.

buttons.xml

<buttons>

<button title="Button1">
<content>
<![CDATA[<b><font size="16">Example</font></b><br /><font size="12"><i>This is italic text, these html loaded buttons support italics, bold, align, and image tags.</i></font><br /><br /><img src="http://www.kirupa.com/mini_icons/rssfeed.gif">]]>
</content>
<action>page1.html</action>
<header>This is the header</header>
<thumb>b1.jpg</thumb>
</button>

<button title="Button2">
<content><![CDATA[<i>FINALLY DONE PROGRAMMING!</i>]]></content>
<action>page2.html</action>
<header>This is the header</header>
<thumb>b2.jpg</thumb>
</button>

<button title="Button3">
<content><![CDATA[<i>yay</i> ]]></content>
<action>page3.html</action>
<header>This is the header</header>
<thumb>b3.jpg</thumb>
</button>

<button title="Button4">
<content><![CDATA[<i>yay</i> ]]></content>
<action>page4.html</action>
<header>This is the header</header>
<thumb>b4.jpg</thumb>
</button>

<button title="Button5">
<content><![CDATA[<i>yay</i> ]]></content>
<action>page5.html</action>
<header>This is the header</header>
<thumb>b5.jpg</thumb>
</button>

</buttons>

Above you can see that the different tags mean different things.

The <button title="Button4"> is where you'll put the text to appear on the buttons.

The <content><![CDATA[<i>yay</i> ]]></content> is where you'll put the html to appear inside the button when it goes up after you 'roll over'. You MUST at all costs leave the <![CDATA[ &html here* ]]> tags, as it allows flash to read it as html. Also remember that flash counts the whitespace between lines and will add it into the display (see below in the updates.xml for more information)

The <header>This is the header</header> is where you define the heading on top of the html inside the button when you roll over it.

The <thumb>b5.jpg</thumb> the path/url to the image you want loaded in the background of the button.

updates.xml

<updates>

<update>
<content><![CDATA[<img src="http://www.kirupa.com/mini_icons/rssfeed.gif"><font size="32"><b><a href="test.html">Example Update - 11/04/2006</a></b></font><br><font size="24"><i>This is italic text, these html loaded update boxes support italics, bold, align, and image tags.</i></font>
<span class="headline">Example CSS Header</span><br><span class="byline">The html and CSS tags are limited in Flash, but you'll be able to do everything you need for a simple update box!</p>]]></content>
</update>
</updates>

The same CDATA tag rule applies! You MUST at all costs leave the <![CDATA[ &html here* ]]> tags, as it allows flash to read it as html.

I've give you two examples of a good xml file and a bad one: Make sure you format your html, then remove the whitespaces

This is step one (a bad way to do it, but good for geting your format):

<updates>
<update>
<content>
<![CDATA[
<img src="http://www.xphotoz/updateimg.gif"><font size="32"><b><a href="test.html">Example Update - 11/04/2006</a></b></font>
<br>
<font size="24"><i>This is italic text</i></font>
<br&ft;
<span class="headline">Example CSS Header</span>
<br>
<span class="byline">The html and CSS tags are limited in Flash.</span>
]]>
</content>
</update>
</updates>

Now step two, is to test the above code, and see if looks how you'd like it in a normal browser.

After you know it looks good, REMOVE the whitespace. It should look like this afterwards:


<updates>
<update>
<content><![CDATA[<img src="http://www.xphotoz/updateimg.gif"><font size="32"><b><a href="test.html">Example Update - 11/04/2006</a></b></font><br><font size="24"><i>This is italic text</i></font><br&ft;<span class="headline">Example CSS Header</span><br><span class="byline">The html and CSS tags are limited in Flash.</span>]]></content>
</update>
</updates>

Notice above how there's one long line of code, no spaces. This is how you'll get it to look right in flash. In the example included in the project, I used one 'return' line instead of a <br>, which will do the same thing. If you don't want one line of extremely long code, simple leave the 'enters/rturns/CLRFs' there and don't use <br> tags.

styles.css

p {
color: #000000;
font-size: 12px;
display: inline;
}
a:link {
font-family: Courier;
color: #00008E;
text-decoration: underline;
}
a:hover{
font-family: Courier;
color: #FF8300;
text-decoration: none;
}
.headline {
font-family: Helvetica;
color: #00D0FF;
font-size: 24px;
font-weight: bold;
display: block;
}
.byline {
font-family: Verdana,Tahoma,Helvetica;
font-size: 16px;
color: #54321C;
font-style: italic;
font-weight: bold;
display: inline;
}

You can see above some CSS, this is the CSS file called for formatting the updates.xml html data. In the updates.xml you'll notice I used some <span> tags, defining the class as 'byline' or 'headline'. That's referring to this file. Above are the limitations of CSS in Flash. For more information about the limits you can google it, and you'll find it soon enough, but above you'll see that basically you can control the style of font, color of text and links, and thats about it.

Contact ASAP

Let me know if you need any help!

Complete file list in andre_project.zip:

Complete file list included: