Professional Web Templates

2.Nov
2009

How to Edit Flash XML Template

If you seek to create a flash website with minimal expenses, buying or downloading a free flash template is probably the best solution for you. Though, any template demands customization. The least you need to do with is insert your logo, contact info, text and pictures. But it is also very likely that you will need to make some changes in the menu structure (add or remove some components), you might want to change some of the colors, i.e. button colors, colors on the background or anything else.
If you don’t want to pay for customization you can do it yourself, all you need to know for this are just some basic steps.
This tutorial was written especially for you, so that you don’t have to pay money for flash templates customization and don’t get lost in your xml files when trying to do it yourself.
As an example I’ve taken one of the Flash Mint website templates, and I shall use it as an example for you, so that you can understand what I will be talking about.
As you purchase or download a flash template you receive it as a template package which consists of all the template-related files, including source code files and content. After you have figured out what changes you want to do about your template, you need to open this folder. All the changes you need will be done with the files in this folder.

Website structure (main menu)
The structure of your flash template is determined in XML file. Mine is called “structure”, yours might have a different but still somewhat similar to this name. This document lists all the components of the main menu, as well as the sub menu components. If you want to delete, add or change elements from the main menu you need  to:
1. Open the structure xml file.
2. To delete one of the menu elements you need to find this item in the code. Then highlight this piece of code and press delete. For example, to delete the News section from my main menu I highlight the whole phrase in the code that describes this element and delete it.
Template file folder Structure file → <item name=”NEWS … /> → DELETE
3. To add an element to the main menu, first you have to add the same piece of code as for the other elements, only with the item name you need. Save the file.
Structure file → <item name=”NEW BUTTON … /> → INSERT
4. But in such a way you will add only a new button to the main menu. It will lead you to the same page where the button you’ve copied the code from did. To make it lead to another page you need to create one. The easiest way to do it is to use a sample of the existing one (like if you need a second news block to show not only company news, but world news as well) or to buy a flash component  and simply insert it to your website (for example, you’ve purchased a template and you want to have an event planner on it).
Template file folder NEW BUTTON FOLDER INSERT
To make your main menu button lead where you need, you have to write a new path to it. To do this, in the phrase you’ve inserted you need to change the value for componentPath and componentSWF. The new componentPath value will be a name of the new folder you need to insert into your folder with template files. If you have purchased a new flash component, you can insert the folder with this component files. If you are adding an element  similar to one of the existing ones, you can copy and rename its folder, and then customize the content of it according to the steps described below.
Structure File <item name=”NEW BUTTON type=”component componentPath=”NEW BUTTON componentSWF=”newbutton.swf visible=”true” />
5. If you only need to change the name for one of the existing buttons, you can do it simply by giving a new value to <item name=”NEW NAME”.
Colors of the main menu
If you need to change the colors of the main menu buttons, find a file in the template file folder, called colors. This file must be in the main folder, not in one of the component folders, as it describes properties of the main menu. To do the changes you need to put a new value for the color tag that describes the color of a certain element. The value is usually described by a special code, assigned to each of the web colors.
Template file folder
→ colors file <buttons mouseOver=”0xa000d4″…/>
Logo
To put your logo on the template you need to put new logo picture into the folder instead of the old one. Mine is in the folder called Images.  Make sure the size and image type fits.
Template file folder → Images → Insert new image


Homepage homepage

The homepage of my template is a slide show of pictures, where I have three pictures changing each other with a certain delay. I can substitute these pictures with the ones I need.
1. First of all, I’ve got to look through files and folders in my template file folder  and find out where the pictures form my home page are. I’ve found mine in a folder called “Gallery”. It includes three pictures that I can see on my homepage as a slide show.
To change the pictures to different ones I can put new pictures into my folder with pictures. To make them show up instead of the old ones, I need to put the names of these pictures into the code.
Template file folder → Gallery → insert new images
2.If you want to have more pictures, you can just copy the code that inserts one (or more) picture, insert it once more and add the names of the pictures you want to show up.
3.Now I need to find a code file describing how these pictures substitute each other and what is the delay time. In my template file folder there is a folder called data. It contains an XML file called “Gallery”. This file describes what pictures and how often appear on my homepage and other pages of my website as a background.
4. To change the delay (make pictures change more/less often)  you just need to change the value for delay in this code file. The delay value is measured in seconds, so you can put “12″, “5″, “30″ or any other number.
Template file folder → Data → Gallery file <image ……delay=”new value”…/>
6. Do not forget to save the code file each time you’ve done the changes, in other way they will not be applied.

Slide show slide-show

1. My template includes a slide show component. If yours does not and you need it, you can get one from Flash Mint’s flash components gallery. Anyway, you will definitely need to customize this component, because you need to put your photos into the slide show. You might also want to change the background color and the color of buttons or the picture title.
2. To do anything about your slide show you need to open a folder that has all the files describing your slide show. In my template files folder I have a slide show folder, it contains a folder with the pictures, an xml file that describes the order in which the pictures appear and one more xml file that describes the colors set for various elements in slide show.

3.  To change the pictures I need to add new pictures in the folder where the old ones are. Do not forget to re-size your pictures so that they fit.
Template file folder → Slideshow folder → Items → insert new pictures
4. Then you need to put the names of these pictures into the code that describes the order of the pictures.
Template file folder → Slideshow folder → slideshow xml file <item image=”items/new image name.jpg” />
5. If you want to change anything about the colors you can open the XML file which describes the colors for this section of template and do the changes. For my template I can change the background color, the color of buttons and the main title color. To do this I need to put a new value for the color tag that describes the color of a certain element. The value is usually described by a special code. Such codes are assigned to all of the web colors. You can look up the one you need, for instance, here.
Template file folder → Slideshow folder → colors xml file → new color numbers

News news
The news section is probably the one that demands to be changed more often than any other one. In my template news show up as a picture with short description, and as you click on it, you can read the whole text. In such a way, I need to put the pictures to be displayed and two pieces of text. And as for any other section of my website I can change the general colors.
1. To add/delete news from the news section you need to find a folder with these files in your template files folder. Mine is called “dynamic_news”.
2. Here I can find one more folder which is called “Items”  and it has all the news-related pictures in it. I can put new pictures here, though it is still important to remember about the image size.
Template file folder → Dynamic News → items → New pictures for news
3. To make the new pictures displayed in my news, I have to open a code file (lies in the news folder). Here for each of the news there are several parameters given. Item thumbnail (the picture), title (title of the piece of news), description (a short text displayed by the picture), content (the whole text of this piece of news).
To make your picture displayed you need to put your new picture name as a value for item thumbnail.
Dynamic news → News XML file <item thumbnail=”items/category1/New Image for news 1.jpg title=”News Title for news
4. In a similar way  you can give a new title to your news, insert new texts for description and the whole text of the news. Just paste a new text between the description and content tags and do not forget to save your file.
Dynamic news → News XML file <contentNEW CONTENT. </content>
5. You can edit the basic colors for this page as well. Just follow a procedure similar to the one described in Step 5 for the slide show.

Media media
My template has image and video gallery components. They can be reached from Media in the main menu. Each of these galleries has its own folder in the main folder.
Video gallery
1. To edit the contents of the video gallery I need to substitute the old videos with the ones I want to put here. So I insert into the folder with videos my new videos, and then open the code file and change the names for the videos.
Template file folder → Video gallery → Items → New Videos
2. In my template besides the videos there are thumbnails for them, which appear as a preview, help navigation. There is also the description text for each video.
3. The thumbnails are located in the same folder as video, so as I insert a new name for the video in the code file, I need to change the name for a thumbnail. Thumbnails are .jpeg files.
4. Then I can insert the new description text into the code file.
Template file folder → Video Gallery → Video XML file → <item item_icon=”items/1/New video 1.jpg item=”items/1/New video1.flv title=”New Video 1“>
5. The same procedure must be done for every video, just make sure the names you insert into the code match the ones that are assigned to each video or thumbnail in the items folder.
6. To edit the colors just open the colors XML file and and make the changes the same way like for other components.

Image gallery
1. To customize your image gallery find a folder which contains the information on this gallery.
2. Change the pictures in this folder to the ones you need. Pay attention to the image size and type.
Template file folder → Images Gallery → Items →Insert New images
3. Substitute the names of the pictures in the code. Add the text you need. The procedure is pretty much the same as for videos, you’ll just be dealing with a different type of files.
Template file folder → Images gallery → Images XML file → new image names
4. To do the color changes just open a code file in this folder which describes colors and apply changes according to the steps described for previous components.

About us about-us
In my template the About Us element is a menu that consists of four components. Three of them are text pages (philosophy, Testimonials and Services) and one is a Staff page where there are pictures and text near them.
1.To make changes at the Staff Page I need to open the folder with the files about this page and add the new pictures of staff by putting them into the appropriate folder instead of old ones.
Template file folder → Staff page → Items → Insert New pictures
2. Then I can open the code file of this page and insert new picture names.
Staff page → Staff page XML file <item thumbnail=”items/1/New staff image.jpg title=” New Photo 1“>
3. The text can be simply inserted by replacing the old one in this code file for each picture separately.
Staff page → Staff page XML file <![CDATA[ New Content ]]>
4. If you need to add more entries than there initially were just duplicate a piece of code and change the values. If you need to have less, simply delete the items you don’t need.
5. And of course, you can change the colors the same way as for the other components of the menu.

To insert the new text into the text pages just open the folder with the files on this page and replace the content between the content tags in the code file. Do not forget to save the file each time you make changes, so that they get applied!

Contact Page contact-page
1. To change your contact data open the contact page folder, and change the data in the code file by substituting the old info with the new one. Save.
Template files folder → Contact page Contact page XML file
2. You can open colors XML file for this page to do the color changes you wish.

Sound
If there is a background sound in your template and you want to change it, just put new tracks instead of old ones in the template file folder. If your track names differ from the old ones you need to change them in the sound code file as well.
Template file folder →Sound XML file <item name=”New Track 1 – Unknown Artist url=”New track.mp3” />

Follow FlashMint on Twitter for more awesome Flash Tutorials!
"Like" FlashMint FaceBook Page to stay in touch!

One Response to “How to Edit Flash XML Template”

  1. michelle cacciotti says:

    O.k.

    I’ve made some of the changes in my xml file by following your examples. They were very helpful. Now how do I get the changes in my xml file uploaded to my template (html file). I’m ripping my hair out trying to figure it out. My template is not yet on the net because I’m still working on it.

    Thanks

    Michelle

Leave a Reply