AS3 Drawing API examples

OK, so with ActionScript 3.0 drawing API you can draw almost anything. You can use straight or curved lines, solid colors or gradients and more. I have been searching for some interesting drawing examples but almost everyone will show you single example and that's it.

In order to feel comfortable with this library I needed some practice, so here they are - some basic shapes with AS3 drawing library.

shape 1 ActionScript class:

package {
 
 import flash.display.MovieClip;
 import flash.display.Graphics;
 
 public class shape1 extends MovieClip {
  
  public function shape1() {
   
   this.graphics.lineStyle(1, 0x000000);
   this.graphics.beginFill(0xe6e6e6);
   this.graphics.moveTo(100,160);
   this.graphics.lineTo(100,100);
   this.graphics.lineTo(120,100);
   this.graphics.lineTo(120,120);
   this.graphics.lineTo(140,120);
   this.graphics.lineTo(140,100);
   this.graphics.lineTo(160,100);
   this.graphics.lineTo(160,160);
   this.graphics.lineTo(140,160);
   this.graphics.lineTo(140,140);
   this.graphics.lineTo(120,140);
   this.graphics.lineTo(120,160);
   this.graphics.endFill();
  }
 }
}

shape 2 ActionScript class:

package {
 
 import flash.display.MovieClip;
 import flash.display.Graphics;
 
 public class shape2 extends MovieClip {
  
  public function shape2() {
   
   this.graphics.lineStyle(1, 0x000000);
   this.graphics.beginFill(0xe6e6e6);
   this.graphics.moveTo(130,100);
   this.graphics.lineTo(140,120);
   this.graphics.lineTo(160,120);
   this.graphics.lineTo(150,140);
   this.graphics.lineTo(110,140);
   this.graphics.lineTo(100,120);
   this.graphics.lineTo(120,120);
   this.graphics.endFill();
  }
 }
}

shape 3 ActionScript class:

package {
 
 import flash.display.MovieClip;
 import flash.display.Graphics;
 
 public class shape3 extends MovieClip {
  
  public function shape3() {
   
   this.graphics.lineStyle(1, 0x000000);
   this.graphics.beginFill(0xe6e6e6);
   this.graphics.moveTo(120,100);
   this.graphics.lineTo(150,100);
   this.graphics.lineTo(170,140);
   this.graphics.lineTo(100,140);
   this.graphics.endFill();
  }
 }
}

shape 4 ActionScript class:

package {
 
 import flash.display.MovieClip;
 import flash.display.Graphics;
 
 public class shape4 extends MovieClip {
  
  public function shape4() {
   
   this.graphics.lineStyle(1, 0x000000);
   this.graphics.beginFill(0xe6e6e6);
   this.graphics.moveTo(100,110);
   this.graphics.lineTo(110,100);
   this.graphics.lineTo(120,110);
   this.graphics.lineTo(130,100);
   this.graphics.lineTo(140,110);
   this.graphics.lineTo(150,100);
   this.graphics.lineTo(160,110);
   this.graphics.lineTo(160,150);
   this.graphics.lineTo(100,150);
   this.graphics.endFill();
  }
 }
}

shape 5 ActionScript class:

package {
 
 import flash.display.MovieClip;
 import flash.display.Graphics;
 
 public class shape5 extends MovieClip {
  
  public function shape5() {
   
   this.graphics.lineStyle(1, 0x000000);
   this.graphics.beginFill(0xe6e6e6);
   this.graphics.moveTo(130,100);
   this.graphics.lineTo(150,110);
   this.graphics.lineTo(160,130);
   this.graphics.lineTo(150,150);
   this.graphics.lineTo(130,160);
   this.graphics.lineTo(110,150);
   this.graphics.lineTo(100,130);
   this.graphics.lineTo(110,110);
   this.graphics.endFill();
  }
 }
}

Best way to do this is to draw your shapes on paper with coordinate system in place, but remember not Cartesian system but Flash coordinate system with (0,0) point started in top left corner of the Stage.

These shapes don't have to be simple. If we take last shape, number 5 and just keep adding new lines, we can get shape number 6.

package {
 
 import flash.display.MovieClip;
 import flash.display.Graphics;
 
 public class shape6 extends MovieClip {
  
  public function shape6() {
   
   this.graphics.lineStyle(1, 0x000000);
   this.graphics.beginFill(0xe6e6e6);
   this.graphics.moveTo(130,100);
   this.graphics.lineTo(150,110);
   this.graphics.lineTo(160,130);
   this.graphics.lineTo(150,150);
   this.graphics.lineTo(130,160);
   this.graphics.lineTo(110,150);
   this.graphics.lineTo(100,130);
   this.graphics.lineTo(110,110);
   this.graphics.endFill();
   
   this.graphics.beginFill(0xeffffff);
   this.graphics.moveTo(120,120);
   this.graphics.lineTo(140,120);
   this.graphics.lineTo(140,140);
   this.graphics.lineTo(120,140);
   this.graphics.endFill();
  }
 }
}

This kind of drawing we used to call 'turtle graphics'.
Next time some examples including curves and gradients.


*_*

ActionScript Random Number Generator With Blur Effect

There was a few posts on my older blog in form of tutorial on how to create random number generator with blur effect. I'm near bandwidth limit, so no live example, but click on preview image to download files.




here is required code

// author: FLANTURE http://flanture.blogspot.com
// date: 24 Jan 2009

import flash.filters.BlurFilter;

// function for roll_mc movie clip onPress action. If timer has not started,
// that means there is no action in progress, so we can start one.

roll_mc.onPress = function() {
 if (!timerStarted) {
  var filter:BlurFilter = new BlurFilter(60, 120, 1);
  var filterArray:Array = new Array();
  filterArray.push(filter);
  num1_txt.filters = filterArray;
  var newNumber1 = Math.floor(Math.random()*10);
  num1_txt.text = newNumber1;
  num2_txt.filters = filterArray;
  var newNumber2:Number = Math.floor(Math.random()*10);
  num2_txt.text = newNumber2;
  num3_txt.filters = filterArray;
  var newNumber3:Number = Math.floor(Math.random()*10);
  num3_txt.text = newNumber3;
  timerStarted = true;
 }
}

// functions for restoring blur effect

function restoreBlur1() {
  num1_txt.filters = new Array(filter);
}
function restoreBlur2() {
  num2_txt.filters = new Array(filter);
}
function restoreBlur3() {
  var filter:BlurFilter = this.filters[0];
  filter.blurY = 0;
 filter.blurX = 0;
  num3_txt.filters = new Array(filter); 
}

// next function controls when blur should stop and numbers should display.

onEnterFrame = function () {
 if (timerStarted) {
  if (counter < thirdDigitStop) {
   counter += 1;
   if (counter == firstDigitStop) {
    restoreBlur3();
   }
   if (counter == secondDigitStop) {
    restoreBlur2();
   }
  } else {
   timerStarted = false;
   counter = 0;
   restoreBlur1();
  }
 }
}

// you can change firstDigitStop and other variables to suit your needs.
// numbers represent frames, not seconds.

onLoad = function () {
 timerStarted = false;
 counter = 0;
 firstDigitStop = 8;
 secondDigitStop = 16;
 thirdDigitStop = 24;
}

This example can be used as slot machine simulation or anything similar you can think of.

*_*

Old Flanture will be assimilated. Resistance is futile.

Back in 2007 Flanture has started as two separate blogs. This one is, as you might already know, more about ActionScript, Flash and Flex stuff. The other blog has actually started in January 2007, three months before this one, but it was intended from beginning for Flash games related stuff and just a little bit of flashlite.

Things have changed in the meantime and since I have few new projects going on and time is most valuable asset I decided to pull the plug for my Blog.com hosted blog. This means I will port some of posts here, but not in original state. Posts will be rewritten and updated, so you can expect some Flash games related code here.


Btw, Blog.com home page has changed recently and I find out they moved to WordPress, but right now it seems nothing is working as it should. I couldn't even publish my farewell post and my blogroll section is gone even though on dashboard it is marked as visible.

Free Flash Clocks projects is doing just fine. I have managed to publish 20 clocks in 20 days, as I promised to myself, one clock per day. Today's special clock is honoring King of pop Michael Jackson. I didn't do much marketing except on Twitter and few other blogs but I plan to do it besides starting with custom clocks.


*_*

Manipulating Shapes Using Bone Tool in Flash CS4

Bone Tool in Flash CS4 can be used in various ways to create IK effects with animations, but also you can use this powerful tool to manipulate shapes. Here is quick tutorial on how to do it.

Create new Flash AS3 file. Go to Insert - new symbol or CTRL+F8 to create new movie clip. Give it some name or leave default, it doesn't matter.

Select Polystar Tool and draw single pentagon shape on Stage. Now, select Bone Tool from tool box or press X on keyboard. You will create 5 bones all starting from the center of pentagonal shape all the way to shape vertices like image shows.

Now, you have noticed new Armature layer and that's what will work on next. We have to introduce some new armature positions, so right click on frame 10 and select insert pose. Use selection tool (V) to move bones around. Continue to do same thing on frames 20, 30, etc.

Finally when you think you have enough changes, move for another 10 frames and insert another pose. Now, you can actually copy and past different poses with right click on specific armature frame, but you will need a lot of patience to make this operation work. Paste first pose onto last armature frame.

When you are done, go back to do Scene 1 and from library drag and drop movie clip instance on the Stage. That's it, test your movie.

This is just one simple example on how to use bone tool to manipulate shapes in Flash CS4, but that's enough for you see how incredible effects can be achieved with just playing around with new Flash tools.

*_*

New Blog with free flash clocks

If you are not first time here you probably know about few free Flash clocks I published earlier like:

Analog Clock Worldmap or
Classic Blue Clock

I have finally managed to establish new blog for my clocks collection (currently I have around 20 of them) and I have excellent domain for it Flash2nd.com. For now I have published only few of them and not the best ones, but first ones I made. Some of them are even two years old!

My plan is to publish one new clock each day for at least next 3 months, but we'll see how that goes. Feel free to download any of them (or all), leave comments and make suggestions. This is very work-in-progress blog, so nothing spectacular yet.

Thanks for support.



*_*