Archive for December, 2006

ActionScript 3 QuickTip #5: The Graphics API

December 27th 2006 Posted to Actionscript 3, General, Tutorials

In Flash 8 there were a bunch of properties and methods of the MovieClip class that allowed us to dynamically draw things at runtime. In ActionScript 3, we have these same capabilities along with some handy new ones. The drawCircle() and drawRoundRect() methods are two which will definitely save Flash devlopers quite a bit of time. The biggest difference in the AS 3 drawing API is that it is now its own class called Graphics and is attached to display objects such as MovieClip, Sprite, and Shape. You access the methods by writing something such as myClip.graphics.lineStyle(). The example below draws a line with a random color wherever your mouse moves. You can click the movie to clear the accumulated graphics. The AS 3 code is listed below that.

  1. clip.addEventListener(MouseEvent.MOUSE_MOVE, drawLine);
  2. clip.addEventListener(MouseEvent.CLICK, clearIt);
  3.  
  4. function drawLine(args:MouseEvent)
  5. {
  6.         clip.graphics.lineStyle(15, Math.random()*0xBBD9F7);
  7.         clip.graphics.lineTo(args.localX, args.localY);
  8. }
  9.  
  10. function clearIt(args:MouseEvent)
  11. {
  12.         clip.graphics.clear();
  13. }

Lee

Comments(19)

My new official frog blog!

December 13th 2006 Posted to General

Frog recently launched a public blog with a select group of prominent employees. Luckily I’ve convinced them to include me as well. This now makes a total of three blogs for me. My blog for frog, called Regular Expressions, will be more general in nature and won’t be tied to any particular technology. Make sure you come over and check it out. Please link to it a lot and post lots of comments so I can get a nice Christmas bonus :-) .

You can read my blog at http://www.frogdesign.com/?author=32. Be sure to also check out some of the other authors as they talk about a wide range of topics relating to the design industry.

Lee

Comments(5)

ActionScript 3 QuickTip #4: Dynamic Frame Rates

December 07th 2006 Posted to Actionscript 3, Tutorials

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:

  1. this.stage.frameRate = 0;
  2. rate.text = “0 fps”;
  3.  
  4. thumb.addEventListener(MouseEvent.MOUSE_DOWN, starter);
  5. thumb.addEventListener(MouseEvent.MOUSE_UP, stopper);
  6. thumb.addEventListener(MouseEvent.MOUSE_OUT, stopper);
  7. thumb.addEventListener(MouseEvent.MOUSE_MOVE, mover);
  8. function starter(args:Event)
  9. {
  10.         thumb.startDrag(false, new Rectangle(track.x, thumb.y, track.width, 0));
  11. }
  12. function stopper(args:Event)
  13. {
  14.         thumb.stopDrag();
  15. }
  16. function mover(args:Event)
  17. {
  18.         var dist:Number = (thumb.x – track.x) / (track.width + track.x);
  19.         this.stage.frameRate = Math.round(dist*1000);
  20.         rate.text = Math.round(dist*1000).toString() + ” fps”;
  21. }

Click on the image below to launch the example. Flash Player 9 required:

Lee

Comments(19)

More Flash and WPF/E Integration Madness!

December 05th 2006 Posted to Actionscript, Flash 8, WPF Crossover

Perhaps I’m getting carried away. I tend to do that whenever a new technology comes out. This example is much cooler than my last post. I’ve built a new city called Microbe where Flash and WPF/E co-exist peacefully. The left side of the city is WPF/E and the right side is where Flash hangs out. The blue disc travels seemlessly (almost) between the two sections of the city with no problems. This again was made possible by JavaScript, who in this situation is the neutral thrid party :-) .

You need the WPF/E plugin in order to view this example. The full source code can be found here. Click on the image to check it out!

Lee

Comments(7)

Flash and WPF/E Interactive Example!

December 04th 2006 Posted to Flash 8, WPF Crossover

For those who haven’t heard, Microsoft released a CTP of WPF/E, which is a Flash-like browser plug-in for displaying a subset of WPF. After a couple of hours of checking it out, I suddenly realized that since WPF/E uses JavaScript as its scripting language, communication with Flash would be a piece of cake. Flash’s ExternalInterface API makes calling and receiving functions from JavaScript very easy. Before I get into details, you will need the new WPF/E browser plug-in installed in order to see the example. You can get the plug-in for both PC and Mac here.

What I created is a drag and drop application where you can drag on a graphic in either Flash or WPF/E and it will automatically follow in the other. The Flash movie has a Flash icon and the WPF/E has a Windows icon. This communication was all made possible by JavaScript. Click on the image below to see the example and you can get all of the source here. This is exciting stuff!

Lee :-)

Comments(7)

ActionScript 3 QuickTip #3: Sound Amplitude

December 01st 2006 Posted to Actionscript 3, Tutorials

A while back I held a contest to see who could come up with the coolest sound visualization using the new SoundMixer.computeSpectrum() method. This gives you a whole bunch of byte data which you can use to create cool sound-driven applications. But what if all you need is the overall amplitude of the sound? Well you can do this with computeSpectrum() by averaging out all the values, but that is a lot of work considering that Flash has a built set of properties just for this situation. The leftPeak and rightPeak values of the SoundChannel class provide amplitude data for each channel of the audio file. The example below shows how to use this data to create an amplitude meter. The ActionScript 3 code is below the graphic and you can get the full source here. Flash Player 9 required.

  1. left.mask = leftMask;
  2. right.mask = rightMask;
  3.  
  4. var s:Sound = new Sound();
  5. s.load(new URLRequest(“loop.mp3″));
  6.  
  7. var sc:SoundChannel;
  8. sc = s.play(0, 1000);
  9.  
  10. this.addEventListener(Event.ENTER_FRAME, showAmplitude);
  11.  
  12. function showAmplitude(eventArgs:Event)
  13. {
  14.         leftMask.y = 318 + (sc.leftPeak * – 230);
  15.         rightMask.y = 318 + (sc.rightPeak * – 230);
  16. }

Lee

Comments(21)