Follow mclelun on Twitter +deviantWatch mclelun +fan mclelun +fan mclelun RSS Feed
mclelun.com

Flash Pixel Avatar Maker

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.

Comments

2 kind souls comment on “Flash Pixel Avatar Maker”
Comments and share some love now!

  1. Lucas says:

    Omg! Amazing!

  2. lucy says:

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

Your comment

Ideas, suggestion and criticism.

archives


logo Copyright © 2010-2014 mclelun.
Valid XHTML. Subscribe RSS.
spam eaten
80,204 spam!