What is FIRO?
FIRO is a Flash Image Rotation script that uses Javascript and Flash to dynamically rotate and matte images on a webpage.
How does FIRO work?
After loading the a FIRO-included page, the Javascript kicks into action, searching for all instances of the class "flash." If an image with that class is found, Firo takes the image, calculates the size, randomly selects a rotation, and passes the variables to the Flash file where the rotation and matting occur. The Flash file resizes itself while the old, non-rotated image is deleted from the page. On a fast computer, this process takes place almost seamlessly.
How do I install FIRO?
Updated firo.js to point to the correct directory for firo.swf. The default value is "/js/".
Upload firo.swf and firo.js to your webserver. Note the path that you uploaded them to.
All of the examples assume the files are in the directory "js"
Include the Javascript File in the Head of the document:
<head>
<title>Whatever Your Page Title Is</title>
<script type="text/javascript" src="/js/firo.js"></script>
</head>
When creating your page, add class="flash" to each image that you would like to apply FIRO to:
<img class="flash" src="/i/test.jpg" alt="Test Image" />
Examples
Other Examples:
- CFBC Preschool
- CFBC Children
- CFBC College
- CFBC Singles
- CFBC Young Married
- CFBC Legacy Builders
- CFBC Prime Timers
Background
After redesigning the Champion Forest website in the summer of 2006, I found that standard, non-rotated images would not give the site the look we were going for. I started to take all of the images into Photoshop, rotate, and add shadows to each of them, but after considering this monotonous task, I started considering a Flash-based solution.
Having already used sIFR, I knew this was possible. After scouring some Javascript and Flash references, along with a little deconstruction of sIFR, the first version of Firo was born.
Caveats
Firo works on Firefox 1.5+, Internet Explorer 6.0+, and Opera 8+. Firo does not currently work on Safari. Safari support may be in the works soon, but I haven't had the time (nor desire) to figure out the problems with Safari.
Firo is only compatible with JPEGs. PNGs and GIFs are not currently supported.
Credits
Thanks to sIFR guys (sIFR Copyright 2004 - 2006 Mike Davidson, Shaun Inman, Tomas Jogin and Mark Wubben) for the idea and some code deconstruction. sIFR website
Thanks to Jeremy Keiths' DOM Scripting and some of his free functions sIFR addLoadEvent