Email: mail@johnoxton.co.uk | Tel: +44 (0)20 8133 0443
Available for work from October 2007
Scalable logos
- John Oxton
- Sun Jan 29, 02:54 PM
To keep the background story brief; it was whilst putting together what will, one day soon, become the elastic layout for this site that I hit the problem of making my logo scale up or down when the user resizes the text, without lose of quality. Some time in the future Scalable Vector Graphics might be the answer, but for now I need something that is a little more mainstream and it doesn't come much more mainstream than the Flash player.
It's probably fair to say that the vast majority of logos start out life as a collection of vector paths, in some graphics package or another, and so it is with my logo. So it really is just a case of importing those paths in to Flash and exporting the movie.
As there is no ActionScript to worry about (though I don't see why you couldn't add some functionality, such as a link to the home page, if you wanted) exporting for Flash Player 5 compatibility seemed like the sensible option, in order to include as many users as possible.
The only difference when embedding the movie in the page is that I added no height or width attributes to the object or param tags. Instead I set the width and height using CSS, specifically using EMs so that the dimensions are elastic. And that is about all there is to it. Load up the examples below and View > Source to see the CSS used.
Samples
- Wmode set to transparent on a coloured background
- Default white background
- Wmode set transparent on a pattern background
Accessibility issues
I ran an early version of this past accessibility guru Derek Featherstone and he seemed fairly happy with it at first glance.
I have, though, made a few chances since then, so any accessibility issues are of my own doing. Of course accessibility issues will always change and crop up depending on the contents of the Flash movie.
Bibliography