::Requirements::

  • Basic XML knowledge
  • Flash CS3 or higher (optional)
  • Greensock Classes (included)
  • Five3D (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. If you would like to delete a module, just select the whole node and delete it.
  5. 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.
  6. Last but not least set your logo. Go to images/main folder. Take your logo and name it logo and save it as a png = logo.png .
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.

About module

  1. Open about.xml!
  2. Write some details about you or your company in the description node. You can use HTML.
  3. You can add all members of your team. Create for each member an own thumbnail, this thumbnail need to have a size of 80x100 pixels.
  4. Add the thumbnail in images/about folder.
  5. Copy the preset for creating a new member and paste it in the team node.
  6. Add the URL of the thumnbail in the image attribute.
  7. Then set the name and position of the member in the corresponding attributes.
  8. Save about.xml!

Media module

  1. Open media.xml!
  2. To add a new album to the gallery, you have to create a thumbnail for the album preview. This thumbnail need a minimum size of 200x300 pixels.
  3. Add the album thumbnail in image/gallery/albumThumbs folder.
  4. Copy the preset for a new album at the end of the xml file to add new album and paste it in the gallery node.
  5. Add the URL of the thumbnail in the thumb attribute and set a title for the album in the title attribute.
  6. Now you can add new images, own videos or youtube videos to this album.

    7. Adding an image

    1. Your image need to have a minimum size of 500x300 pixels..
    2. Add your image in images/gallery folder.
    3. Now copy the preset for a image at the end of the xml file and paste it in the album node.
    4. Add the URL of the image in the src attribute.
    5. Set also a title for the image in the title attribute.

    Adding an own video

    1. First you have to convert your video in Flash Player supported format: F4V, Flv or MPEG-4. For more information please visit the site.
    2. Add your converted video in the videos folder.
    3. Now copy the preset for a video at the end of the xml file and paste it in the album node.
    4. Add the URL of the video in the src attribute.
    5. Set also a title for the video in the title attribute. Enable (yes) or disable(no) autoPlay in the autoPlay attribute.

    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. Here is an image, which shows the requested information.
    2. Now copy the preset for a video at the end of the xml file and paste it in the album node.
    3. Add the ID of the youtube video in the src attribute.
    4. Set also a title for the video in the title attribute. Enable (yes) or disable(no) autoPlay in the autoPlay attribute.

  7. Save media.xml!

    8. Contact module

    1. Open contact.xml.
    2. Set the colors for the contact form in the contactform node. You can also set own information for the input textfields of the contact form.
    Top


    ::Changing fonts::

    Go to src/fonts, there you find one fla: TitleFont.fla.
    The TitleFont.fla holds the font for the title in the about module and for title of a medium in the media module.

    To change the font, 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: MinimalPortfolio3D.swf, index.html(swfobject), xml files, php files, example music, example images, example videos, fonts
    src folder: MinimalPortfolio3D.fla, Actionscript Files, Fonts
    Five3D - http://five3d.mathieu-badimon.com/
    Greensock - http://blog.greensock.com/

    Documentation

    Top