It's time for another Ask the Editors post; a chance for you to voice your queries and have them comprehensively answered by Michael and me. This time, Michael's already answered a few questions left over from last time…

What Can I Ask?

Anything you like, but try and keep it within the boundaries of subject matter found on Activetuts+. If you have a question about Justin Bieber, go away.

What if You Can't Answer my Question?

Don't worry, we know people. We'll do everything in our power to address your question!

Ask Away!

Once we've collected a suitable amount of questions, we'll answer them and post the results. If your question doesn't make the shortlist this time, there'll be another Ask the Editors post very soon.

Sarvan

Michael James Williams:

Hey Sarvan,

Good question. The Facebook Graph API is very deep; I could write a whole book on using it with Flash (and I'm not speaking metaphorically), but unfortunately it would not include a full method for adding a Facebook Like button.

As I understand it, Facebook don't want you to go around developing your own Like buttons; they want to make sure that any Like button pressed is an Official Facebook Like Button. That's understandable, but frustrating if you're a Flash developer, because it means there's no straightforward way to get the Like button in your RIA or game.

The clever chaps over at byHook.com figured out a way to get around this -- albeit with some restrictions -- check out their full method (and backstory) at Facebook Like Button in Flash: A Tale of Broken Dreams and Tortured Souls.

Since then, Facebook have become a bit more lenient on the likes front; you can now create a Like button for posts, comments, and photos (but not, say, pages) using the Graph API by posting a Graph request to /OBJECT_ID/likes. This does involve logging the user in to Facebook via your SWF, which in turn means registering your SWF as an app on Facebook and setting up authentication tokens and all sorts of stuff that I don't have room to cover here. But it should work.

Another alternative that I've seen people use is to create a div containing a Like button, rendered in JavaScript as Facebook allows, and (at the appropriate time) bring the div above the SWF in your HTML page, so that it appears to be part of the SWF. This is pretty convoluted, though.

Faking the Share button functionality is much easier; the Graph API does make it simple to post to a user's own wall by sending a Graph request to /me/feed -- though again, you need to get them to log in via your SWF and set up authentication tokens and all that jazz.

Amir Hameed

Michael James Williams:

Hi Amir!

I'm going to assume that you're using a NetStream object to stream the actual video, and are connecting it to a Video object, which is on the display list, to show the feed, so your code looks something like this:

public var vid:Video = new Video();
public var ns:NetStream;
public var nc:NetConnection = new NetConnection();

public function init():void
{
	addChild(vid);
	nc.addEventListener(NetStatusEvent.NET_STATUS, onNetStatus);
}

public function onNetStatus(event:NetStatusEvent):void
{
	if (event.info.code == "NetConnection.Connect.Success")
	{
		ns = new NetSream(nc);
		video.attachNetStream(nc);
		stream.play("http://example.com/videoName.flv");
	}
}

I'm sure yours is more sophisticated, but that gets across the basic idea.

To figure out how far across the stage the mouse is, we can use the stageX property of any MouseEvent, and the stageWidth property of the stage, like so:

stage.addEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);

//...

public function onMouseMove(event:MouseEvent):void
{
	var fraction:Number = event.stageX / stage.stageWidth;
}

If the mouse is half way across the stage, fraction will be 0.5; if it's on the extreme left, fraction will be 0; and if it's on the extreme right, fraction will be 1.

Now, we can use the NetStream.seek() method to jump to a particular number of seconds through the video -- or at least, to approximately that point; this actually jumps to the nearest keyframe in the video before that number of seconds, and keyframes are usually spread apart by about 10 to 50 frames. So if we knew the total length of the video, we could do this:

public function onMouseMove(event:MouseEvent):void
{
	var fraction:Number = event.stageX / stage.stageWidth;
	ns.seek(fraction * totalLengthOfVideo);
}

(Note: With this code, we'd need to add the MouseEvent listener after the video had loaded, or we'd get problems.)

Unfortunately, there's no ns.length property that tells us the length of the video. But we can get the length via the stream's metadata.

Before calling NetStream.play(), we must add an event handler function to be triggered when the video's server sends descriptive information -- metadata -- about the video:

public function onNetStatus(event:NetStatusEvent):void
{
	if (event.info.code == "NetConnection.Connect.Success")
	{
		ns = new NetSream(nc);
		ns.onMetaData = onReceiveMetaData;
		video.attachNetStream(nc);
		stream.play("http://example.com/videoName.flv");
	}
}

In this handler function, we'll assign the duration property of the metadata to a variable that we can access later:

public var totalLengthOfVideo:Number;

//...

public function onReceiveMetaData(theMetaData:Object)
{
	totalLengthOfVideo = theMetaData.duration;
}

And there you have it! The code needs a little tidying up, but everything you need is there :)

Praveen

Michael James Williams:

Noted ;) We'll work on getting some more of these on the site. (If anyone reading has some mad animation skillz they want to share, get in touch!)

In the meantime, check out some of the animation tutorials from our archives:

Smoothly Animate a Caricature Using Motion Tweens

Quick Basix: Random Animated Blinking

Animate a Continuous Quad Run Cycle with Flash

Animate an Acrobatic Spy Using the Flash Timeline

...And if you want to go Premium:

Introduction to Advanced Body Mechanics

Animating the Envato Community Podcast