All posts by Ronald Timoshenko

Extending the Movieclip Class in Flash (ActionScript 2.0)

In Optimizing Flash Buttons (Part 1) and (Part 2) I talked about improving the efficiency of creating movieclip buttons; although the methods/approaches discussed therein are valuable (but that’s for you to decide), sometimes a more powerful or abstract solution is required. In the text that follows I’ll dissect a class that I’ve created that takes my previous functions one step further, and eliminates the need for copying and pasting code repeatedly. Now, let’s jump right in…

First, download the class contained in the .zip file – http://www.eingko.net/files/com_rtimoshenko_mcUI.zip – and save the .as file in the following directory (you may need to create some folders):

  • (Windows 2000 or Windows XP) \Documents and Settings\user\Local Settings\Application Data\Macromedia\Flash MX 2004\language\Configuration\Classes\com\rtimoshenko\
  • (Macintosh OS X) Hard Drive/Users/Library/Application Support/Macromedia/Flash MX 2004/language/Configuration/Classes/com/rtimoshenko/

Note: The Flash MX 2004 authoring environment (or above) is required for this class to work. Also, if your authoring environment is Flash 8, then – obviously – your class path will be slightly different than those above.

Next, start a new Document in Flash and create a shape on the Stage. Then convert your shape to a symbol (press F8, while the shape is selected) by opening the “Convert to Symbol” dialog box (keep it open). Press the “Advanced” button and modify the field values within the “Linkage” fieldset to the following (see image below):

Convert to Symbol - Linkage

  • Identifier: _opt02_mc (This can really be anything you want)
  • AS 2.0 Class: com.rtimoshenko.mcUI
  • Check “Export for actionscript”
  • Check “Export in first frame”

Once the values are set, press “Okay” to continue. Select the instance on the stage and double-click it to edit it. Create a new layer and call it “_actions” (or whatever you want), select the first frame in your new layer and open up the Actions panel (press F9). Insert the following code:

stop();

Now, create another layer and call it “_labels”. Click on frame 2 of the the “_labels” layer and in your properties panel type in the word “over” (see image below).

Movieclip Timeline - ui_mc

Now do the same for frame 11, except type in the word “out”. Click on frame 10 of the “_actions” layer and open up the Actions panel (press F9) and insert the following code:

stop();

Finally, create a simple shape tween so that you have a basic rollover animation. Your timeline should now look something like the image below.

All that’s left is to define a path for the movieclip when it’s clicked. Go back to the _root timeline (Scene_1) and click on the shape-cum-movieclip that we created earlier and open up your Actions panel (press F9). Insert this code:

onClipEvent(load){
this._path = "http://www.yourwebsite.com/";
}

Test your work and see the magic happen. The nice thing about this method is that it completely eliminates copy/pasting all together. All that’s required is to declare any particular library instance as an object of the mcUI class and it automatically inherits code that tells it to play “over” on rollover and “out” on rollout. Pretty cool, eh? Well, that’s it.

Javascript Favelet: Outline

Whenever I produce I website I am always thankful for the Firefox Web Developer Toolbar extension; it’s an incredible convenience. One particular feature that I use constantly is “Outline”. This feature is great for seeing the locations of various elements on any page. But I’ve always wished that there was an equivalent feature/extension for Internet Explorer. Well, to my knowledge, there isn’t, but I’ve thrown together a little script (Javascript, to be exact) that outlines (virtually) any given element in colors of my choice. Here’s the script:

function outline(){
var tagArray=['p','a','div'];
var colors=['red','green','blue'];
for (var i=0; i<tagArray.length; i++){
var tags = document.getElementsByTagName(tagArray[i]);
for (var j=0; j<tags.length; j++){
var tag = tags[j];
tag.style.border = ['1px solid '+colors[i]];
}
}
}

Obviously the code is not that complex, but it can be incredibly useful. One particularly nice thing about it is that one could place a fairly large amount of elements into the arrays.

Here’s a bookmark that I use anytime I want to call this script into action: Bookmark me. Using it this way is far more convenient, in my opinion. Well, I hope someone finds this useful; enjoy.

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.

Optimizing Flash Buttons (Part 1)

In the past, whenever I needed buttons within Flash (whether movieclip or actual button instances) I would select the instance (_mc_opt01) on the stage open up the Actions panel and paste in the following code:

on(rollOver){
_root._mc_opt01.gotoAndPlay("rollover");
}
on(rollOut){
_root._mc_opt01.gotoAndPlay("rollout");
}
on(release){
getURL("mypage.php");
}

Being one who likes to modularize, I decided to try and modify my code/approach and make it more portable and easier to edit. I created a custom function and added a function call to my button instance to replace the getURL method. So it became…

on(rollOver){
_root._mc_opt01.gotoAndPlay("rollover");
}
on(rollOut){
_root._mc_opt01.gotoAndPlay("rollout");
}
on(release){
_root.getPage(1);
}

And my actual function definition would be on a frame and would look something like the following…

var path = "/index.php";
var pg_1 = path + "?id=1";
function getPage(page){
var newPage = eval("pg_" + page);
getURL(newPage);
}

This, of course, works, but it is not ideal because it uses eval(). We can replace it with this:

var newPage = _root["pg_" + page];

Then I realized I could take the code on my button instance one step further by doing the following:

on(rollOver){
var clipID = 1;
_root["_mc_opt0" + clipID].gotoAndPlay("rollover");
}
on(rollOut){
_root["_mc_opt0" + clipID].gotoAndPlay("rollout");
}
on(release){
_root.functionGetPage(clipID);
}

The advantages of using buttons this way is of course for modularity and customization, etc. Now of course this approach may not be optimal because it requires more code, but on full-Flash websites (or hybrid websites) using this method will save valuable time in searching for button/movieclip instances that need to have the URL (or whatever) modified.

For my purposes, this code reduces the likelihood of mistakes caused by manual button replication (during authoring); because there is not as much that needs to be modified before compiling and exporting the file. Anyway, I hope someone else finds this useful; it was for me.

PHP and Sessions

I don’t know how many people have had this particular problem, but I know I’m not the only one. Two weeks ago I encountered a strange issue when using session_start() with PHP; the method call was not setting/creating a cookie, so I couldn’t access my session variables. I went to php.net and found several answers. I’m pretty sure this only applies to people who have are running this on their own server; ergo, hosting companies won’t have (or have already remedied) this issue.

I use PHP ver. 4.4.1 so I don’t know if this applies to versions 5+, but if you encounter the same problem, try one (or all) of the following:

  • Check to see if your php.ini file has a slash at the end of the session.cookie_path setting (e.g., “session.cookie_path = /”). Remove it so that it becomes “session.cookie_path =”. Apparently, the slash is read as an escape character, which would, obviously, cause issues.
  • Make sure that session_start() is the very first command in your document; above <html> and the <doctype>. This may seem obvious, but not an unlikely mistake.
  • You may need to implement a compact privacy policy, more info here: P3P, Cookies and IE6.0: A Case Study.

If you’ve been having the same problem and none of the above suggestions have helped, try looking for a solution at www.php.net, if that doesn’t work for you, well, you can always Google it.

Resource: http://us2.php.net/manual/en/ref.session.php