::Requirements::

  • Basic XML knowledge
  • Flash CS3 or higher (optional)
  • Greensock Engine (included)
  • SWFAddress (included)

Here are some linkages to understand XML:
Tutorial
Video-Tutorial

Here are some free image scaler:
PC
MAC

Top
::Getting Started::
  1. Go to src folder to see all source files and code. Go to bin-debug folder to see the final website and stay there for customize the template by your wishes.
  2. First we will do the basic configuration. Open in xml folder the settings.xml. You find a little explanation for each node.
  3. Set the required colors and information in each node and attribute.
  4. Each module has a linkage for an own header image. This image need to have following dimensions: 750x200px. Please resize each header image excatly to this dimension.
  5. Use maximal 7 modules at the same time, otherwise the menu will overshoot the header image. You can use one module several times. Just set the id of the module, which you would like use several times, in the id attribute. You can set the path of the module in the xml attribute. Set never a same title for the modules! All modules need an unique title. Do not set spaces in the title for each module!
  6. If you would like to delete a module, for example the GIGS module, just select the whole node and delete it. Each node has an id attribute, please DO NOT delete or change this one. This id node is for internal usage. When you delete a node and you would like to reactivate it, here is a list with all modules and the corresponding id:

    7. Module ID
    Home home
    Biography bio
    Discography disco
    Gigs gigs
    Top 10 top10
    Gallery gallery
    Contact contact
    Custom custom


  7. Now set your email address, which receives all mails from the contact form. Go to php folder and open sendForm.php . Go to line 17 and set your email address between the quotes.
Top
::Edit modules::

Basic information

Some textfields allows using HTML. The nodes which hold the HTML text, using CDATA tags. DO NOT delete these tags. Here is a list of all valid HTML tags in flash. All images should be saved in the corresponding folders to get a better overview about the content. All xml files for modules are saved in xml/modules folder. Editing each module starts with setting the line color and the headline color.

Home module

  1. Open home.xml!
  2. You can write unlimited entries in the news section. Each entry needs a title and date. The article textfield allows using HTML.
  3. The intro text also allows using HTML.
  4. You can also set some information for your next gig. Just set the url of the image in image attribute and the gig date in date attribute. The image needs to have min. dimensions of 60x60px! The description allows using HTML.
  5. Save home.xml!

Biography module

  1. Open biography.xml!
  2. Write some details about you, for example Age, City etc. in the details node. You can use HTML.
  3. The main text about you and your life can be written in description node. You can use HTML as well.
  4. Save biography.xml!

Discography module

  1. Open discography.xml!
  2. Write some details about your produced music or what you want in the details node. You can use HTML.
  3. You can set unlimited of produced tracks. All you need is an image of the cover (or what you would like to use). This image needs to have min. dimension of 100x100px. Set the url of the image in the image attribute. You can enable to listen the track with the Mp3-Player. Just set the path of the track in the track attribute and the title of the track in the trackTitle attribute. Enable(yes) or disable(no) the "LISTEN TO" button in the enableTrack attribute. If your song can be bought at a store, set the linkage in the store attribute. Disable or enable the store linkage in the enableStore attribute. The information textfield allows using HTML.
  4. Save discography.xml!

Gigs module

  1. If you add a new gig to the gigs module, you have to create a thumbnail of your origin image. Your thumbnail needs to have a min. dimension of 60x60 pixel, your origin image needs to have min. dimensions of 250x300px. Copy the origin image in images/gigs folder. Copy your thumbnail in images/gigs/thumbs folder!
  2. Open gigs.xml!
  3. Copy the preset at the end of the xml, and add it to any position in allgigs node. Set the path of the origin image and the corresponding thumbnail. Dont forget to write a date and a little text. The information textfield allows using HTML!
  4. Save gigs.xml!

Top 10 module

  1. Open top10.xml!
  2. Copy the preset at the end of the xml and add it to any position in tracks node. Now set a artist name, title and label.
  3. Save top10.xml!

Gallery module

  • If you add a new media to the gallery module, you have to create a thumbnail. Your thumbnail needs to have a min. dimension of 115x113 pixel. Copy your thumbnail in images/gallery/thumbs folder!

  • Open gallery.xml!
  • First you have to create a new album node with a title attribute. An album can store unlimited of medias(images, swf´s, own or/and youtube videos).
    • Adding an image or a flash movie to the gallery

    1. Copy the preset for an image/flash movie at the end of the xml, and add it to any position in your album node. Set the path of the origin image/swf and the corresponding thumbnail. You can also set a title for each media.
    2. Save gallery.xml!


    Adding Videos

    1. You can add own videos and/or youtube videos to your album.

      2. Adding an own video

      1. First you have to convert your video in a Flash Player supported format: F4V, Flv or MPEG-4. For more information please visit this site.
      2. Add your converted video in the videos folder and the corresponding thumbnail in images/gallery/thumbs folder.
      3. Now copy the preset for an own video and paste it in your album node.
      4. Add the URL of the thumbnail in the thumb attribute and the URL of the video in the src attribute.
      5. Set also a buffer for the video, if it´s a big video, use a bigger buffer.

      Adding a youtube video

      1. To locate the youtube video, you need the ID of it. You find it in the url of the video at youtube.com. This ID has 11 characters. You can also set the quality of the video. All available qualities(medium/large/hd720/hd1080) can be found in the player of your video at youtube.com. Here is an image, which shows the requested information.
      2. Now copy the preset for a youtube video and paste it in your album node.
      3. Add the URL of the thumbnail in the thumb attribute and the ID of the youtube video in the id attribute.
      4. Set a available quality you would like to use in the quality atrribute.

    2. Then set a title for the video. If you would like that the video starts when it´s opened, set yes in autoPlay attribute. If not, set no.
    3. Save gallery.xml!

Contact module

  1. Open contact.xml!
  2. There is only one node, which allows using HTML. Write some contact details or what you want in the description node.
  3. Set a color for the border and the text of the contact form. You can also assign the default text of the input textfields and the send button.
  4. Save contact.xml!

Custom module

  1. Your swf needs a maximum width of 750px.
  2. Open custom.xml!
  3. Set the path of the flash movie in the src attribute.
  4. Save custom.xml!
Top
::Changing fonts::

If you would like to change the font of the text in the modules. Go to src/fonts, there you find 2 fla´s - MenuFont.fla and TextFont.fla.
The MenuFont.fla holds the font for the menu and for the headlines in each module. The TextFont.fla holds the font for all non-html textfields. So this should be the same font as for the HTML textfields.

To change one of these fonts, open the fla in flash. Open the action panel and set the name of the font in the systemfont attribute. Publish the flash movie. That´s it!

Top
::Included Files::

bin-debug folder: DjTemplate.swf, index.html(swfobject), xml files, php files, example music, example images, fonts
src folder: DjTemplate.fla, Actionscript Files, Fonts
Greensock Engine - http://blog.greensock.com/
SWFAddress - http://www.asual.com/swfaddress/

Documentation

Top