The Generator

Text for QR Code:

The Overview

QR codes are basically just bar codes on steroids. They allow you to encode up to 4,296 characters in a format that can be read by most modern bar code scanning devices. More specifically, QR codes make it much simpler to direct smart phone users to your website (or anywhere else you want).

So why do you want to do this? Here’s a few reasons that range in practicality:

• Direct mobile phones to personally hosted mobile applications (no need for market fees)
• Direct users from physical storefronts or magazine articles to your website
• Leave encoded messages for mobile users
• To be super cool and trendy

The Code

Here’s the Google Chart API URL you hit in order to create your own QR code. Pop it into a browser and it will return your image. There are more optional criteria you can send, which are detailed in the . Be sure to change the sections highlighted in RED to the values that fit your needs.

Now let’s say you wanted to copy my website and have your own generator. It’s pretty simple. Here’s the tiny bit of HTML and javascript I used to make it happen:

<table>
  <tr>
    <td>
      <strong>Text for QR Code:</strong> 
      <form onsubmit="return false;">
        <input type="text" id="qrvalue" value="https://savagelook.com" style="width:250px;"/>
        <button onclick="document.getElementById('qrimg').src = 'http://chart.apis.google.com/chart?cht=qr&chs=150x150&chl=' + document.getElementById('qrvalue').value;">Encode</button>
      </form>
    </td>
    <td>
      <img id="qrimg" src="http://chart.apis.google.com/chart?cht=qr&chs=150x150&chl=https://savagelook.com"/>
    </td>
  </tr>
</table>

And here’s another version from Eric Harrison with no tables

<div style="padding:15px 50px;"> 
  <img id="qrimg" src="http://chart.apis.google.com/chart?cht=qr&chs=150x150&chl=https://savagelook.com" style="float:left;margin-right:25px;" /> 
  <form onsubmit="return false;"> 
    <input type="text" id="qrvalue" value="https://savagelook.com" style="width:60%;font-size:125%;" /><br /> 
    <input type="button" style="padding:5px;font-size:125%;margin-top:10px;" onclick="document.getElementById('qrimg').src = 'http://chart.apis.google.com/chart?cht=qr&chs=150x150&chl=' + document.getElementById('qrvalue').value;" value="Encode" /> 
  </form> 
  <br style="clear:both;" /> 
</div>

As you can see, its not rocket science, but it sure can add a little techie flare. Have fun and be sure to let me know if you add a QR coding to your geek repetoire!

→ Click here or the image above for the demo.
→ View the source code.
→ Download Source: cash.zip
NOTE: You’ll need to download away3dlite, , and to compile the code.

Inspired by the legendary Johnny Cash I decided to dive into a few AS3 development topics I haven’t gotten to yet to create a 3d equalizer and tribute to the Man in Black. Those topics, along with some other more familiar ones, include:

• Playing audio in Flash with Sound and SoundChannel
• Using the SoundMixer to generate values based on the audio
• Searching for images with the Google API via
• Creating a PHP proxy for beating Flash cross-domain security issues
• Using Away3dLite for speedy 3d visualization (I even get 15 FPS on my phone!)
• Using Prefab to export 3d models as native AS3 code for Away3d or Away3dLite.

This demo has a good bit more code than I usually post up.  It also uses a couple external libraries, namely away3dlite (3d rendering), (Google API), and (super useful AS3 utilities).  Rather than overwhelm you with mountains of tutorial-like rambling, instead I’ll leave this demo here to be enjoyed, make the source code available, and break down each of these topics into smaller tutorials/guides in the near future.

Sometimes your muse doesn’t need to be even slightly related to your field of creativity.  In fact, that can often make for the most interesting inspiration.