animated icons
VIDEO LINKS: [ animated-icons ] click to open video in a new window
if you are having troubles viewing the video's online, please download the video from the link below to view locally on your computer.
The download package includes a web page for viewing the video files, and several SWF or FLV video files.
Just download the zip file, extract, then double click on the 'web page' to view the video.
VIDEO LINKS for download: animated-icons
Overview
The flash ( animated icons ) can be a real attention grabber, and direct your visitors to important pages in your website. As it's interactive, many visitors will be interested in trying it out.
The icon component is dynamic. You can add more icon buttons, remove existing buttons, change the name, hyperlink and image. All of this can be done by editing the ( icons.xml ) text file. No need for flash software.
The icon component displays transparent PNG images ( 128 pixels wide x
120 pixels in height ). If you plan on replacing a default PNG image, I
recommend you create it using an existing image.
The PNG image is 128x120, but the icon image itself varies, open any of the
iconX.png files located in the {Site / flash / images / icons} folder using
Photoshop or Fireworks and you will see how the icon image is positioned
within the PNG. This will give you a good indication of how to size, and
position your replacement image.
Replacing the icon requires an intermediate to advanced level of graphic knowledge, especially if you plan on creating your own. There are video instructions that show you how we do it, but a good working knowledge of Fireworks or Photoshop will help.
The instructions posted below, as well as the screenshot demonstrate which parts of the 'icons.xml' file you should be editing.
The transparent PNG images used in the animated icons component
INSTRUCTIONS
remove icon
- open the {Site / flash / config / icons.xml} file
- locate the block of icon code you want to remove
- select the text entire block of code including the <icon> ... </icon> tags:
- press delete on your keyboard, for example
if you wanted to remove the 2nd icon, you would select this block of code in the icons.xml file, and delete
<!-- 2nd icon -->
<icon>
<iconTitle>Contact Us</iconTitle>
<iconGraphic>images/icons/icon2.png</iconGraphic>
<iconLink>../../contact.htm</iconLink>
<iconTarget>_self</iconTarget>
</icon>
change icon NAME
- open the {Site / flash / config / icons.xml} file
- locate the icon you want to change the name of
- select the text between the <iconTitle> ... </iconTitle> tags:
example default
<iconTitle>About Us</iconTitle>
example updated
<iconTitle>Our Team</iconTitle>
- type in the new name
change icon HYPERLINK
- open the {Site / flash / config / icons.xml} file
- locate the icon you want to change the URL of
- select the text between the <iconLink> ... </iconLink> tags:
example default
<iconLink>../../about.htm</iconLink>
example updated
<iconLink>../../our_team.htm</iconLink>
- type in the new URL
- keep the " ../../ " in place
- remember to include the page "extension" such as .htm / .php / or .html
** if linking to a page located in a sub folder, remove one of the ../ and replace with the folder name
-
example: <iconLink>../team_info/our_team.htm</iconLink>
change the icon image
- open the {Site / flash / images / icons} folder
- select the icon you want to modify
- right click, select OPEN With >> and select your graphic editor ( Fireworks 8 or CS3 works best )
- open the icon png image in your graphic editor
- import your replacement image, and resize it to match closely to the original
- create a duplicate of your new image
- flip the duplicate image vertically
- move the duplicate below the first image to create a mirror effect
- use a faded mask on the bottom duplicate to create a top to bottom fade
- change the opacity of the bottom duplicate to 50%
- delete the original icon from the layers panel
- save to update your site