The Flash Learn Blog: December 2010

Sunday, December 12, 2010

Official Flash CS3 AIR Export Extension Now Available!

Yes you heard it right. The official support for AIR in CS3 is now available over on Adobe Labs. Go get it and start playing!

Adobe AIR Live eSeminar This Wednesday

This Wednesday at 10:00 am PST I will be doing my Transitioning to the Desktop session as a live eSeminar. This is the same session that I gave during the first leg of the OnAIR Bus Tour. It will be updated to include the newly released Flash CS3 AIR extension. Go on over and register and I hope to see you there. I’ll try to have some new examples to show if I get the time.

Re-Painting Pixels with Actionscript 3

In this little experiment I am reading in all of the pixel values from the image of the strawberries below using the BitmapData class. I then attach a MovieClip and color it to match the pixel value. This is animated over time to give off a nice effect. Each time it runs through I am choosing a random scale value for the MovieClips. It’s fun to watch this thing run for a while to see the different patterns that it makes. Click on the image below to check it out.

[as]var bmd:BitmapData = new BitmapData(tucc.width, tucc.height);

bmd.draw(tucc);

var xc:int = 1;

var yc:int = 0;

var scale:Number = Math.random()*10;

var t:Timer = new Timer(1);

t.addEventListener(TimerEvent.TIMER, drawIt);

t.start();

var rots:Array = [90,270,180];

var rotCount = 0;

var cont:MovieClip = new MovieClip();

this.addChild(cont);

function drawIt(e:TimerEvent):void

{

var d:dot = new dot();

var colorTransform:ColorTransform = d.transform.colorTransform;

colorTransform.color = bmd.getPixel(xc, yc);

d.transform.colorTransform = colorTransform;

cont.addChild(d);

/*var am:Number = Math.random();

if(am<0.25) d.rotation = rots[0];

if(am<0.50 && am>0.25) d.rotation = rots[1];

if(am<0.75 && am>0.50) d.rotation = rots[2];*/

d.rotation = rots[rotCount];

if(rotCount == 2) rotCount = 0;

else rotCount++;

d.scaleX = d.scaleY = scale;

d.x = xc*2-10;

d.y = yc*2+20;

if(xc >= 500 && yc >= 333)

{

trace(“in”);

t.stop();

clearIt();

}

else if(xc >= 500)

{

xc = 0;

yc += 15;

}

xc += 15;

}

function clearIt():void

{

this.removeChild(cont);

cont = new MovieClip();

this.addChild(cont);

xc = 0;

yc = 0;

scale = Math.random()*8;

t.start();

}[/as]

3D Paint with Papervision3D!

This takes the cake as the best Papervision3D demo so far. Pierre Lepers from the LowLevel blog has created interactive Papervision3D where you can airbrush 3D objects. Wowza! While this demo is great, the really cool thing is that you download his Papervision event classes so that you can build your own interactive 3D stuff. Awesome work!

Photoshop CS3 Export to Zoomify!

Photoshop CS3 now has a great new feature that allows you to automatically export an image into a Flash-based Zoomify viewer. This means that you can view hi-res photographs without having to worry about download times. You have probably seen this feature on a lot of shopping websites. It uses low-res versions of the image until you focus in on an area and then it downloads the hi-res version of just that chunk. Check out the example below by using the zoom controls at the bottom of the viewer.

Amazing New Particle Extension for Flash

Andrew Fitzgerald from Desuade recently contacted me about trying out their new particle entension for Flash called Partigen. Of course I jumped at the chance and from what I’ve seen so far, it’s an amazing extension. The Partigen extension shows up as a custom panel inside of the Flash IDE and it allows you to create emitters and assign a wide variety of particle effects to them. The extension comes with a ton of great presets which you can of course modify to your own tastes.

Check out the SWF below for a few examples of what you can create. Partigen is an AS2 extension which leverages the popular Fuse animation library. Partigen is not currently available to the public but will be very soon. Be sure to check out http://desuade.com/ for the latest news about when it will hit the streets!

I’m very excited about this extension. Now all I ask is that it someday be ported to AS3 (hint hint)

Amazing New 3D Flex Demo

I first got wind of this demo from Ryan Stewart’s blog. It is a 3D world that was put together using Flex. It isn’t clear if it is using Papervision3D or not, but it is certainly impressive. The thing that sets it apart is the ability to interact with Flex controls that are set in 3D. This must be using the same approach as the interactive 3D features in WPF. Check it out by clicking on the image below. Nice work!

Online Conversion of FLV Files!!

All I have to say is wow! I have been waiting for something like this for a long time. Have you ever seen a video you liked on YouTube or other video sharing site and wished that you had it on your hard drive? Better yet, have you ever wanted to include one of these videos in a presentation or share it with your friends? Yeah me too. I just found out about vixy.net which features a free, online conversion of FLV files to MPEG4. You can convert to a wide array of formats including AVI.

All you need to do is paste the URL and it will find out the actual FLV address and begin transcoding it. Once it is complete you will then be prompted to download the new video. It works flawlessly! Check out the comparison below of the results.

Dx3 conference is a must for interactive designers!

Dx3 is a new conference that is being put on by the fine folks from Lynda.com. Lynda already produces theFlash Forward conference and film festival which has become the place to be in the Flash world. This new conference will not be limited to a single technology and will instead deliver sessions on a broad array of technologies and tools as they relate to interactive designers. The conference is being sponsored by both Microsoft and Adobe and both companies will be their trying to persuade us to use their technologies. It will be put up or shut up time as they both lay their technologies out on the table and let us make our own judgments. This conference should provide answers to the questions that everyone has been wondering about when it comes to Flash, Apollo, WPF, WPF/E, etc.

More important than the Microsoft-Adobe showdown is the impressive array of speakers and sessions. This list is continuing to grow but it includes speakers that I consider to be top of the food chain in the interactive design space. The list of speakers includes Brendan Dawes, Erik Natzke, Mario Klingemman, Beau Amber, Aral Balkan, Brad Becker, Darren David, Mike Downey, Grant Hinkson, Robby Ingebretsen, Joey Lott, Chris Orwig, Danny Patterson, Josh Ulm, and Eric Zocher. If you are familiar with the Flash and WPF communities then you will understand it when I say that this is the A-list! If you don’t know these names then you need to come and rub elbows with the best in the business.

Another reason that I think you should come to Dx3 is because I too will be presenting. Myself, Mark Ligameri, and Joshua Jacobson will be deconstructing the WPF Yahoo Messenger project and we will have lots of good information about real-world WPF development. You can find out more about our session here.

Stay tuned because there are more exciting announcements to come about Dx3!

See you in Boston!

North Face Demo Using Papervision3D!

After reading Mike Downey’s post yesterday and checking out the 3D video carousel, I decided that this would be a good example to create to help me learn Papervision3D. The API couldn’t be easier to use and if you use the AS3 version it is lightening fast! Click on the image below to see the example. I embedded the FLV files so that there wouldn’t be buffering issues. It’s around 6 megs so just give it a chance to load. I’m so excited about Papervision3D! The AS3 is also shown below. Flash 9 player required!

[as]import org.papervision3d.scenes.*;

import org.papervision3d.cameras.*;

import org.papervision3d.objects.*;

import org.papervision3d.materials.*;

var sp:Sprite = new Sprite();

this.addChild(sp);

sp.x = 320;

sp.y = 200;

var radius:int = 800;

var s:Scene3D = new Scene3D(sp);

var cam:Camera3D = new Camera3D();

cam.z = -150;

var center:Plane = new Plane();

s.addChild(center);

center.visible = false;

var bmd:BitmapData = new BitmapData(320, 240);

var bmd2:BitmapData = new BitmapData(320, 240);

var bmd3:BitmapData = new BitmapData(320, 240);

var bmd4:BitmapData = new BitmapData(320, 240);

var mat1:BitmapMaterial = new BitmapMaterial(bmd);

mat1.oneSide = false;

var plane1:Plane = new Plane(mat1,320, 240, 5, 5);

plane1.x = Math.cos(Math.PI*2) * radius;

plane1.z = Math.sin(Math.PI*2) * radius;

plane1.rotationY = 270;

var mat2:BitmapMaterial = new BitmapMaterial(bmd2);

mat2.oneSide = false;

var plane2:Plane = new Plane(mat2,320, 240);

plane2.x = Math.cos(Math.PI/2) * radius;

plane2.z = Math.sin(Math.PI/2) * radius;

plane2.rotationY = 180;

var mat3:BitmapMaterial = new BitmapMaterial(bmd3);

mat3.oneSide = false;

var plane3:Plane = new Plane(mat3,320, 240);

plane3.x = Math.cos(Math.PI) * radius;

plane3.z = Math.sin(Math.PI) * radius;

plane3.rotationY = 90;

var mat4:BitmapMaterial = new BitmapMaterial(bmd4);

mat4.oneSide = false;

var plane4:Plane = new Plane(mat4,320, 240);

plane4.x = Math.cos(Math.PI*1.5) * radius;

plane4.z = Math.sin(Math.PI*1.5) * radius;

plane4.rotationY = 0;

s.addChild(plane1);

s.addChild(plane2);

s.addChild(plane3);

s.addChild(plane4);

this.addEventListener(Event.ENTER_FRAME, render);

var angle:Number = 0;

function render(e:Event)

{

angle += (this.mouseX – 320) * 0.001;

cam.x = Math.cos(angle) * 900;

cam.z = Math.sin(angle) * 900;

cam.target = center;

bmd.draw(vid1.v);

bmd2.draw(vid2.v);

bmd3.draw(vid3.v);

bmd4.draw(vid4.v);

mat1.updateBitmap();

mat2.updateBitmap();

mat3.updateBitmap();

mat4.updateBitmap();

s.renderCamera(cam);

}

vid1.visible = false;

vid2.visible = false;

vid3.visible = false;

vid4.visible = false;[/as]

I’ve put together a couple of examples using the new audio capabilities of Actionscript 3 combined with thePapervision3D engine. I am creating a 3D carousel of cube primitives and am setting their scaleY values according to the frequency spectrum that I get back from the MP3 file. The first example shows the cubes in wireframe mode so you can see what is happening. The second example uses a bitmap texture to create a cool effect that I think matches the music really well. The code for the first example is below as well. Just click on the images to see the examples and also make sure that you Flash Player 9.

[as]import org.papervision3d.scenes.*;

import org.papervision3d.cameras.*;

import org.papervision3d.objects.*;

import org.papervision3d.materials.*;

var so:Sound = new Sound();

var sc:SoundChannel;

var ba:ByteArray = new ByteArray();

var array:Array;

so.load(new URLRequest(“amon4.mp3″));

sc = so.play(0,1000);

var sp:Sprite = new Sprite();

this.addChild(sp);

sp.x = 320;

sp.y = 240;

var radius:int = 2000;

var s:MovieScene3D = new MovieScene3D(sp);

var cam:Camera3D = new Camera3D();

var pl:Plane = new Plane();

pl.visible = false;

s.addChild(pl);

cam.target = pl;

cam.z = -3500;

var ang:Number = 360/15;

for(var i:int=0; i<15; i++)

{

var bam:WireframeMaterial = new WireframeMaterial(0xFFFFFF*Math.random());

bam.oneSide = false;

var p:Cube = new Cube(bam);

p.name = “i”+i;

p.scaleY = 5;

s.addChild(p);

p.z = Math.sin((ang*i)*Math.PI/180) * radius;

p.x = Math.cos((ang*i)*Math.PI/180) * radius;

}

this.addEventListener(Event.ENTER_FRAME, render);

var yOff:Number = 0;

var angleZ:Number = 0;

var a:Number = 0;

function render(e:Event)

{

SoundMixer.computeSpectrum(ba,true,0);

for(var i=0; i < 256; i=i+8)

{

a = ba.readFloat()*10;

if(Math.round(i/8)<15) s.getChildByName(“i”+ Math.round(i/8).toString()).scaleY = (a/15)*6;

}

cam.y = (this.mouseY – 240)*8;

angleZ += (this.mouseX – 320)*0.0001;

cam.z = Math.sin(angleZ) * 3000;

cam.x = Math.cos(angleZ) * 3000;

s.renderCamera(cam);

}

s.renderCamera(cam);[/as]

Should Flash and Flex be combined?

This is something that I have thinking about lately as I work back and forth between Flash, Flex, and WPF. One thing is becoming clear to me lately. I love having the XML markup layer that is present in both Flex and WPF. It makes it much easier to keep a clean separation between the model and the view in data-driven applications. Data binding is another powerful tool that I instantly begin to miss when working in Flash.

Another feature of WPF that I really wish Flash would adopt is the generation of code when drawing graphics in the Flash IDE. It’s great to be able draw graphics in Blend and then immediately be able to see the code that was generated. This allows you to fine-tune properties of the graphic in code. The fact that you will be able to generate XML animation data from the Flash timeline is a great step in this direction.

So let’s say that Flex Builder had the ability to draw graphics and had a timeline for generating XML animations. Would there still be a need for the Flash IDE? One reason that I can think of would be that Flash allows you to create much more optimized code and smaller SWF files. Publishing an empty Flex project is already over 150k in size.

I think Expression Blend is a great example of a tool that could exist in the Flash world. You can create graphics visually and at the same time be able edit the code being generated. You can animate using a timeline which also is generating editable code. Built-in support for data binding and component styling are also nice features to have.

I’m sure that I’m missing a lot of reasons why this wouldn’t be a good idea, but it’s something to think about anyway.

Running Flash in the Vista Sidebar!

We have been doing quite a bit of gadget work lately at frog. As an experiment, myself and Tim Wong, a Senior Visual Designer at frog, decided to create a frogblog RSS reader gadget. Since gadgets are essentially just HTML and JavaScript there is no reason that you can’t include other browser technologies such as Flash and Flex. In this gadget the Flash piece is handling all of the XML parsing and the actual list of news items. Since it is running locally there are no sandbox restrictions for reading in external XML which is nice. The arrows allow you smoothly scroll up and down through the items.

There are a couple of caveats when using Flash in the sidebar. To re-position sidebar gadgets you click and drag them to their new position. But when you click on the Flash area, Flash captures the mouse input so you can’t drag the gadget around. We worked around that by making the chrome of the gadget out of a transparent PNG which you can use for moving the gadget around. Another interesting bug is that when you first click on an item in the Flash movie it doesn’t trigger the onRelease event of the MovieClip. After that, clicking on items opens the browser to view the news items. If anyone knows why this might be happening please let me know!

Having Flash in the sidebar opens up a TON of possibilities for cool gadgets like MP3 players and system monitors. Stay tuned for more!

If you are running Vista you can download the gadget here. Just save the ZIP file to your hard drive, rename it so that it has .gadget as the file extension and double-click to install.

Check out the FuseIDE extension!

Thanks to a trackback link from this blog, I found a great free extension for Flash 8. It is called theFuseIDE and when installed it adds a new panel into Flash that allows you to easily create animations with the excellent Fuse Kit. This is particularly helpful for people new to the kit or people without strong programming skills. There are a couple of different ways to create the Fuse sequences. You can actually create the animations using plain English which is a pretty freaking cool! For people who are more familiar with the kit you can create the sequences using a handy form. Once you are finished with the sequence you can copy the code to the clipboard for easy pasting into your ActionScript code.

Go and check out the extension athttp://play.visualcondition.com/fuse/. There is also another extension called FuseXML which I haven’t had a chance to checkout yet.

Happy Fusing!

ActionScript 3 QuickTip #4: Dynamic Frame Rates

This is a *very* cool new feature in ActionScript 3. We now have the ability to dynamically change the SWF frame rate at runtime using ActionScript. In the example below I have a somewhat creepy clown who is animating from side-to-side on the screen. You can use the slider to change the frame rate from 0 to 800 and something. There are a lot of applications for this such as lowering the frame rate for slower machines dynamically. The AS 3 code from the example is posted below:

this.stage.frameRate = 0;
rate.text = “0 fps”;
thumb.addEventListener(MouseEvent.MOUSE_DOWN, starter);
thumb.addEventListener(MouseEvent.MOUSE_UP, stopper);
thumb.addEventListener(MouseEvent.MOUSE_OUT, stopper);
thumb.addEventListener(MouseEvent.MOUSE_MOVE, mover);
function starter(args:Event)
{
thumb.startDrag(false, new Rectangle(track.x, thumb.y, track.width, 0));
}
function stopper(args:Event)
{
thumb.stopDrag();
}
function mover(args:Event)
{
var dist:Number = (thumb.x – track.x) / (track.width + track.x);
this.stage.frameRate = Math.round(dist*1000);
rate.text = Math.round(dist*1000).toString() + ” fps”;
}