Flash Pixel Avatar Maker

Saturday, March 30, 2013



Work on some simple programming after a long break. Just a simple flash tools to make your own pixel avatar, which can be use as your social media profile pic. I will stop working on this now, and probably will only update the graphic options when I am free.

Pixel Me!!

You can try to pixel avatar maker in my labs page.

pixel avatar

Behind The Scene

Programming this is very simple. I actually spend more time creating the graphics. If you decide to make your own avatar maker in Flash, there are only few things you need to know

Changing Graphic Option
Different graphic sections (Hair, Eye, Mouth, Nose…) are store in different MovieClip and nested in a main MovieClip. Different options (Hair style1, Hair style 2, Hair style3…) are store in different frames. Then, you can just “gotoAndStop” on a particular frame. For example:

mcAvatar.hair.gotoAndStop(2);

pixel avatar

In my case, the file size is quite small and I am doing this all by myself, so I just did all the graphics in one SWF. You could probably did a function to load graphics from external swf/jpg/gif.

Changing Color
To change color, you just need to tint the movieclip. For example:


var tmpColor:Color=new Color();
var tmpTint:uint = e.target.selectedColor; //value from colorpicker component

tmpColor.setTint(tmpTint,1);
mcAvatar.hair.transform.colorTransform = tmpColor;

tint color

You probably will also want to further divide the graphic into more section, as tinting a MovieClip, will change the whole clip color.

Exporting Image
To export image from ActionScript. Download and install AS3CoreLib. Then you can use the following script to export image.


import com.adobe.images.JPGEncoder;
var tmpBitmap:BitmapData=new BitmapData(mcAvatar.width, mcAvatar.height);
tmpBitmap.draw(mcAvatar);

var tmpJPG:JPGEncoder = new JPGEncoder(100);
var tmpByte:ByteArray;

tmpByte = tmpJPG.encode(tmpBitmap);

var tmpFile:FileReference=new FileReference();
tmpFile.save(tmpByte, "avatar.jpg");

Like this Flash? Follow me on my Facebook page to get more updates.


Posted in Art and Design, Scripting and Coding | Tags: , ,
Previous :
Next :

4 kind souls comment on “Flash Pixel Avatar Maker”

  1. […] McLeun has a Flash based avatar maker that creates pixel art characters. […]

  2. Super cute~ This makes me think of Earthbound, which is one of my favorite games of all time! I’ve made this my profile pic, thank you so much!

  3. Lucas says:

    Omg! Amazing!

  4. lucy says:

    these graphics look really good! My new profile pic!!!!


Write a Reply or Comment

Your email address will not be published. Required fields are marked *


Tagcloud

3D ActionScript3 AfterEffects Animation BI Blender3D Book Comic Cycles Event FireAlpaca Flash Flex Freestyle Game Illustration JavaScript jQuery Painting Papermodel Photo Photoshop Pixel Tutorial Vector Vue