Immersive Video From Haiti

January 28th, 2010

I don’t often use my blog to share content, I find mediums such as Twitter or Facebook serve that purpose better, but I saw this today and it struck me as particularly awesome so I wanted to help generate some exposure.
Immersive Media, a North American based digital agency, have created a video stream, which can be manipulated on the fly. As you travel through Haiti, you can turn the camera to look in any direction you please.

While this has been possible for a while, you don’t see it often, and I would love to see it more.

More videos from Haiti at
http://www.immersivemedia.com/haiti/

You can donate to the Haiti relief effort at
http://donate-haiti.org/

Twitter / RazPeel

Flash Tracer For Firefox 3.5

October 21st, 2009

I just installed Flash Tracer on the newest version of Firefox (currently 3.5.3), and I wanted to shed some light on the steps you will need to take to get it working.

The first think you will notice is that Alessandro Crugnola, the talented creator of this add-on, no longer continues it’s development, so if you visit it’s page on the Mozilla Add-ons website (https://addons.mozilla.org/en-US/firefox/addon/3469), it does not give you the option to install it, instead telling you: “This add-on is for older versions of Firefox”. You can still install it by loading the add-ons .xpi file though, which is located on its home page http://www.sephiroth.it/firefox/flashtracer/ (The link is here if your feeling lazy).

Next you will need to tell Firefox that you are comfortable using out of date add-ons. Open a new browser window or tab, and type about:config into the address bar as shown below.

Navigation Bar Preview

After promising Mozilla that you will be careful, you will see a list of the Firefox configuration details. Right click anywhere on this page and create a new Boolean.

Inserting New Boolean Example

Give your new Boolean the following name: extensions.checkCompatability.

Enter Boolean Name Preview

And finally, set it’s value to false.

Set Boolean Value Example

Restart Firefox and your add-on should now load correctly.
Click > Tools > Flash Tracer to open the Flash Log and you should see something like this:

Flash Tracer Running In Firefox 3.5

If you don’t see the text inside it, you might have to configure Flash Tracer to read the correct file. You can do this by opening the preferences panel, (click the small wrench icon in the bottom right hand corner of the window) and browsing to the correct location. If you have Flash Player 9 forwards, It’s probably in one of these locations:

  • Osx: {user}\Library\Preferences\Macromedia\Flash Player\Logs\flashlog.txt
  • Windows XP: C:\Documents and Settings\{user}\Application Data\Macromedia\Flash Player\Logs\flashlog.txt.
  • Windows Vista: C:\Users\{user}\AppData\Roaming\Macromedia\Flash Player\Logs\flashlog.txt

If you can’t find the file at the any of the above locations, or it’s not picking up trace statements when you know it should be, I’d suggest reading through this fantastic post by Mark Walters on correctly setting up Flash Player’s error reporting.

Random Short Story
A year or so back I was playing a Flash game on NewGrounds and hadn’t shut down the Mac Console (which was still reading through the error log), and I noticed the following message: “need to implement score saving still, sorry!!”.
It’s since been fixed, but I thought it was hilarious at the time, and as such I’ve tried to make a point of leaving funny messages hidden inside anything I’m not being paid to create. I thoroughly encourage you to do the same!

trace(" Hope This Helps! :] ");
Twitter / RazPeel

XML Directory Lists (With Php)

October 15th, 2009

Here is a snippet of php code that when run, will produce an XML markup of the images contained within a directory.
This is great is you are building a flash sideshow or similar and want to remove the dependency that comes with hand coding XML files.

I added a bunch of comments, feel free to let me know if anything needs explaining in greater detail.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<?php

function DirDisplay($LocDir)
{
    // list of valid image extensions to look for
    $valid_ext[0] = "jpg";
    $valid_ext[1] = "png";
    $valid_ext[2] = "gif";
    $valid_ext[3] = "bmp";
   
    // init XML output
    print '<?xml version="1.0" encoding="UTF-8"?>'."\n";
    print "<Images>"."\n";
   
    // open directory
    $TrackDir=opendir($LocDir);
   
    // loop through files
    while ($file = readdir($TrackDir)) {
       
        // check for non-parent file names
        if (!($file == "." || $file == ".."))
        {
            // reads file extension
            $ext = substr(strrchr($file, '.'), 1);
           
            // makes sure file has allowed extension
            if (in_array($ext,$valid_ext))
            {
                // adds file to XML output
                print "\t".'<Image>';
                print '<![CDATA['.$file.']]>';
                print '</Image>'."\n";
            }
        }
    }
   
    // end XML output
    print "</Images>"."\n";
   
    // close open directory
    closedir($TrackDir);
    return;
}

@ DirDisplay(".");

?>

And here is an example output. I’ll post up a demo using this xml markup in a future post.

1
2
3
4
5
6
7
<?xml version="1.0" encoding="UTF-8"?>
<Images>
    <Image><![CDATA[Image_01.jpg]]></Image>
    <Image><![CDATA[Image_02.jpg]]></Image>
    <Image><![CDATA[Image_03.jpg]]></Image>
    <Image><![CDATA[Image_04.jpg]]></Image>
</Images>

Here’s a link to download the file, hope it helps!

Twitter / RazPeel

Flash & Flex IRC Channels on Freenode.

August 12th, 2009

I’ve spend a good amount of time trying to give back to the community of late and wanted to share #Flash and #Flex, IRC chat channels on the Freenode network. They have been an invaluable resource to me in my time using the Flash Platform, I’ve really not seen a more helpful bunch! Once in a while I see a few big names like Ryan Stewart from Adobe offering to pass on feedback from developers to the people that need to hear it, which is awesome!

Hope to see some new folks on the network, my handle is RazPeel for anyone wanting to look me up.

Use of these channels will be obvious to most, but for those not familiar with IRC, here is the ten second rundown.

  1. You will need an IRC client. There’s millions, a popular one is mIRC. You can download it at this link.
  2. When you have it installed and running, use the command:
    /server irc.freenode.net
  3. Once connected, two more commands:
    /join #flash and finally /join #flex

Alternatively you can always use a web based chat client if you like, such as the one at this link.

Twitter / RazPeel

Simple Flash Countdowns And Timers

July 27th, 2009

I get asked for help doing different variations of Countdowns and Timers all the time, hopefully this post will shed some light on things.

I’ll try cover and explain the four variations I get asked about the most but between them you should be able to create any of the other variations with ease.

1) Simple Countdown In Seconds

1
2
3
4
5
6
7
8
9
var countDownTime:Number = 10;
var startTimeUTC:Number = new Date().getTime() / 1000;
addEventListener(Event.ENTER_FRAME, updateTimer);
function updateTimer (e:Event) :void
{
    var secondsUTC:Number = new Date().getTime() / 1000;
    var timeRemaining:Number =
        ((startTimeUTC + countDownTime) - secondsUTC);
}

Pretty simple code, all we are doing is setting a start time and comparing the current time to it when the update function runs.
Note: The above snippet doesn’t actually do anything with the counter or perform any task when the counter reaches zero. I’m rather just showing how to calculate time, implementation of the code is up to you!

Here is a sample output:

Get Adobe Flash player

Lets take a closer look at the code now.

Line 2 defines startTimeUTC, which is populated by creating a new Date() object.
Note: The Date() object defaults to the current date and time when instantiated without any parameters, so we can immediately call it’s getTime() method and store the result.
We should now have a funny looking number like: 1248677922937, which is actually a UTC representation of the present time in milliseconds. On this occasion however, we just need the seconds, so we would divide that number by 1000, (1 second is 1000 milliseconds).
Now every time the update function runs, we simply replicate this action to create a new Date(), and compare it to the Date() we stored in startTimeUTC.

2) Simple Count Up In Seconds

Measuring time expired is really just the above backwards.

1
2
3
4
5
6
7
8
var startTimeUTC:Number = new Date().getTime();
this.addEventListener(Event.ENTER_FRAME, traceOutput);
function traceOutput (e:Event) :void
{
    var newTimeUTC:Number = new Date().getTime();
    var timeExpired:Number =
        (Math.floor(newTimeUTC - startTimeUTC) / 1000);
}

Example:

Get Adobe Flash player

3) Countdown To Date

This variation builds on the first and second countdown examples but brings more to the sandbox to play with, lets jump straight into the code.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var futureTimeUTC:Number = new Date(2010, 0).getTime();
this.addEventListener(Event.ENTER_FRAME, updateCounter);
function updateCounter (e:Event) :void
{
    var newTimeUTC:Number = new Date().getTime();
    var timeRemainingUTC:Number =
        futureTimeUTC - newTimeUTC;
    var clockSecondsPast:Number =
        Math.floor((timeRemainingUTC / 1000) % 60);
    var clockMinutesPast:Number =
        Math.floor((timeRemainingUTC / 60000) % 60);
    var clockHoursPast:Number =
        Math.floor((timeRemainingUTC / 3600000) % 24);
    var clockDaysPast:Number =
        Math.floor((timeRemainingUTC / 86400000));
}

This time we have manually set the Date() to January 1st, 2010 (The first month is 0, not 1). The time will default to 00:00am since it was not set, but this is what we want, new years!!

Once we have calculated timeRemaining in the update function, we can parse the information we need from it. Remember it is currently a UTC format number, so think of it as the number of milliseconds, with that in mind it isn’t hard to find what we need.
Note: The % operator is modulus, it returns the remainder of a number.

  • Seconds = (UTC Value / 1000 Milliseconds) Mod 60
  • Minutes = (UTC Value / (1000 * 60 Seconds)) Mod 60
  • Hours = (UTC Value / (1000 * 60 * 60 Minutes)) Mod 24
  • Days = (UTC Value / (1000 * 60 * 60 * 24 Hours))

If you didn’t catch it, we are just dividing by the amount of Milliseconds in each. Here is an example:

Get Adobe Flash player

4) Counter From Past Date

The last variation is really just the previous example backwards, for when you need to count forward from a date in the past.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var startTimeUTC:Number =
    new Date(2009, 06, 26).getTime();
this.addEventListener(Event.ENTER_FRAME, updateCounter);
function updateCounter (e:Event) :void
{
    var newTimeUTC:Number = new Date().getTime();
    var timeExpiredUTC:Number =
        newTimeUTC - startTimeUTC;
    var clockSecondsExpired:Number =
        Math.floor((timeExpiredUTC / 1000) % 60);
    var clockMinutesExpired:Number =
        Math.floor((timeExpiredUTC / 60000) % 60);
    var clockHoursExpired:Number =
        Math.floor((timeExpiredUTC / 3600000) % 24);
    var clockDaysExpired:Number =
        Math.floor((timeExpiredUTC / 86400000));
}

And an example to match:

Get Adobe Flash player

Twitter / RazPeel

Toronto Dead Drop Explained

April 28th, 2009

I thought I’d give my own story of the Toronto Dead Drop as It was really interesting to read Karl Freeman’s take on the London drop after he had successfully retrieved it.

I’d always read about other dead drops and been waiting to see Lee come to Toronto for a while, unfortunately I happened to be at the FITC job fair earlier on that day and ran into some friends I hadn’t seen in a while. Long story short I got home at 4am and saw Lee’s post saying it had been planted.

Clue 1
I immediately looked through the page source to check for hidden links, I found none so proceeded to tell my room mate Adam, who is a huge gamer and generally good at puzzle solving about the dead drop. Embarrassingly, this part took us the longest to find, I tried looking at the possibility there was something hidden within the reCAPTCHA validation plug in to no avail, then made sure all the links on the page (including the sidebar) led to where they were suppose to. Finally i searched for embedded information within the images on the page, and then while trying to find patterns within the text itself, it hit me that it was meant literally.

Typing clues in the search form led to this page:

Ste Page

Clue 2
If you noticed the title of the page are gps co-ordinates. I plugged those into google to get:

Google Gps Location

Adam and I headed to the location, which wasn’t really close to where we live, but we were so excited that it didn’t matter! We got there around 7:30am to find a sign, which i don’t have a picture for, but Lee thankfully took one, here is the image from his blog:

Sign With Ste Number

Clue 3
Not having mobile internet was horrible, but we had our laptops and we wrote everything on the sign down and quickly headed over to the Hilton where FITC was being hosted at, which wasn’t far at all actually.
After connecting to the FITC wifi (which was horrible the whole conference btw, thanks Hilton!), plugging in the numbers at the bottom of the sign into the page led us to a new page, with a flash file that looked like this:

Tones Image

I ripped the audio from the flash file (click to download) which was obviously a phone dialing sequence. We tried googling DTMF translators online but didn’t find any fast enough and I grew inpatient and just loaded it up in Audacity.

Audacity Tones

By comparing the levels of sound on the spectrum view and matching a few tones up to the sound of tones on my cellphone, we quickly found a phone number – 1-866-989-3451.

Clue 4
Calling the phone was a frightening ordeal in itself, it was a creepy voice telling us numbers, listen to the recording here. Sounded like the girl from the ring!

We reached a consensus on what the number was after two or three dials, but it was only 10 digits and there were 11 boxes which six switches in each. I noticed how clicking next on the page passed every containers on/off state through as a variable and set to work to try find a way to make a 10 digit number containing numbers 1-9 fit in 11 spaces containing 1-6. I tried changing the base number to Octal, Hex, and a few different numbering systems to see the variations but after about 10-15m we found out it was braille. We were still missing a digit however, but after I suggested we look up the annotation for a full stop (period) in braille we found the ‘number following’ sign which we inserted into the first box of the page along with the rest of the number.

Taken from wikipedia:
Wikipedia Braille

Clue 5
This took us to a new page with requested access to a webcamera, the webcamera had this logo besides it.

Fitc Logo

It was clearly an augmented reality application, but we were still in the Hilton at the time and heading home to print this image would have taken a long time. A few minutes later we found ourselves in the business center at the hotel printing the image. We printed it out once and nothing happened, so then watched the first 20 seconds of Lee’s tutorial on augmented reality that I remember he posted a little while ago.

The square he had been using to trigger the reaction from the application in the tutorial had a border and was inverted from this logo, so I quickly made a border for this image, inverted it and tried printing it again. I was convinced this would work, but it didn’t. I blamed this on the shoddy quality of the printers at the Hilton, whom liked printing out grey rather than black.

All was not lost, decompiling this file lead me to see this line of code:

1
2
3
var _loc_2:* = new MaterialsList(
    {all:new BitmapFileMaterial("mat.png", true)}
    );

This was loading an external texture (mat.png). So i navigated to http://leebrimelow.com/mat.png and found this image:

Final Gps

Clue 6
We set of to find the package and arrived on scene around 9:20am, we looked around the bushes where it was suppose to be for a good half hour i think, because I remember Karl saying he looked for a good period of time before he found it in the bushes for the London drop.

We felt defeated when we couldn’t find anything but called it quits and headed to get some lunch. We knew it was a long shot when we started out at 4am and as we had expected, later on in the day we found out that just 2 hours earlier than us somebody had already claimed it! Great job to who ever found it.

Next time hopefully I’ll have a portable device with internet connectivity. That would be majorly helpful these days in general. I hate not having twitter or email while I’m on the move, I also like having a roof over my head though so I think I have to put money towards rent first and foremost!

Thanks for doing these Lee, It was a lot of fun! See you at your Byte Array presentation in a few hours!

-Raz

Twitter / RazPeel
About

Name: Raz Peel

Raz Peel 2009

Employer: Sapient
Occupation: Web Developer
Contact: raz@wizardelraz.com