Download the files

These are the new concepts:

1. Place library items on the Stage dynamically using addChild
2. create array and put button instances in it
3. apply tweener to those instances (event.currentTarget)

In the previous example I put the buttons on the Stage manually and added their instance names. When dealing with a bunch of objects, it’s generally better to do this dynamically. In AS2, you’d use attachMovie. AS3 uses addChild.

To set up an object in the library for addChild, get its Symbol Properties and check the box “Export for ActionScript”. With this example, the symbol now has a class of “button”. The code to place an instance of “button” on the Stage is:

var myInstance = new button();
addChild(myInstance);

You can then manipulate the button via the var myInstance:

myInstance.y = 30;
myInstance.alpha = 0.5;

Anyhow, since I want to manage a bunch of buttons, I created an array and put all button instances in there using a loop within an “init” function — that key bit of code is “buttons_array[i] = myinstance;”. total_buttons is defined as a variable at the top of the script. Note I also added event listeners to all the buttons. Since all the buttons have the same behavior, I can assign it in the for loop:

var buttons_array:Array = new Array(); // array to put button instances

function init ():void{
for (var i=0; i < total_buttons; i++){
var myInstance = new button();
addChild(myInstance);
myInstance.x = ((60 * i) + 30); // spreads the buttons out horizontally
myInstance.y = 30;
myInstance.alpha = 0.5;
myInstance.buttonMode = true;
myInstance.mouseChildren = false; // keep textfield from responding to the mouse
myInstance.name_txt.text = (i + 1);
myInstance.addEventListener(MouseEvent.ROLL_OVER, myButtonOver);
myInstance.addEventListener(MouseEvent.MOUSE_DOWN, myButtonDown);
myInstance.addEventListener(MouseEvent.MOUSE_UP, myButtonUp);
myInstance.addEventListener(MouseEvent.ROLL_OUT, myButtonOut);
buttons_array[i] = myInstance;
}
}

init();

Next, the event listeners are defined in the normal fashion, but I added some animation using Tweener, a simple way to add animation effects. I’ve talked about installing and using Tweener before.

function myButtonOver (event:MouseEvent):void{
Tweener.addTween(event.currentTarget, {alpha:1, scaleY:1.5, time:0.2, transition:"linear"});
}

The above function is called whenever the cursor rolls over a button. The key conecpt is “event.currentTarget” which applies the tween to the button that’s calling the event (as opposed to “this”). The parameters to create the tween should be pretty self-explanatory; for more check out the Tweener documentation.

It’s also necessary to define the functions myButtonDown, myButtonUp, and myButtonOut — and a “reset_buttons” function should be called within myButtonUp.

Lastly, the reset buttons to get the buttons to behave as a group is slightly different. Instead of walking through the instance names, the loop runs through the array instead:

function reset_buttons ():void{
for(var j:uint = 0; j < total_buttons; j++){
Tweener.addTween(buttons_array[j], {alpha:0.5, scaleY:1, time:0.2, transition:"linear"});
buttons_array[j].buttonMode = true;
buttons_array[j].gotoAndStop("_up");
}
}

Download the files

To start, I created a button symbol on the Stage and set it up with keyframes labelled _up, _over, _down, and disabled. Each keyframe can have different art depicting these button states. I then added a layer for the button’s name with a textfield with the instance name “name_txt”. Lastly, there’s a stop action on the first keyframe of the button.

Then copy four instances of the button on the Stage, and label them “button_1”, “button_2”, “button_3”, and “button_4”.

Now everything else can be done with ActionScript. Here’s an init function which sets up the listeners for the four buttons:

function init ():void{
for(var i:uint = 1; i < 5; i++){
this["button_" + i].name_txt.text = i;
this["button_" + i].buttonMode = true;
this["button_" + i].mouseChildren = false;
this["button_" + i].addEventListener(MouseEvent.ROLL_OVER, myButtonOver);
this["button_" + i].addEventListener(MouseEvent.MOUSE_DOWN, myButtonDown);
this["button_" + i].addEventListener(MouseEvent.MOUSE_UP, myButtonUp);
this["button_" + i].addEventListener(MouseEvent.ROLL_OUT, myButtonOut);
}
this.getChildByName("button_1").dispatchEvent(new MouseEvent(MouseEvent.MOUSE_UP));
}

init();

Note: “mouseChildren = false” is used to keep the button’s textfield from reacting to the mouse.

Note: The “dispatchEvent” line sends the mouse event “MOUSE_UP” to the button with the instance name of “button_1”. This is the equivalent of button_1.onRelease(); I added this so when the movie is first played, “button_1” is triggered.

The most important mouse event function is “myButtonUp” — triggered when the button is clicked and released — which is defined as follows:

function myButtonUp (event:MouseEvent):void{
	reset_buttons();
	event.currentTarget.buttonMode = false;
	event.currentTarget.gotoAndStop("disabled");
	content_txt.text = event.currentTarget.name;
}

The myButtonUp function is assigned to all four buttons. When the user clicks and releases a button, five things happen:

• All the buttons are “enabled” (the function “reset_buttons”).
• The clicked-on button is set to not show the hand cursor by turning off buttonMode (note the use of “event.currentTarget” rather than “this”.
• The clicked-on button is turned red.
• The clicked-on button’s name is displayed in a textfield with the instance name “content_txt.text”.

Lastly, here’s the “reset_buttons” function:

function reset_buttons ():void{
	for(var j:uint = 1; j < 5; j++){
		this["button_" + j].buttonMode = true;
		this["button_" + j].gotoAndStop("_up");
	}
}

When called, it basically loops through the buttons and enables them by turning on button mode, and telling the button to go to its “_up” state.

Why would you want to do this? In a sense, this is where AS3 as an object oriented programming language has finally been realized. You can create a class (object) with its own properties, completely self-contained in an external AS file, making it portable across .fla files. You could code the class so it “draws itself” (not as I have done below) so it wouldn’t even require a symbol in the library to attach to. But I’ll keep this example simple to communicate the concept.

I’ll define a class called “button”. It applies to a symbol I created in the library of an .fla file. That symbol is just a circle with textfield (instance name “label_txt”), converted to a movie clip.

To assign a class to a symbol in the library, select it in the library, call up its properties, and click “Export for ActionScript”. In the dialog box that appears, enter the desired class name in the appropriate field. My class is named “button”. Note the information that appears in the base class field — in this case, it’s “flash.display.MovieClip”. The class I’ll write will be an extension of that display type.

I then created an ActionScript file and saved it as “button.as” in the same directory as the .fla file. The .fla file will look for this file when you create the .swf. Here’s the code:

package{
import flash.display.MovieClip;
import flash.text.*;

public class button extends MovieClip{
public function button(xPos:Number, yPos:Number, scaling:Number, label:String){
this.x = xPos;
this.y = yPos;
this.scaleX = scaling;
this.scaleY = scaling;
this.label_txt.text = label;
}
}
}

Similarly to a document class, the import statements handle the elements of the button symbol in the library (movie clip, text field). The public class button extends the symbol type this class is assigned to (movie clip). Within the button function, I’m accepting five properties which are then used to change the look of the button. The first and second properties are the x and y location, the next two properties its scale on the x and y axis, and the last property is some text for its label.

Then in the .fla I added this code:

stage.addEventListener(MouseEvent.MOUSE_UP, reset_btnUp);

function reset_btnUp(event:MouseEvent):void{
	reset_everything();
}

function reset_everything():void{
var button_1 = new button(Math.random() * 500, Math.random() * 400,
 Math.random() * 5, "This");
var button_2 = new button(Math.random() * 500, Math.random() * 400,
 Math.random() * 5, "Button");
var button_3 = new button(Math.random() * 500, Math.random() * 400,
 Math.random() * 5, "Is");
var button_4 = new button(Math.random() * 500, Math.random() * 400,
 Math.random() * 5, "A");
var button_5 = new button(Math.random() * 500, Math.random() * 400,
 Math.random() * 5, "Class");

addChild(button_1);
addChild(button_2);
addChild(button_3);
addChild(button_4);
addChild(button_5);
}

reset_everything();

The mouse up event listener is assigned to the stage instead of a button. By doing this, the “reset_everything” function is called whenever the user clicks anywhere on the stage. The “reset_everything” function creates five instances of the button class and passes parameters which are used by the class to define the look of the button (properties of that class).

Note that random numbers are generated differently in AS3, using Math.random() * #. Also, the new instance is added to the stage using addChild (no more loadMovie) via the variable to which the new class instance was assigned.

To sum up, each time the user clicks on the stage, five instances of the button class will appear, with random position and size, and the words “This” “Button” “Is” “A” “Class” on them.

Here’s the example; click away:

Notes to self:

1. You can pass parameters to external class files when you instantiate the class.
2. The external class file name must be the same as the class being defiend.
3. You can add event listeners to the stage.
4. random(#) has been replaced with Math.random() * #.
5. loadMovie has been replaced with addChild.

“loaderInfo” is the general state of the SWF as it’s loaded. While it’s loading, you get a progress event, and upon completion, a complete event. Here’s some sample code:

loaderInfo.addEventListener(ProgressEvent.PROGRESS, progressListener);
loaderInfo.addEventListener(Event.COMPLETE, completeListener);

function progressListener(event:ProgressEvent):void {
	bar_mc.scaleX = (event.bytesLoaded/event.bytesTotal);
}

function completeListener(event:Event):void {
	loaderInfo.removeEventListener(ProgressEvent.PROGRESS, progressListener);
	loaderInfo.removeEventListener(Event.COMPLETE, completeListener);
	// do something
}

This basically sets up two event listeners, progress and complete. While progress is happening, you get constant updates of bytesLoaded and bytesTotal, with which you can provide the user feedback that something is happening. In this case, it’s just changing the shape of a bar with the instance name “bar_mc” (note scaleX [AS3] rather than xScale [AS2]), but as I’m sure you’re well aware, you could use the result for a percentage indicator, or control an animation.

Note #1: It’s a good habit to remove event listeners when you no longer need them, hence the two lines of code within completeListener. These basically nuke both of these listeners that were in use while the SWF was loading because they aren’t needed once the movie has loaded.

Note #2: I’ve seen example code where “event” within the function is changed to “myEvent” or shortened to just “e”. It’s a variable that is self-contained and can be named anything you like, but it would be good to stick to a convention.

This is setting up a “document class”. You first create an ActionScript file and save it in the same directory as your Flash file; it will have the extension .as. Then go into your Flash file and in the Properties Inspector in the field “Document class”, enter the name of your ActionScript file. Don’t include the extension “.as”. If you did this correctly, when you click on the pencil icon, your external ActionScript file will open.

Note: If you have your AS file in subfolders, you can point to it using dot syntax relative to your .fla file. You can also set up Flash to look into particular folders as a system preference.

The external code contains the same code you’d have in the .fla file but enclosed in a “package”. Here’s the previous simple button example in a package:

package {
import flash.display.MovieClip;
import flash.events.MouseEvent;
import flash.text.TextField;

public class button extends MovieClip{

	public function button() {
		myButton.buttonMode = true;
		myButton.mouseChildren = false;

		myButton.addEventListener(MouseEvent.MOUSE_UP, myButtonUp);
		myButton.addEventListener(MouseEvent.MOUSE_DOWN, myButtonDown);
		myButton.addEventListener(MouseEvent.MOUSE_OVER, myButtonOver);
		myButton.addEventListener(MouseEvent.MOUSE_OUT, myButtonOut);

		function myButtonUp(event:MouseEvent):void{
			events_txt.text = "Event: MOUSE_UP";
		}

		function myButtonDown(event:MouseEvent):void{
			events_txt.text = "Event: MOUSE_DOWN";
		}

		function myButtonOver(event:MouseEvent):void{
			events_txt.text = "Event: MOUSE_OVER";
		}

		function myButtonOut(event:MouseEvent):void{
			events_txt.text = "Event: MOUSE_OUT";
		}
	}
}
}

The meat of the code is within the “button” function and is exactly the same as my previous post. It has to be the same name as the .as file. The “package” contains import statements that import various Flash libraries needed by the code. In this case, I had to import the libraries for MovieClip (my button is a movie clip), MouseEvent, (because I’m adding listeners for mouse events) and TextField (because I have a text field on the Stage). I really don’t know exactly what needs to be included for what purposes; I’m learning as I go.

Where this gets very powerful is setting up “class files” for library symbols, allowing them to be more portable across documents.

For more on this subject, check out this QuickStart at Adobe regarding external AS files.

Properties

Several properties in AS 2 have changed. The general rule is any that had an underscore, now doesn’t have one.

movieClip._x
movieClip._y
movieClip._height;
movieClip._width;
movieClip._alpha;
movieClip._visible;
movieClip._xscale;
movieClip._yscale;
_xmouse;
_ymouse;

are now all:

movieClip.x
movieClip.y
movieClip.height;
movieClip.width;
movieClip.alpha;
movieClip.visible;
movieClip.scaleX;
movieClip.scaleY;
mouseX;
mouseY;

Some properties that had a range of 1 to 100 now range from 0 to 1, most notably alpha and scale.

Here’s an excellent cheat sheet which covers changes from AS2 to AS3.

Mouse Events and Event Listeners

The next big change in AS3 are event listeners. A lot of situations handled in a variety of confusing ways are now handled in this manner. Some of these are loading items (goodbye loadMovie) and mouse interactivity. The most obvious place to introduce the event listener concept is with a button.

First, forget all the AS2 handlers (onRelease, onRollOver, etc). In AS3, you’ll add “event listeners” to button:

myButton.addEventListener(MouseEvent.MOUSE_UP, myButtonUp);

“myButton” is the instance name of the movie clip I want to target. “MouseEvent.MOUSE_UP” is the specific event the listener is listening for, and “myButtonUp” is the function that’s called when that event occurs.

Now you just define the “myButtonUp” function that will be triggered. Note that the event type is listed (MouseEvent) and “:void” indicating nothing is returned by this function.

function myButtonUp (event:MouseEvent):void{
	trace("Hello World");
}

There are similar mouse events for other common button behaviors:

myButton.addEventListener(MouseEvent.ROLL_OVER, myButtonOver);

function myButtonOver (event:MouseEvent):void{
	trace("Rolled over the button");
}

myButton.addEventListener(MouseEvent.ROLL_OUT, myButtonOut);

function myButtonOut (event:MouseEvent):void{
	trace("Rolled off of the button");
}

So here’s an example. There are four listeners and the button behaves as a button should. Oh boy.

Note #1: To get the hand cursor and up, over, and down states, I put the movie clip into “button mode” (myButton.buttonMode = true). Then the button can be set up with up, over, and down art using keyframes within that movie clip as in the image below:

Note #2: When designing more complex buttons, I noticed if there are other elements within the button movie clip, the listeners can register false. There are additional properties to limit the event behavior of movie clips within movie clips (“children”). So in the above example, I set the property “mouseChildren” of myButton to false (mybutton.mouseChildren = false). Read more about this subject at Partly Human.

Anyhow, before this simple example gets too complicated, here’s a list of some common events:

MouseEvent.CLICK –> Mouse click
MouseEvent.DOUBLE_CLICK –> Mouse Double Click
MouseEvent.MOUSE_MOVE –> Mouse move
MouseEvent.MOUSE_DOWN –> Mouse button pressed
MouseEvent.MOUSE_UP –> Mouse button released
MouseEvent.MOUSE_OVER –> Cursor moves over something
MouseEvent.MOUSE_OUT –> Cursor moves off of something
MouseEvent.MOUSE_WHEEL –> Mouse wheel moves
KeyboardEvent.KEY_DOWN –> Key pressed
KeyboardEvent.KEY_UP –> Key released
Event.ENTER_FRAME –> Equivalent for “onEnterFrame“
TimerEvent.TIMER –> Happens every timer interval
TimerEvent.TIMER_COMPLETE –> Happens when timer object finishes

The event listener model is the basis for many situations in ActionScript 3.0: keyboard events, preloaders, and image loading. So although this concept was at first annoying, it’s become increasingly handy.

More to come.

I’ve used McTween in Flash for quite some time now. It’s a code extension to Flash that makes many animations extremely easy to implement. A newer version called Tweener has been developed, and it obviously took me until now to move over. But after playing with it for a day I can already see it making some things much easier. There are ActionScript 2.0 and ActionScript 3.0 versions of Tweener.

Installing Tweener

Installing Tweener is different from McTween which was a Flash extension that installed with a double click. Tweener has to be added as a class. If you’ve never added a class to your installation of Flash, here’s how.

1. Download Tweener. It will appear as folder named “caurina”. This is standard practice as otherwise all the classes you install by different developers could have similar names and cause problems down the line.

2. Put the folder somewhere on your computer. It might be a good idea to create something like “Flash Development/Classes” in your My Documents folder, and put the “caurina” folder in it.

3. Start up Flash. Go to Edit -> Preferences. In the menu on the left, click ActionScript. Then click on the Language: ActionScript 2.0 (or 3.0) Settings. In the dialog box that appears, you’ll be given an option to set up a “Classpath”. This is basically going to point to the directory you just put the “Caurina” folder into. Click the “+” to add a new path and then use the target button to browse to the directory that contains the “caurina” folder. Once this is set up, you won’t have to do this again, and any new classes you put into that folder will be accessible to your Flash files.

4. In your Flash file, include this ActionScript:

import caurina.transitions.Tweener;

There are other ways to add classes to ActionScript files but this is the manner most similar to that of McTween.

Using Tweener

The syntax for Tweener is different from McTween but more flexible once you get used to it. In McTween, you’d name the movie clip you wanted to animate and then the animation type with parameters:

button_mc.alphaTo(0, 2, "linear");

This would basically tell the movie clip with an instance name of button_mc to fade to zero over two seconds with a linear transition.

In Tweener, the syntax is flipped:

Tweener.addTween(button_mc, {_alpha:0, time:2, transition:"linear"});

The first big difference is the movie clip to be animated appears in the parameters. Second, the animation type doesn’t have to be named. McTween had a whole list of them: alphaTo, scaleTo, xScaleTo, volumeTo, rotateTo, etc. You just use “Tweener.addTween” any time you use Tweener. What ends up happening is a result of the parameters. If they’re different than what they were before, the animation occurs. The parameters can therefore be listed without having to know what to “call” the animation.

With McTween, if you wanted to fade out and change the scale simultaneously, you’d have to write:

button_mc.alphaTo(0,2,"linear");
button_mc.scaleTo(0,2,"linear");

Wheras with Tweener you can just list another parameter:

Tweener.addTween(button_mc, {_alpha:0, _scale:0, time:2, transition:"linear"});

You don’t have to remember that the animation was specifically called “scaleTo” and “alphaTo” and you can just list everything in one tween and let Tweener figure it out.

Also note how the parameters are clearly idenitified, making it easier for other people looking at your code to figure out what’s going on. It should be very obvious which number to change to have animation take three seconds instead of two, while in the McTween version, not at all.

Event updates

With Tweener you can add function calls that fire at the start, end, and animation in progress.

Tweener.addTween(button_mc, {_alpha:0, scale:0, time:2, transition:"linear", onStart:this.starting, onUpdate:this.updating, onComplete:this.completing});

You can then write functions called button_mc.starting, button_mc.updating, and button_mc.completing containing whatever you want to happen at those moments. Before you would have to code your own test for the movie clip’s properties.

Base style

Using a base style is similar to CSS (at least in my mind). You can set up a basic transition style at the top of your ActionScript, to be used in your code. Defining this base will make for easier editing later.

var fadingIn:Object = {alpha:100, _scale:1, time:0.5, transition:"linear"}

(later in your code)

Tweener.addTween(button_mc,{base:fadingIn,_color:0x000000});

The base scale is used in the button_mc animation, with the addition of the different color.

Anyhow, that’s my Tweener overview. Essentially, the results aren’t any cooler than McTween but the code behind is better and will be easier to read and edit in the future. That’s a good thing.

Here are some resources for further investigation into Tweener:

• Get Tweener
• Tweener Documentation
• labs.zeh.com.br
• Stimuli: Tweener Tips
• Tweener Transitions
• Bezier Curves in Tweener

Basically I’m generally wary of using the built-in Flash components, for whenever I get one working, I develop some bugs that have me wondering if I should have created something from scratch. My experience with the “ComboBox” component was no different.

The “ComboBox” is a drop down menu that you can fill with your own list. The user can pick an option and you get the data out.

After I got it working I realized it was breaking some buttons I had already created, but in a fairly subtle way. Say you have a button that the user can click on repeatedly, as in a number increment or in my case, a “next” button for an image gallery. The way it should work is the user can click on the button a ton of times in sequence without having to move the mouse.

But when combobox is activated, this behavior breaks. Meaning, in the example below, the button works as described above — until the user clicks on the ComboBox. Then the arrow buttons don’t work quite right. You have to move the mouse a little in order to reactive the button once you click on it.

Because the behavior changes after touching the ComboBox, I was pretty sure the component was the culprit. After doing some searching online, I found this fix at Jetfly (which in turn points to this fix at PhilterBlog ) where I learned of a “focus management” that the ComboBox takes a hold of, and is what causes the other buttons to change their behavior. You can return the focus to the buttons using something like:

next_btn.onPress = function(){
Selection.setFocus(this);
};

Great, this solves the button bug… but then Flash draws a yellow box around the buttons, for “keyboard focus”.

More searching revealed a property I never heard of called “_focusrect”, that you can use to turn off the yellow box:

next_btn.onPress = function(){
this._focusrect = false;
Selection.setFocus(this);
};

Unwanted behavior eliminated, and I learned stuff: 1) setFocus and focusrect, 2) reaffirmed my general annoyance with Flash components, and 3) as with most of my Flash problems, someone else has already encountered them and posted fixes online.

Note: This is all in the ActionScript 2.0 world — I’m still getting up to speed in ActionScript 3.0…

When dynamically loading and playing sounds in ActionScript, you may have correctly set your sound file in the library to Export for ActionScript and Export in first frame. It’s the latter item that messes things up. It seems Flash takes that first frame thing literally and will load those library items even before the ActionScript you have on frame one, layer one — which is usually your preloader code.

One way around this is to force Flash to load the sound files after the first frame but before the frame they’re needed. Here are the steps to do so:

1. Decide on a frame to load your sounds into that’s after frame 1 but before the main body of your movie — the obvious choice is frame 2.
2. Change your preloader code that’s on frame 1 to skip frame 2 and go to the actual body of your movie after everything has loaded.
3. Select your sound files one by one in the library and uncheck “Export in first frame”.
4. Select frame 2. Insert a blank movie clip on the Stage (Insert -> New Symbol)
5. Open up that blank movie clip. On frame one, add a stop(); action.
6. Create a keyframe on frame 2 of this blank movie clip. In the Properties Inspector, set the sound drop down menu to one of the sounds in your library that you need to load early.
7. Repeat steps 4 through 7 for all your sounds in the library.

Essentially the deal here is you’re putting all your sounds into “dummy” movie clips hanging out on frame 2. But because of the ActionScript edits in the preloader and the stop(); in the dummy movie clips, your movie will never play those sounds — but it will load them.

Now test your movie — especially with the download manager at some ridiculously low bandwidth settings — and your preloader should function as it should.

Much of what I’ve learned post-college has been from Jeffrey Zeldman, or the other site A List Apart. The basic idea behind their vision of “web standards” is to code with XHTML and CSS. A lot of really sloppy code was forgiven by the browsers of old, leading to pages that looked fine but were a pain to update (images cut into slices and laid out in tables comes to mind). Web politics aside, web standards are a good goal to strive for as they allow for the separation of content and design. The order also makes your code easier to read, understand, and parseable.

This might sound intimidating but I’ll break it into steps. I’ll start off with XHTML and how to code it. XHTML stands for EXtensible Markup Language and is a combination of XML and HTML. It’s pretty easy. Check out this article at A List Apart for the basics.

The basic rules are:

• XHTML elements must be properly nested
• XHTML elements must always be closed
• XHTML elements must be in lowercase
• XHTML elements must have one root element

And what this really means:

• All tags are lowercase — write <div> rather than <DIV>.
• All tags must be closed. If you have a <p>text you must have a corresponding </p> on the other end.
• Tags that don’t have a corresponding closing tag are closed within the tag: <br />, <img />, <hr />.
• Tags must be nested correctly: <p><em>text</em></p> rather than <p><em>text</p></em>.
• The root element bit means each page has a basic structure of: <html><head></head><body></body></html>

Some additional rules:

• All tag attributes must have quotes: <img width=“100” height=“100” />
• I’m not sure if this is required, but <b> and <i> are ideally replaced with <strong> and <em>.
• Now to make it clear that your document is XHTML the proper DOCTYPE is declared in the header. In general, I’ve been told to use XHTML 1.0 Transitional.

Once you have an XHTML document, it’s a great idea to run it through a validator over at W3C. Just enter the URL of your XHTML document and all the mistakes will be reported. That’s pretty much it. Really.

So how does all this apply to blogging? Well, WordPress right out of the box generates pages in XHTML. But here are some reasons why any blogger should know about XHTML:

• If you want to edit your blog’s theme or want to create your own.
• There is a “code view” available when writing posts in WordPress.
• A blog that doesn’t validate may have trouble being recognized by spiders that index your site for search engines.

Do you have any terrible ideas of your own? Enter the Webomatica Contest: Bad Video Game Ideas.

The third Webomatica contest should be fun for all involved. I’m looking for bad video game ideas.

1. Brainstorm an idea for a terrible video game. Some ideas, which should be pretty self-explanatory:
   1. Peak Oil
   2. Help Casey Serin Avoid Foreclosure
   3. Greedo: Who Shot First?
   4. Sausage Construction Set
2. For more brainstorming fodder, here’s a link to some awful video game ideas. Also check out some actual, terrible video games like Cheetamen (here’s a history site), Action 52, ET, this Japanese “ultimate challenge” game, Penn and Teller video game (read more here). Read this list of video games that got a bad reception.
3. (A video game based on one of the truly terrible movies you folks had me watch is possible, but a bit obvious).
4. “Bad” could mean “stupid” “cynical” “impossible” “gross” or “frustrating” it’s really up to you.
5. The best idea or two will be made into a small Flash video game by yours truly. That should be enough of a prize for anyone, I think — but on second thought I’ll throw in a $20 iTunes gift certificate. I’ll work with the idea person(s) directly, during development.
6. I have two playable examples coming up shortly — I think you’ll get the idea after those go live.

(Yes, there is a slight ulterior motive for this contest — I need to improve my Flash skills and small, self-contained projects are the easiest way to get my feet wet).

Please post any entries to the contest in the comments below, or write about it on your own blog and link here.

I removed a few things from the sidebar and two images (a page background and a footer) that I really can’t remember why I ever had them in the theme — I guess that’s what comes from hacking a pre-made theme. Skelliewag.org has a really great post on de-cluttering your blog that is inspiring some of my pruning.

But in regards to Internet Explorer and “creeping text”: The site looks dandy in Firefox and Safari, but I always hold my breath when it comes to Internet Explorer on a PC. So I checked out few pages and noticed this annoying problem in the comments — basically everything was slowly edging to the left, to the point where the text was appearing off the side of the page:

Turns out this is an IE-specific “creeping text” CSS bug (view the link in IE to see for yourself). It happens when block elements are nested within one another, and the elements have only a left border and a bottom padding. Turns out that’s exactly what I was doing in the comments to create the green stripe. While updating the theme, I removed the bottom borders from both the comment <li> and the page <div>, hence the zombie-fied text.
So I added a grey bottom border to the comment <li> and no more creep.

Did I mention I hate Internet Explorer? But according to my server logs a vast majority of people who happen across this blog use it, so I must cater to them somewhat. As a result, I do appreciate that whenever I have a strange web design problem, odds are someone on the Internet has posted a fix. And so I do the same through this post.

I haven’t decided if I’ll add it to the blog sidebar as I’m still a bit anti anything that slows the page loading down. But still, I ought to do more of this experimentation in the future — it’s pretty fun.

I finally got my first Joomla module working. After getting stuck on the install process, I gave up using the zip file technique. Joomla lets you install from a directory, so I just uploaded my files and using that method, everything installed properly. Go figure.

Finally able to test the module, the MySql result didn’t display at all. So I opened up another module I’d been using (Hit Counter) and found a few lines to tweak, namely those responsible for converting the query result into a format suitable for ouput by pHp. Success. The total number of bottle caps… 457. Oops, off by 2.

This slightly off result was likely due to old bottle caps that I deleted or unpublished from the system. After a bit of poking around with pHpMyAdmin, it seems a published content item has a value of 1 in its state column. So I updated my query to count content items matching two categories:

SELECT COUNT(*) FROM jos_content WHERE sectionid = ‘4’ AND state = ‘1’

The result: 495, the exact number of bottle caps currently displaying on the site. Now every time I add a new bottle cap, I’ll get a minute of my life back.

This isn’t really a how to, maybe a document of my own confusion. Anyhow, my current project is to add a simple sidebar module to Bottle Cap-O-Rama that displays a current count of all the bottle caps. Sounds like an easy task, however the site runs on Joomla and the ideal way to do this involves several layers of technology.

The first is MySql which I want to learn more about, but essentially it’s a database running on the server. My technical knowledge of MySql has been limited due to my use of content management systems (WordPress, Joomla) which create a nice friendly front end via pHp. This is not always a good thing.

The other night as I was updating this very WordPress blog I was greeted with a truly ugly error about headers already being sent, leaving me unable to update half the site. Luckily there was support through the WordPress site that directed me to this page. A simple table repair fixed my problem — and reminded me that I really need to get more familiar with MySql and pHp.

I decided the writing of a “bottle cap total” module for Joomla would be one way to accomplish this. After poking around on the server and consulting the MySql reference guide, I wrote my first MySql query:

SELECT COUNT(*) FROM jos_content WHERE sectionid = ‘4’;

…which pulls up the total number of bottle caps in the datbase. Success! But the job isn’t done, as this query needs to be called through Joomla.

So this is where I got stuck. There’s a helpful tutorial online for writing simple Joomla modules. I was able to get “Hello World” working easily enough, but when replacing the query in the tutorial with my own, something got muddled. Unfortunately I think it’s something awry with the installation. Joomla prefers that modules are installed via an uploaded zip file. The package contents seem to be described by an XML file. Each time I uploaded my module, it would say a file was missing that was most certainly there. So I’m stuck at this point, not able to test my module because I can’t get it installed. And I’m unclear how to install a module with manual FTP.

I’m at the point where I’ve made progress but have nothing tangible to show for it, which is frustrating. And although I still think Joomla and WordPress are awesome, there’s definitely a level of trust I’ve handed over, plus a learning curve if you really want to customize either system. The information is out there; just a bit opaque at times when you get the strange error messages.

Spent most of the day hacking away at clean-up on Webomatica, mostly due to the frustrations of seeing Google not index the site properly. I chalk it up to the fact that I moved a bunch of content from static HTML pages to dynamically driven WordPress ones, and not really understanding the nature of “SEF” (search engine friendly) links.

Basically, to make a long story short, when I first threw this blog up, all the links were of the “id?=3″ nature, and Google indexed them. Then I switched to SEF links where the title of the post is in the name, and the Google robots seemed understandably confused by this.

To top it off, during my clean-up, I found that the photo gallery pages were never updated to reflect the new structure, so they were still pointing to the numerical format and not the SEF versions. However, they still worked, so I never caught them when checking for broken links.

Another more complex issue is the idea that Google doesn’t like to index pages with duplicate content, and in WordPress there is in fact duplicate content if you consider the actual post pages and the archive pages. I’ve tried to fix this problem with different meta tags both in content and in telling the robots which pages to index.

Needless to say, I think I have the more or less solved, and only time will tell.

Starting to muck about with Joomla, an open source CMS that I’m planning to use for my bottle cap collection, which is getting far too large for me to handle in the old, manual way. So far I’ve noticed the basic concept is similar to WordPress as there are CSS templates wrapping around information stored in a database, and it also uses PHP. But Joomla seems to have much more robust admin tools, modules, and graphic support to make all the parts of a web page look prettier.

Having come to this set up from the coding by hand days, I must say it’s a bit scary to be so removed from the design of the content. The only analogy I can think of is cooking. There are times you want to make everything from scratch, others when you want to eat out and have someone else do everything, but most often we’re somewhere in the middle, following a recipe and using a couple of ingredients that have 90% of the work done.

So at this point, after a few hours of mucking around I’ve got something together that’s a great framework. I’ll be adding more items little by little. My uber-goal is to generate a grid of sorts with thumbnails for as many bottle caps as I can cram onto one page.