Home  ›  December 2006
December 27  |  Actionscript 3 + General + Tutorials  |  19 comments

ActionScript 3 QuickTip #5: The Graphics API

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


December 13  |  General  |  5 comments

My new official frog blog!

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


December 7  |  Actionscript 3 + Tutorials  |  19 comments

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:

  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


December 5  |  Actionscript + Flash 8 + WPF Crossover  |  7 comments

More Flash and WPF/E Integration Madness!

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


December 4  |  Flash 8 + WPF Crossover  |  7 comments

Flash and WPF/E Interactive Example!

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 :-)


1 - 5 of 6 Prev 5Next 5