Major Callisto

A Twitter Follow Button for AS3 Flash

Major Callisto — Mon, 07 Nov 2011 03:52:18 +0000

Earlier this year, Twitter introduced Web Intents as an easy way to Tweet, Reply, Retweet, Favorite, and Follow. Web Intents are meant to be used with popups, which means I can easily adapt from my previous Tweet Button for Flash technique: add a javascript popup to the page, set some variables and call the popup from Flash.

Twitter introduced a Follow Button that behaves similarly to the Tweet Button, but their claims that it, “uses the same implementation model”, is the tiniest bit bullshit. The Follow Button relies on Javascript in ways that we can’t easily use with Flash.

Our Web Intent Follow Button opens a popup window with a Mini-profile page, as pictured above. The Web Intent Follow Button uses either one of the following two values:

screen_name is the name of the twitter user you’d like to follow. e.g. @blacksanta_69
user_id is the id of the twitter user you’d like to follow. I had a hard time finding my twitter id so I’m using screen_name instead.

Like before, you drop the ‘www’ when using Web Intents.

1. The Popup Javascript function needs to be added to your html page in the part of the page. The width and height are hardcoded in the javascript to reflect the Twitter recommended dimensions of a Tweet window. However, this can easily be passed as a parameter from Flash if you want.

function openTweetWin (url) {

window.open(url, "tweetThis", "width=550,height=450,toolbar=no,scrollbars=no");

}

2. Create a button in flash with the instance name btn_follow and add the following code. It’s worth noting that this works everywhere except within the Flash IDE, so test it on the html page

//Add an Event Listener for the button

btn_follow.addEventListener(MouseEvent.CLICK, clickFollow);

btn_follow.buttonMode = true;
function clickFollow(e:Event):void{
        //The path to the follow "intent" page

        var path:URLRequest = new URLRequest("https://twitter.com/intent/user");

        //using the GET method means you will use a QueryString to send the variables

        //twitter likes this. This is used as an alternate method if we don’t use

        //a javascript popup

        path.method = URLRequestMethod.GET;

        //The URLVariables class is a nice way to keep everything organised. There is the added bonus

        //that we can use these values if we GET instead of using the Javascript popup.

        var tweetVars = new URLVariables();

        tweetVars.screen_name = "blacksanta_69";

        //tweetVars.user_id = "";

        //Set the URLRequest to include the URLVariables

        path.data = tweetVars;

        //If Flash is okay with us using ExternalInterface

        if (ExternalInterface.available){

                try{

                        //We’re going to pass this as a string to javascript, so we have to

                        //"stringify" it instead of using the URLVariable + URLRequest approach

                        //I’m putting a dummy placeholder in the first position of the

                        //QueryString so that I can shuffle my variables around without

                        //worrying about who gets a ‘?’ instead of a ‘&’. It’s faster than

                        //writing a quick if statement, but commenting about it takes far more time ; )

                        path.url +="?d=0";

                        for (var each in tweetVars){

                                path.url += "&"+each+"="+tweetVars[each];

                        }

                        //Make a call to the openTweetWin Javascript function

                        //and pass it the ‘stringified’ version of the QueryString

                        ExternalInterface.call("openTweetWin", path.url);

                } catch (error:SecurityError){

                        //If it doesn’t work just open a damn window.

                        navigateToURL(path, "_blank");

                } catch (error:Error){

                        //If it doesn’t work just open a damn window.

                        navigateToURL(path, "_blank");

                }

        } else {

                //If it doesn’t work just open a damn window.

                navigateToURL(path, "_blank");

        }

}

Gives you:

Source FLA Here

In HTML

<a href="https://twitter.com/intent/user?d=0&screen_name=blacksanta_69" target="_blank">Follow</a>

Gives you:
Follow

Because there are so many easy to use features with Web Intents, the logical next step would be to build AS3 classes.

Camera-B-On TV-B-Gone

Major Callisto — Thu, 03 Nov 2011 05:55:46 +0000

I have created a Camera-B-On TV-B-Gone. This fairly simple mod allows me to use my TV-B-Gone as a camera remote for my Nikon D90. In fact, this will work as a shutter remote for a lot of Nikon cameras.

If you have a USBTinyISP you can easily make a Camera-B-On by upgrading your TV-B-Gone.

Download Source CameraBOn.zip

Why make a Camera-B-On out of a TV-B-Gone?

I’ve made camera remotes before using an arduino board and an IR LED, but there are issues with getting a good range and the form factor is a little bulky.

The Tv-B-Gone is compact, effective and comes built with the ability to have 2 states making it an attractive option. The Tv-B-Gone is about $10 cheaper than a brand name wireless release with the added bonus that you can fuck up TVs. Plus, the Tv-B-Gone was built to be a universal remote and it would be fairly easy to extend it to trigger many cameras. Right now my model only triggers Nikon cameras but it would be really easy to add others.

Unfortunately, most cameras need to be set to “remote” mode for this to work, so it’s not like you’re going to be triggering other people’s cameras – at least not to my knowledge. A guerrilla camera tool would be fantastic, but I don’t think it’s feasible.

1. Adding the Nikon code

The first step was determining the IR Code that would trigger my camera. When I built the arduino version of the shutter release, I used Lucky Larry’s arduino intervalometer code, which includes the timing I needed.

Armed with the timing information, I downloaded the source code and read Lady Ada’s notes on the TV-B-Gone.

The program on the TV-B-Gone microcontroller cycles through about 115 known TV “power” codes. Each signal code is a series of very fast flashes of infrared light generated by an IR LED on a remote. These patterns of on and off times are chosen to try to avoid triggering the wrong devices. A camera’s wireless shutter release remote operates the same way.

For the Nikon wireless shutter the times look like this, in microseconds:
2000 on, 27850 off,
390 on, 1580 off,
410 on, 3580 off,
400 on, 63200 off

This signal is sent twice every time the shutter is meant to be “released”.

With the TV-B-Gone, the TV codes have been compressed to fit as many as possible on the ATTINY85V chip. Fortunately, Lady Ada describes how this happens well enough for me to do the same conversion by hand:

I converted Lucky Larry’s times from microseconds to the appropriate unit by dividing by ten – I don’t think there is a name for that unit, but it’s the value used in the source code.

const uint16_t code_nikonD90Times[] PROGMEM = {
200, 2785,
39, 158,
41, 358,
40, 6320,
};
I described the new value as an index in an array of on/off pairs. e.g. [0, 1, 2, 3]
and converted that index value to binary: [00, 01, 10, 11]
I converted those binary values to bytes and then to hex and doubled them to send the signal twice: 0x1b
const uint16_t code_nikonD90Times[] PROGMEM = {
200, 2785,
39, 158,
41, 358,
40, 6320,
};
const struct IrCode code_nikonD90Code PROGMEM = {
freq_to_timerval(38400),
8, // # of pairs
2, // # of bits per index
code_nikonD90Times,
{
0x1B,
0x1B,
}
};

I then created a .hex file with the new code added.

2. Programming the TV-B-Gone with a USBTinyISP

The next step was to program the chip with the new .hex file. This process should involve plugging the TV-B-Gone into my laptop using a USB Tiny ISP programmer and software like AVRDUDE. (Tutorial here) Unfortunately, AVRDUDE wouldn’t recognise my TV-B-Gone.

A quick search (here) seemed to suggest that the LEDs draw too much power and might interfere with the chip being recognised. The only suggestion was to disable the resistors or LEDs to program the board. I decided to continue testing and in the process accidentally blew out all four LEDs by using the USBTinyISP power and battery power at the same time. Luckily, this allowed the board to be recognised!

I made a quick trip to Creatron and picked up new IR LEDs and started again. I got the board programmed and the TV-B-Gone worked for both my camera and TV! Hooray!

3. Camera or TV/Camera mode

I decided to make one more mod to the TV-B-Gone.

The board allows you to solder a jumper to control whether it uses North America or European codes. I ditched the European codes and opted to add a camera only mode by soldering a tiny “ON” switch (or is it “NO”?) in place of the jumper. The switch sandwiched nicely between the existing switch and a capacitor. I figured it would be easy to remember “On” is for the camera mode since it’s called a Camera-B-On.

Unfortunately, I had reinstalled the working LEDs. This meant that I wouldn’t be able to program the TV-B-Gone anymore. To deal with this, but not wanting to solder another switch to the board, I created a “detachable joint” jumper>resistor connection as pictured below to purposefully break the board when needed and allow me to reprogram:

Here’s a self portrait from the above video; I guess autofocus doesn’t work:

Future Revisions

The obvious next steps for the Camera-B-On is to add intervalometer functionality and support more camera brands. Intervalometers allow photographers to do time lapse. The fact that cameras don’t come with Intervalometer functionality built in baffles me – it would be so easy to add.

Here’s the arduino version I built a while ago:

Mobile Controlled Dress

Major Callisto — Wed, 11 May 2011 18:36:43 +0000

Colour Change Paper Dress from Christopher Lewis on Vimeo.

For the past few months I’ve been collaborating with my dear friend Breeyn McCarney on a project called Paper Dolls, which debuted at [FAT] 2011. It was the first fashion show I’ve participated in and it was incredibly well received. The highlight for me was taking a bow on the runway at the end of the show; such a thrill!

Photo: Ryan Emberley. http://www.ryanemberley.com/

Breeyn and I initially met to work on ideation together and discuss the possibilities of how technology could be included. The collection consisted of paper dresses augmented with technology. I even got to help cut and assemble some of the paper components, but it was really only a very small fraction of the time Breeyn spent designing and crafting.

The most ambitious and fantastic of the dresses was the BlinkM dress. I’m simply in love with what we built!

The dress is controlled using a mobile application that allows the wearer, or spectators, to change the colour of the dress by simply clicking on one of 16 possible colour choices; it could really be a much higher number of choices, but 16 made for a mobile friendly and easy interface. It was designed with the expectation that a wearer could interact with others, say at a party, and allow other people to remotely control the dress. There is a potential to use the dress for any type of data visualization where colour is an indicator, but I do believe there is also an “aesthetic utility” that is being met (it’s pretty!).

There are a lot of moving parts to this. First, the dress has 7 BlinkMs embedded in it and can run stand-alone showing random colours, as it did at the [FAT] 2011 show, or connected to and powered by an Arduino board. The Arduino board and lights are controlled by a laptop. The laptop runs TinkerProxy 2 which lets a Flash Controller send the desired hue. The hue is written to my laptop from a publicly visible Web Application at colour.breeyn.com. The Flash Controller reads the hue by pulling a value from a text file; push would have been overkill and because it’s run locally the latency is fairly low with the hue being updated every 0.5 seconds:

The mobile control aspect was born from an experiment I did months ago. The apartment I live in is visible from quite far away and I’m always anxious to see which apartment is mine. I created a setup where I could use a technology called Megaphone to call a number and turn lights on and off in my apartment so that I could see which apartment was mine. I used BlinkMs so I could change the colour of the lights and distinguish my apartment from others:

The simplest of the augmented dresses were decorated with small LED throwies.

Flower Dress with Throwies

Photo: Ryan Emberley. http://www.ryanemberley.com/

More photos at http://www.flickr.com/photos/blacksanta_69/sets/72157626490971049/

A Tweet Button for Flash

Major Callisto — Tue, 07 Sep 2010 15:00:40 +0000

Tweet Button Popup Login

Recently, twitter introduced another method of sharing using a Tweet Button and I haven’t seen many AS3 or Flash friendly solutions. In fact, I’m a little surprised the folks at twitter snubbed Flash on this one – there doesn’t appear to be any Flash friendly documentation.

I suspect the Tweet Button is a direct response to the popularity of Facebook’s Like Button. At first I didn’t really see the point – there already is a way to add a type of status update button and I often don’t see the point of just jumping on the new thing. However, there are some definite advantages. You can include the following in a Tweet Button:

related allows you to ‘recommend’ other twitter profiles for the end-user to follow – this will show up for the end-user after they’ve submitted their comment
via lets you specify a screen name that will get added to the end of the post. e.g. via @blacksanta_69
url lets you specify the path to the page to share. This gets shortened using twitters t.co link service. The t.co service is going to be used for all twitter links in the near future
text value is used for the content update

Additionally, twitter now “counts” the number of times an url is tweeted and you have the option to display that on your page. At this point, there isn’t a way to tap into the count data using the twitter api – I think you would have to rely on digging through the DOM with Javascript, and that’s not ideal. Fortunately, displaying the number of tweets seems a little tacky to me (think geocities), so I haven’t included that in my Flash approach. However, I have to accept that, like youtube, people are probably more likely to click on things that have millions of tweets. Adding the count is something I’m going to have to do in the future.

There is also a noticeable advantage in using a branded popup that can be closed and minimizes how intrusive the sharing process can be.

Tweet Status Submission

Related Screen

Tweet Button in AS3 with Javascript Popup

I’ve decided to mimic the html Tweet Button functionality as much as possible. This means presenting the user with a custom Tweet Button in Flash, popping up a popup window on click and prepopulating the window.

The single most important thing to remember is to drop the ‘www’ when opening the popup window. This screwed me up for a while – encoding the data you send gets really murky when you post to ‘www’.

function openTweetWin (url) {

window.open(url, "tweetThis", "width=550,height=450,toolbar=no,scrollbars=no");

}

2. Create a button in flash and add the following code. It’s worth noting that this works everywhere except within the Flash IDE, so test it on the html page

//Add an Event Listener for the button

btn_tweet.addEventListener(MouseEvent.CLICK, clickTweet);

btn_tweet.buttonMode = true;
function clickTweet(e:Event):void{
//The path to the share page

var path:URLRequest = new URLRequest("http://twitter.com/share");
//using the GET method means you will use a QueryString to send the variables

//twitter likes this. This is used as an alternate method if we don’t use

//a javascript popup

path.method = URLRequestMethod.GET;
//The URLVariables class is a nice way to keep everything organised. There is the added bonus

//that we can use these values if we GET instead of using the Javascript popup.

var tweetVars = new URLVariables();

tweetVars.url = "http://www.majorcallisto.com/?p=15";

tweetVars.text = "Major Callisto rocks my world with an AS3 Tweet Button";

tweetVars.via = "blacksanta_69";

tweetVars.related = "majorcallisto: Christopher Lewis, Creative Technologist";
//Set the URLRequest to include the URLVariables

path.data = tweetVars;
//If Flash is okay with us using ExternalInterface

if (ExternalInterface.available){

//I would imagine that If ExternalInterface wasn’t available that would be caught

//with the try/catch statement – oh well.

try{

//We’re going to pass this as a string to javascript, so we have to

//"stringify" it instead of using the URLVariable + URLRequest approach

//I’m putting a dummy placeholder in the first position of the

//QueryString so that I can shuffle my variables around without

//worrying about who gets a ‘?’ instead of a ‘&’. It’s faster than

//writing a quick if statement, but commenting about it takes far more time ; )

path.url +="?d=0";

for (var each in tweetVars){

path.url += "&"+each+"="+tweetVars[each];

}
//Make a call to the openTweetWin Javascript function

//and pass it the ‘stringified’ version of the QueryString

ExternalInterface.call("openTweetWin", path.url);

} catch (error:SecurityError){

//If it doesn’t work just open a damn window.

navigateToURL(path, "_blank");

} catch (error:Error){

//If it doesn’t work just open a damn window.

navigateToURL(path, "_blank");

}

} else {

//If it doesn’t work just open a damn window.

navigateToURL(path, "_blank");

}

}

Gives you:

Source FLA Here

Status updates the old way

Twitter already has a few methods of ‘sharing’ by creating a status update. With a status update you can simply add a Query String to the end of a link to Twitter. Below is the HTML only example followed by the Flash example I commonly use.

In HTML

<a href="http://twitter.com/home?status=Major+Callisto+rocks+my+world+http://www.majorcallisto.com" target="_blank">Share This</a>

Gives you:
Share This

In AS3:

//Import the button class
import fl.controls.Button;
//Create a button and position it

var btn_tweet:Button = new Button();

btn_tweet.label = "TWEET";

btn_tweet.x = 10;

btn_tweet.y = 10;
//Add the button to the stage

addChild(btn_tweet);
//Add an Event Listener for the button

btn_tweet.addEventListener(MouseEvent.CLICK, clickTweet);
function clickTweet(e:Event){
//The path to the status page

var path:URLRequest = new URLRequest("http://twitter.com/home");
//using the GET method means you will use a QueryString to send the variables

//twitter likes this

path.method = URLRequestMethod.GET;
//The custom status message to send. Might as well let twitter worry about the char count

var tweetVars:URLVariables = new URLVariables();//escape("Major Callisto rocks my world http://www.majorcallisto.com");
//Twitter uses a "status" variable to prepopulate the page

tweetVars.status = "Major Callisto rocks my world with his Flash AS3 Tweet Button http://www.majorcallisto.com";
//Add the variables to the URLRequest

path.data = tweetVars;
//Open the page in a "_blank" (new) window and let the user worry about closing

navigateToURL(path, "_blank");

}

Gives you:

Source FLA

Now if I can only customize that damn Share This Tweet Button \/

QR Code Sample

admin — Wed, 04 Nov 2009 15:22:37 +0000

Kaywa QR Code Generator

This is an implementation of the libspark.org QR Code Reader created by LOGOSWARE . When the red “brackets” turn blue it has read the code.

There are lots of issues with using a QR code that I’m only just realising. For example, the Kaywa gernerator lets you choose a size of QR Code – I think the dimensions are the same between similar codes but the pixels in the image produced are different. It looks like the information is sometimes truncated for me with smaller size images. This suggests that (obviously) the code reader is very resolution dependant; my camera is low-quality and there is a chip in the lens which I think is contributing to this issue. A slightly better camera would probably be more effective.

I’m still trying to work out how exactly the QR code works. Initial dives into the class has been spent rummaging through pages and pages of two-dimensional array declarations – that suggests that these codes may not be that complex.