This is from http://deardrum.org/about/html5

What is HTML5 and why do I need it?

To put it simply HTML is what websites are made of. HTML5 is just the newest version.

DearDrum.org uses some pretty advanced stuff under the hood that's only available in HTML5. So in order to play audio on the site and do some other cool things you need a Web Browser that understands HTML5. (more on this below)

Fortunately there are a few really amazing web browsers out there that do support HTML5 really well. And if you're not comfortable switching to a new browser there's probably a plugin for your browser to get you on board.

Here are some quick links so you can get started, you only need one, but why not try them all if you have time. I'll go into a bit more detail and walk you through the issues below that if you're interested or confused by any of this.

Links:

Google Chrome is - in our professional opinion - the best web browser out there, hands down.
Download Google Chrome

Firefox is phenomenal too, and by far the most widely used browser that supports HTML5.
Download Firefox

Internet Explorer is, well, incompatible with everything. Google made a plugin called Chrome Frame which brings HTML5 to Internet Explorer. Despite some recent claims to the contrary IE9 will never support HTML5 by itself and requires Chrome Frame in all cases (more on this below).
Download Google Chrome Frame for Internet Explorer

Safari is in the same boat as Internet Explorer with regards to HTML5. They claim to support it but intentionally cripple its functionality. On a Mac you can install a plugin called XiphQT which will bring you up to speed. On Windows you'll need to switch to another browser to get proper HTML5 support.
Download the XiphQT plugin for Mac

Opera is a less known web browser that totally supports HTML5, and we love them for it.
Download Opera

So What is a Web Browser?

Yeah yeah, I get it. Now What is HTML5? Really.

You may have seen the code that makes up web pages. If you right click on this page you should see an option to view the source code of the page. That's HTML. Now the internet is an open place and as you can see there are lots of different browsers. So everyone kind of has to agree on the specifics of the HTML language. The specs for HTML5 aren't finalized yet but some of the more advanced browsers are already supporting most of HTML5 already. There is however a big argument going on surrounding HTML5 audio and video.

At the end of the day HTML5 will have to be open, because the web needs to be open. Imagine if you had to pay $5000 a month to use Google, and that money wasn't even to pay Google, it went to some licence holder who owned use of the letter E... That would be terrible and there'd be no innovation on the web. There'd have been no Facebook or WikiPedia, and no DearDrum.org.

What exactly is this HTML5 argument about?

Up until now HTML has not had any built in support for audio or video. If you wanted to play audio or video on the web you had to use a plugin like Adobe Flash Player. Which is fine, but Adobe is a profit motivated company and the web is an open place, so in the interest of choice and freedom the new version of HTML, HTML5 does have built in audio and video support.

Now the standards body that decides on what HTML5 will be is called W3C. Unfortunately the W3C is dominated by massive corporations who tend to dictate the standards in favour of their profit margin instead of what's best for an open, innovative web, and what's best for all of us. Up until now there hasn't really been much to debate over and it's been a long time since HTML4 came out anyway. Up until now Internet Explorer had majority market share and deliberately didn't follow the standards so web developers would have to focus on supporting IE's defunked and broken interpretation of HTML4. IE's massive market share was purely the result of being packaged with Windows. Microsoft has been sued over this anti-competitive practice because it directly hurt the web for so many years. During this time the other web browsers pushed to become faster and add amazing features to try gain as much market share as possible. It was IE vs. the world and Mozilla was their biggest rival with Firefox. If it wasn't for Firefox we'd all be eating dirt and living in shacks right now in a world where an open DearDrum.org could never even be conceived of.

The problem with HTML5 audio/video support is that everyone needs to agree on an audio and video format; in the same way .txt is a text format and .jpg is an image format. The issue is licensing. There happen to be some really great audio and video formats out there that are open source, meaning they can be freely used and improved upon by anyone. There also happen to be a lot of big faceless corporations in the W3C, see a list here, some of whom own part of the licensing rights to a particular format known as H.264.

When it comes to web browsers you have two sides of the argument. Those for an open web, and those whom want to charge everyone obscene amounts of money to use H.264. Currently the H.264 license allows people to use it. This free use has been extended to 2016 for the purposes of convincing non owners in the W3C - and the greater public, that it's free. After 2016 and quite frankly with the right high priced law firm any old time, that could expire and everyone would suddenly be charged $50 a day to watch youtube videos. Or $5000 a year to upload YouTube videos. If H.264 becomes the standard it would be a twisted joke and we would all be royally screwed.

Microsoft and Apple both own part of the H.264 licensing rights. So they've chosen only to support that format. They could easily support both H.264 and WebM(the open, free format), but they don't because they're hoping that they can prolong the debate long enough that developers will have to support H.264 to reach the majority of people who use those two browsers - both packaged and preinstalled with their respective operating systems.

Mozilla by it's very nature will always push for an open web, and Google's profit margin is directly tied to people's ability to generate content. Google went so far as to purchase the WebM format AND absolve the entire world from licensing fees should some obscure patent be discovered down the road and some sadistic person try capitalize on it. To Google it's a business expense, but it happened and it benefits everyone.

The WebM format is a container format, which uses VP8 for video, and OGG Vorbis for audio. For DearDrum.org we decided to use OGG Vorbis as our audio format.

Wow that was a lot to take in, so why does DearDrum.org use OGG Vorbis instead of MP3?

While most your music is probably in .mp3 format, it costs a lot of money to transcode audio into the .mp3 format due to licensing. And who knows when that price will go up. When creating DearDrum.org I didn't want to be at the mercy of some company, and we didn't want to charge people to download and use the DearDrum.org Desktop App. We went in favour of choice, freedom, and openness because we value those ideals; and we want the web to remain an innovative grounds for inspiring new ideas.

I was getting this weird error whenever switching from a given state to it's parent state in a Flex 3.5 based project.

RangeError: Error #2006: The supplied index is out of bounds.
	at flash.display::DisplayObjectContainer/addChildAt()
	at mx.core::Container/addChildAt()
	at mx.effects::EffectManager$/removedEffectHandler()
	at Function/http://adobe.com/AS3/2006/builtin::apply()
	at mx.core::UIComponent/callLaterDispatcher2()
	at mx.core::UIComponent/callLaterDispatcher()

It threw me for a minute because I hadn't made any changes to effects since I last tested the application and I couldn't see any connection between the code I had just written and any effects in the app. But after hunting around I found the culprit. There's a set of components in a Canvas that gets removed when moving to the parent state. What I had done was separate those components into two Canvases(Canvi?). For whatever crazy reason the new second Canvas can't have a RemoveEffect. The code works fine if just the first Canvas has it, but if both or just the second Canvas has it then it throws that error.

side note: the reason it took me a while to find the source of the error was because I copy/pasted the canvas declaration only changing the id, and I forgot that there was a removedEffect associated with it.

But wait there's more. The reason I split the components into two distinct Canvases was so I could position one below and the other on top of a third major component in z-space. The solution was to add the first Canvas as a "firstChild" and the second Canvas as a "lastChild". That it seems was the problem. In mxml when changing states you apparently can't add a firstChild before adding a lastChild. so I copy and pasted the first Canvas below the second one, so that all the lastChild additions occurred before all the firstChild additions and voila, presto, it works.

The reason is that when you move from a state back to its parent state it follows the order in which you add components in the state declaration to remove them. If the first component you add is added as a firstChild then that get's removed first changing the indexes and number of children of the parent container. I guess the underlying state changing function already calculated what the lastChild index was, so when trying to remove a Child with the pre-calculated index of lastChild it triggered an index out of bounds error.

In Illustrator CS4 it was really easy to make Flex Skins. You just go to File -> Scripts -> Flex Skins -> Create Flex 3 Skin, choose the components you want to skin - optionally give it a style class name, style it, use the same menu to export for Flex, use the Flex Builder skin import feature which creates or adds to your CSS file and blah blah blah. If you want me to do a tutorial on that just comment and ask.

In Illustrator CS5 they've updated the way registration points work. Flex 3(halo) skins require that the registration points be in the top left of the symbol. Illustrator CS5 defaults to a center registration point, so when you open your CS4 Illustrator skin file in CS5, it updates the registration point mechanism and defaults all your registration points to the center. Don't hulk-smash your computer just yet.

Another key difference with CS5 is while you get finer registration point control, it takes more work to move the registration point after the symbol is created. Say you've opened your CS4 created Flex 3 skin in CS5 and your registration points have been centered. There are a bunch of ways to edit the symbol. You could double click on the the symbol instance, or the symbol in the symbol pane, or click Edit Symbol at the top. Once editing the symbol, you'd need to drag your symbol around - make sure you get all the layers - positioning it rather than the registration point and don't forget to move the 9-slice guides. This process get's messy fast, it's time consuming, and it'll be hard to get the registration point and guides exactly where you want/need them. It's aggravating that there isn't a faster way to do it, and that in converting the file to work with CS5 it doesn't keep the registration point locations. So if you know a better faster way let me know. Until then here's the fastest way I've found to move all your registration points back to the top left.

1. First Save as your skin file, you can use the same filename but will get a dialog to save it as a CS5 compatible file
2. Click on the symbol instance, ie: the Up skin for a button, make sure you've got it selected on the artboard
3. Click on the Symbol Options button in the Symbol pane
4. Copy the name to the clipboard (ctrl/option + c)
5. Click Cancel
6. Click the Break Link button in the Symbol pane
7. Make sure the correct symbol is still selected in the Symbol pane, the selection may have jumped to the top left symbol in the list
8. Click on the Delete Symbol button in the Symbol pane
9. Delete the symbol, if it tells you there are other instances then take special care and double check that the correct symbol is selected; due to the nature of a flex 3 skin there should only be one instance of each symbol. It's not impossible to have multiple instances, but you would know if you created them.
10. Click on the New Symbol button in the Symbol pane
11. Paste the name you have in the clipboard (ctrl/option + v)
12. Select the top left corner for the registration point
13. Tick the box for Enable Guides for 9-Slice Scaling
14. Click Ok, and repeat for every other symbol
15. Now you can save, backup with DropBox, export as a Flex 3 skin, and finally it's time...
16. Hulk-SMASH!!! SMASH! this really should have been automated in the import mechanism.. right?

I'm currently migrating DearDrum.org Desktop to flex 4. Using an embedded font for the main navigation buttons; which are used to switch between states. When you're in a specific state the nav button for that state switches to a "selected button" skin which is just a copy of the regular skin with a few colours changed. The reason for doing that instead of just disabling each nav button in its given state is so they stay interactive, and are used when in the state to refresh/reload the state.

This worked fine but now in it's spark implementation when moving between random states the button label if it contains a single space will occasionally jump around - providing you've rolled over the button before changing state. It would take a boring while to explain it in more detail so I just recorded the behaviour. Best watched in full screen.

I'm getting used to Flash Builder 4, man is it fast. I came across this plugin by Lee Brimlow, it's SnipTreeView adapted to work with .mxml files and in FB4. Just download it from his blog and add it to the plugins folder, then restart. There's a quick video how to, highly recommended.

Flash Snippets [http://theflashblog.com/?p=1494]

You probably found this because you're trying to make a socket connection from Flex/Flash and getting the following error:

SecurityError: Error #2123: Security sandbox violation:

Adobe went through a number of phases making the rules for serving and checking Policyfiles stricter. There are different security sandboxes. If you publish your flex/flash application on domain.com, and the application attempts to load content from domain2.com, it will look for a Cross Domain Policy File at domain2.com/crossdomain.xml to get permission. It does this automatically, however you could specify the location of the Cross Domain Policy File in your flex application using the following method:

Security.loadPolicyFile("http://domain.com/remote_content/crossdomain.xml")

A Cross Domain Policy File only has authority to grant access to content below it in the folder hierarchy. So a policy file in /remote_content/ can't grant access to content in the root folder, and in addition a Policy File at the domain root can override any other policy file. It has maximal authority. Subdomains are considered separate domains - which as a side note most search engines see subdomains that way too.

Now that's Cross Domain Policy Files, In general Adobe Air applications operate in one of the local system sandboxes and has thus have access to content on any domain. This post is about Socket Policy Files. When you access regular web content you're generally connecting to your server on port 80 and being served content by Apache or whatever web server you happen to be running. When you do this you're using http protocols under the hood and never have to deal directly with that crazy stuff. If you want to make a raw socket connection to your server you will need to serve up a Socket Policy File on a specific port.

First I just want to stress the difference between a Cross Domain Policy File and a Socket Policy File. For some reason my dyslexia and the ton of misleading, vague, and now out of date and incorrect information I kept thinking they were the same thing. Second there is no way as far as I'm aware to serve a Socket Policy File with Apache.

The default port for flex/flash to search for a socket policy file on port 843. There are several places on the web that talk about being able to connect to higher port numbers without a Socket Policy File, well that doesn't seem to be the case anymore. Just assume that any raw socket connection from a flex/flash client requires a Socket Policy File.

You can serve the Socket Policy File from the port you're connecting to, but this is tricky considering the manner in which Flex/Flash goes about loading the Socket Policy File and rewriting the service to serve this up, especially if you're using server software built by someone else, means it's just better to keep the Socket Policy File Server as a separate always running entity on the system.

Now in the simplest implementations you need a process either written in python, perl, c++, php cli, or whatever. It needs to be listening on port 843. It has to wait for - very specifically - the following string<policy-file-request/> followed by a NULL byte. Upon receiving that it needs to serve up the policy file which needs to at least have allow-access-from domain set to *, and to-ports set to *. You should use the links at the end of this post to familiarize yourself with the differences between and all options you can specify in Policy Files. It's easiest to keep the Policy File as an actual file, instead of adding the text of the file to your custom server code. And that's it!, now you can go on with a better idea of what information out there is out of date or not.

Here are some important links to help you on your journey:

Adobe on setting up a Socket Policy File Server

Adobe on Policy File changes for flash 9 and 10

Adobe on the structure of Policy Files

An intro to Sockets

Working PHP Cli Socket Policy File Server

I needed a function to strip out html tags from a text input, but still let me specify allowable tags.

Instead of spending time figuring out the regular expressions needed to pull it off and becoming a better programmer, I figured why repeat work someone else has probably already done.. I mean I could be a busy man. Anyway I found this great function on Flexer.info [link]. But after trying it out I noticed that the one tag I really really wanted to be parsed out iframe wasn't. It seems because I had specified i as an allowable tag it was also accepting iframe.

So with all due respect to Andrei, below is the revised function with the security hole patched.

All I changed was near the bottom where it determines if it's an allowable tag or not the reg exp was

<\/?" + tagsToKeep[j] + "[^<>]*?>

which allowed any character to follow the allowed tag as long as it wasn't a nested tag, which included frame following i. This will also support self closing tags.

 
// strips htmltags
// @param html - string to parse
// @param tags - tags to ignore
public static function stripHtmlTags(html:String, tags:String = ""):String
{
    var tagsToBeKept:Array = new Array();
    if (tags.length > 0)
        tagsToBeKept = tags.split(new RegExp("\\s*,\\s*"));

    var tagsToKeep:Array = new Array();
    for (var i:int = 0; i < tagsToBeKept.length; i++)
    {
        if (tagsToBeKept[i] != null && tagsToBeKept[i] != "")
            tagsToKeep.push(tagsToBeKept[i]);
    }

    var toBeRemoved:Array = new Array();
    var tagRegExp:RegExp = new RegExp("<([^>\\s]+)(\\s[^>]+)*>", "g");

    var foundedStrings:Array = html.match(tagRegExp);
    for (i = 0; i < foundedStrings.length; i++)
    {
        var tagFlag:Boolean = false;
        if (tagsToKeep != null)
        {
            for (var j:int = 0; j < tagsToKeep.length; j++)
            {
                var tmpRegExp:RegExp = new RegExp("<\/?" + tagsToKeep[j] + " ?/?>", "i");
                var tmpStr:String = foundedStrings[i] as String;
                if (tmpStr.search(tmpRegExp) != -1)
                    tagFlag = true;
            }
        }
        if (!tagFlag)
            toBeRemoved.push(foundedStrings[i]);
    }
    for (i = 0; i < toBeRemoved.length; i++)
    {
        var tmpRE:RegExp = new RegExp("([\+\*\$\/])","g");
        var tmpRemRE:RegExp = new RegExp((toBeRemoved[i] as String).replace(tmpRE, "\\$1"),"g");
        html = html.replace(tmpRemRE, "");
    }
    return html;
}

I just ran into some weird behaviour involving a for loop, some variables, and a bunch ofanonymous functions. This is in Actionscript 3.0 using Flex SDK 3.4 and current Google Maps API(as of the date of this post&mdash I read somewhere they're rolling out a new version although it's not really relevant for this post)

So below I have a function that loops through the xml result of an http service, for each item in the result it creates a marker on a map and gives that marker a click event. When you click on a given marker I want a window to pop up with the name and description of that location, so the following is the code you'd expect to write. For simplicity sake you can keep an eye on the i:int variable which will help clarify the issue.

 
//trace(i) will always output total items in the xml result
private function processResult(event:ResultEvent):void {

  var total:int = event.result.data.item.length;

  for (var i:int = 0; i<total; i++) {
    var item:Object = event.result.data.item[i];
    //this will create the marker object
    var marker = new Marker(new LatLng(item.lat, item.lng), new MarkerOptions({fillStyle: {color: 0xEE9C21}, radius: 7, tooltip: item.name}));

    marker.addEventListener(MapMouseEvent.CLICK, function():void {
      //this will open an info window when the marker is clicked
      map.openInfoWindow(map.getCenter(), new InfoWindowOptions({hasTail: true, tailHeight: 5, hasShadow: true, title:item.name, contentHTML:item.description}));
      trace(i);
    	});
  map.addOverlay(marker);
  }
}

Now what you'll find with the above code is that no matter which placemark you click on, they will all show the same name and description. Say that there are 5 items in the xml result, tracing i will output the number 5.

If you're new to programming, yes i will be 0 during the for loop's first run. Yes having 5 items and starting at 0 means it should be 4 for the last run, but the value of i increments one last time to make the i<totalcondition false before it exits the loop, so essentially it uses the final value of i for all the placemarks which is 5.

I can't see any reason why this should be happening other than language or framework immaturity.

The solution; or I should say the easiest, quickest solution, is to create an external function for marker creation that is called by the for loop, which for clarity's sake will only contain the part that's required to explain the concept and make it work ie: adding an event listener to the marker, but in the real world should have all the code necessary for creating a marker - that way you'd have an independent marker creation function you could call from anywhere in the application. Below is the working code:

 
//trace(i) will output the correct index depending on the placemark clicked
private function processResult(event:ResultEvent):void {

  var total:int = event.result.data.item.length;

  for (var i:int = 0; i<total; i++) {

    var item:Object = event.result.data.item[i];
    var marker = new Marker(new LatLng(item.lat, item.lng), new MarkerOptions({fillStyle: {color: 0xEE9C21}, radius: 7, tooltip: item.name}));

    //call external function and pass variables to it
    placeMarkerAddClickEventListener(marker, item.name, item.description);
    map.addOverlay(marker);
  }
}

//external function
private function placeMarkerAddClickEventListener(marker:Marker, name:String, description:String):void {

  marker.addEventListener(MapMouseEvent.CLICK, function():void {

    map.openInfoWindow(map.getCenter(), new InfoWindowOptions({hasTail: true, tailHeight: 5, hasShadow: true, title:name, contentHTML:description}));
    });
}

There are a number of situations where you'd want to grab the urls from a block of text. For example you may be loading in some external or dynamic data and want to make the links clickable, or change their colour. Regular expressions are used in a multitude of languages; they define patterns that can be matched against a string, thus certain key characters used in defining a RegExp have to be escaped so they are interpreted as special characters like \d matches any digit. In Actionscript, you can define a RegExp by either wrapping it in double quotes "", or forward slashes//. In each case you would have to escape any characters that match the wrapping in addition to the characters that need to be escaped in the actual pattern. Further more Actionscript requires you to separate out the last part of the regular expression, called flags, and insert it as the second argument when defining a new RegExp object.

Here's how you find a url in text or html:

var str:String = new String('This is a url www.fightskillz.com, and this is another one: <a href="http://chalk-it-out.com">Chalk It Out</a>');
var reg:RegExp = new RegExp("\\b(((https?)://)|(www.))([a-z0-9-_.&amp;=#/]+)", 'i');
var result:Object = reg.exec(str);
trace(result[0]);

First off if you're new to Flex/Actionscript you have to copy and paste this into a function and the variables created will only be accessable within that function while it's running as they are created and destroyed as it runs. If you wanted more permanence you'd just define the variables outside the function.

Now Let's break it down. The first \ is used as a character escape for Actionscript. In actionscript when defining a string within double quotes you'd escape a double that's part of the string like this "Look at this double quote \"". \b searches for a word boundary ie: a whitespace, or the beginning or end of a string.The next part ((https?)://)|(www.))defines the first part of a 'word' that passes for a url. It's made up of two substrings, the first looks for http, the question mark deems the preceding character optional, so it'll match to https as well. It then looks to see if the protocol is followed by ://. The |character means OR, so if there is no protocol specified, it checks for (www.). Next we have [a-z0-9-_.&=#/] which is a list of characters a to z, 0 to 9, and various others commonly found in urls. This is followed by a + which instructs the pattern to match the preceding list of characters until it can't anymore. It can't anymore when it reaches whitespace, a single or double quote, brackets, or any other non-url character. Finally the RegExp flag i informs the pattern to be case insensitive.

reg.exec(str); executes the pattern on the specified string and returns the results as an array. Since the example is only designed to match the first url it encounters and then stop, the array will only have one result. The method reg.exec(str) is interchangable withstr.match(reg)

Fonts are the creative content of the font designer or foundry, so if you don't have a collection of fonts you've paid for, and aren't planning on purchasing some, you should stick to free fonts. A good place to start is Google, you'll find plenty of foundries who make a few free fonts, and several sites like [http://www.fonts.com/]. You may choose to embed a particular font that came with your operating system for the sake of cross-platform uniformity as well, however you still need to make sure that it is either an OTF (Open Type Font) or TTF (True Type Font), as Flex works with these file types. There are ways to convert postscript and other font formats to OTF/TTF but it's tedious and you're better off finding a different compatible font

You can also load fonts as an external resource in your apps similar to just calling a system font, however embedding them is the way to go. Embedded fonts can be anti-aliased, take part in effects, and are handled as a true asset and thus with a higher regard in your application.

There are a number of ways to embed fonts in your Flex applications. If you'reembedding a font that's active in your system you can specify the system name as in the following example:

@font-face {
src: local("Arial");
fontFamily: MyFont;
}

Likely however you'll not want to keep a whole bunch of fonts active or have to think about activating your project fonts every time you compile, in which case you can copy the font file to your project directory. In the example below the Arial font is in a 'fonts' sub-directory of my project:

@font-face {
src: url("/fonts/Arial.ttf");
fontFamily: MyFont;
}

Note: If you use spaces in the font family as in "My Font" you'll run into an issue where the font appears in Design View but isn't compiled with the app.

There are other options that can be specified to customize your font-face:

fontStyle: normal | italic | oblique;
fontWeight: normal | bold | heavy;
advancedAntiAliasing: true | false;

These style declarations are placed within the mxml <mx:Style> tag. The above code uses CSS, which is best for styling and skinning your application, but if you prefer you can do the same thing in actionscript.

For more information on how to, and why you should/shouldn't embed a font in your applications refer to [http://livedocs.adobe.com...fonts_09.html]

Keep in mind that font files can be quite large, in the 5-12MB+ range and that size will be added to the weight of your application. It's best to use lighter fonts when creating online apps, in which case try to find one's under 200KB.