Geek.blog » AS3

How to Load External Images in Actionscript 3.0

Andrew Christensen — Thu, 12 Mar 2009 03:37:12 +0000

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.

1
2
3

var myLoader:Loader = new Loader();
myLoader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, onLoaderProgress);
myLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoaderComplete);

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.

1
2
3
4
5
6

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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

var myLoader:Loader = new Loader();
myLoader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, onProgressStatus);
myLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoaderReady);

var fileRequest:URLRequest = new URLRequest("myImage.jpg");
myLoader.load(fileRequest);

public function onProgressStatus(e:ProgressEvent) {
// this is where progress will be monitored
trace(e.bytesLoaded, e.bytesTotal);
}

public function onLoaderReady(e:Event) {
// the image is now loaded, so let's add it to the display tree!
addChild(myLoader);
}

Actionscript 3 Webcam Configure

Andrew Christensen — Wed, 25 Feb 2009 04:34:52 +0000

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.

1
2
3
4

var camera:Camera = Camera.getCamera();
var video:Video = new Video();
video.attachCamera(camera);
addChild(video);

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.

1
2
3
4
5
6
7
8
9
10

var bandwidth:int = 0; // Specifies the maximum amount of bandwidth that the current outgoing video feed can use, in bytes per second. To specify that Flash Player video can use as much bandwidth as needed to maintain the value of quality , pass 0 for bandwidth . The default value is 16384.
var quality:int = 50; // this value is 0-100 with 1 being the lowest quality. Pass 0 if you want the quality to vary to keep better framerates
var camera:Camera = Camera.getCamera();
camera.setQuality(bandwidth, quality);
camera.setMode(320,240,15,true); // setMode(videoWidth, videoHeight, video fps, favor area)

// Now attach the webcam stream to a video object.
var video:Video = new Video();
video.attachCamera(camera);
addChild(video);

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.

1
2
3
4
5
6
7
8

var bandwidth:int = 0; // Specifies the maximum amount of bandwidth that the current outgoing video feed can use, in bytes per second. To specify that Flash Player video can use as much bandwidth as needed to maintain the value of quality , pass 0 for bandwidth . The default value is 16384.
var quality:int = 100; // this value is 0-100 with 1 being the lowest quality. Pass 0 if you want the quality to vary to keep better framerates
var camera:Camera = Camera.getCamera();
camera.setQuality(bandwidth, quality);
camera.setMode(320,240,30,false); // setMode(videoWidth, videoHeight, video fps, favor area)
var video:Video = new Video();
video.attachCamera(camera);
addChild(video);

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

GTween improved squencing support

Andrew Christensen — Mon, 26 Jan 2009 17:03:14 +0000

As some of you may know, Grant Skinner has been working on his own tweening library called GTween. The project is still in beta stages with a promise to be delivered public in the next couple weeks.

gskinner.com: gBlog: Preview: GTween beta 5, Now With More Sequencing.

Tweensy Goes Public!

Andrew Christensen — Tue, 06 Jan 2009 07:04:14 +0000

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!

Tweensy adds much needed effects support

Andrew Christensen — Tue, 23 Dec 2008 16:38:12 +0000

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

Drop.io AS3 Library Update

Andrew Christensen — Tue, 16 Dec 2008 01:46:31 +0000

UPDATE: I have posted what there is for files on Google Code. The code currently is considered as-is with no support.

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.

The New Drop.io API: Drop.io Desktop Manager

Andrew Christensen — Sat, 29 Nov 2008 19:32:34 +0000

UPDATE: This application has been altered. The finished product is called Droplet and be viewed HERE

Over a year ago I had the pleasure of working on the team that created Drop.io. I had built the original Flash uploaders. Since then, the Drop.io team has been hard at work and just last week released a new version of the site with a TON of great new features. My absolute favorite is the new Drop.io API. Getting a FREE key is simple and very quick (possibly faster than getting a FREE drop)! With only an hour into it, I’ve already managed to move, delete, and add assets quickly and painlessly. I can’t wait to get some more time into this and build out a drop manager in Adobe AIR.

Keep checking back for more status updates, I hope to have the Drop.io Desktop Manager available soon!

Until then, check out some of my other AIR apps…
Super Duper Desktop FLV Player
The File Furnace

AS3 Camera Class Quirks and Tips

Andrew Christensen — Thu, 13 Nov 2008 21:22:19 +0000

Shane from Lost In Actionscript has a great writeup on some tips and tricks for working with the Camera class in AS3. One that I never thought about was:

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.

Papervision and Geocoding

Andrew Christensen — Tue, 04 Nov 2008 22:50:22 +0000

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)

WiiFlash + Papervision = Coolness

Andrew Christensen — Tue, 04 Nov 2008 18:31:57 +0000

Jeff Winder has taken the WiiFlash library and an WiiMote to rotate a papervision cube using the accelerometers of the Wiimote. To top it off, he has a Phidgets Servomotor that spins also to matech the papervision cube.

seedylifestyle: WiiFlash with Papervision3D and Phidgets Servomotor.

Super Duper Desktop FLV Player for Adobe AIR

Andrew Christensen — Wed, 29 Oct 2008 21:01:10 +0000

I had started creating AIR apps since the first beta release and I love how easy it is to create a simple customized tool quickly to help with day to day activities. Until now I’ve been using the WimpyFLV Player with limited success. It was ok, but would have issues playing back files on the network. So I developed my own player that is simple and straight to the point. For development purposes I have the dimensions of the video file in the upper right hand corner and the length of the video in seconds. This helps since you can’t just view the properties of an FLV to get this information. Check out the link below to download the .air file.

Adobe – Adobe AIR Marketplace Photo & Video

Flash Player 10 Fabric Demo

Andrew Christensen — Tue, 28 Oct 2008 20:38:36 +0000

Justin Everett-Church, Senior Adobe Flash Player Product Manager, just posted a new demo showing off Flash Player 10’s new 3D capabilities. It’s a fabric demo that uses APE (Actionscript Physics Engine) to simulate the physics. This demo may look familiar to a previous papervision demo (which no longer seems to be live, sorry).

Justin’s Flash Blog

Tips on how to write efficient AS3 » Lost In Actionscript

Andrew Christensen — Fri, 10 Oct 2008 20:59:47 +0000

Most of these are new to me, great writeup!

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

gotoandlearn.com – Flash CS4 Feature Tour

Andrew Christensen — Thu, 25 Sep 2008 20:31:16 +0000

Lee Brimlow has added another great video tutorial to gotoAndLearn that leads through some of the great new features in the new Flash CS4.

gotoandlearn.com – Flash CS4 Feature Tour

False 3D in Flash: Displacement Maps

Andrew Christensen — Thu, 18 Sep 2008 17:21:49 +0000

We recently had one of our interns slave over getting a Displacement Map Filter project off the ground and displaying a flat image in faux 3D. After long hours of slavery, his hard work paid off and we recieved this great tutorial that blows most out of the water. Great work Joel, now get me a damn cup of coffee!

lab.joelGillman.com › False 3D in Flash: Displacement Maps