Sunday, November 15, 2015

Pixel Avatar Maker


Pixel Avatar Editor
Did this simple flash tools to make your own pixel avatar during 2013, which can be use as your social media profile pic.

Pixel Avatar

Below are some quick possibilities of what you can do with this editor.

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");
 


Pixel Me!

You can try to pixel avatar maker in my deviantart. This is develop with Flash AS3, so you might not be able to view with your mobile phone.

pixel avatar maker

Reference

Pixel Avatar Maker Deviantart

No comments: