In today’s article, I’m going to cover a few of those things you see all over the web, and while they look so simple, you might not be sure exactly how they do that. The two main things that come to my mind are 1. Changing your scroll bar colors. 2 Flash pre-loaders. So I looked into the easiest ways to do both and now you’re here reading them.
Scrollbar colors:
Using Cascading Style Sheets (CSS) you can easily change the coloring of your browser scroll bars. Why would you want to do this? Well it further customizes your site and gives the visitor a sense of uniformity within the site. But all in all, it is a preference, some designers like it, some don’ t. I’m not here to judge. But it can be a cool touch if it’s tastefully done. What you wouldn’t want to do is have one color palette for your site and another for your scrollbars that clashes.
BODY {
scrollbar-face-color: #003399;
scrollbar-highlight-color: #003389;
scrollbar-3dlight-color: #003360;
scrollbar-darkshadow-color: #053899;
scrollbar-shadow-color: #004399;
scrollbar-arrow-color: #008399;
scrollbar-track-color: #000000; }
A big thing to keep in mind here is contrast. Refraining from the appropriate degree of contrast in selecting your colors will leave you with a flattened scroll bar with no depth the visually display what a scroll bar is meant for; displaying your exact position on the overall page.
Faking Flash Pre-Loaders
Most everyone has visited a site with a giant Flash opening that takes the same amount of time to load as it does to cook a 20 pound turkey. They all have their little pre-loader that is meant to pacify you while you wait. Some are very complex and even interactive. Some tell you the percentage that has loaded and some try to entertain you a bit with background music from the last rave they went to. If you ask me, there’s no need in all of that. First off, the music is usually horrible and second the visitor isn’t there to wait, they’re there to view the content within the page. So unless you are a graphic design type of company trying to show off your skills, the massive pre-loader isn’t necessary. A very simple one will do, and if you must, you can make it look as attractive as possible.
So how is it done? I’m not going to go into that, but I will show you the quick and easy. One easy way to go about it is to make yourself a simple little animation that can loop while the rest of the movie loads. See the example below:
In the first frame add an action that goes like this:
ifFrameLoaded (x) { gotoAndPlay(y); }
X is the number of the last frame in your entire Flash timeline. Y is the frame number in which your presentation actually begins. So in truth when it ‘s all said and done you will probably have something that looks similar to this:
ifFrameLoaded (2055) { gotoAndPlay(5); }
You will also need to add and action to the last frame of your little animation to make it loop till the whole thing loads. In the last frame of you loop add the following:
gotoAndPlay(1);
What this does is make an animation that checks in the first frame to see if the entire movie has loaded, if not it goes on till it hits the last frame of the loop and in that frame it makes it all go back to the beginning and start the whole process over and over till your entire movie loads.
You can make this as complex or as simple as you like. Some designers even put multiple steps in their movie that say something like, once frame “b” has loaded, go to and play frame “a”, and in frame “a” it will say, once frame “d” is loaded go to and play frame “c”. This way you can have different stages as the loading process takes place.
Scott Harris a former graphic designer for murdok and currently the design manager for C.A.D. Website Design and RSStatic
