I’m proud to announce the beta release of my first Drop.io desktop AIR application called Droplet. I built the application using my own Drop.io AS3 library. The application is very simple and offers the fastest way to upload a single file to Drop.io. Just open the application, choose your file, and Droplet uploads your file to a generate drop. Once uploaded, you have the option to upload another file (to a brand new drop) or view the drop you just created with your file!

If Droplet gains enough support, I would love to see further renditions of the application to allow more support for other Drop.io features. Until then, be sure to leave your thoughts in a comment below!

System Requirements:

• Adobe AIR Runtime 1.5 or higher
  • Will run on Windows, Mac, or Linux

Using the flash.display.Loader class in AS3, you can load in external image files to display in flash. The loader class supports loading in JPG, SWF, PNG, or GIF file types. The Loader class sounds more like a loading manager that watches load progress, rather than a display object. Fact is, the Loader is treated as a DisplayObject, so when it’s ready you just add it to the stage. Pretty simple, so let’s get started!

First, you will need to create an instance of the loader class and add a couple event listeners to it. One to watch load progress, and one to watch for when the loading is complete.

You’ll notice that I’m not adding the event listener to the loader instance (myLoader), but instead adding them to a property of myLoader called contentLoaderInfo. The Loader class has a special property that controls all the loading events. This property is an instance of the LoaderInfo class, so we will listen to it for events, rather than our Loader instance.

Next, we will call the Loader.load() method to initiate the loading sequence. You will need to create a new variable that will be an instance of the URLRequest class. This new variable will be passed to the load() method.

Ok, so that’s pretty much it. All that is left is to create our callback methods for each of our eventListeners. Our final code should look like this:

Setting up a webcam in Flash has always been pretty simple. I feel there are two cases in flash that you would use the webcam in a project: Streaming video for video chat or using it as a tool to take a photo. These two cases have completely different purposes and thus you want your camera setup properly for each.

Setup Your Camera
First, let’s setup your camera and a video instance for playback. This code will setup a default camera and default video instance. Both will be setup for 320×240 playback.

Setup Camera for Streaming Video Chat
Setting up your camera for streaming video chat involves a little more work and planning than just using it to take a photo within the player. Streaming video will require you to sacrifice video quality for speed, especially if you need to sync the video with audio. There are two methods of the Camera class that we will use to balance video quality and frame rate with bandwidth: Camera.setQuality() and Camera.setMode(). setQuality() is used to specify bandwidth and overall image quality of the Camera’s output video. Adobe’s Help Documentation has this to say:

• To indicate that bandwidth use takes precedence, pass a value for bandwidth and 0 for quality . Flash Player transmits video at the highest quality possible within the specified bandwidth. If necessary, Flash Player reduces picture quality to avoid exceeding the specified bandwidth. In general, as motion increases, quality decreases.
• To indicate that quality takes precedence, pass 0 for bandwidth and a numeric value for quality . Flash Player uses as much bandwidth as required to maintain the specified quality. If necessary, Flash Player reduces the frame rate to maintain picture quality. In general, as motion increases, bandwidth use also increases.
• To specify that both bandwidth and quality are equally important, pass numeric values for both parameters. Flash Player transmits video that achieves the specified quality and that doesn’t exceed the specified bandwidth. If necessary, Flash Player reduces the frame rate to maintain picture quality without exceeding the specified bandwidth.

Lets setup our code to have medium compressed quality and a frame rate of 15.

Depending on your project, you can change bandwidth, quality, and frame-rate settings to find the best combination. I would suggest setting the video capture size smaller, then stretching it up. This will allow for a higher frame rate since you are sending smaller video that is stretched. The video is a littler blurry, but if you plan on having lots of movement, having a higher frame-rate will be more important.

Setup Camera to take a photo
This type of configuration isn’t a whole lot different the the code example above. The main difference is that we aren’t passing constant amounts of data to a streaming server each second. Instead, we just need to get the camera’s data once. So, we can up the quality and frame rate to our hearts content (granted the user’s hardware allows for the settings).

Here is the above example, but with maxed out configuration for high photo quality.

Feel free to comment with any questions. Check out my other post for more AS3 Camera quirks and tips.

As you may have read in my last post, I was lucky enough to get my hands on a beta version of “Tweensy“. Tweensy is an actionscript 3 tweening library from Shane over at Lost In Actionscript. Within the short time that I have been able to use the library I have been amazed at the speed and simplicity of it’s use. As of today, Tweensy has officially gone public!

There are two main libraries available plus an FX expansion package: Tweensy Original and Tweensy Zero. In Shane’s latest post he describes why Tweensy is better than any other as3 tweening engine. To sum it up, he uses Object Pooling and utilizes DoubleLinked lists rather than a Dictionary or Array. I could try and go into more detail, but Shane does a better job at explaining.

Ease of use is the main seller for me. Yes performance is great to have when you are working on high profile, bleeding edge projects. However I am often working on more basic projects that need to be completed on a tight deadline. Currently I use Tweener. It is so simple to setup and use. There are a couple of extra steps that you will need to take with Tweensy to accomplish the same ol’ tween as Tweener. Tweensy Zero should make it more worth my while though on the smaller projects. The entire library is compressed down to 2.9kb! I’m not sure to what extend this version is limited, but it will be great to help spiffy up some boring banners!

Of course what I’m most excited about is the effects package that Shane has created that pairs with Tweensy well. It currently is somewhat limited to creating emitters and glowing blurry objects (as you can tell in my first demo and many of Shane’s), but he has also used it to create a cool BumpMap and Bulge demos. Also, Shane claims it’s easy to create better tweens that animate on complicated motion guides with Tweensy.

Now I’m off to download the latest source from Google Code! Be sure to snag your copy and post your demos!

I was lucky enough to recently acquire a beta version of the Tweensy library from Shane McCartney over at Lost In Actionscript. I’ve taken my first crack at using the engine and I have to say I’m very excited to see what is still in store for this promising library. Currently I use Tweener for all my projects. It is quick, painless and very simple to use. It doesn’t support filters and uses mainly static methods. Tweensy on the other hand has support for many different types of effects that all developers yearn for (BitmapLayer is my favorite). Tweensy is broken down in easier to manage pieces that help keep the file size down. Be sure to check back often for more demos as I expand my knowledge of this great new piece of work. Oh, and I almost forgot to mention…Tweensy has support to “yo yo” a tween!

View The Demo

So as I mentioned in this post, I have been working on an AS3 library for interfacing with the new Drop.io API. Since my announcement, I’ve been getting some great support from both developers and the Drop.io team. It has been a while and I wanted to let you know I’m still working on the library. I’ve got some free time coming up soon, so I hope to use that time to get something ready for a beta stage.

Keep checking back for more updates! My goal is to have it complete by the end of the year.

Tip #2

When recording to a Flash Media Server make sure the camera has activity via the Activity Status Event before publishing the stream. Otherwise you may get a static or black frame at the beginning of the recorded stream.

Camera Class Quirks with FMS » Lost In Actionscript – Shane McCartney.

The June 2008 edition of Adobe EDGE has a great article on geocoding. Geocoding is getting popular with the release of Yahoo Maps, Mapquest, and Google Maps APIs. Suddenly any user can apply for one of those keys and start mapping locations on their site or even using those APIs to get geo location data to then use within their own mapping engine. That is where this example comes in. Adobe has written up a great article on getting started with using the Yahoo Maps API to get the longitude and latitude of a location, then converting that to 3D coordinates to place on a globe built in Papervision. The example is simple, but feels good and responsive.

Read the article
View the Demo

A couple more Flash Geocoding Examples and Demos

Yahoo News Globe
Spinny Globe
Senocular 3D Globe (Flash Player 10)
FreeEarth (Javascript)

seedylifestyle: WiiFlash with Papervision3D and Phidgets Servomotor.

Tips on how to write efficient AS3 » Lost In Actionscript – Shane McCartney

RTMP is the protocol used by Adobe’s Flash Media Server to stream content into flash. Most of the help documentation doesn’t touch much on this method of connection and is limited to sources not easily available to users.

This article should be used by those with an understanding of video playback using actionscript 3. If that isn’t you, please read this article before continuing.

1.) In order to use the RTMP protocol, you will need to install and run a version of Adobe Flash Media Server. Adobe has released a free developer version the limits you to 10 connections. That will be MORE than enough to do some basic development. Please make sure you are running or have access to a Flash Media Server before continuing to the next step.

1.) (B) If you are having trouble installing or setting up an app, please read this article.

2.) Now that you have access to a Flash Media Server, we will start with some basic code that should look familiar if you have worked with actionscript and video before. For this step, you will need to know the URI for the server. If you installed Flash Media server on the machine you are running on, you can use “localhost” for the URI. We will be using the “vod” app that comes pre-installed on the server for this example.

var nc:NetConnection = new NetConnection();
nc.connect("rtmp://YOUR_SERVER_URI/vod/");

If we were loading an flv file without streaming, you would have passed null to the connect() method instead.

3.) The only thing left is to load the stream, instead of loading an FLV video from a URL. This is actually much easier than you think. Instead of passing a URLRequest to the NetStream.play() method, you would instead pass the name of the stream you wish to play from within your app (this is the name of the FLV file on the server, but without the .FLV extension). To playback an HD streaming file, you will need to format your stream name slightly different: “mp4:NAME_OF_STREAM.mp4″

• Please note that you can not setup your NetStream until after the NetConnection has successfully connected. You will know this from the NetStatus event: NetConnection.Connect.Success that is dispatched.

var ns:NetStream = new NetStream(nc);
ns.play("NAME_OF_STREAM");
// ns.play("mp4:NAME_OF_STREAM.mp4");  // this will stream an HD movie instead.

4.) That’s it! I hope this article has helped. Please comment below with any questions and I would be glad to help answer them.

For a more informative tutorial, check out this one from Peachpit.

Actionscript 3 Layout Organizers Examples and Source Code | SOME RANDOM DUDE.

I could write up an example for how to use this new functionality, but it would turn out just like the one Adobe wrote up in the FMS documentation.

Flash Media Server Bandwidth Checking

A very important part of streaming any type of media is the bandwidth. You want to stream the best quality possible, but keep the stream constant. This can be a very tricky thing since all your users will most likely not be at the same connection speeds. Adobe has a great article on the math behind calculating different kinds of bandwidth for one-to-many (video on demand) setups and many-to-many (video conference) setups.

[ via Adobe FMS Dev Center ]

To fix this problem once and for all, I have been using a similar method. Instead of tacking on parameters to the URL, I include version numbers in the actual file name. This will ensure the browser will reload the new file. I embed my “shell_v1.swf” in the HTML and pass it a variable called “app_location” with a value of “myApp_v1.swf”. “app_location” is the URL path to to my actual app swf. The shell then loads the app and displays it. The app swf should also be labeled by version to ensure it will be reloaded with new versions. This should be easy for users programming in AS3, since you will most likely have your preloader in a separate swf.