Skip to main content

prev 1 2 3 4 next

Template Customization Instructions Page 3

Customizing the Template Using XML (Extensible Markup Language)

It is not necessary that you understand how to create XML files or how they are parsed by Flash™ in order to customize your presentation template, however if you wish to get an introduction and basic overview of XML you can read this tutorial - http://www.xmlnews.org/docs/xml-basics.html

Essentially, XML is a data container that allows the author to create their own tags, unlike HTML which has predefined tags. It is important that you understand that since the content.xml file is going to be parsed by the Flash™ template at runtime, it is expecting the tags that are already defined in the content.xml file. Therefore it is imperative that you do not change, delete, or alter the existing tags. You may of course change the data inside the tags which is what will change the text, titles, and button labels inside your presentation.

If you are new to XML, we recommend using an XML editor to edit the content.xml file, to make it easier to distinguish the XML tags from the content. There are many good XML editors available and most HTML editing programs such as Adobe's Dreamweaver™ are excellent XML editors as well. If you do not have an XML editor, and you do not wish to buy one, you can download a free text editor called Emacs which will run on both PC and Macintosh computers. http://www.gnu.org/software/emacs/

You will need to download and install the XML plug-in for Emacs from SourceForge called PSGML. http://sourceforge.net/projects/psgml/ . If you feel comfortable editing XML in a plain text editor, you can use Notepad or Wordpad in Windows, or TextEdit or SimpleText on Macs. The rest of this tutorial will assume a basic understanding of using a text or XML editor.

Editing the content.xml File

Open the content.xml file in your text or XML editing program. You will not need to edit anything above line nine. Here are the first eight lines of the xml file.

<?xml version= "1.0" encoding= "UTF-8" ?>

<author label= "Author" >

<name> John Rives </name>

<company> DiscWrite CD Promotions </company>

<url> http://www.discwritecd.com </url>

<lastModified> 04/11/2007 </lastModified>

</author>

<!--Do Not Edit Above This Line-->

You will notice that each element has opening and closing tags such as <name></name> with data in between. The opening and closing tags must match with the closing tags having a forward slash "/" before the tag name. It is important that you do not alter or delete any part of these tags. Each tag is referred to as a node in XML. Any variable inside a tag is referred to as an attribute .

Let's start by modifying the presentation title and changing the duration of each of the slides on the Main Presentation page. Go to line nine and modify the main_title and image_duration attributes of the pages tag to match the example below. Make sure that the new data has quotation marks around it as shown in the example. Save your file. If your presentation is running, close it and restart it to see the changes.

Original code

<pages main_title = "Free Presentation Template" slide_prefix = "slide-" slide_total = "5" image_duration = "10" >

New code

<pages main_title = "New Presentaiton Title" slide_prefix = "slide-" slide_total = "5" image_duration = "5" >

Double-click the main template file to play the presentation and see your changes PC_play.exe (PC) or Mac_play (Mac). You will notice that the title at the top of the presentation interface now says New Presentation Title, and when you play the presentation slides, they advance automatically after five seconds instead of the original ten seconds. The minimum duration time is three seconds. If you enter a number less than three, it will be automatically changed to three when the xml file is parsed by the presentation template. If you wish to use more than five slides in your main presentation, change the slide_total number to equal the number of slides you are using. If you have ten slides, but you do not change this number, only the first five slides will play.

The slides are in the assets/slides folder. You will notice an attribute named slide_prefix which equals "slide-" . This determines the naming convention of your slide files. If you open the assets/slides folder you will see the files are named slide-1.jpg, slide-2.jpg, slide-3.jpg etc. The slides must be numbered in the order you wish them to play, however if you change the first part of the filename to something other than "slide-" , you must change the slide_prefix data to match your new filename. For example, if you decide to name your slides presentation-1.jpg, presentation-2.jpg, presentation-3.jpg, etc., you will need to change the slide_prefix attribute to slide_prefix = "presentation-" . Do not use leading zeros before the slide numbers.

Modifying the Pages

The data for each page in the presentation is in the page tags. <page></page> The order that each tag is listed in the XML file determines which button in the presentation is used to access that page from top to bottom.

Lines ten through twenty three have all the data for the Main Presentation page including the button label, page file path, page title, page image file path, and page text. We will go through these tags one by one to show you how to modify each element as desired to customize your presentation.

The example below shows the first page tags with all of the sub-tags called child nodes in XML. You will notice one unusual tag named <![CDATA[]]>. This tag allows us special characters that would normally be reserved for the XML code. Suppose you wanted to use the less-than and greater-than symbols in the text on your page such as 5 < 10 but 10 > 5 . If this was anywhere but inside the CDATA tag the parser would think you were declaring a tag named <10 but 10>. Using the CDATA tag allows to safely use reserved characters without causing problems for the parser.

Page tags and data for the Main Presentation page.

<page>
<button label= "Main Presentation" selected= "true" >
<movieclip> assets/swf/presentation.swf </movieclip>
</button>
<pgtitle> Main Presentation </pgtitle>
<pgheading> Free Customizable Presentation Template </pgheading>
<pgimage> assets/images/presentation.jpg </pgimage>
<pgtext>
<![CDATA[ <b>DiscWrite CD Promotions</b> has created a new line of free-to-use multimedia presentations which can be customized for just about any purpose and distributed on business card CDs or standard CDs. Business card CDs are great marketing tools for any business.
How much time do you or your sales agents spend each day repeating the same information about your business products or services? Are you spending too much time and money handling technical support calls?
Customize this presentation template from DiscWrite CD Promotions and burn your own discs or order duplicated and labeled business card discs from us.
Click the <i>Play Presentation</i> button for more information or call 866-272-8082 ]]>
</pgtext>
</page>

The first and last tags are the page opening and closing tags - <page></page> .

Inside these tags are the button, pgtitle, pgheading, pgimage, and pgtext tags.

The button tag has two attributes named label and selected . The label attribute has the text which will be used for the button label and the selected attribute tells the parser that this is the page that will be selected by default when the presentation opens. Only use one selected attribute for the entire XML file. If you add an additional selected attribute to one of the other page button tags and make it equal to "true" , the parser will use the last one that it comes across as the selected page. The presentation will automatically load that page as the default page at runtime. To change the button text for the first button, modify the text in the button label attribute. Make sure to keep the quotation marks around any attribute data.

The button node has one child node named <movieclip></movieclip> . In most cases you will not need to modify this data. Inside the movieclip tags is the path to the Main Presentation file. If you wish to replace the presentation.swf file with your own SWF file, or if you change the name of the presentation.swf file, you will need to change this filename in the movieclip tag as well. The file path is relative to the main presentation file, so if you change which folder the presentation.swf file is in, you will need to modify this file path too.

The next node is named pgheading and uses the <pgheading></pgheading> tags. You can modify the page header for each page by editing the data in the pgheading nodes for each page.

After the pgheading node you will see the pgimage node which uses the <pgimage><pgimage> tags. You will only need to modify the data in the pgimage tags if you change the name of the image you are loading into that page at runtime. Suppose you are creating a presentation for a real estate company and you changed the first page title to Our Process with slides that demonstrate your company's procedure for selling houses. You also created an image file of your office for that page and named it real_estate_office.jpg. You would need to change the data in the pgimage tags to read <pgimage> assets/images/ real_estate_office.jpg </pgimage> . This is the file path and filename that the presentation uses to find and load the page images for each page.

To edit the page text, type whatever text you want on the page in the CDATA tags. You will notice in the original file that we have used simple HTML tags inside the CDATA tags such as bold tags <b></b> and italic tags <i></i>. These tags are not used by the XML parser, but the dynamic text field inside the presentation can interpret simple HTML tags such as these and modify the text appearance accordingly. If you wish a word or phrase to be bolded, use the <b></b> tags on either side of the word or phrase and if you wish to italicize a word or phrase, use the <i></i> tags. You can use the tags together to bold and italicize a word or phrase like so - <b><i>This sentence will appear bolded and italicized.</i></b>.

To create a line-break in the text on the page, use the Enter(PC) or Return(Mac) key to start a new line in the XML file inside the CDATA tags. This will create a line-break in the text with space between the lines.

To create a link to a web page, PDF file or e-mail you can use a standard HTML anchor tag. The example below shows the e-mail and website links in the Contact Us page of the default presentation. This code is on lines 73 to 76 of the content.xml file.

<b>E-Mail</b>
<a href="mailto: someone@discwritecd.com "><font color="#0000FF"><u> someone@discwritecd.com </u></font> </a>

<b>Website</b>
<a href="http://www.discwritecd.com "><font color="#0000FF"><u>www.discwritecd.com</u></font> </a>

It is beyond the scope of these instructions to explain HTML code, but you can replace the e-mail address and website in the lines above with your own information and the links will work. Use the example below to change the anchor tags with your own contact information.

E-mail Link

Original code

<a href="mailto: someone@discwritecd.com "><font color="#0000FF"><u> someone@discwritecd.com </u></font> </a>

New code

<a href="mailto: username@yourwebsite.com "><font color="#0000FF"><u> username@yourwebsite.com </u></font> </a>

The first listing after a href="mailto: tells your e-mail program where to send the e-mail. The second listing, in between the underline tags <u></u>, is the text that is displayed on the page. The font color is set to dark-blue, but you can change it by changing the hex number in the font color tag <font color="#0000FF">.

Website Link

Original code

<a href="http://www.discwritecd.com "><font color="#0000FF"><u>www.discwritecd.com</u></font> </a>

New code

<a href=" http://www.yourwebsite.com "><font color="#0000FF"><u> www.yourwebsite.com </u></font> </a>

The first listing after a href= tells your browser where to find your web page. The second listing, in between the underline tags <u></u>, is the text that is displayed on the page. The font color is set to dark-blue, but you can change it by changing the hex number in the font color tag <font color="#0000FF">.

If you do not want the link to have an underline, you can delete the underline tags <u></u>.

You can link to PDF files in your presentation by using anchor tags as described above. If the PDF files are on your website, you can connect to them by entering the URL in the anchor tag as shown below.

<a href=" http://www.yourwebsite.com/your_pdf_file.pdf "><font color="#0000FF"><u> your_pdf_file.pdf </u></font> </a>

If the PDF file is in the assets/files folder and will be included on your disc, you can use a relative link as shown below.

<a href=" assets/files/your_pdf_file.pdf "><font color="#0000FF"><u> your_pdf_file.pdf </u></font> </a>

Refer to lines 90 to 91 in the content.xml file for an example of how this is used in the CDATA tag of the PDF Instructions page in the default presentation.

Each page has the same child nodes or tags and can be changed using this same process. You must save your file to see your changes in the presentation.

prev 1 2 3 4

<