0tutor Computer Graphic Designers Blog

Summer sky wallpaper

Tue, 2 Sep 2008 08:23:00 EST

Even though its raining and the summer is over, I still feel like making one more summer wallpaper to my collection. next time I will try to make some winter theme wallpapers instead, or some ice to cool me down a bit.

But for now you may settle for some summer inspired wallpapers and here is the next one in the season.

Here is the wallpaper download info.

Size: 1.5 mb
Resolutions: 1280x1024 and 1440x900
Format: Photoshop psd file.

Sunny day wallpaper

Tue, 26 Aug 2008 08:23:00 EST

It has been sunny all day after 7 days of constant rain, damn its nice with some sun, and the temperature has raised quite a bit, so I got inspired to make a wallpaper of a sunny day with some sunrays and green, yellow bright colors.

Hope you like it.

Here is the wallpaper download info.

Size: 1.5 mb
Resolutions: 1280x1024 and 1440x900
Format: Photoshop psd file.

Stylish button set giveaway

Wed, 20 Aug 2008 08:23:00 EST

I have really been working lately, I had a customer requesting some buttons for some software interface, so I made a couple of different styles. (Of cause I cant give away the one they paid me for) but I did make a couple of others, and here is one I will share with you for free.

So click here to download my stylish photoshop buttons set, easily editable to change the buttons text and symbols, or even adjust colors and shapes.

Im acturlly really annoid that I cant share with you the buttons they actrually choose, because they are really cool, maybe some day they will let me publish them for you.

But as I said, here are my new buttons set.

Download the photoshop file:

Size: 314kb
Format: Photoshop psd file.

Sleek Green Soda Wallpaper

Mon, 18 Aug 2008 08:23:00 EST

I made this new wallpaper today when I saw some soda advertising in a magazine, I dont even remember what magazine, but I quite like my new colorful wallpaper.

And for the wallpapers specs.

Size: 1.5 mb
Resolutions: 1280x1024 and 1440x900
Format: Photoshop psd file.

Army text style with Photoshop

Fri, 15 Aug 2008 08:23:00 EST

In this Adobe Photoshop tutorial I will show you how to make this great looking army style text effect.

First start by making a green gradient and drag it across the stage, then type in your text, the color does not matter, we will change that later.

I used a font called "stencil" it has kind of a army style look, and looks quite cool with the effect.

Now in the layers panel double click the text layer we just created to get to the layers styles panel, then give it the following settings.

For the last one, the pattern overlay, you will need to create a pattern first or download a photoshop pattern and import it the your photoshop patterns, just do some google search for photoshop stripe pattern and you will find some good free photoshop patterns.

Now we will make the top glossy part of the letters, so hold down ctrl and click the text layer in the layers panel to load the text selection.

Then create a new layer above and name it gloss or something, with a white color use a brush to stroke some glossiness on the letters like I did below.

Now the rest of it is just for show, but I will tell you what I did anyway, just make a copy of all the layers concerning the text, flip it using the edit -> transform -> flip vertical, move it down and bring its opacity down. this will make a mirror reflection of the text.

Retro contact form with CSS

Mon, 11 Aug 2008 08:23:00 EST

As you might have noticed on my blog, I have been doing a lot of css/html designs lately, well its not like I stopped playing with photoshop, but Im taking a break and trying to motivate myself with other sources.

So what we have been doing today is making a retro styled html contact form like you can see below, you can also download the html source files below.

Size: 314kb
Format: Photoshop psd file.

Now for all of you who also want to learn something here and not only use what I made (even though thats also okay), but here is a small tutorial on how to make this retro styled contact form with html and css styles.

First the retro white box is just one big image, you can download it below, just right click and save on your desktop.

I made it in photoshop, im not going through the steps on how I made it, you can watch some of my photoshop tutorials, and I will promise you, you will learn how to do it.

Now we need two files, an html file to contain all the html code, and a styles sheet file to control most design and sizes etc.

So here is the source code for the html file

<title>CSS styled Login form --> by 0Tutor.com</title>

type="text/css" />

</head>

<body>

<tr>

</tr>

<tr>

<td><label for="email">Email:</label></td>

</tr>

<tr>

<td valign="top"><label for="message">Message:</label></td>

</tr>

<tr>

</tr>

</table>

</div>

</body>

</html>

body {

background-color:#80d7ff;

font-size:120%;

}

.textbox_outer {

padding-top: 230px; padding-left:150px;

}

.box_wrapper {

background-image:url(imgs/bg.jpg); background-position:center; background-repeat:no-repeat;

width:650px; height:597px; margin:auto; margin-top: 70px;

}

textarea {

font-family: "Lucida Grande",Verdana,sans-serif;

font-size:18px;

border: 1px solid #999999;

width:270px; height:100px;

background-color:#80d7ff;

overflow: auto;

}

input {

font-family: "Lucida Grande",Verdana,sans-serif;

font-size:18px;

border: 1px solid #999999;

}

input.textboxes {

width:270px;

background-color:#80d7ff;

}

input.btn {

color:#ff00c0;

border: 1px solid #999999;

}

Save the files, remember to keep the image file in a seperate folder named imgs, and if you can get it to work, try downloading the project file at the top of the post.

Funny cartoon text style

Fri, 8 Aug 2008 08:23:00 EST

In this Adobe Photoshop tutorial we will make a funny cartoon text effect, I hope you like it.

First type in the text you want to apply this effect to, remember to use a very bold text, and with some soft edges will also help.

I used a font called "showcard gothic" which gives me a great effect.

Now go to the layers panel and double click the text layer to get to the layers styles panel and give it the following settings.

For the pattern overlay, you will need to create a pattern first or download a photoshop pattern and import it the your photoshop patterns, just do some google search for photoshop stripe pattern and you will find some good free photoshop patterns.

Now we will make the glossy effect at the top of every letter.

Hold down ctrl and click the letters layer in the layers panel to load the shape selection. Then with the elliptical selection tool make sure to choose the selection mode "intersect with selection" and drag a selection as shown below.

Then you should end up with a selection looking like this.

Make a new layer, fill the selection with a white color and bring down its opacity to about 20 percent (maybe less), and we are done.

The final touch I did was to add this whole effect to each letters separately and rotate them to make them look a bit funny.

Green retro wallpaper

Thu, 7 Aug 2008 08:23:00 EST

I have been very much into retro style stuff lately, so now I made a new wallpaper using some different vector shapes and playing with some colors.

You can download it and use it for free here, but if you want to redistribute it, you may give me a linkback or a thanks note.

Almost forgot.

Size: 1.5 mb
Resolutions: 1280x1024 and 1440x900
Format: Photoshop psd file.

Colurful Price Tags Tutorial

Tue, 5 Aug 2008 08:23:00 EST

In this Adobe Photoshop tutorial we will make a simple, sleek price tag with nice colors and gradients.

First with Photoshop, open the custom shapes panel and locate the "star shape" like I found below, it should be there by default with photoshop when you bought it.

Now in the layers panel, double click on the new layer to get to the layers styles panel and give it the following settings

Now we will make the price tag glossiness, so create a new layer above the price tag layer and name glossy or something.

Hold down ctrl and click the price tag layer in the layers panel to load the shapes selection.

With the elliptical selection tool, make sure you have the selection mode set to "intersect with selection" and drag as shown below.

Drag a gradient going from white to transparent, inside the selection, as I did below.

Now you can type in whatever price within the price tag shape, between the shape and glossy layers in the layers panel.

Download the photoshop file:

Size: 314kb
Format: Photoshop psd file.

Water bubbles wallpaper

Mon, 4 Aug 2008 08:23:00 EST

Check out this new wallpaper I just made, as you might already have guessed it some water with bubbles.

I had my morning shower and felt kind of bubbly so I got inspired and made this water bubble wallpaper for you, I think it looks quite good, if you like it, feel free to download it and use it as you want, but just remember if you redistribute it, give me some credit, as for any other wallpapers on my site, but you can read all the in the readme file if you download the wallpaper.

And for the wallpapers specs.

Size: 1.5 mb
Resolutions: 1280x1024 and 1440x900
Format: Photoshop psd file.

Poker header Photoshop Tutorial

Fri, 1 Aug 2008 08:23:00 EST

Check out this new poker header graphic I made yesterday, I want to share with you.

You can download the Photoshop file at the bottom, or you can read the tutorial and make one of your own, with your own characteristics.

And here is the tutorial.

First we will make the background, and here we will make some sunray shapes, you can either search google for some sunray photoshop brush or shapes to save time and work.

Or do it the hard way, with the pen tool click and make a triangle spike, copy it a lot of times, place them like I did in the image below..

Now we will change the background color, so select the background layer and make a gradient from light green to dark and with the radial gradient tool drag out from center of the image we are making.

Set the sunray layers blending mode to multiply and your background should look like this.

Now we will be making the poker cards, this is quite simple because Photoshop is give us most of the shapes.

You will repeat these next steps 4 times, one for each card of cause.

So with the rectangle tool drag out a shape for the cards.

Go to photoshop custom shape dropdownbox and locate the 4 card symbols, like a heart, diamond, etc and place them inside each card shape.

In the layers panel select each card separately and with the free transform tool rotate and place them like I did below.

You might also want to resize them to make them fit the image size.

This last part if the our text, so with the text tool type in some text on the stage, still having the text selected, click on the small icon at the top of the photoshop window named "wrap text"

and set it like I did below.

Now your text should look something like this, (your font might not be the same as mine of cause).

The final thing we need to do is to style the text, so in the layers panel, double click on the text layer to get to the layers styles panel and give it settings like below.

Download the photoshop file:

Size: 314kb
Format: Photoshop psd file.

Sunshine and flowers Free Wallpaper

Wed, 30 Jul 2008 08:23:00 EST

I felt like doing something warm today in this overheated apartment, did I say is just as hot today as it was yesterday.

So while I was feeling warm and and overheated, I made a sunshine inspired wallpaper with flowers and a cute little butterfly, simple minimalistic colors and shapes to make the wallpaper look clean.

So enjoy the wallpaper, and the summer while it last.

And here is some wallpaper download info:

Size: 1.5 mb
Resolutions: 1280x1024 and 1440x900
Format: Photoshop psd file.

Pink navbar Photoshop Tutorial

Mon, 28 Jul 2008 08:23:00 EST

In this Adobe Photoshop tutorial we will make a sleek and stylish web navigation bar, I hope you enjoy it as much as my classmates did.

First we will make the rounded box for the nav bar, so choose the rounded rectangle tool and drag a rectangle on the stage like I did below.

In the layers panel, double click on the shape layer we just made to get to the layers styles panel and give it settings like below.

Now type in some menu text like I did, I typed home, download and links, you can use as many as you want, just change the width of the nav bar to fit how many navigation links you need.

Now we will make a small separator to separate the navigations. Now you might want to zoom in a bit.

These next steps should be done for each space between navigation links so repeat it as many times needed.

With the line tool draw a line straight through the navigation bar as I did below, (remember to do it in a separate layer) then give it a gradient going from light to dark as I did

The last thing we will do is to make the small reflection effect, so just make a copy of the navigation bar shape layer, (the first one we made) name it reflection and in the layers panel, place it at the bottom.

Pad it down to the end of the navigation bar, then go to edit -> transform -> flip vertical and bring its opacity down to about 20 percent.

And we are done. If this sounds a bit confusing you can download the project file here, it might help you understand what I did.

Download the photoshop file:

Size: 314kb
Format: Photoshop psd file.

Crazy abstract circles wallpaper

Fri, 25 Jul 2008 08:23:00 EST

Take a look at this new cool wallpaper I made this morning, some crazy circles generated on top of each other, colorful green variants, I have used it for some hours now on my desktop, and I am quite happy with the wallpaper result, hope you will be tool

Here is the wallpaper download info.

Size: 2.25 mb
Resolutions: 1280x1024 and 1440x900
Format: Photoshop psd file.

Cute pink text style

Thu, 24 Jul 2008 08:23:00 EST

In this Adobe Photoshop tutorial we will make a cool looking pink text effect.

I actually came up with this effect by accident when playing around with photoshop (like I do with most stuff these days).

First, like always with text effect we need to type in the text we want to add this effect to.

Then go to the layers panel and double click the text layer to get to the layers styles panel and give it the following settings.

And we are done, its just that simple, but still a cool text effect.

Css hightech styled textboxes

Tue, 22 Jul 2008 08:23:00 EST

Check out this new css/html textbox I designed for you, I made a it in 8 different gradients and best of it all, it free to download, also I made a small tutorial below on how I made one of them.

Download my new stylish css designed textboxes here.

And now for the tutorial, (you can download the whole thing at the bottom of this post).

First we will need to open photoshop, this textbox consist of two images, and of cause some css and html coding.

So first we will make the metallic rounded box behind the textbox.

With the rounded rectangle tool draw a rectangle like below.

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

Thats it, now we will make the colorful textbox.

First we need to figure out the height of the textbox we will make, mine is 35 px, then make a rectangle on the stage at 35 px height, the width does not matter, we will only use part of it and repeat it.

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

Now the last setting image, where you have to pick a pattern, just do a search on google for photoshop patterns and import one, or make a simple on like I did.

Save the two images, I called the metallic box "bg.jpg" and the colored box "lime.jpg".

Now we are ready to do some simple coding.

Here is the code for the html fil.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

</head>

<body>

</div>

</body>

</html>

And here is the code for the CSS file.

input

{

border: 1px solid #fff;

color: #525252;

font-weight: bold;

font-family: "Lucida Grande",Verdana,sans-serif;

font-size:24px;

height: 30px;

width: 300px;

padding-left: 5px; padding-top:4px;

margin-top: 20px; margin-left: 20px;

text-decoration: none;

}

input.lime

{

background: url(imgs/lime.jpg) #ffffff repeat-x left center;

}

.box_wrapper

{

width: 350px; height: 75px;

background: url(imgs/bg.jpg);

}

And now we are done, I hope you like my new css based textboxes.

Download my new stylish css designed textboxes here.

Make a realistic smoke animation

Mon, 21 Jul 2008 08:23:00 EST

In this flash animation tutorial we will try to create some realistic smoke, and make it act like real smoke.

First find some image with some fire, a match or a chimney or something that could produce smoke, then add that image as a background on the stage. you could lock the layer so you dont change anything later.

Now we will create the smoke, so first, select a light gray color, then with the brush tool start drawing a funny cloudy shape like shown below.

Right click and choose convert to movie clip, then go to the filters panel and give it a blur filter like I did.

You might also want to bring down its opacity (alpha) a bit to make it a bit see through.

Now make yet another smoke movie clip just like we did before. Just because its good to have variation, and all smoke doesnt look the same.

Now we are ready to do some animation to the smoke.

Put each smoke movie clip in each own layer in the layers panel, you can even name the layers smoke 1 and 2.

Now place both smoke effects at its start position (the tip of the fire flame), then create a new keyframe in the timeline at frame 25, drag the smoke up at the top where its going to stop. This should be done for both smoke movie clips.

Now select frame 25 and select the smoke movie clip, then set its alpha to 0. in the timeline for both smoke layers, right click between frame 1 and 25, choose motion tween.

In the timeline for smoke 2 layer, select all frames from 1 to 25, drag them out to start at about frame 12, so now the smoke 2 should first begin when smoke 1 is halfway up.

And we are done, you can make a couple of more smoke movie clips and animate them to make more variations like I did in the example at the top.

Jumping in blue wallpaper

Fri, 18 Jul 2008 08:23:00 EST

Check out this new wallpaper I just made, acturlly this is my first wallpaper, so Im still trying to figure out which sizes I should release it in, for now I made one "normal" and one widescreen version, if you have any request of other resolutions just post a comment or something.

So here is my new wallpaper, I called it jumping in blue, It makes me think of dreaming, jumping in the sky and all that, hope you like my wallpaper.

Size: 1.5 mb
Resolutions: 1280x1024 and 1440x900
Format: Photoshop psd file.

Mp3 player with volume slider using Actionscript 3

Thu, 17 Jul 2008 08:23:00 EST

Hi guys, im back with a new flash actionscript 3.0 tutorial, this time we will be making a mp3 player with a volume slider, I must admit, I tried making one some month ago, it didnt work out that well, but I promis you, this works great so just follow along or download the source code at the bottom.

Before we get all excited and start working with actionscript, first we need to do some preperations, make a few buttons and graphics to make our mp3 player look good. So try to follow along, you can make your own graphic buttons, so I wont guide you through how I made mine, only the structure.

So on the visual part, lets make a play, pause and stop button, convert them all into movie clips and give them the following instance names by going to the properties panel. play_btn, pause_btn and stop_btn.

Now we need to make the volume slider, the volume slider consist of a stroke 100 px wide, (its important that its excacly 100 px). Convert it into a movie clip and name it volume_mc. Inside this volume slider movie clip make a handle graphic, convert it into a movie clip and name it mySlider_mc, and place it at the right end of the stroke like below.

Now we are ready to do some actionscript, so go to the main stage and hit f9 or what ever you do to open up the actionscript panel.

To make things easier for both you and me I commented the code inline with the actionscripting, so everything should be explained line by line, and you should be able to copy and past the code directly into your own project.

//attatch/import the music file.

var musicPiece:Sound = new Sound(new URLRequest("http://blog.0tutor.com/JeffWofford_Trouble.mp3"));

// Make a sound channel to change sound configurations.

var mySoundChannel:SoundChannel;

// This variable is checking if the music is playing

var isPlaying:Boolean = false;

// to remember the position of the music playing when we pause, to start at the same place

var pos:Number = 0;

// First button we will make is a play button, add an eventlistener.

play_btn.addEventListener(MouseEvent.CLICK, play_);

function play_(event:Event):void {

//Check if the music is NOT playing, then make it start.

if (!isPlaying) {

mySoundChannel = musicPiece.play(pos);

isPlaying = true;

}

// The pause button, here we will use the pos variable we made earlier.

pause_btn.addEventListener(MouseEvent.CLICK, pause_);

function pause_(event:Event):void {

// if the music is player, save the current time and stop the playing.

if (isPlaying) {

pos = mySoundChannel.position;

mySoundChannel.stop();

isPlaying = false;

}

// Now the final button is the stop button, allmost thet same as pause

stop_btn.addEventListener(MouseEvent.CLICK, stop_);

function stop_(event:Event):void {

// First we check if there is anything to stop then make it stop, and reset the pos variable to 0 (start time)

if (mySoundChannel != null) {

mySoundChannel.stop();

pos = 0;

isPlaying = false;

}

// this is a bit complicated, but I will try to explain anyway.

// first we make a rectangle and set its width to 100.

var rectangle:Rectangle = new Rectangle(0,0,100,0);

// then we need a varible to check if the handle is being dragged.

var dragging:Boolean = false;

// the eventlistener for startdragging

volume_mc.mySlider_mc.addEventListener(MouseEvent.MOUSE_DOWN, startDragging);

function startDragging(event:Event):void {

// here we tell flash the margin on where it should be able to drag, (remember 100 pixels back and forth)

volume_mc.mySlider_mc.startDrag(false,rectangle);

dragging = true;

// This is very important, an eventlistener so we can change the volume, not only make it look good.

volume_mc.mySlider_mc.addEventListener(Event.ENTER_FRAME, adjustVolume);

}

// well here is the adjust volume function, its not that complicated

function adjustVolume(event:Event):void {

// we make a variable to calculate the volume from the slider handle position and divide it by 100

var myVol:Number = volume_mc.mySlider_mc.x / 100;

// then we set it with the mySoundTransform

var mySoundTransform:SoundTransform = new SoundTransform(myVol);

if (mySoundChannel != null) {

mySoundChannel.soundTransform = mySoundTransform;

}

// and of cause the stop draggin function, I dont feel the need to explain it.

stage.addEventListener(MouseEvent.MOUSE_UP, stopDragging);

function stopDragging(event:Event):void {

if (dragging) {

dragging = false;

volume_mc.mySlider_mc.stopDrag();

}

Yah I know that was a lot of code, and it might look a bit confusing, but I promis you, if you try to put it into your own flash file, maybe event delete the comments I made, you will see kind of a paddern, how and why stuff works and how you made a simple mp3 player with actionscript 3.0 :-)

Best of luck to you all.

Pink login form using CSS

Tue, 15 Jul 2008 08:23:00 EST

Check out this login html form I made a couple of days ago, I just played around with photoshop and got inspired to make this login from with html/css styles.

Download the login project here.

And if you really want to go in dept and do it all your self, here is a small tutorial on how I made this html/css styled login page.

First the retro white box is just one big image, you can download it below, just right click and save on your desktop.

Now we just need to make two files an html page and a style sheet file, and put in the code from below.

And remember to put the retro style box inside a folder called imgs.

The source code for the html file: (site.html)

<title>CSS styled Login form --> by 0Tutor.com</title>

</head>

<body>

<h3>Login Form</h3>

</div>

<label for="e-mail">Password:</label>

</div>

</div>

</body>

</html>

The source code for the style sheet file. (style.css)

body {

background-color:#ff00c0;

font-size:120%;

}

div.wrap {

height:100%

width:100%

}

h3 {

color:#ff00c0; font-size:22px

}

.textbox_outer {

padding-top: 43px; padding-left:150px;

}

.box_wrapper {

background-image:url(imgs/bg.jpg); background-position:center; background-repeat:no-repeat;

width:600px; height:360px; margin:auto; margin-top: 70px;

}

input {

font-family: "Lucida Grande",Verdana,sans-serif;

font-size:18px;

border: 1px solid #999999;

}

input.textboxes {

width:270px;

background-color:#ff00c0;

}

input.btn {

color:#ff00c0;

border: 1px solid #999999;

}

div.labels {

width:100px;

color:#ff00c0;

}

Save your work and you are done..

Growing cloud engine with actionscript 3

Mon, 14 Jul 2008 08:23:00 EST

Hi I have been playing a lot with different ways to produce smoke and clouds these days, both on frame by frame animations and like actionscript engines.

So here I just made a simple growing cloud particle system with flash actionscript 3.0, and Im going to explain to you how you can make your own animated clouds with flash.

First we need to make one movie clip containing a cloud graphic, to work with, its quite simple just use the brush tool and draw a shape like I did below.

Right click and convert it into a movie clip, then go to the filters panel and add a blur filter with these settings

Now we need to give this cloud an instance name, I named mine cloud_mc.

That we all the particle stuff, now we need only need the technical stuff, by that I mean the actionscript coding, so open up your actionscript panel and past this code into it.

// the growing speed

var yspeed:Number = (Math.random() * 0.8);

// here we set the clouds start properties such as position, rotation start and alpha.

setCloudProperties();

function setCloudProperties():void {

cloud_mc.alpha = 100;

cloud_mc.x = 141;

cloud_mc.y = 180;

cloud_mc.rotation = Math.random() *360;

}

// an eventlistener to make the cloud grow.

cloud_mc.addEventListener(Event.ENTER_FRAME, doCloud);

// this is all it take to make the cloud engine work and generate some random shape and growth and rotations.

function doCloud(event:Event):void {

cloud_mc.alpha -= 0.3;

if (cloud_mc.alpha<50) {

cloud_mc.alpha -= 0.4;

}

if (cloud_mc.alpha<1) {

setCloudProperties();

}

cloud_mc.y = cloud_mc.y - yspeed;

}

Just think of the endless possibilities with such simple code to generate a random cloud growth.

Creating spotlight effect with Photoshop

Fri, 11 Jul 2008 08:23:00 EST

In this fairly simple tutorial we will learn how to create spotlight effect with adobe photoshop, and how to apply them to objects and backgrounds.

Okay first we need some nice background for this effect to work, I just made a simple dark blue gradients, because I like blue.

Now you can import an object if you want some spotlights hitting an object, I just found a logo I have made for a website redesign not so long ago.

Note: its quite important to use a dark background, as it makes the effect work better.

Now to apply a spotlight effect, you have to have a layer to apply it onto, so we need to merge the object and background layer into one layer to apply this spotlight effect.

So in the layers panel select the object layer and right click, now choose merge down, and you should only have one layer left.

Now finally we are ready to apply the spotlight effects, so go to filters -> render -> lights and effects, and give it settings as shown below.

To make more then one spotlights in the lights panel, hold down the ALT key and drag the light source to the other corner.

Now we can add some extra bling stars with a custom brush tool.

Enemy following me actionscript

Thu, 10 Jul 2008 08:23:00 EST

Okay I yesterday I was doing some actionscripting to make a game, (cant reveal it yet though because its not my own, I was just hired to make some parts of it). But I would like to share some of the code with you, like the source code I share today.

This flash actionscript source code is to make an enemy follow your mouse, and some of the great things to notice is that it not only follows that mouse path, it also rotates so its front view is always facing the mouse, thats pretty cool.

So first we need to do some small preparations like creating our enemy, Im going to let this up to you, do whatever you want. When you are done, right click and convert it to a movieclip and give it an instance name, I named mine "enemy_mc"

Now we are ready to do some actionscripting, but remember this is for actionscript 3.0, for it to work with previous versions you will need to do some changes and Im not doing it for you. :-)

You can just copy and past the code into your flash actionscript panel, or you can try reading the comments.

The actionscript source code:

//First an eventlistener to call the function to make the enemy move, this is an enterframe event.

enemy_mc.addEventListener(Event.ENTER_FRAME, do_stuff);

// the function

function do_stuff(event:Event):void {

// here we do some calculations to make the ememy rotate based on the mouse angle, centered to the ememy.

var myRadians:Number = Math.atan2(mouseY-enemy_mc.y, mouseX-enemy_mc.x);

var myDegrees:Number = Math.round((myRadians*180/Math.PI));

// this is the stuff making the enmy move towards the mouse.

var yChange:Number = Math.round(mouseY-enemy_mc.y);

var xChange:Number = Math.round(mouseX-enemy_mc.x);

var yMove:Number = Math.round(yChange/20);

var xMove:Number = Math.round(xChange/20);

// Nothing will work without using all this previous calculations, so we set the x and y axis and the rotation.

enemy_mc.y += yMove;

enemy_mc.x += xMove;

enemy_mc.rotation = myDegrees+90;

}

Cameron Dias blurry glass mask effect

Tue, 8 Jul 2008 08:23:00 EST

In this flash tutorial we will make a great masking effect and apply it to an image of Cameron Dias, just have a look at the final result below.

So lets get started, first import an image of Cameron Dias to the stage, Now make a new layer on in the layers panel and copy the image of Cameron Dias so now we have to layers.

With the top layer selected, select and convert the image of Cameron Dias to a movie clip, then go to the filters panel and give it a blur filter as shown below.

Now make one last layer above the two other layers we have made, in this layer draw a big black circle, convert it into a movie clip and give it an instance name, I named mine "mouse_mask".

Now we just need to type in a few actionscript lines, so just copy and past these lines into the actionscript panel on the main stage.

Mouse.hide();

addEventListener(Event.ENTER_FRAME, enterFrameHandler);

// function to make the circle follow the mouse

function enterFrameHandler(event:Event):void {

mouse_mask.x = mouseX;

mouse_mask.y = mouseY;

}

Flash components the ComboBox

Mon, 7 Jul 2008 08:23:00 EST

In this next tutorial series we will learn to make use of all the flash components such as simple buttons and combo boxes, checkboxes and data grid, so this is going to be a quite large tutorial, and I will break it up into sections, as we go through all the components.

In this lesson we will learn to use buttons component to raise click events, and I will introduce the combo box, or the drooped as some calls it, and all is of cause done with flash actionscript 3.0.

And here is what we will be making.

First we will make the combo box switch the box color from blue to green when we select a combo box item. Meaning that we will raise an event on the combo box event change.

Next we will learn to add a new item to the combo box, so you can write something into the textbox and with the button you can raise an event to add an item to the combo box.

Before we to down and dirty with the actionscript coding, we need to do some preparations, like setting up some movieclip graphics, buttons etc.

So as you can see by the final result at the top, locate the component panel in flash, (you can find it by going to the top menu -> view -> components) and drag out a button, a textbox and a combobox.

Select each component and go to the properties panel and give them instance names, I named the button "my_btn", the textbox "my_input" and the combobox "my_ComboBox".

Now we will add two items to the combo box, two data elements containing a label name, blue and green.

So select the combo box and locate the parameters panel (by default its docked next to the properties panel).

Click on the dataprovider and add in the information as I did in the image below.

The last thing we need is the colored box, with the rectangle tool draw a square on the stage with the blue color.

Select it and convert the graphic into a movieclip, give the movieclip an instance name, I named mine "box_mc".

In that movie clip create a new keyframe at frame 2 and change the box color to green.

Stay inside the colored box movieclip, now we are ready to do our first actionscripting, even though its just one short line.

Select frame one (the one with a blue box).

In the actionscript panel write:

stop();

Now go back to the main stage and select the first (and only) frame on the stage, then bring up the actionscript panel, now we will do some coding, I have broken the code up into small pieces for better understanding, and wrote some comments inside the code so you can follow along.

// This line is just to style the textbox so it has a border.

my_input.border = true;

// Here we add an eventlistener to the combobox, to call a function if the combo box item changes.

my_ComboBox.addEventListener(Event.CHANGE, changeColor);

function changeColor(event:Event):void {

//just a couple of traces to show you a couple of information on the current combo box items.

trace(my_ComboBox.selectedIndex);

trace(my_ComboBox.selectedItem.label);

//an if statement telling flash if the combo box label blue is selected then the box movieclip should change the frame to 1.

if (my_ComboBox.selectedItem.label == "Blue") {

trace("is blue");

box_mc.gotoAndStop(1)

//an if statement telling flash if the combobox label green is selected then the box movieclip should change the frame to 2

} else if (my_ComboBox.selectedItem.label == "Green") {

trace("is green");

box_mc.gotoAndStop(2)

}

Now that we how we worked with the combo box, how to call a function when we select another item from the dropdown list, and used it to make some changes on the stage.

Now just for fun I added a small function where you can add your own items to the combo box.

// first and eventlistener to listen to when someone click the button, then it calls a function.

my_btn.addEventListener(MouseEvent.CLICK, addToCombo);

// this is the function, the function basically adds an item to the combo box, containing the my_input text from the textbox.

function addToCombo(event:Event):void {

my_ComboBox.addItem({label:my_input.text});

}

Bouncing soccer ball with actionscript

Fri, 4 Jul 2008 08:23:00 EST

Hi all, well im not really sure what you can use this effect to, I just played around with flash for a while, and found a very easy way to make it look like a ball is bouncing back in space as a ball would on a floor.

So using actionscript we will do some simple transition tweens to make this effect, remember its made with actionscript 3.0, and will not work with previous versions of flash.

Hover the mouse cursor over the soccer ball to see the bouncing effect.

So before we do any coding we just need to do some simple preparations.

So we need to make a ball, I did it quite easy, just found an image of a ball. Now you need to convert it into a movieclip and give it an instance name, I named mine ball_mc.

Now we are ready to do some actionscripting, I will try to explain line by line what Im doing with the actionscript code, some might seem a bit confusing, but its actually quite simple, and contains few lines of code.

// We will need to import some transition class to handle the tween effects.

import fl.transitions.*;

import fl.transitions.easing.*;

// Now we add some event listeners, to listen if the mouse is hovering the ball, if it is, then we call the function doMouseOver

ball_mc.addEventListener(MouseEvent.MOUSE_OVER, doMouseOver);

ball_mc.addEventListener(MouseEvent.MOUSE_OUT, doMouseOut);

// This is the actual function to scale out the ball and make it look like it getting closer to you.

function doMouseOver(event:MouseEvent):void {

// we define a tween to scale on the x and y axis, make it bounce.easeOut, which actually makes it act like a ball.

// also the number 1 is the size its scaled to, and 2 is the number of seconds the tween will happen in.

var xT:Tween = new Tween(ball_mc, "scaleX", Bounce.easeOut, ball_mc.scaleX, 1, 2, true);

var yT:Tween = new Tween(ball_mc, "scaleY", Bounce.easeOut, ball_mc.scaleY, 1, 2, true);

}

// this function do exactly the same as the one above, just scales it down, to make it look like its going away from you.

// and this event accrues when the mouse is no over the ball.

function doMouseOut(event:MouseEvent):void {

var xT:Tween = new Tween(ball_mc, "scaleX", Bounce.easeOut, ball_mc.scaleX, .5, 2, true);

var yT:Tween = new Tween(ball_mc, "scaleY", Bounce.easeOut, ball_mc.scaleY, .5, 2, true);

}

Drawing crazy lines with actionscript

Thu, 3 Jul 2008 08:23:00 EST

In this flash actionscript tutorial we will play a bit more with the drawing api, this time we will apply some randomness to the drawing, so we will draw a line then will continue drawing by it self, using some random calculations.

You can see here what I came up with, and yes this is not really a graph for anything, its not my heart rhythm or anything, I just used the random math class and made up my own small math formula.

Now this is only a coding tutorial, so you will have no need to do anything with drawing, and making movie clips or anything, just jump right into the actionscript panel and start programming.

To make it easier to understand I have tried line by line to explain the code, you can see the code description inside the code, or you can just copy and paste the code into your own flash project and play around with it.

// first we set a few variables, first two defines the start position of the line.

var oldX:Number = 30;

var oldY:Number = 150;

var randomX:Number;

var randomY:Number;

// now we define the line style we will draw with. 2 px thick and black color.

this.graphics.lineStyle(3,0x00BB00);

// the start position

this.graphics.moveTo(oldX,oldY);

// now we add an eventlistener to draw the line, its an enterframe event, so it keeps repeating 12 frames per sec.

this.addEventListener(Event.ENTER_FRAME, drawRandom);

// and here is the actural function.

function drawRandom(event:Event):void {

// this is the small calculations to tell flash what the line should draw, you can change it a round do more simple or more complicated calculations.

randomX = oldX + Math.random() * 3;

randomY = 50 + Math.tan(oldY + Math.random() * 3);

// and here we set it to draw the line, (finally).

this.graphics.lineTo(randomX,randomY);

oldX = randomX;

oldY = randomY;

}