Unloading external content doesn't work right

Flash conveniently dictates the use of Loader class to load external files, including SWFs. But what the developers ignored was how the SWF unloading takes place...in theory it doesn't. Besides being an irritation, this can also be exploited as a security flaw.

Symptoms
Loading, then unloading a SWF - with an embedded clip or some sound playing - still keeps that sound going regardless of NO VISIBLE instance of the clip anywhere on the stage or in the memory. In addition (if you check the memory consumption), repeated loads and unloads increase the memory consumption in direction relation to the size of the files being loaded.

Diagnosis
What happens here is memory mismanagement on part of the AVM2 (Actionscript Virtual Machine 2, that was built for Actionscript 3). Dig deeper, and its the garbage handling mechanism at fault. Much of this has to do with what the unload function does. Here's how the story goes:

1. You write ActionScript 3 code to load/unload the SWF. (Yes, this bug is AS3-specific)
2. Flash lets loaded child SWFs communicate with the parent container. Hence the events that the SWF monitors are linked to the main timeline. ENTER_FRAME and TIMER events are the lethal events here. [keep that in mind]
3. Unload() simply removes a reference to the loaded content, and leaves the rest for the garbage collector.
4. But the garbage collector works on the principle that a resource will be removed only when it has no references. Because the SWF is still linked to the main timeline, it stays in the memory. The SWF - technically - keeps playing.
5. As a result of the SWF still out there, any sounds that the SWF had been playing continue to play; alongside, your movie file size bloats up because the garbage stays there in the garbage box (and stinks it up).

With nothing but the Flash IDE and its accompanying manual, one can get stuck for hours.

Prognosis (or the future course of events that you take)
There is no straight solution to this. Nothing can be done to fix the issue. Moreover, nothing on part of the parent swf can help (with a trivial exception).

• Calling SoundMixer.stopAll() method in the parent SWF: This will stop all sounds playing. This is rarely helpful, since there will be other sounds playing as well.


• Remove select event listeners: Open the FLA file of the one that's being loaded, and remove any ENTER_FRAME or Timer event listeners. These are the ones that communicate with the parent movie.


• Clean Up on Event.UNLOAD: When unload() is called on an SWF loaded through the Loader component, an 'unload' event is fired. Use this to clean up your child SWF...remove/delete all (dynamic) variables, movie clips, event listeners and timers. Stop any sounds. Stop the advance of the main timeline. Stop any external content from loading (Loader, URLLoader, Socket). This is your best bet.



Some enlightening documentation of this bug can be found here, here.

Actionscript

The revision of Actionscript - Flash's native language - to version 3.0, comes as an escalating shock to most like me. Though commenting on something introduced in 2006 - 3 years back - is not trendy, this is just another 2 bits from another developer on this platform (after regular cycles of attempts to 'learn it all'). It's not meant to be comprehensive.

The first thing to get straight...AS3 functionality leaves AS2 behind a light year. All the things one can do is unmatched. People are going crazy with everything it offers.

AS3.0 is heavily Object-based. In my opinion it marks a shift in the userbase, exactly an inversion from the amateur crowd that it pulled initially. Now the bigger draw is professional studios and upstarts, not the lone wolf in the basement. The lone wolf is majorly left to the brilliant vector drawing features of Flash, but giving life to it through nifty coding requires a wide learning curve.

Unifying the event listening mechanism is very nice. No longer do we need to be aware of the several ways (and several locations one can implement that) to handle a button click - now it's all done through the combination of addEventListener and a listener function. This is possible because of some heavy inheritance - the most common classes that we know of all belong to 4th or 5th generation in the flash hierarchy.

AS3.0 means that the past is dead. The past gods are dead as well - all my earlier Flash documents downloaded from tutorial pages of some of the best websites (and best coders) are junk. Publishing them as AS2.0 does no harm, though, but modifying them to your own use is hopeless.
Then there's the support pages...they can kill your aspirations. They're badly indexed, badly linked, badly written. Tutorials spread all over the web are the best thing for an AS3 developer; that is unfortunate.

Maybe this review evolves as life goes on.

Vidoop Flyout Captcha - Making it work

Vidoop Captcha (see implementation here) is an awesome thing for normal validation.
And even more awesome is the flyout version of it, which doesn't strip away the visual appeal of your page.

Implementing the flyout version is a bit confusing, primarily because there is a single document for this, and that too gets repetitive but misses out on the major details. I thought I could do better.

Here is a step-by-step how-to to making Vidoop Flyout work with your website (and also the automatic changes it makes to your page)

#1: Find the normal Vidoop Secure Captcha code implementation on your page. It should resemble this (note that the image src, categories to look for, and captcha_id would be different for you)

<form method="get">
<img src="https://api.vidoop.com/vs/captchas/IT42FKE7FE/image" />
<p>Type in the 3 letters you see on pictures of <span class="category_name">money</span>, <span class="category_name">birds</span>, and <span class="category_name">computers</span>, in that order.</p>
<input type="input" name="code" value="" />
<input type="hidden" name="captcha_id" value="IT42FKE7FE" />
<input type="submit" name="submit" value="Submit" />
</form>

#2: Wrap the image code and instructions in a <noscript> tag. This would be the non-flyout version of captcha that shows up when JS is disabled. Let the remaining code untouched.

<noscript>
<img src="https://api.vidoop.com/vs/captchas/IT42FKE7FE/image" />
<p>Type in the 3 letters you see on pictures of <span class="category_name">money</span>, <span class="category_name">birds</span>, and <span class="category_name">computers</span>, in that order.</p> </noscript>

#3: Include the jQuery library in your HTML file (can be placed anywhere). jQuery will give you the slick effects.

<script type="text/javascript" src="http://com.vidoop.demo-static.s3.amazonaws.com/js/jquery-1.2.6.min.js"></script>

#4: Include the code to initialise the flyout Vidoop captcha (place this before the <noscript> tag for best effect). The 'flyout.js' is the script that does it, and inserts the necessary HTML and styling into the page. The inline script, where we declare the vidoop_secure variable is essential to working of the whole thing, as well as provides configuration parameters (rip open the flyout script in some text editor to learn about that).

<script type="text/javascript">
var vidoop_secure = {
instructions: 'Type in the 3 letters you see on pictures of <span class="category_name">money</span>, <span class="category_name">airplanes</span>, and <span class="category_name">houses</span>, in that order.',
};
</script>
<script type="text/javascript" src="js/flyout-0.9.12.js"></script>

#5: So now your main block of HTML looks like this

<form method="get">
<script type="text/javascript" src="http://com.vidoop.demo-static.s3.amazonaws.com/js/jquery-1.2.6.min.js"></script>
<script type="text/javascript">
var vidoop_secure = {
instructions: 'Type in the 3 letters you see on pictures of <span class="category_name">money</span>, <span class="category_name">airplanes</span>, and <span class="category_name">houses</span>, in that order.',
};
</script>
<script type="text/javascript" src="js/flyout-0.9.12.js"></script>

<noscript>
<img src="https://api.vidoop.com/vs/captchas/IT42FKE7FE/image" />
<p>Type in the 3 letters you see on pictures of <span class="category_name">money</span>, <span class="category_name">birds</span>, and <span class="category_name">computers</span>, in that order.</p> </noscript>
<input type="input" name="code" value="" />
<input type="hidden" name="captcha_id" value="IT42FKE7FE" />
<input type="submit" name="submit" value="Submit" />
</form>

And now you have the Vidoop Secure flyout captcha working on your own site.

Resources to keep

Links a webmaster should have handy, in case there is an urgent need to create a website overnight
mod_rewrite specific
http://www.askapache.com/htaccess/mod_rewrite-variables-cheatsheet.html
http://httpd.apache.org/docs/2.2/rewrite/rewrite_guide.html
http://httpd.apache.org/docs/2.0/mod/core.html

Color palettes to evoke specific moods
http://www.efuse.com/Design/palettes.html

Good Practices
http://webdesignfromscratch.com/current-style.php
http://www.sitepoint.com/article/fundamentals-web-design/
http://www.sitepoint.com/article/fundamentals-web-design/3/
http://www.andyrutledge.com/bad-layout-conventions.php
http://www.sitepoint.com/article/top-15-meta-tag-tricks/
http://www.devx.com/projectcool

W3C Validator
http://validator.w3.org/

#1: choose a correct doctype e.g.


Note: "transitional" DOCTYPE I cite doesn't include the URL of a DTD, or document type declaration. This is because using URLs in a DOCTYPE element sends some browsers, including IE, into Strict mode, defeating the purpose of the "transitional" DOCTYPE.


UPDATE: the resources got the author of this blog a win in a web design event.