While bug hunting I came across this very unusual bug. In a project that I am working on, I am using multiple unique instances of the LocalConnection object to communicate between an AS3 master and an AS2 slave. These LocalConnection instances use a random number to keep them unique, so each time the program is reloaded it makes a new LocalConnection instance. After refreshing the browser exactly 8 times the LocalConnection object stops sending out messages. I remember reading about an 8 connection limit somewhere, but I didn’t connect the dots until right now. These dots suck to connect. Read more …

I went to go upgrade my copy of XAMPP today from 0.3 to 1.7.2. Following the instructions on the XAMPP site I removed the old XAMPP from the Applications folder and put in the new one. The instruction was simple enough. The instruction was singular; not even plural. I went to boot Apache and it started fine. MySQL did not do as hot. I got this dialogue when I tried to boot up MySQL. I went through the next necessary diagnostic steps: curse, restart, retry, and curse. Read more …

Before I changed my mind about how I was going to deal with social bookmarking for my project I did some old fashioned Photoshop work and created a few badges to use as artwork. This work is based on the template made by jwloh. I merely added some badges. For what it’s worth, here is the archive containing the template and the badges saved as PNG files in 16, 24, 48 and 60 pixels squared.

Continuing on my AddThis journey from last post, I’ve moved away from doing something really custom for the social bookmarking part of this project. My fear as the designer is that a slick functionality is going to take away from the project itself. My fear as the developer is that making something that doesn’t hook up to AddThis’ data will become obsolete and will require updates. So, I decided to do some research on getting the native AddThis popup menus to work with a Flash site. I was kind of leary about it, but I read this post and decided that it might be worth attempting. Read more …

I’m working on social bookmarking integration on a project. By far, the easiest way to do this is to use the AddThis service. It gives all the tracking and metrics information if you want it and it takes of the little differences between how each service bookmarks and homogenizes it down to a simple link that redirects you to the service. Basically, AddThis works as a middle man between a lot of the social bookmarking sites out there. As of this post, AddThis has 54 services that it supports. It also has a good API that allows an AddThis badge to be added quite easily to a HTML page. Read more …

Most web developers know about innerHTML. Some will say not to use it, because it is a Microsoft invention. I kind of agree; it is ugly and not very DOM, but it gets shit done on pretty much every browser out there. Which is more than I can say for some of the DOM functions I’ve attempted.

So based on it’s adoption across many browsers innerHTML has earned some street cred. There is also a property out there that is related to innerHTML. It is innerHTML’s retarded cousin. The outerHTML property has the handy ability to get all the innerHTML and the node that is containing it. In IE only. Hence, retarded cousin. I think it is a pretty useful thing, but other browsers don’t support it. I found this solution in a 4 post forum thread and I thought it was a worth a repost. This prototype extends HTMLElement adding custom functionality that works like outerHTML does across the other browsers out there.

HTMLElement.prototype.__defineGetter__("outerHTML", function() {
var span = document.createElement("span"); span.appendChild(this.cloneNode(true));
return span.innerHTML;
});

HTMLElement.prototype.__defineSetter__("outerHTML", function(html) {
var range = document.createRange();
this.innerHTML = html;
range.selectNodeContents(this);
var frag = range.extractContents();
this.parentNode.insertBefore(frag, this);
this.parentNode.removeChild(this);
});

I am working on a project that is going to have an API that allows the user to insert video. The API is basically an ActionScript class that attaches a property when the user publishes their SWF. When the SWF is loaded into the main SWF program, it has access to the special functions in the SWF file. First, I just used the FLVPlayback and a registry function so the app would have access to it’s functions. That’s fine, but the user has to host an FLV for this to be effective. Not everyone has a server at their disposal, so this is the reason to build on existing video sites. Also, your not shit as a dev guy unless your mashable Web 2.0 savvy.

Fortunately, the popular sites have APIs out there ready and available to get content and media. A developer is expected to know what they have available to them and what will make the job easier for them. Being in the know about Facebook shit is actually a job requirement.

So, first one I thought of was the giant, YouTube. YouTube’s player is AS2 and to use it in an AS3 project you need to wrap it in an AS3 SWF and use LocalConnection to interface with it. There are a few solutions out there but in the end it is a band aid, until YouTube puts together an alternative player API. After fumbling with this, and saving the failing code to my repository for later, I went to Vimeo.

Vimeo has a pretty cool player and the thing that puts it over the top for my app is that it is written in ActionScript 3. But, as with everything, it isn’t perfect. YouTube has a good API page, and some decent forums, and support of the widespread dev community. Vimeo does not. Their API page is nothing short of pathetic, to say the least. They have one example and it doesn’t work. I found a working example on their fourm. At the top of the API page (as of this posting) they have a blurb that says this: You may have noticed that there are some inaccuracies in this documentation. We working on improving it. How about now? In the time it took to put up that asinine message you could of updated the code. That is annoying. Also, there is no public functions to be seen what so ever. Searching on the forums, someone found play, load and unload, which kind of works like stop. I also needed an event at the end of the video. Pretty standard stuff as far as a video API goes. Looks like I am going to have to Sherlock Holmes this shit. Read more …

I wanted to find a way to make my ActionScript library files into a SWC file for easy distribution. There are definitely ways to go about it, but I wanted to find a way that wouldn’t open a Pandora’s box of workarounds, learning curves, and bullshit. So, time for research.

First, I found the rather insane way of going about it by manually writing every single import statement into a document class. In this guy’s defense he is only doing one class and he is making a MXP out of it, so it’s different than what I was looking for.

I’ve heard about ANT tasks, now that I am a Eclipse and Flex user. So, I did some research on this and it seemed closer to what I was looking for. I found one or two places with some stuff to get me started. So I modified this one. After the learning curve blues, I got it to work, minus compiler warnings and a problem with the Vector class not in the Flex 3 SDK. It’s cool that ANT build files are XML so it feels familiar, but it’s a whole world to learn about. Read more …

Sometimes when I check out other people’s code I see things that I never do when I program. Sometimes they are kind of cool and if I like it enough, it becomes part of my workflow. While looking at some code the other day I saw something that I have never seen before. Variables defined in a comma delimited list. Below is how I normally go about defining variables.

var red:uint;
var grn:uint;
var blu:uint;
var i:Number;
var f:Number;
var p:Number;
var q:Number;
var t:Number;

The above can also be defined shorthanded using a few less lines. It’s a little thing, but you end up not rewriting the variable declaration every time this way.

var red:uint, grn:uint, blu:uint;
var i:Number, f:Number, p:Number, q:Number, t:Number;

When externally loading a SWF, the file is casted to a MovieClip object. The top left position is preserved when it loads in but you lose a few things that could be helpful. First of all your background color is gone (As far as I know). This is the color that is set in the Properties panel in Flash or the SWF meta tag in Flex. The other thing is that the dimensions aren’t preserved either. If you trace the SWF file’s width and height it will return the width and height of content inside and not the bounding of the original SWF file. But there is somewhere that this information is preserved. Inside the LoaderInfo object. To obtain the size of the loaded object just write something like this. This short example is an example of snytax and is not actual functional code.

trace(extFile.loaderInfo.width + " " + extFile.loaderInfo.height);

There is the other information that the LoaderInfo object retains like actionscriptVersion and frameRate. A full list can be found in the reference guide. Like everything else AS3.

Here are some quick one line wonders. From reading some stuff here and there I was able to fashion 2 functions for handling the conversion between hex strings and unsigned integers. Most of the time a uint is asked for when it comes to color, but some things like the StyleSheet object asks for a string value of a hex color like you would use in CSS.

I guess these function names got a little long, but they are very descriptive to what they do, and when you use Flex with it’s completion function name brevity isn’t as much of an issue as it is with Flash.

function hexColorToUnsignedInteger(hex:String):uint
{
	return uint("0x" + hex.split("#")[1]);
}

function unsignedIntegerToHexColor(num:uint):String
{
	return String("#" + (num.toString(16).toUpperCase()));
}

trace(hexColorToUnsignedInteger("#FF0000"));
trace(unsignedIntegerToHexColor(0xFF0000));

Today I was asked to fix a problem with an existing website where a FLV was stopping quarter way in its playback. This problem only occurred in IE 7 with Windows Vista. Every other browser seemed to work fine.

First step I took was to isolate the problem. I remade the FLV from source just to see that nothing like a cue point was in there that shouldn’t be. No dice. So I tried another FLV that I knew worked and sure enough it played all the way through. From there I opened Adobe Media Encoder and started getting creative with the encoding settings.

I tried it without audio and it played all the way through. That made sense, because the one that I tested with didn’t have audio either. So the problem was now isolated to an audio problem. Some forums had vaguely familiar sounding fixes, but nothing solid that worked for me. Once again I changed bitrate and channel settings for the FLV sound. No dice. The audio options for FLV are pretty limited and I was running out of things to test for. So I thought about who does this kind of thing successfully all day; they must have a process. I figured that if anyone was encoding things right it was probably YouTube.

I checked YouTube and using this Safari trick grabbed the FLV file that YouTube generates. In my test, the YouTube video worked in IE 7 with Vista. I opened the FLV in QuickTime player. You can only do this if you have a plugin like Perian installed. I checked the movie properties. It was H.264/AAC audio. Even the CS4 Media Encoder can’t make an FLV like that. The options are only Sorenson Spark or On2 VP6. It can make a F4V this way, whatever the hell that is. In any event, that F4V had the settings that I needed, so I encoded one of those. No dice. FLV player wouldn’t play a F4V. The hillbilly in me figured I’ll just change the extension. Why the fuck not? Holy shit, it worked.

So, if you want to make an FLV file that is H.264, just make a F4V file with Adobe Media Encoder and then change the file extension.

If you want to get a query string off a SWF file name there is a short line of code that does it. This is one of those things that I just can’t figure out logically; I just have to memorize how to do it. I’ve done this once or twice before in AS2 and it was a little bit easier then. This points to the LoaderInfo of the main SWF file. Then you get the parameters property from there. The FlashVars parameter in the SWF’s HTML page does the same thing as adding a query string to the file name.

var paramObj:Object = LoaderInfo(this.root.loaderInfo).parameters;

For the SWF file name “player.swf?src=video.flv” the code to get the src value would be the following.

var src:String = paramObj["src"]; //would get "video.flv"
var srcAlso:String = paramObj.src; //same using property instead

Using tables is a thing of the past in Web 2.0, unless of course your making an actual table. It’s a faux-pa to use them for layout in this day and age. The 2.0 mantra is content separate from design, limited HTML markup and CSS handling display. Though sometimes CSS doesn’t always cut it and you end up doing something that isn’t very modern just to get the job done. One thing that I always revert back to tables is when I have to center something vertically and horizontally in the window.

I’ve looked all over the place trying to find something that was simple, worked for IE and could have a fixed size box. In my search I found this solution that uses display to render a div as a table or table cell. It’s pretty good, but it doesn’t work with a fixed box size. I tweaked a little bit and now it can work with a fixed box size. I added an extra div called box to center . The only problem that I see with it is that the doctype has to be set to HTML 4 Transitional. For most projects, I don’t imagine this is a deal breaker. I’ve posted a minimal example. The HTML page can be found here. This has been tested in IE 6, Safari 3, Chrome 1, and Firefox 3.

Despite all the attention that was paid to the CS4 version of Flash, I keep coming across gaps in logic that baffle me. I think this is probably perpetrated by Macromedia legacy staff that are effectively suicide bombing themselves against the usability of the product. Actually, no, it’s probably not even that interesting. It’s just dumb.

So, my gripe is the Flash Zoom tool is now keystroke m by default. The z keystroke is of course now used for the Bind tool. Z is for Bind? M is for Zoom? What kind of alphabet soup are they cooking here? Bind is not even the primary tool in the IK tools. That means you need to click and hold in the toolbar even to see the Bind tool. It’s not worthy of z.

I know they renamed the Zoom tool to the Magnify tool, but that is a weak justification to a senseless change. Yes, you can change this easily in Flash > Keyboard Shortcuts… but that’s not the point. The less I have to change the shortcuts to what makes sense, the faster I can get to work.

Maybe soon I’ll have something nice to say about Flash CS4, because there are some really cool things and some really subtle improvements that are worth mentioning, but I got to get over some of this kind of dip-shittery that has wedged itself in to this version.