Color Mixer Flex App Updated

I’ve updated my Color Mixer application. Right now it is as good as done. It’s not the best looking, but all the functionality is working fine. If there are any suggestions on how to improve it, I’d be glad to hear them.

I am still working on the AIR version. It’s taking a while figuring out how to skin components properly (the gradient sliders clearly show this).  And it seems that taking a screenshot of the desktop is not possible on AIR, which is a shame because I was really looking forward for the feature to take any color on screen. Unless I find a workaround for this, I’m going to have to leave that feature out.

I hope someone finds this useful, as I know I do. Here it is.

On different note, this post was posted from Windows Live Writer. I’m liking it very much. I hope everything displays fine.

The Art of Pixar

I happened on this site today. It is a ” fan-curated gallery” of all of Pixar’s publicly available conecpt artwork. It’s not very extensive right now, but it still is a great source of inspiration.

The Art of Pixar

Learning Illustrator

I’ve decided to give Illustrator a second chance since I’ve found that the Flash drawing environment was just not cutting it for me. I tried Inkscape, but it just didn’t feel right. I’ve always steered clear of Illustrator before because I hated how complicated it was compared to Flash, but it appears I am forced to just suck it in.

After a few hours of searching, I found this nice introductory tutorial. I think the “30 days” thing is just a gimmick, but, I do need to learn it in 5 days if I am to finish a project I’m working on. And since I’m familiar on how vector graphics work, and all I really need to do is adjust and learn the more advanced stuff, 5 days seems plausible.

I’ve also gathered some nice links regarding Illustrator/vector stuff.

Vectips

AIburn

VectorTuts

And the most awesome site I’ve found so far: GoMediaZine

Aviary beta testing

I recently got an invite from someone at the kirupa.com forums to some Aviary tools. I only have access to two tools at the moment (Phoenix and Peacock), and only tested Phoenix (Peacock was a bit too complicated to test).

All I’ve got to say is, wow. This toolset is quite impressive. It has some very nice basic features, a few filter effects, hotkeys (!), and it is very smooth (it’s slow at times, but that’s because of my limited CPU). The interface is very nice, although the icons and panels are a little too big and take a lot of real estate IMO.

Still, it’s a little buggy, and there a Feedback menu on the toolbar for easy, well, feedback. I’m going to play more with Phoenix and try to make something cool. I really want to test Hummingbird (the 3D editor), but I don’t know how to sign up for the beta or even if it’s available.

I have a few invites remaining, so if you want to try them, just post.

[Learn] Using TweenLite

TweenLite is a light-weight tweening engine for AS2 and AS3.

Tweening engines make animating objects through code a breeze. Instead of figuring out how to get to a certain point or value of an object’s property, all you need to do is figure out where you want that property to be (or where you want it to come from), the time it takes to get there, and you have movement.

There are a lot of tweening engines out there, but I prefer TweenLite because it is light (only 3kb), it is easy to use, does what I want it to do, and if I want more functionality, it has two older brothers*.

To get started, first you need to download TweenLite (I’ll be discussing the AS3 version here), and save it into your classpath.

There are 2 static methods you need to know, TweenLite.to() and TweenLite.from().

Those two methods take in three arguments:

• The object you want to animate
• The time, in seconds, the animation will span
• A dynamic Object instance target with predefined properties (this is where you put the values you want to reach)

So, to animate a box, it only takes one line to make it do some crazy stuff.

import gs.TweenLite; // import TweenLite

box_mc.x = 0;
box_mc.y = 100;

TweenLite.to(box_mc, 2, {x: stage.stageWidth, y: 200, rotation: 360, scaleX: 2, scaleY:2, alpha: .5});
//this will move the box to the edge of the stage, move it down 100 px, rotate it, scale it to 2x its
//size, and make it transparent, for 2 seconds.

Note that the TweenLite.from() method does the exact opposite of TweenLite.to(). It transforms your object to your third argument properties, and animates them towards the state the object has on the stage (very useful).
There are comments in the .as file itself, and explains some important things. This was to show how useful and indispensible tweening engines are. I can’t beleive how long I’ve strayed away from them, but now, I can’t live without them.

*TweenFilterLite – TweenLite + filtering capabilities
TweenMax – TweenFilterLite + bezier curves

Drawing Day

Today is 6-7-08, the day selected by some people as Drawing Day. The people on the site want to reach 1,000,000 drawings online, and I would love to be a part of that. I have marked this day on my calendar, but somehow I forgot about it and I haven’t drawn anything! But no worries, the day isn’t over yet and they say it might go on for at least a week, and besides, it still isn’t June 7th on the other side of the world.
So, if you haven’t yet, start drawing and upload it on anything, anywhere! I’ll porbably post it on this blog, and my DeviantArt account too.
Happy Drawing Day everyone!

On a completely unrelated side-note, I’ll be changing themes often over the next few days until I find one I really like, so expect  some changes.

Shuffler class

I’ve been working on my site for a few weeks now, and I have developed a class that will handle how I display assets on my site.

Basically, it “throws” in items into the stage, and you could shuffle them around or you could stack them up. I’ve made it very easy to use, and it’s still under development, but I think it’s ready to be used by others. This is my first class I’ve ever shared, and though it’s not much, I hope someone likes it or maybe even use it.

You can use any DisplayObject as the ‘items’ of the Shuffler.
There are explanations in the code, but here are some important points

• shuffle() – shuffles the items
• stack() – stacks the items
• setFocusOn(item:DisplayObject) – sets the item param as the focused item
• addItem(item:DisplayObject) – adds item param to the shuffler
• deleteItem(index:int) – deletes the item at index
• has max property for maximum number of boxes allowed. 0 for infinite.

Here is an example:

Sample usage in code:

package{
	import flash.display.DisplayObject;
	import flash.display.Sprite;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import flash.events.*;
	import flash.text.TextField;
	import com.mindfock.ui.Shuffler;

	public class TestShuffler extends Sprite{
		private var boxes:Array;
		private var shuffler:Shuffler;
		private var stacker:TextField;
		private var shuffle:TextField;
		private var adder:TextField;

		public function TestShuffler(){
			init();
		}
		public function init():void{
			shuffler = new Shuffler(400, 300, 6);
			createBoxes(6);
			createButtons();
			addChild(shuffler);
		}
		private function createBoxes(num:int):void{
			boxes = new Array();
			for (var i:int = 0; i < num; i++)
			{
				trace("created");
				var box:Sprite = drawBox(50, 50) as Sprite;

				boxes.push(box);

				shuffler.addItem(box);
			}
		}
		private function drawBox(w:Number, h:Number):DisplayObject{
			var box:Sprite = new Sprite();
			box.graphics.lineStyle(2, 0x000000);
			box.graphics.beginFill(Math.random() * 16000000);
			box.graphics.drawRect(0, 0, 100, 100);
			box.graphics.endFill();

			return box;
		}
		private function createButtons():void
		{
			// I've left out the drawing of the buttons
			square.addEventListener(MouseEvent.CLICK, shuffleHandler);
			square2.addEventListener(MouseEvent.CLICK, stackHandler);
			square3.addEventListener(MouseEvent.CLICK, addHandler);
		}
		private function shuffleHandler(event:MouseEvent):void{
			shuffler.shuffle();
		}
		private function stackHandler(event:MouseEvent):void{
			shuffler.stack();
		}
		private function addHandler(event:MouseEvent):void{
			var newBox:Sprite = drawBox(50, 50) as Sprite;
			shuffler.addItem(newBox);
		}
	}
}

Download source

Just save it in your classpath, under com/mindfock/ui

You need TweenLite for the tweening animations… If you don’t know what it is, you should look into tweening engines. They will save you a lot of hard work.

Now that I’ve got the main bulk of my site done, I hope I can finish it before classes start.