RSS link icon

Car Acceleration Tutorial

Date: Monday, December 08, 2008

In this flash actionscript 3.0 tutorial you will see how to make a car move more realistic then just moving back and forth, we will add some acceleration and de acceleration functionality so the car start up slow and increases in speed until it ends at a max speed, then when we want to stop it also need to slow down before it stops.

And it all should be looking like this.

First you may prepare some graphics for you stage, I guess you can do better then I did, I just made a fast one here. One simple tip I will tell you is to add a drop shadow to your object, so it looks like its standing on some kind of ground.

Now the only thing we need on the stage is some kind of car, just draw something or put in one if you have one. Convert it to a movie clip and give it the instance name "car".

Now we are ready for the actionscript part, so open up your actionscript panel and type in the code below.

First we need some variables to control some stuff, like telling us which key is pressed, the speed of the car, friction and acc..

  var rightKeyDown:Boolean;
  var leftKeyDown:Boolean;
  var keyPressed:int;
  var speed = 0.5;
  var cs = 0;
  var friction = 0.96;

Usually I always put an init function, we could just type it outside any function, but it all looks more structured with a init function for all the code that should be run at program start.

First the function makes sure to tell flash that no keys is down.

Then we add to eventlisteners, one for the key down, and one for key up, to call a function no matter what key is hit.

startMe();
function startMe():void {
	leftKeyDown = false;
	rightKeyDown = false;
	stage.addEventListener(KeyboardEvent.KEY_DOWN, pressKey);
	stage.addEventListener(KeyboardEvent.KEY_UP, releaseKey);
}

This next function "filters" what key is down, if its the left or right, then add some function if its the one or other.

function pressKey(event:KeyboardEvent):void {
	keyPressed = event.keyCode;
	if (keyPressed == Keyboard.LEFT) {
		leftKeyDown = true;
	}
	if (keyPressed == Keyboard.RIGHT) {
		rightKeyDown = true;
	}
	car.addEventListener(Event.ENTER_FRAME, driveCar);
}

And here is the function that has the most important code, it actually makes the car move, when the right key is down.

function driveCar(event:Event):void { if (leftKeyDown) { cs -= speed; } if (rightKeyDown) { cs += speed; } car.x += cs; cs *= friction; }

As you may have noticed in the startMe function we also added an eventlistner to listen to when the key is UP again, that is no key is down, so we can stop the car again.

function releaseKey(event:KeyboardEvent):void {
	var key_:int = event.keyCode;
	if (key_ == Keyboard.LEFT) {
		leftKeyDown = false;
	}
	if (key_ == Keyboard.RIGHT) {
		rightKeyDown = false;
	}
}

And that''s it, if you had any problem with the code, you may download the source code below, and test the car function through there.

Download button


Work with Arrays in Actionscript 3 part 2

Date: Thursday, November 06, 2008

Not so long ago I made a tutorial on how to make and use simple one dimensional arrays with flash actionscript 3.0, now we will go a bit a further and develop our skill to create multidimensional arrays.

 

Not that this is more complex then the first, one dimensional array, but its worth while digging into, so if you think your ready, lets get started.

There are different kinds of multidimensional arrays, the one we will be dealing with now is using a technique to nest arrays into each other, another way, which we will get into in another article is to create data of the data type object. I won''t get into this right now, because that''s another story for later.

First we will define a simple array with two other arrays nested inside it, then I''ll show you how to call the data from it.

var myArray:Array = new Array(new Array("one","two"), new Array("three", "four"));
trace(myArray);

As you see if you test this example, you get an output trace with all the items one two three and four, this looks simple, but this time I promise you, it will get a bit more complicated.

Now we only want to extract some of the data, lets say two and four.

var myArray:Array = new Array(new Array("one","two"), new Array("three", "four"));
trace(myArray[0][1]);
trace(myArray[1][1]);

Lets take a look at how we extract the item "two", first we call the myArray, tells it to get into the first array (0 indexed) and take its second item "two" (has the index 1).

The second trace does the same, first we call the myArray, tells it to get into the second array (indexed 1) and again we want to extract the second item "four" (has index 1).

Okay that was simple, but think if we had 4 or even 10 arrays nested, then it will demand some thinking..

Put our knowledge to good use!

And now that we have learned the basics of how to construct a multidimensional array, what should we do with it?

Well lets say you are building a simple board game, it could be chess, it could be something else, but what board games got in common is they usually are build up by a grid in some way, chess got white and black squares. What we can do then is to construct that grid with a multi dimensional array. I will show you an example and try to explain how its made up.

var gridSize:int = 2;
var mainArr:Array = new Array(gridSize);
var i:int;
var j:int;
for (i = 0; i < gridSize; i++) {
	mainArr[i] = new Array(gridSize);
    for (j = 0; j < gridSize; j++) {
        mainArr[i][j] = "[" + i + "][" + j + "]";
    }
}
trace(mainArr);

This might seem a bit confusing, but try to test the code, you should get something like this. [0][0],[0][1],[1][0],[1][1] this is a two dimensional array, shown as a grid, you can refer to each column or row, as you can see now you can add to a three dimensional array or four to make big grids.

First we create a variable called gridsize to tell how many rows we want, this will be 2, then we set a main array object to hold it all.

We declare two variables i and j one for each column, we just add to this if we want more columns.

Finally we loop through the site (rows) for both j and i columns and set the values of each items in the arrays.

In the next array tutorial we will create array objects containing objects with seperate properties and values, like I explained in the description above.



Glossy Error Icon Tutorial

Date: Monday, November 03, 2008

In this tutorial I will show you how to make my very glossy error message icon using Adobe Photoshop.

See what we will be making just below.

 

photoshop tutorial error icon

 

First we need to make the outer border of the ellipse shape, so with the ellipse tool drag out a circle (the color doesn''t matter we will change it later).

In the layers panel double click the new shape layer to get to the layers styles panel and give it settings as shown below.

 

photoshop tutorial error icon

photoshop tutorial error icon

photoshop tutorial error icon

photoshop tutorial error icon

photoshop tutorial error icon

And here is the metallic gradient I made..

photoshop tutorial error icon

 

Now your ellipse should look something like this.

 

photoshop tutorial error icon

 

Now that was the first part, easy right? the next stage is to make the inner ellipse, (the red shape), so with the ellipse tool drag out a new shape, a bit smaller, so it looks like the one below.

 

photoshop tutorial error icon

 

Again go to the layers styles panel and give this shape the following style settings.

 

photoshop tutorial error icon

photoshop tutorial error icon

photoshop tutorial error icon

 

And now the result should look like this.

 

photoshop tutorial error icon

 

Yes I know this is a lot of settings for such a little effect, but I promise its worth it..

Now lets make the X in the middle, you can use the custom shape tool to make one, or the text tool and use a custom font the make a cool variation, bit I didn''t, I quite liked the standard X with crisp corners.

 

photoshop tutorial error icon

 

Now yet again go to the layers styles panel and give it the following settings.

 

photoshop tutorial error icon

photoshop tutorial error icon

photoshop tutorial error icon

photoshop tutorial error icon

 

Now we are almost done, we only need the final touch, but its one of the most important things, the glossy effect.

We will be making this 3 times, using the same technique on 3 different places, so I will only show it once.

Hold down ctrl and click the outer ellipse shape layer to load the shapes selection.

Choose the elliptical selection tool, set the selection mode to subtract from selection, and drag over the selection as shown below.

 

photoshop tutorial error icon

 

Finally we will make a gradient going from white to transparent and drag it in the selection to make the glossy effect.

 

photoshop tutorial error icon

photoshop tutorial error icon

 

Now as I wrote before, you will need to repeat this last step two more times to accomplish the full effect as I did.

That''s it for now, I hope you enjoyed it.



Ultimate Halloween Icons Collection

Date: Thursday, October 30, 2008

Happy halloween or what else people are saying these days, I have actually been working on this post for some time now, collecting useful links with halloween stuff, in this post you will find almost every single halloween related icons there exist (only free icons of cause).

So lets start the list, its going to be quite a big one.

 

Iconshock.com - Some really cool and detailed halloween icons, quite new release I think.
halloween icons 1

 

 

Icondrawer.com - You must agree with me, this is the best and most detailed icon set, this halloween icons gets 10 out of 10 on my scale, good job.
hallowwen icons 7

 

 

Deleket - deviantart.com - As you guys might have noticed I spend a lot of time on deviantart, and have also contributed a couple of times, so here is some great halloween icons from deviantart, kind of smiley theme.
halloween icons 2

 

 

Freeiconsdownload.com - What is a halloween without a pumpkin, so here you go, some crazy halloween pumpkin icons.
halloween icons 3

 

 

Freeiconsdownload.com - Yes some more pumpkin icons. They are really cool and very nicely detailed.
halloween icons 4

 

 

Iconspedia.com - Iconspedia is a great archive for icons, they have a huge storage of cool icons, here is a big collection of their halloween icons.
halloween icons 5

 

 

benjigarner - deviantart.com - Again I stumbled on some icons from deviantart, for those who don''t know deviantart, I can say, they have a huge archive of everything you will ever need.
halloween icons 8

 

 

Iconfactory.com - As you can see from the next few examples, iconfactory has a lot of halloween theme icons, they are really nice and sweet, or scary maybe.
halloween icons 9

 

 

Iconfactory.com
halloween icons 10

 

 

Iconfactory.com
halloween 11

 

 

Iconfactory.com
halloween icons 12

 

 

Icons-land.com
halloween icons 13

 

 

Littlerainey.com - What is a halloween without some monsters, so here you got everything from a ghost, witch, jason voorhees and many more, they are just so great.
halloween icons 14

 

 

Iconarchive.com - Some more scary halloween icons.
halloween icons 15

 

 

Sniffels - deviantart.com - Also I think these are quite new, I haven''t seen them around before, but they are cool.
halloween icons 16

 

 

hybridworks - deviantart.com - Yes again some halloween pumpkins for you all.

halloween icons 17

 

 

Vector4free.com - And here I just slipped in an rss icon, with halloween theme, just that this is the first one I have seen of these, quite nice and clean.
halloween icons 18

 

 

Smashingmagazine.com - This new halloween icons from smashingmagazine should be brand new, just released, so enjoy them.

halloween icons 19

 

 

kearone - deviantart.com
halloween icons 20

 

 

Turbomilk.com - I know these are not really halloween icons, but they are cute monsters and monsters are some how related to halloween so I included them anyway.
halloween icons 21

 

 

Now you have something to look at until I make a collection for christmas icons and other holiday collections, so you have something to look forward to.


 
   Web Premium
 
 

All rights reserved, Copyright 2008. Contact