Usability w projektach Flex – prezentacja FlashCamp 2010 Warsaw from Robert Podgórski on Vimeo.

Download .pdf file
Download Keynote file

Character illustration step by step from Robert Podgórski on Vimeo.

The article is basically a overview of pixel-art style combined with a 6 page long tutorial on creating a isometric city scene in Photoshop and PixAIR (PixAIR is a small AIR application for creating pixel art developed by one of the BlackMoon’s team members – Michał).

Before we start:
One general info about pasting anything in Gimp.
To paste something into new layer, please use the general method (that is – ctrl+c, ctrl+v) – and after that click “new layer” icon to make a new layer from Floating Selection.

Ok – so we’ll make the background first. As the base I used a image of old paper.

We crop it to some smaller size.

And than we add some gradient (on new layer). We change the layer mode to multiply.

Great – now we can move to our fairy.
We’ll start with a model image.

We paste it to new layer (and make a copy straight away).

With Pen tool we speparate the image from the background. We can leave the places with hair for now.

For cutting out the hair – we can use the technique described here.

Ok – we have the girl separated from the background.
We put the separated image on the upper layer and the whole model image on the bottom layer.
We change bottom layer mode to multiply. (We’ll get a shadow from the bottom layer)

We’ll add fairy wings right now – we’ll get them from the butterfly image.

We make two layers from the butterfly image and we cut out the wings with the Pen tool.

We put the wings on layer above the fairy.
We change wings alpha to 80% and boost color a little with curves tools.

We need to cut out some part of the image – so it looks more realistic. We make the layers almost transparent (like 40-50%) – and we cut out some part of wings accordingly to fairy hair.

We can also add some shadow on girl’s back. On new layer (between wings and the girl) we draw a shape of the shadow with a Pen. We fill it with black color, add some gaussian blur (like 10-20px) and we make alpha aprox. 60%.

We draw a shadow of the wings in the same way (maybe make the alpha a little less).

We add some fantasy swirls (made with this brush.)

Fairy should have more vivid hair color – let’s make it green.
To do this we add green layer above the hair layer. Than we mask the layer in the same way that we used for seperating hair. Than we make the layer semi-transparent and change it’s mode to “overlay”.

I decided to change the background at that time.
I change old paper to beige gradient.

I’ve also add generated fog (with build-in filter).

Now some finishing steps.
I’ve added some red hair and some more swirls. In the background I’ve made some leafes made with dynamic brush Vine (comes with Gimp).

We change the leaf layer to mask – and mask yellow-red gradient with it.

On new layer we add some more leaves and again make it a mask for a gradient.

Withe Sparks brush (also comes with Gimp) we add some… sparks;)

The last step is to add some grunge elements to the background (with this brush.)

And that’s it – we have it done:)
(click on the image below to enlarge it)

If you would like to check how the .xcf file is build – you can download it here.

The illustration is released under Creative Commons licence – you can use it for private or commercials projects.

Before:

After

You can download higher resolution video for that tutorial here.

This is a calculator widget with custom, chrome window.
The main point of this tutorial is to show how to create chrome windows, add your own window managment functions (to close, minimalize and move the window) and create key based events.

Design

We can create the design of our widget straight in Flash CS3 or import it from other software (like Photoshop). For this tutorial we’ll use the design made straight away in Flash CS3.
There’s no difference in creating the design and animation for AIR compared to regular Flash Player file.
In our case we’ve created dynamic text for calculator screen and set of animated buttons.
btw. This design is released under CC licence – if you would like to use any part of it in personal / commercial projects – by all means please do so. (same goes for the code)

AS 3.0 Calc Class

We’ll create a class to handle all the calculator functions. This is not very needed, but let’s keep it “the right way”. You can check the class here.

package{
	public class Calc{
		public static function sum(liczba1:Number,liczba2:Number):Number{
			var wynik = liczba1 + liczba2;
			return wynik;
		}
		public static function deduct(liczba1:Number,liczba2:Number):Number{
			var wynik = liczba1 - liczba2;
			return wynik;
		}
		public static function multiply(liczba1:Number,liczba2:Number):Number{
			var wynik = liczba1 * liczba2;
			return wynik;
		}
		public static function divide(liczba1:Number,liczba2:Number):Number{
			var wynik = liczba1 / liczba2;
			return wynik;
		}
	}
}

Nothing special actually ;)

Code

Let’s go through the more interesting bits of the code. I’ll try to comment it as much as I could.

import flash.desktop.NativeApplication;
//we need that to handle our chrome window
var myCalc:Calc = new Calc();
//let's create our Calc object
function calculateResult()
{
	//we take two elements and perform the operation
}
function removeTrailingZeros()
{
	//we don't need any 0 at the end, right?
}
function calculatorInterface(action:String)
{
       //this is calculator interface - we pass action String telling the
       //function what to do next
}
//listener for Keyboard events
//when a number key or any "action" key is pressed - the function
//passes the action String to calculator interface function
function reportKeyDown(event:KeyboardEvent):void
{
	//trace(String.fromCharCode(event.charCode))
}
stage.addEventListener(KeyboardEvent.KEY_DOWN, reportKeyDown);
//code for moving, minimalise and close chrome window
theCalc.moveButton.addEventListener(MouseEvent.MOUSE_DOWN, moveWindow);
function moveWindow(event:MouseEvent):void {
        //move window
	stage.nativeWindow.startMove();
}
theCalc.calcCloseButton.buttonMode = true;
theCalc.calcCloseButton.addEventListener(MouseEvent.MOUSE_DOWN, closeWindow)
function closeWindow(event:MouseEvent):void {
	//close window
	NativeApplication.nativeApplication.exit();
}
theCalc.minimizeButton.buttonMode = true;
theCalc.minimizeButton.addEventListener(MouseEvent.CLICK, minimize_CLICK);
function minimize_CLICK(event:MouseEvent):void
{
       //minimize window
       stage.nativeWindow.minimize();
}

AIR Deployment

Till this point we’ve just created a ordinary AS 3.0 Flash file – time to make it AIR.
First we go to File – Publish Settings. Choose “Flash” tab and change “Version” to “Adobe AIR 1.0″.
Than choose the Commands option from the main menu and go for “AIR – Application and Installer Settings”.

Here you can setup how your AIR application installer will be created.
For now – we can leave everything as default, exept the window style – we change it to “Custom Chrome (transparent)”.

Last step is to add your certificate. You don’t need it to create AIR applications – but without it users won’t know if to trust your app or now :)

Download

Here are all the files:
BlackMoon Calculator installer
BlackMoon Calculator .fla and .as

As I said before – you can use those files for whatever purpose you like.
Looking forward for your comments.

Here’s the photo we’ll start with:

The photo itself is very nice – but the only thing that annoys me are the people all over the beach.
(I guess they were annoying at the time when picture was shot as well ;)
Ok – let’s clean it up a little.

We’ll work with high zoom (400%) using Clone Brush tool – with options set as on the screenshot.

Technique of using a Clone Brush is very easy to show, and quite hard to master.
You won’t be able to clone any backgroud – only the repeated textures will do (like water or rock in this example). You need to clone large areas so it look natural, but you should make sure to clone out any specific patterns that are easy to recognize.

Remember about the details – like taking out reflections in the water.
(I actually miss reflections on the wet sand at right side)

As I said – remember not to leave cloned patters that are easy to spot (remember those cloned iran rockets? ;).

We continue to clone background areas to other places – hiding what we would like to hide (tourists in this case).

Final touch is to boost Saturation and Contrast a little – and we have it ready.

Before (click to enlarge)

After (click to enlarge)

We’ll use this nice photo to demostrate it.

The whole object (I mean the girl and the horse) is pretty easy to cut out with pen or similar tool – but the horses’ tail might be a little tricky.

Let’s start from duplicating the first layer.

Then we choose Desaturate option from menu Color,  so duplicated layer becomes black&white.

Than we change Brightness and Contrast levels.

We go back to the orginal layer and choose Add Layer Mask option from right-click menu. We copy the black&white layer to the layer mask.

Effect is totally opposite to what we really wanted to do;)

So we choose Invert option from menu Color.

We make another copy of the orginal layer.

Now we can cut out most of the object “the normal way”, and in problematic places (like the tail) – we can simply delete it with eraser. Those places are already seperated by the mask – and we see it from the layer beneath.

There’s some grass visible on the bottom – we change this part of mask layer to solid black.

Final effect:

(I had to add some dust to the legs – there was grass still visible. Of course we would be able to do it more nicely, but I’ll leave it for the next tutorial)

If you would like to examine how it’s made a little closer – you can download the .xcf file here.

Update

Many people have a little problem with this tutorial – and I think I need to clarify it a little.

After copying and pasting the black and white layer, when you have:

You need to anchor the pasted layer in the mask – by clicking small anchor icon in the bottom of the layer dialog box.

And when I said “Effect is totally opposite to what we really wanted to do;)” – I ment that we should invert the colors (it’s written under the picture, but again I think that this was not so obvious).

Thank you for the comments – I’ll try to be more specific next time:)

First we start with a sketch – in our example I’ve made a very nice bear – his name is Teodore.

So – we scan Teddys’ sketch and import it to Flash (you can also make it with any other vector editor – like Illustrator or Inkscape).

You can see that Teddy is actually made from many simple shapes. We’ll create each element individually – let’s start with eyes.

Each eyeball is made from three circles. You need one black circle for base and two white circles for reflexes.
You can add radiant gradient fill to the base to make it look nicer.

Than we move to eyebrows. Make it simple rectangles first – than you can round its shape a little

Let’s move to the ears.
As you can see the ear is also build with two simple elipses. You can use radial gradient fill to make the shape of the ear more clear.

We can also flip one ear – to give a little character to the Teddy.
(just cut a part of the ear, paste it to layer above, change it’s color to something bright, and place it mirrored at the ear).

We can move to face and body now – both head and torso of the Teddy are build with simple elipses.

We use two elipses for the bear’s face.

To make the nose simply put straight vertical line in the middle of the elipse (tip: make the line a Movie Clip, select both the line and elipse – and use align option). Than finish the nose with two bent lines.

Torso is made with two elpises (Do you understand why this post is titled “Create cartoon with simple shapes”, right?). Elipses are filled with radial gradient to make it look more realistic.

Finally we move to the legs.
Outer shape is a elipse (again). To make the inner shape we need to use Pen tool. (here’s the link to tutorial how to use the pen). We fill the shapes with radial gradients.

That’s all – our Teddy bear is completed:).

Feel free to download and check the .fla file here.

You can use this to any work you would like (commercial or non-commercial). If you use it please drop a comment about it.