Optimizing Flash Buttons (Part 2)

Last week I shared the method I use to optimize (movieclip) buttons within Flash. Now, I’m going to take it one step further, by putting the following on the first frame of the topmost layer:

_global.path = "/index.php";
_global.pg_1 = _global.path + "?id=1";

function eventListener(my_mc, mcInstance){
my_mc.onRollOver = function(){
this.gotoAndPlay("over");
}
my_mc.onRollOut = function(){
this.gotoAndPlay("out");
}
my_mc.onRelease = function(){
getPage(mcInstance);
}
}

function getPage(mcInstance){
var newPage = _global["pg_" + mcInstance];
getURL(newPage);
}

Then, on each movieclip I would place:

onClipEvent(load){
var instance = 1; // this number is different for every instance
_root.eventListener(this, _parent["_opt0" + instance + "_mc"], instance);
}

By creating a function and using it instead of having repetetive onRollover, onRollout movieclip method calls we’ve reduced the likelihood of errors from repetition and made future updates quicker and more efficient.

Liquid Multi-column Floated Lists

Every now and then I’ll design a web site for a client that incorporates a multi-column list. Typically this list is on the homepage, so we would create a module that would allow the client/user to enter in values in a textfield and then a server-side language would render the page upon request. Last month I decided to find a more efficient method, one that could be used repeatedly and would not require a custom interface to be built just to use it. Of course the WYSIWYG editor that is built into our CMS allows the client to create a two-column table that can be used to serve the same purpose, but that method assumes that the client/user is familiar with the process; which is rarely the case.

To get to the point, I put together a ul element that would display within content blocks but not clear other ul elements. The code:

ul {
float: left;
clear: none;
display: block;
min-width: 40%;
padding: 0 20px 0 0;
}

Because floated elements are required to have a width, I opted for a percentage and went with it. This worked perfectly in Firefox, but when I tested it in IE, the second ul wrapped and appeared below the first. I tried lowering the width to a smaller number, and after several successive attempts, I finally ended up with:

ul {
float: left;
clear: none;
display: block;
min-width: 20%;
padding: 0 20px 0 0;
}

I’m not sure why the larger widths did not work in IE, but making it smaller seems to have solved the problem.

As soon as I finished, I decided to add p tags above and below to make sure everything worked properly in context. Upon doing so, I discovered that because the ul elements were floating, the paragraphs would, as a result, wrap around them. No problem, I just cleared the p tags:

p {
clear: both;
}

Viola; client/user controlled multi-column floated lists. Now whenever the client/user wants to float one list next to another, all that is required is to insert something like this into the body:

<ul>
<li>list item one </li>
<li>list item two </li>
<li>list item three </li>
</ul>
<ul>
<li>list item one </li>
<li>list item two </li>
<li>list item three </li>
</ul>

Or as he/she would see it:

  • list item one
  • list item two
  • list item three
  • list item one
  • list item two
  • list item three

The CSS will automatically cause the lists to float alongside. An added bonus is that if any particular list element happens to exceed the maximum width of the parent element (the body) the second list will automatically wrap below the second.

Apache, Automatic Directory Listings

I recently formatted my PC – because it had begun to take forever to boot up. There have been instances where I would, literally, wait two minutes just to get to the desktop. I figured that the cause of my problem was possibly due to my system registry being packed with ancient entries, etc. – due to previously installed software and/or the fact that I was running out of hard disk space. The solution? Backup and format.

To get to the point… Because I re-started with a fresh OS install, I had to re-install Apache, MySQL, and PHP. I’ve done this several times in the past so everything was relatively easy to do. <non-sequitur> I typically use binaries (setup.exe) for my Apache and MySQL installations, and manual installation for PHP.</non-sequitur> I have never spent much time playing around with Apache because I either did not feel the need to and/or did not really have the time to do so. Anyway, after installing WordPress 2.0 (on the local host) I noticed that all index (i.e., “index.php”) references had been replaced with backslashes (“/”), which is fine, except that my Apache installation had not been configured to handle backslashes in a desirable way, instead, every backslash would show a directory listing. Not only is this insecure, it’s not a very efficient way to browse through a web site.

Wanting to alter this default behavior, I delved into the Apache manual that came with my installation (a somewhat daunting and intimidating task). After a while I happened upon a section dealing with automatic directory listings, apparently to disable this feature all that is needed is to add the following to my configuration (httpd.conf) file:

<Directory /path/to/directory>
Options -Indexes
</Directory>

Because something similar already existed, I merely added “Options -Indexes” and restarted my Apache server to see if that solved the problem. Well, it did, but instead of displaying the directory contents my server gave me a 403 – Forbidden error; which solves the problem, but creates another. I obviously needed to take this one step further.

Delving a bit further a noticed a reference to backslashes, directories and mod_dir.c; I read the entry and after doing the wrong thing for a while tried added the following after the “Options -Indexes” line in httpd.conf and restarted Apache again:

DirectoryIndex index.html index.htm index.php

And that fixed it. Cool. The complete segment:

<Directory /path/to/directory>
Options -Indexes
DirectoryIndex index.html index.htm index.php
</Directory>

I was glad that I checked the manual because I did not want to waste hours searching the internet for a solution. Anyway, I just thought that I would share my experience; enjoy.