Categories

Flash template quick guide

Gordon J. Blair July 20, 2011
Rating: 5.0/5. From 2 votes.
Please wait...

1. Unzipping Template Package

After unzipping the template package you will find 3 folders: “screenshots”, “site”, “site_flash” and another zip archive called “sources_############.zip” which you are to unzip. You may check the video tutorials on how to unzip the template package below:

How to unzip a template (Windows OS)

How to unzip a template (MAC OS)

While unzipping “sources_############.zip” archive you will be prompted to enter a password, which you
can find at your Product Download Page (open the link in the email you received from our company).

You should now have 4 folders in total: “screenshots”, “site”, “site_flash”, “sources

 

2. General Information and Template Structure

 Your type of template includes 2 versions of the same design: one with a Flash (animated) layout, and the
other – with HTML (static) layout. Refer to the corresponding section of the instructions below, depending
which version of the template you would like to use:

  • HTML version (non-animated layout)
  • Flash version (animated layout)
  • screenshots/ – contains screenshots of the template. No editable files here
  • site/ – contains .HTML and .CSS files for the non-animated version of the template
  • images – contains all the images used in .HTML files
  • site_flash/ – contains .HTML and .CSS files for the animated version of the template
  • flash – contains .SWF flash movie(s) used in .HTML file
  • images – contains all the images used in .HTML files
  • sources/ – contains source files
  • clipart_library – bonus materials not related to the template design
  • flash – contains Flash .FLA source file(s)
  • psd – contains Adobe Photoshop .PSD file(s)

 

3. Installing Fonts

 If the template uses some non-standard fonts in the design, then those are provided with the template
package.

After you unzip the template package, there can be a file “fonts_info.txt” there you will find font name and download link If the above mentioned file is missing, then the fonts are probably part of the template package. Open the folder “sources” and look for the folder “fonts”. After the fonts have been downloaded/located, you need to copy them into the C:/Windows/fonts directory

 

4. Editing HTML version of the template

Software Required: You can download trial (30 days free) versions by the links below

Adobe Dreamweaver (or Microsoft Expression Web)
http://www.adobe.com/products/dreamweaver/
http://www.microsoft.com/expression/products/Web_Overview.aspx

Adobe Photoshop
http://www.adobe.com/products/photoshop/photoshop/

 

a) Editing HTML page content
All the editable HTML files are located in “site” folder of the template package (index.html, index-1.html,
index-2.html, etc.) Each index-#.html file represents one page of the template.


To open .html file with Adobe Dreamweaver software, you should right mouse click on the file, and in the
context menu select Open with -> Adobe Dreamweaver. The file is opened and you can start editing it.
Please, check this link for general instructions on how to work with Adobe Dreamweaver and .html files
Working with HTML

b) Photoshop files
Photoshop files are located in “sources/psd” folder and required for editing some text titles in the template,
that were created using non-standard fonts. Example below will show you how to determine if such fonts are
used in your template. Please, look at the 2 example screenshots below

The first screenshot shows a complete web template layout, while the second is what you see when you open “site/index.html” file with your web browser. All those “missing” elements on the second screenshot (top menu titles, banner titles, etc.) should be edited/updated via .psd files.

Please, check the video tutorial by this link on how to work and save content from .psd file into your web page How to save for web

Also, please pay attention to this video tutorial concerning saving slice that are overlapped by other slices, and big slices such as backgrounds Photoshop. How to use bring to front feature

If the HTML layout of your template looks complete and doesn’t have any missing titles, then your template is using Cufon technology which allows embedding non-standard fonts using JavaScript, so all the text can be
edited directly in .html files.

By default template fonts support only Latin characters, embedding special characters (Latin with acute,
Greeks, Cyrilic, etc.) requires recompiling javascript font provided with the template. Please, check the following tutorial on how to do that
How to use cufon feature

 

5. Editing Flash version of the template

Software Required: You can download trial (30 days free) versions by the links below

Adobe Dreamweaver (or Microsoft Expression Web)
http://www.adobe.com/products/dreamweaver/
http://www.microsoft.com/expression/products/Web_Overview.aspx

Adobe Photoshop
http://www.adobe.com/products/photoshop/photoshop/

Adobe Flash Professional
http://www.adobe.com/products/flash/

a) Editing Flash layout
Editable flash file (.fla) is located inside “sources/flash” folder of the template package. Open .fla file with
Adobe Flash software and start customizing it to your needs. If you don’t have experience with Flash, please
check the link below for general guidelines and video tutorials:
Working with Flash

b) Photoshop files
Please, refer to 4.b paragraph of the current document

 

6. Uploading template

In order to make your site “live”, you need to upload specific template files from your local computer to your
hosting server.
Depending on the version of the template you selected (Flash or HTML) you should upload content of the
corresponding folder:

  • If you customized HTML (static) version of the template upload all the content of “site” folder
  • If you customized Flash (animated) version of the template upload all the content of “site_flash” folder

This video tutorial will show you how you can upload files to your host using free FTP management software
FileZilla (you may use any other software you like, or upload directly via Hosting Cpanel)
How to upload files to server

 

This entry was posted in Flash Site Template Tutorials and tagged flash, guide, quick. Bookmark the permalink.

Submit a ticket

If you are still unable to find a sufficient tutorial regarding your issue please use the following link to submit a request to our technical support team. We'll provide you with our help and assistance within next 24 hours: Submit a ticket