Instructions Manual

User Manual:

Open the PDF directly: View PDF .
Page Count: 9

Advanced XML Website

BY DIGITALSCIENCE

Instructions Manual

OVERVIEW

This template has been specifically designed to be easily customized with all content

driven by XML which means you can update content without editing the FLA. This manual

will guide you through the process of customizing this template with your own content. For

those who wish to ‘tweak’ the flash, all FLA files are included and all code has been well

commented.

Throughout this template the Tween Class has been used so you can easily change the

transition type by replacing Bounce, for example, to Regular, Strong or Elastic. See Tween

Class in Flash Help for full list of Tween Class easing properties.

TEMPLATE SETTINGS

To adjust template setting you need to edit index.xml using a simple text editing program

such as Notepad on PC or TextEdit on MAC. Below is the XML structure:

<logo X="5" Y="30">content/logo.png</logo>

</settings>

Between the settings tags you will see a tag for logo. Here you can set the path to the

image for the logo and adjust it’s X and Y position in the navigation menu. The current logo

is saved in the “content” folder. In the footer tag you can set the footer text which appears

at the bottom left of the template. This text is HTML formatted so you can change colour to

text and add hyperlinks. In the menu tag you can set whether the main navigation should

be open or closed on start up by changing the showNav attribute which is either set to

“true” or “false”.

PAGE 1

GETTING STARTED

EDITING MENU ITEMS

By editing index.xml you can add or change the name of menu items and set the links for

the content pages. The main navigation supports up to two levels so you can have Main

and Sub menu items. Here is a breakdown of the XML structure:

<nav>

</main>

</nav>

To set the name of menu items see Name attributes. To set content paths see Link

attributes. toLoad attributes are for the XML path for content.swf pages only, which is the

generic Dynamic Content Window Component. High lighted in blue above you will see an

example of how to create a Sub Menu.

To add backgrounds you need to save your background JPEG’s to the “backgrounds”

folder. Note: All backgrounds need to be at the same aspect ration to each other. For best

results use a width of 1024 by height of 768. Once you have saved your backgrounds, you

need to edit content.xml in the “backgrounds” folder. Here is the XML structure:

</content>

The Delay attribute is the time delay between each background in milliseconds. (1000

milliseconds = 1 second). To add or remove backgrounds simply use the XML structure

above. Tip: Try to optimize the background jpegs as much as possible, the bigger the file

size, the more processor intensive they will be and thus effect website performance.

PAGE 2

ADDING BACKGROUNDS

To use this component you need to first add your slide images to the “slideshow” folder.

Then you need to edit content.xml in the “slideshow” folder to add image paths and copy

text. Here is the XML structure:

</item>

</item>

</item>

</content>

To set the title of the slideshow see attribute Name. The Image attribute is the image path,

Delay is the time delay for that slide set in milliseconds. Link is the URL path to go to when

the slide image is pressed. In the copy tags you can set your slide copy which appears on

slide rollover. This copy is HTML formatted so you can set text colour, size and decoration

and add hyperlinks using standard HTML tags.

EDITING THE FLA

If you want to change code or elements in the FLA open slideshow.fla In the Actions layer

you will see code for the opening transition for the window which can be changed using

Tween class properties.

Inside movieclip “content_mc” you will see code in the Actions layer for the slideshow

script engine. Here you can set whether autoplay should be enabled on start up. See

slideShow variable, either set to “true” or “false”. You can also edit the StyleSheet to set

hyperlink text colour and hover effect. See comments in the code for further help.

To use this component you need to first add your team members photos to the “team”

folder. To organise staff in categories you can add separate folders in this folder. If you

only want one category just use one folder called ‘gallery1’. Then you need to edit

content.xml in the “team” folder to add image paths and copy text. Here is the XML

structure.

PAGE 3

SLIDESHOW COMPONENT

TEAM MEMBERS COMPONENT

</item>

</item>

</item>

</gallery>

</content>

To set the title of this page and the names for each category which appears in the top

menu, see attribute Name. The Image attribute is the image path. In the copy tags you can

set each staff members bio and contact details. This copy is HTML formatted so you can

set text colour, size and decoration and add hyperlinks using standard HTML tags.

EDITING THE FLA

If you want to change code or elements in the FLA open team.fla In the Actions layer you

will see code for the opening transition for the window which can be changed using Tween

class properties.

Inside movieclip “content_mc” you will see code in the Actions layer for script engine. Here

you can edit the StyleSheet to set hyperlink text colour and hover effect. See comments in

the code for further help.

This component can be used multiple times throught the template and all you need to do is

use the default XML file window.xml in the folder “content” and save it to different names.

To add each content window to the template, edit index.xml and add it to the relevant tags.

See example below:

All dynamic content windows use the same SWF, see content.swf But each can use

different XML files, you must set the path to the XML file in the toLoad attribute. Once you

have added it to the main menu you should see the newly created content window when

you run the site. Now you need to edit the content xml file to add your content. Here is the

XML structure below:

</content>

PAGE 4

DYNAMIC CONTENT WINDOW

PAGE 5

NEWS COMPONENT

To set the title of this page see attribute Name. The Border attribute is the border size of

the content window. By editing the Width and Height attributes you can change the

windows dimensions. In the copy tags you can set the content copy. This copy is HTML

formatted so you can set text colour, size and decoration and add hyperlinks using

standard HTML tags. Below are some examples of HTML formatting:

EDITING THE FLA

If you want to change code or elements in the FLA open content.fla In the Actions layer

you will see code for the opening transition for the window which can be changed using

Tween class properties.

Inside movieclip “content_mc” you will see code in the Actions layer for script engine. Here

you can edit the StyleSheet to set hyperlink text colour and hover effect. See comments in

the code for further help.

To use this component you need to first add your thumbnail and large images to the

“news” folder. Then you need to edit content.xml in the “news” folder to add image paths

and copy text. Here is the XML structure:

<headline>Blue Turbine</headline>

<date>10 August 2007</date>

<copy_intro><![CDATA[Text here]]></copy_intro>

<copy_full><![CDATA[ Text here]]></copy_full>

<copy_pic><![CDATA[Text here]]></copy_pic>

</article>

<headline>Cold Steel</headline>

<date>23 August 2007</date>

<copy_intro><![CDATA[Text here]]></copy_intro>

<copy_full><![CDATA[ Text here]]></copy_full>

<copy_pic><![CDATA[Text here]]></copy_pic>

</article>

</content>

To set the title of this page see attribute Name. The Thumb and Large attributes are for the

image paths. To set headline and date see the relevant tags. In the copy tags you can set

your news article copy for the intro and full article and set the text which appears under the

large image. This copy is HTML formatted so you can set text colour, size and decoration

and add hyperlinks using standard HTML tags.

EDITING THE FLA

If you want to change code or elements in the FLA open content.fla In the Actions layer

you will see code for the opening transition for the window which can be changed using

Tween class properties.

Inside movieclip “content_mc” you will see code in the Actions layer for the script engine.

Here you can edit the StyleSheet to set hyperlink text colour and hover effect. See

comments in the code for further help.

To use this component you need to first add your thumbnail and large images to the

“imagegallery” folder. Then you need to edit content.xml in the “imagegallery” folder to add

image paths and copy text. Here is the XML structure:

<image Thumb="imagegallery/gallery1/thumb1.jpg"

Large="imagegallery/gallery1/image1.jpg" Caption="Reflective Shapes">

</image>

</gallery>

<image Thumb="imagegallery/gallery2/thumb1.jpg"

Large="imagegallery/gallery2/image1.jpg" Caption="Trees by the lake">

</image>

</gallery>

</content>

To set the title of this page and gallery names see attribute Name. The Thumb and Large

attributes are for the image paths. Caption is for the text which appears when you rollover

a thumbnail. In the copy tags you can set your news article copy for the intro and full

article and set the text which appears under the large image. This copy is HTML formatted

so you can set text colour, size and decoration and add hyperlinks using standard HTML

tags.

EDITING THE FLA

If you want to change code or elements in the FLA open imagegallery.fla In the Actions

layer you will see code for the opening transition for the window which can be changed

using Tween class properties.

Inside movieclip “content_mc” you will see code in the Actions layer for the script engine.

Here you can edit the StyleSheet to set hyperlink text colour and hover effect. Here you

will also find the Tween Class transitions for the large image. You can easily change the

transition type by replacing Bounce, for example, to Regular, Strong or Elastic. See Tween

Class in Flash Help for full list of Tween Class easing properties.

In the code you can also set whether auto play should be enabled on start up. See

slideShow variable, either set to “true” or “false”. See comments in the code for further

help.

PAGE 6

IMAGE GALLERY COMPONENT

You can add any size video to this gallery and it will always maintain aspect ratio in

fullscreen mode. The width and height of each video can be defined in content.xml in the

“videogallery folder”. You can add video formats such as FLV, MP4 and MOV by saving

them to folders and defining the path in the XML. The XML structure is as follows:

<item Thumb="videogallery/gallery1/thumb1.jpg" VideoClip="videogallery/gallery1/video1.flv" Width="600"

Height="450" Title="4:3 video Example (Large)">

</item>

</gallery>

<item Thumb="videogallery/gallery1/thumb2.jpg" VideoClip="videogallery/gallery1/video2.flv" Width="400"

Height="225" Title="16:9 video Example">

</item>

</gallery>

</content>

To set the title of this page and gallery names see attribute Name. The Thumb attribute is

to set the thumbnail image paths. The VideoClip attribute is the path to the video which

can either be a relative or absolute path.The Width and Height attributes are to set the

dimensions of the video. The Title attribute is for the title of the video. In the copy tags you

can set the copy which appears under the video player. This copy is HTML formatted so

you can set text colour, size and decoration and add hyperlinks using standard HTML

tags.

EDITING THE FLA

If you want to change code or elements in the FLA open videogallery.fla In the Actions

layer you will see code for the opening transition for the window which can be changed

using Tween class properties.

Inside movieclip “content_mc” you will see code in the Actions layer for the script engine.

Here you can edit the StyleSheet to set hyperlink text colour and hover effect. Here you

will also find the Tween Class transitions for the video thumbnails. You can easily change

the transition type by replacing Bounce, for example, to Regular, Strong or Elastic. See

Tween Class in Flash Help for full list of Tween Class easing properties. Also see

comments in the code for further help.

ADDING VIDEOS

You can either play FLV or MP4 videos. MP4 videos supports High Definition video but will

only display in Flash if you have the lasted Flash Player plugin installed in your broswer.

MP4 won’t play when you run the SWF, only when the SWF is embedded into an HTML

page. To encode FLV’s I recommend using the stand alone Flash Video Encoder which

comes with Flash 8 and higher. Note: Some FLV encoders do not record the duration time

in the video meta data which will result in no progress bar and an undefined duration time

when you play the video in Flash so for best results use the Flash Video Encoder.

PAGE 7

VIDEO GALLERY COMPONENT

To use this component you need to edit content.xml in the “contact” folder to add your

company contact details. Here is the XML structure:

<content Name="CONTACT US" companyName="Company Name" formName="Quick

Contact">

</content>

To set the title of this page see attribute Name. Attributes companyName and formName

are for the 2 headings on the contact form. In the copy tags you can set your company

details. This copy is HTML formatted so you can set text colour, size and decoration and

add hyperlinks using standard HTML tags.

To set the email address messages need to be sent to and the default subject header, you

need to edit formSubmit.php in the “contact” folder using a simple text editing program

such as Notepad on PC or TextEdit on MAC. The 2 lines you need to change are the

following:

$sendTo = "name@company.com";

$subject = "Message from your website";

EDITING THE FLA

If you want to change code or elements in the FLA open contact.fla In the Actions layer

you will see code for the opening transition for the window which can be changed using

Tween class properties.

Inside movieclip “content_mc” you will see code in the Actions layer for the script engine.

Here you can edit the StyleSheet to set hyperlink text colour and hover effect. See

comments in the code for further help.

To use this component you need to first add your MP3 tracks to the “playlist” folder. Then

you need to edit content.xml in the “playlist” folder to add paths to each MP3. Here is the

XML structure:

</content>

To set the title of the track see attribute Name. The Path attribute is to set the MP3 path.

All tracks are produced by ADG3 Studios. To purchase these great tracks and many more,

go to http://www.audiojungle.net/user/ADG3studios

PAGE 8

PHP CONTACT FORM COMPONENT

MP3 PLAYLIST COMPONENT

INTERNAL LINKS

You can link to any page in the template from a button by using a specific funtion which has the

path to the SWF.

Below is the code you need to apply to a button in a content page to link to another content page

which uses the toLoad variable. (content window SWF only)

featuresBttn.bttn.onPress = function() {

_global.loadContent("content.swf", "content/content.xml");

};

Below is the code you need to apply to a button in a content page to link to another content page

which does not use the toLoad variable.

bttn.onPress = function() {

_global.loadContent("news.swf");

};

You can see an example of internal links on buttons by opening the home.fla and checking the

code for the “View Features” button.

Below is an example of how to insert a hyperlink in the XML text to link to an internal content page

which uses the toLoad variable. Note the separator is a comma and there must be no spaces.

<a href="asfunction:_global.loadContentURL,content.swf,content/content.xml">Click here</a>

Below is an example of how to insert a hyperlink in the XML text to link to an internal content page

which does not use the toLoad variable in the XML text:

<a href="asfunction:_global.loadContentURL,news.swf">Click here</a>

You can see an example of internal links in XML text by viewing the slideshow content.xml file.

EXTERNAL LINKS

You can add external links in the main menu and sub menu by entering a URL for the Link

attribute. Please note that for URL’s to work in the menu you must include “http://” in the URL.

Below is the line you need to add to index.xml

TOGGELING PLAYLIST MUSIC MUTE ON/OFF

If you are adding content which has audio you can mute the music volume by calling the following

global command:

_global.muteVolume();

_global.unmuteVolume();

For solutions to common issues please read my General File FAQ on the link below:

http://www.flashden.net/user/digitalscience

PAGE 9

BUILT IN FUNCTIONALITY

GENERAL FILE FAQ

Instructions Manual

Navigation menu

Versions of this User Manual:

Views

Navigation