Setting Twitter Status with Flash

Feature image

At JMX2 we recently had a Flash banner campaign that had what looked like a pretty typical feature to implement. Our client wanted a small share button for Facebook and Twitter.

For most things in life there's an easy way, and there's a hard way. Luckily, when it comes to Twitter, there's an easy way and it worked perfectly for what we needed to do. You like easy? Me too, that?s what we?re going to tackle today.

The Easy Tweet from Flash

Take a look here at a demo of what we're building: Twitter Status Update In Flash.

The Flash movie can't be displayed on your device.

What's the deal? If you're reading SuperGeekery, you know your way around a Flash plugin. You've probably got Flash turned off, uninstalled, or maybe you don't have JavaScript turned on. Whatever the case may be, you can see the Flash movie. Go jump on a computer with those things and we're in business again.

You can download the .fla file here.

If you click the 'Preview Tweet' button and you were logged into Twitter, your Twitter page would open and your status text box would have been pre-populated with a shoutout to SuperGeekery. (Thanks, by the way, if you actually tweeted that!)

Let's take a look at the code and see what's going on. (Did you download the .fla?)

How it?s done

Much of what?s going on in the Flash file isn?t actually germane to the actual Tweeting, but it makes the experience a little richer. The user can customize the Tweet a bit and there is an error message in case things don't go as planned.

You?ll see that we?ve got 2 dynamic text fields and a drop down menu. Those are not necessary for the most basic sending of a tweet. It's built this way to show you how you can customize a tweet and make the job a little more interesting.

What we?re going to do is take 2 predefined strings, ?I read SuperGeekery ? and ? You can, too! http://supergeekery.com (via @johnmorton)? and insert whatever the user chooses from a combo box in the middle. (Notice the extra space I put in those strings.)

Define our 2 strings and display them in the dynamic text boxes, tweet_part1 and tweet_part2, on the stage.

var tweetpart1:String = "I read SuperGeekery ";
var tweetpart2:String = ". You can, too! http://supergeekery.com (via @johnmorton)";
tweet_part1.text = tweetpart1;
tweet_part2.text = tweetpart2;

On the stage we?ve also got a movieclip called submit_tweet_bt. We want it to display the right cursor, the finger pointer, to indicate that it?s a clickable button when a user rolls over it so we need to turn its buttonMode to true. We also need it to react to a button click by calling a function we?ll define in a few minutes called sendTweet.

submit_tweet_bt.buttonMode = true;
submit_tweet_bt.addEventListener(MouseEvent.CLICK, sendTweet);

Before we get any farther, let?s shut off the error message you see on screen if you?re opened up the Flash. This is an error message that?s only shown if the user tries to send a Tweet, but hasn?t selected anything from the comboBox.

// hide the error message movie clip by default
error_mc.visible = false;

You could have just had this error in your library and called it in when you needed it, but I encourage you to take the lazy way out like I did here. ;-) Moving along...

Ok, we?re already at the big sendTweet function. I told you this was easy.

function sendTweet(event:MouseEvent):void {
	if (tweetComboBox.selectedIndex == -1) {
		showErrorMessage();
	} else {
	var myCustomTweet:String = tweetpart1 + tweetComboBox.value + tweetpart2;
	var theURLtoCall = 'http://twitter.com/home?status='+ escape(myCustomTweet);	
	if (ExternalInterface.available) {
		ExternalInterface.call("window.open", theURLtoCall, "win", "height=500,width=850,toolbar=no,scrollbars=yes"); }
	}
}

What?s going on there? First, this is a function that is responding to a MouseEvent, so we need to tell it to expect the Event object showing up. We don?t actually use the Event object in our function, but we need to tell Flash it?s on its way or we?ll get an error.

Next, the first few lines of this function check the comboBox which is on the stage. It?s got an name of tweetComboBox and the comboBox component will return a if nothing has been chosen yet. That?s the case we?re testing for here. If it does return -1, we call another function, which we?ll define at the end called showErrorMessage. Sorry, no extra credit for guessing what that function does.

If the comboBox didn't return -1, that means our user has selected something and we can build the tweet without generating an error. We create a string variable, myCustomTweet, and assemble the tweet inside it.

In another variable, we use the magic URL provided to us by Twitter that allows you to set the contents of the status box, 'http://twitter.com/home?status=', and concatenate myCustomTweet to the end of it. Oh, I didn?t mention it before, but you need to URLEncode myCustomTweet. URLEncoding is a way of making spaces and other special characters more friendly to being sent via a URL. You URLEncode by using the escape function.

Finally, we open a new window using that magic Twitter URL and now it?s up to the user to hit submit on their Twitter page. (Note, this ExternalInterface method requires your HTML and .SWF file be on the same server.) If the user were not logged in, they are presented with a log in page and if they do log in, they are then presented with the Tweet to submit to their stream.

Also, we have a little more code to write to handle that error message. We need 2 functions. One to show the error message and one to get rid of it once a user takes the step to correct the error.

function showErrorMessage():void {
	error_mc.visible = true;
	tweetComboBox.addEventListener(MouseEvent.MOUSE_DOWN, hideErrorMessage);
}

function hideErrorMessage(event:MouseEvent):void {
	error_mc.visible = false;
	tweetComboBox.removeEventListener(MouseEvent.MOUSE_DOWN, hideErrorMessage);
}

Two ways of opening a window

Ok, we should be done now, but I wanted to point out to you why the Flash file you downloaded might not be working if you?re testing it on your local machine. It has to do with how we?re calling the opening of the window.

We?ve used a call to ExternalInterface in our sendTweet function. This is done because it will usually get around Internet Explorer?s zealous attempt to block the new window that our user has asked us to create when using a more traditional method.

The problem is that this method doesn?t work without having an HTML wrapper on the Flash, which will leave your testing of this movie doing basically nothing. It will appear broken. If you uploaded the .swf to your web server though, it will work correctly.

But, you might want it to work locally or maybe in situations where you?re not in an HTML wrapper. Here?s how you do that.

var req:URLRequest = new URLRequest(theURLtoCall);
var window:String = "_blank";
try 
	{
		navigateToURL(req, window);
	} 
	catch (e:Error) 
	{
		trace("Navigate to URL failed", e.message);
	}

You?ll find this method of opening a window commented out in the FLA you downloaded.

Next time, we?ll do a very similar thing for posting a status update to Facebook.

There are no comments to this post.

Leave Your Comment:

name:

email:

location:

url:

your comment:

Remember my personal information

Notify me of follow-up comments?

Twitter Feed

John Morton talking on Twitter




Meanwhile on Instagram… //

My latest shot from Instagram.
#nyc