Download layered .PSD file for the set

Click on the image to see the whole set

Here’s something nice from BlackMoon’s team. We were experimenting with Away3D and we were in need of some nice 3D model to use in our playground. So – we’ve created a very nice, low-poly dinosaur and make some walking animation to use in Away3D. Click here to play with our dinosaur. Since we’re rather nice folks we figured out that we’ll share both the model and our Away3D experiment – if you’re interested – go ahead and download the files here. (it’s free to use for personal and commercial projects btw.).

Quick note: Open those images in new tab/window.

1440 x 900 Wallpaper – click to download

1650 x 1050 Wallpaper – click to download

iPhone Wallpaper – click to download

If you feel lonely and don’t have anybody to talk to – your misery has come to an end.
You can have Al (the guy from the header) as your friend form now on.
All you need to do is to download the pdf below, cut it out and glue with duck tape or something sticky enough.
Enjoy
(post some picutes in comments – it would be cool to see those mascots alive at your desks).

Download PDF with your new friend

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.

You can use this work in both private and commercial projects.

Download files (.fla + .ai – illustrator file was exported from Flash – let me know if it’s ok).

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.

The rules are pretty simple – the person who’ll have the highest amount of points in HangAl game by Thursday 31st of July will get the prize.

The main prize is a bottle of “Kossu” (if you don’t know what “Kossu” is – here is wiki about it).

Contestant that’ll get 2-5 place will get the even more valued prize – handshake with our CEO Dante with snapshot picture of this memoriable moment.

PS. Let me know about bugs in the game (I’ve made it in a pretty hurry).

PS2. You can send me the ideas for the puzzles – that’ll make your chances higher;)

And the winner is…

Dante !

You can check how happy he is after getting the first prize here.

The set comes as .fla and .ai file.
You can download it here.

This artwork is released under “do whatever you want with it” licence.
It’s free to use it in personal or commercial projects.
It would be nice if you could let us know in the comments when you’ll put it into good use – but that’s not needed.

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.