LF - Flash Studios

CanVart

2009-09-10T18:59:00.011-03:00

Here is a project i worked on for a few days =]

CanVart

or just see it below =]

RPG Tutorial - Part 2

2009-08-03T19:54:00.002-03:00

Is your main character sketched ? if yes, now its time to start programming.
So, our RPG is going to be 3rd person, and it will have an upper view.
SO now what you will do is draw you character.
If you want, look for existing RPG's like final fantasy, pokemon, and so many others they have out there.
Once you have the design, make it a movie clip and its time for actions.

onClipEvent (load) {
speed = 10;
}
onClipEvent(enterFrame) {
if(Key.isDown(Key.UP)) {
_y-= speed;
}
if(Key.isDown(Key.DOWN)) {
_y+= speed;
}
if(Key.isDown(Key.LEFT)) {
_x-= speed;
}
if(Key.isDown(Key.RIGHT)) {
_x+= speed;
}
}

basically, what it does is move the character to the direction you want. Also you can change the speed to your will.

***I WILL come back to this post VERY SOON and post previews and continue with the tutorial. just wait a few days.

RPG Tutorial - Part 1

2009-08-03T13:05:00.002-03:00

Nooooow, i know i said i was going to post a platformer tutorial, but i will make it in flash, as a sequel to platformer universe. so, instead, i thought about writing a RPG tutorial !! yaaayyy... haha

*Do you know what RPG stands for ? No ? it means Role-Playing-Game .

ok, so in this first part we will just think about our game ok !?
When i was a kid i used to play Dungeons&Dragons on my friends basement, we would stay up all night slaying trolls and saving princesses. Why am i saying this ? Because your RPG must have a theme. D&D had sort of a medieval theme, but there are lots of other options. It can be something from the future, based on movies, games, anything you want.

Now, also, when i was a kid, the RPG games started to show up, for ATARI, MEGADRIVE, SNES, and even for the PC. You know what they all had in common ? A main character.
So, that means it is time to come up with a main character. But there is 1 condition: it has to match your theme. If you chose an old west theme, dont come up with an elf archer.
Now, once you created a character (AKA char), you are going to create classes for it. use your imagination here. ARcher, wizard, thief, assassin, knight, priest, cowboy, cop, robot, psychokinetic, whatever you want, as long as it matches your theme, ok ?!

So now you have in mind a char, a theme, and some classes for your char, so now its time to come up with a story. Take your time here, 1 week if needed. As a good developer, you probably already have pages of sketches of your char don't you ? (i know you dont haha, but you should start =]) so, for the story, i want you to write it, write about the char's origins, his wishes, where does his story begin? where does it ends...

And as the story is created, a lot of other characters are revealed, we will call those NPC's (Non Playable Characters). Sketch them too !!

If you did everything listed above, you are ready for lesson 2 !!

HTML and Flash

2009-08-02T18:26:00.004-03:00

ok, so you wanna make a flash website ? or yu have a blog and wanna put some flash in it ? here is a guide on how to :

so first off you are going to make the flash file. Make sure your work has the right size to feed your needs, otherwise you are gonna have to remake it.

so, on your site or blog, you probably already have a html template, now all you gotta do is paste the object html tag (i'll mention it in a little bit) where you want your work to go.

the tag is:

1: fill with the file's original width
2: fill with the file's original height
3: file's original name (example: mysuperflash.swf)
4: flash's name (example: mysuperflash)
5: here you put the width you want the flash to have on the site
6: here you paste the link where your flash is hosted(example: http://flash.com/12)
7: here you put the height you want the flash to have on the site

now, you are probably wondering about how to host.
so, if you have a google account it would be a good idea to use google groups.
http://groups.google.com
if you don't, you can either create an account, or host it at spam the web.
i recommend http://www.spamtheweb.com/ because it is VERY easy to upload, but i have know clue for how long they will keep your file =]

ah, 1 more thing. when you upload your stuff, ALWAYS remember to upload your .SWF file not the .FLA , ok ?!

that's it xD

hiii

2009-08-02T18:12:00.002-03:00

its been a while...
well, i guess there is no problem since probably only 4 people are even reading this..
anyway, i intend to start writing tutorials again !!
just wait for n3xt post =]

april already ?

2009-04-05T22:07:00.002-03:00

i know i haven't been writing a lot lately...
it's just that flash cs4 is so different...
and i've been busy making interactive movies for the biology institute...

im not sure but if everything goes well, i should be writing a platformer tutorial !

Brick Tutorial - Part 3

2009-03-19T19:53:00.003-03:00

Now it's time to set it up. So make a cool preloader (i thaught you that already), adn on the frame after the preloader, Make a new empty keyframe, and draw 3 buttons, one for easy, one for medium, and one for hard. On easy, type :

on (release) {
_root.difficulty = 1;
_root.nextFrame ();

}

The same thing for medium and hard, excepet the variable difficulty should be 2 for medium, and 3 for hard.
On the next frame, make an empty keyframe, and on its actions, paste this:

blocks = 0;
lives = 5;
lvl = 1;
stop();

Than, organize your blocks on a cool way, maybe 2 or 3 lines of blocks ( you can reescale them to change their shape if you want), and put the ball and the bar there.

Anywhere on the stage make 2 dynamic text boxes. One with the var "blocks" and the other one with the var "lives".

Now test your movie and it should be working. If anything happens, please write a comment !!

Brick Tutorial - Part 2

2009-03-19T19:33:00.003-03:00

Ok, so you have the ball and the bar. Now what you need is a block. Pay attention to the instructios cause making the block is a little more complicated. Start making a rectangle, and convert it to a movieclip. Than make 3 more copies of it, and align them so they become a square.
Something like this:

Now it's time to give'em actions. For the one in the top, type this:

onClipEvent (enterFrame) {
if (_root.ball.hitTest(this)) {
_root.ball.yspeed *= -1;
}
}

for the one in the bottom:

onClipEvent (enterFrame) {
if (_root.ball.hitTest(this)) {
_root.ball.yspeed *= -1;

}
}

for the left one :

onClipEvent (enterFrame) {
if (_root.ball.hitTest(this)) {
_root.ball.xspeed *= -1;
}
}

and for the right one :

onClipEvent (enterFrame) {
if (_root.ball.hitTest(this)) {
_root.ball.xspeed *= -1;
}
}

Now next thing you wanna do is select all of them and convert them to a movieclip. Now give these actions to the movieclip you just created:

onClipEvent (load) {
_root.blocks++;
strenght = 1;
}
onClipEvent (enterFrame) {
gotoAndPlay(strenght);
if (_root.ball.hitTest(this)) {
strenght -= 1;
if (strenght == 0) {
_root.blocks -= 1;
unloadMovie(this);
}
}
}

Ok, so let me explain. The Strenght variable is the number of times that the ball is gonna have to hit the block until it is gone. in this case, it's one. It also tells the block to go to and play the frame that matches the strenght. So inside this movieclip it would be a good idea to make a new layer and draw a new block for each frame. I think 5 are enough. Give all them the stop action, and we are done with the blocks.

Now let's change the bar's code. You should replace what you have there with:

onClipEvent (enterFrame) {
_x = _root._xmouse;
if (_root.blocks == 0) {
_root.nextFrame();
}
if (_root.lives == 0) {
_root.gotoAndStop("gameover");
}
}

It says that if there are no blocks on the stage, it will play the next frame. And if you run out of lives, it will play the frame labeled "gameover".

Now replace the codes in the ball for these :

onClipEvent (load) {
function restart():Void {
_y = _root.bar._y-20;
_x = _root.bar._x-30;
xspeed = random(20)+5;
yspeed = random(20)+5;
}
restart();
}

onClipEvent (enterFrame) {
_x += xspeed;
_y -= yspeed;
if (_x>=400) {
xspeed *= -1;
}
if (_x<=0) {
xspeed *= -1;
}
if (_y<=0) {
yspeed *= -1;
}
if (_root.bar.hitTest(this)) {
yspeed *= -1;
xspeed += _root.difficulty;
yspeed += _root.difficulty;
}
if (_y>=600) {
_root.lives -= 1;
restart();
}
}

what we did is adding a difficulty to the game. Don't TEST it yet ! On next post we will set it up !!

Brick Tutorial - Part 1

2009-03-07T21:55:00.004-03:00

Hello ! I will start writing a brick game tutorial =] . I will use only actions you already know ok ?
Let's start. Make a new file, 400x600, and change the framerate to 30.

So, first thing we wanna do is a bar, that will follow the mouse. So draw a bar, and place it on the bottom. Add these actions to it:

onClipEvent (enterFrame) {
_x = _root._xmouse;
}

very simple code here. Now we want to make a ball, that will turn when it hits the walls,the top, or the bar, and restart when it hits the bottom.
So draw a ball, and type this on the actions pannel :

onClipEvent (load) {
function restart():Void {
_y = _root.bar._y-20;
_x = 200;
xspeed = random(20)+5;
yspeed = random(20)+5;
}
restart();
}

onClipEvent (enterFrame) {
_x += xspeed;
_y -= yspeed;
if (_x>=400) {
xspeed *= -1;
}
if (_x<=0) {
xspeed *= -1;
}
if (_y<=0) {
yspeed *= -1;
}
if (_root.bar.hitTest(this)) {
yspeed *= -1;
}
if (_y>=600) {
restart();
}
}

that code was long, but simple. The hardest i did was creating a function called restart.

Well, for now that's it. But i will be back with more =]

In the mean time, let's talk about random values. If you want a number variable to be random, type random (); for its value. Inside the parenthesis you can put a value so that this value will be the highest number. For example, random(20) can be any number from 1 to 20. And you can also add to random values. Like, random (20)+5 can be any number from 20 to 25.

Numbers can also be undefined; , and NaN (not a number) , just for the record

HitTest

2009-03-03T21:49:00.003-03:00

Hi !
I know you all have been waiting for hit tests tutorial, so here i will teach you simple hittests.

The easiest way to use a hit test is:

if (_root.ball.hitTest (this)) {
______________;
}

this actions should go inside a enter frame onclipevent handler, inside a movieclip.
what it means is that if the symbol named ball touches this movieclip, something is gonna happen.
It's pretty easy, but it will only work really good with squares and rectangles.

A more advanced use of hiTests is;

if (_root.ball.hitTest (_x,_y,true) {
____________;
}

it says that if the ball touches this symbol's X and Y position, something happens. You can change x and Y to fit your needs. When we start tutorials (very soon), you will see how hittest works =]

well, this post was short, but important. Now you certainly have all tools to make a good game. But if you think you still aren't able to make your own game, wait a few days, cause i will start a tutorial.

CS4

2009-02-24T17:12:00.001-03:00

omg...

i just got flash cs4 and God it's different...

i will spend the next few weeks working on it.

Have a nice week !

Password

2009-02-18T21:16:00.002-03:00

You probably have seen passwords on flash games before. Wonder how it works ?
Well, i will teach you the easy way to do that.
Firstly create 3 empty keyframes and give all of them the action stop();

On first frame, make an imput text box and give it the INSTANCE name of "mypassword"
Now make a button and give it this actions:

on (release) {
if (mypassword.text.indexOf("matrix") != -1) {
_root.nextFrame();
} else {
_root.gotoAndStop(3);
}
}

In this case (that's the code from my example) the person would have to type matrix to move on, but you can change that to whatever you want.
On second frame make whatever you want to happen if the password is right, and on third if the password is wrong. Again, you can change this to your needs.

here is what i've done:

Preloader

2009-02-17T16:37:00.002-03:00

Hi...
you already know enough stuff to make something already right ? - well you should and one thing that your flash MUST have is a PRELOADER.
So what is a preloader ? - a preloader is like an engine that will tell the user that the flash he is about to see is loading. They are usually bars, but with what i will teach you, you will be able to do anything you want.

Ok, so as usual, i will tell you what to do, and with that you should be able to do your own stuff.
It gets very easy, once you do it the first time. So on your first frame, type this:

loadedbytes = getBytesLoaded();
totalbytes = getBytesTotal();
percentbytes = int(loadedbytes/(totalbytes/100));
loader.gotoAndStop(percentbytes);

This basically creates a variable with the total bytes, one with the loaded bytes, and their percentage. Next, we are gonna make a movieclip. Inside it, you should have your preloading animation with 100 frames. On the first frame type stop();

Go back to the main timeline, and make a dynamic text box with the var "percentbytes"
for the percentage. You can also make one with the var "totalbytes" for the total size of your flash. And another one with the var "loadedbytes" for the loaded bytes.
Now select the first frame of the main timeline and press F6. On the frame that just appeared, type this:

if (loadedbytes == totalbytes) {
nextFrame();
} else {
gotoAndPlay(1);
}

On the third frame you can put ads, the menu, or whatever you want. Well that's how you do a preloader. I didn't make any swf files for this post, but you can delete your cookies and come back to my blog to see the header loading.

TIP: i've seen some submissions where the preloader is acctually a minigame, ive never done that but it is a very cool idea isn't it ?

Saving

2009-02-16T00:19:00.009-03:00

Hi. I wanted to try a saving tutorial. If my sample here works, i will write a tutorial =]

i will be trying different codes for the next few days so.. hang on a little.

Well, apparently it is working so i guess i will write a tutorial =]

Ok, so get ready, that means, open up flash.
The first thing we want to do is think about what will be our variables, while my sample above has 2 variables, my RPG has more than 50, but the number of variables shouldn't be a problem.

So on the first frame, type this codes:

var savedgame = SharedObject.getLocal("mygamename");
_root.variable = savedgame.data.variable;
if (savedgame.data.age == undefined) {
_root.variable = undefined;
} else {
_root.gotoAndStop(3);
}

on the second frame, put stop (); on it's actions, and create a situation where your variable changes. Then create a button, place it wherever you want on the stage, and type this actions on it:

on (release) {
savedgame.data.variable = _root.variable;
savedgame.flush();
_root.gotoAndStop(3);
}

than, on the 3rd frame, just make a dynamic text box and type "variable" on var.

by doing this, you should be able to understand how saving works. There are more ways, specially with better versions of flash, and i might post them if i feel like it, but for now there is one very important thing you should know:

your game will NOT be saved if you use space in your game's name. So for example:

var savedgame = SharedObject.getLocal("my game name");

wouldn't work, that's because you are creating an internet temporarially file (cookie) and it won't accept spaces on it's index.

Player's Name

2009-02-13T16:31:00.002-02:00

Have you ever wondered why people ask your name ? and how do they let you type in one place, and then it's displayed somewhere else ?
That is very simple, and i will teach you that with an exercise.

Open up flash, and on the first frame type stop(); and make a big input text box. Give it the var "name". Then make a button on that frame and type this actions on the button:

on (release) {
_root.gotoAndStop (2);
}

Now go to the second frame and press F7. Then type hello on a regular text box, and right next to it, make an empty dynamic text box and give it the var "name".
test your movie. This is what you should have:

Keyboard

2009-02-13T15:57:00.004-02:00

Hello there ! i've been posting a lot of useful stuff in here right ?!
So now it's time for the keyboard.

So, you want things to happen if you press a key on the keyboard ? - Easy !
i'm gonna teach you 2 ways, 1 limited easy way, and one limitless not that easy.

one way to do that is:

if (Key.isDown ( Key._____ )) {

now, you see that blank space ? many things can go there. You can type:

BACKSPACE, CAPSLOCK, CONTROL, DELETEKEY, DOWN, END, ENTER, ESCAPE, HOME, INSERT, LEFT, PGDN, PGUP, RIGHT, SHIFT, SPACE, TAB AND UP.

an example of using this way is:

if (Key.isDown (Key.PGUP)) {
_root.page._y += speed;
}

that means that, when i press page up, the page mc is going up. Now, if you dont want none of this keys, for example if you want your char to move with WASD keys, you have to get the key's ASCII, wich is a number that refers to 1 key. Lucky for you, i prepared a flash that tells you the ASCII, it will be on the bottom of this post. Well, once you got the numbers, use this actions:

watchKeyBoard = new Object();
watchKeyBoard.onKeyDown = function() {
if (Key.getAscii() == ___) {
_________________________;
}
}
Key.addListener(watchKeyBoard);

The first blank space is where you type your ascii code, and that second is what happens when you press the key. Easy ? Here is the ASCII receiver i made:

you may have to click it so it can work

Mouse

2009-02-13T15:36:00.002-02:00

Hey guys, here are some cool stuff you can do with your mouse on flash:

-Changing the Mouse: In order to change the mouse ( you may have seen this in games), you should make the movie clip you want to be the mouse, and type this actions on it:

onClipEvent (load) {
startDrag(this, true);
Mouse.hide();
this.swapDepths(9999);
}

it tells to make the movieclip to be "dragged" by the mouse, then it hides the mouse, and finally place it over everything else.

- Tell the mouse coordinates: You can make a text box that tells you the mouse coordinates easily. Type this on the main timeline:

watchMouse = new Object();
watchMouse.onMouseMove = function() {
displayMouse_txt.text="The mouse X position is "+_xmouse+newline;
displayMouse_txt.text+="The mouse Y position is "+_ymouse;
};
Mouse.addListener(watchMouse);

Now make a big dynamic text box and give it the instance name of "displayMouse_txt"
That's it !

Now watch an exampleof what you can do with what you learned on this post:

Variables - part 2

2009-02-13T15:23:00.004-02:00

Hi !

i had a lot of trouble with boolean variables, so i will teach you what i know so you don't get the problems i had.

Well let's start.
When stting a boolean variable, the classic way is:

var __________:Boolean = true;

or

var __________:Boolean = false;

and the easier way is:

_______ = true;

or

_______ = false

if you wanna change it, use this:

if (__________________) {
_______ = true;
}

or

if (__________________) {
_______ = false;
}

all this should not be a problem. The problem is, when the boolean is the condition.
Then, you have to use 2 equal signs. Like this example:

if (dead == true) {
_root.gotoAndStop ("dead");
}

get it ? - keep in mind that this also work for numbers, strings, and all kinds of variable. Also, when using numbers, you can type > and < signs:

if (life >=100) {
life = 100;
}

hope it helps you

Achievements

2009-02-12T22:27:00.002-02:00

well, since we are talking about games, id like to teach you something i saw on a flash game out there.
It's an achievements window. Like, whenever the player do something cool, you show him a message. It's very easy, since we are gonna use a function for it. I will teach you one day how to make a function, in the mean time, copy and paste !

ok, so on frame 1's actions, type this:

function Achievement(achName, achDescript, achVariable) {
if (achVariable == false) {
achBox.gotoAndPlay(2);
achBox.boxName.text = achName;
achBox.boxDescript.text = achDescript;
achVariable = true;
}
}

this is the magical function that will let us make achievements easily.
but we still need a achievements box. Make a big rectangle, and 2 dynamic text boxes inside it. On one of them give it the INSTANCE name ( not var ) of boxName, and the other should be called boxDescript.

Now, select the rectangle, and the 2 boxes and press F8, and select movieclip. Press ok and double click it, so we can edit it. Drag the first frame to the second slot, so that the first frame becomes blank. Type

stop ();

on this emty keyframe. Now go to frame 20 and press F5. Now all we gotta do is create an achievement. you will see how simple it is.
First, create a variable, meaning that the achievement hasn't been completed yet.
So type this on first frame's actions:

butach = false;

Create a button, and give it these actions:

on (release) {
_root.Achievement("wow", "you did it", _root.butach);
}

now, you see the first quote ? that's the title. The second one is the description, and the third is the variable.
cool right ?
here is a simple example:

timer

2009-02-10T22:47:00.004-02:00

heeey, long time no see right ?!

more than a week now. so i decided bringing yall something cool. a timer !!
lets get to it.

use the text tool to make a dynamic text box. and on the var field, type clock.

than, on the main timeline, type these actions:

clock = 0;
timer = function () {
clock += 1;
};
timeclock = setInterval(_root.timer, 1000);

you see that code ? it says that every 1000 miliseconds ( 1 second ) the clock variable is gonna increase 1.
what we did is creating a function that increases clock by 1. than the setInterval function did all the rest.
try experimenting with those variables =]

here is a fast timer i made:

February

2009-02-02T16:02:00.004-02:00

Hello there,

this month we will talk about cool tool you can make with flash to improve your game.

i will start this section with a tutorial that i had prepared previously.

it is at NG:

Platform Universe

if you have any doubts with this tutorial, write me.

Just for the record, i have better codes for a platformer game, but i made this a while ago, because i was pissed off w/ all the shit that is submitted on newgrounds. Someday i will make a decent platformer tutorial, right here !

Animating Guide

2009-01-27T20:49:00.004-02:00

ah, january is coming to an end... it was a good month wasn't it ?but it's not over so i will write a few more tutorials.

so, i told you already how to make animations. But how do people do good animations ?
there are lots of things to talk about so let's start.

Making a good animation is hard. Remember that your animations success is a reflection of how people like it. So how do you make people like your animations ?
You never know what every single person watching your movie likes, so you can't please them all. But you can make people recognize that your movie has something special. So that's our mission here. Making your movie special.
It's a known fact that people that can draw, can make good animations. So practice your drawing skills for a while (i mean a few months, i used to do that at school).
Also you have to know what kind of artist you are. Do you like making funny movies, serious movies, parodies, porn, whatever your speciality is, focus on it.
Watch a couple of movies on the web, search the portals, see what movies are top score. What do they have in common ? I can't answer that cause that's something that changes very often.
So when you are ready, you can start planning your project. Write down a few stuff. You HAVE to know what will entertain people, and you gotta have the skills and the time to work on your movie.

I read once about the 12 principles of animation,keep'em in mind. I will explain them poorly, but you should read more about them.

1: remember to strech and squash things, in order to represent movement, you should change the shape of objects once in a while.
2: you have to remember the timing of stuff, when something is falling, it falls faster and faster (gravity), also timing of characters reveal their characteristics.
3:There is always a movement before an action. That's what we call anticipation. Your character should get prepared, before it performs an action.
4: you have to make the person watching your movie pay atention only at what you wanna show him, so little flaws go unseen. usually people pay attention to things that move, or speak. We call this principle staging.
5: Follow through is about terminating your actions, putting your char at a resting position.
6: Straight Ahead Action is making your char action from one starting point.
7: easing is also important. that makes the animation look more natural
8: an arc is a representation of an animation that doesn't look "tweened".
9: one of the most important is the principle of exageration. Make exagerated looks for a funny movie, exagerated kicks for an action movie for example.
10: Every action has a reaction. Newton had to figure that out so you won't make a crappy movie. remember that.
11: your characters must have appeal, something that will make people like them.
12: once again, you must draw good, make real shapes and proportions.

wow, even i can barely understand what i just wrote. you shouls really google this.

Moving on. What should you movie be about? that's whare inpiration and creativity come in hand. Some people just don't have those. If that is you case, start making flash versions of good jokes. That should help you get started. Make movie spoofs, parodies and more stuff to practice. Than you can get serious. Put some violence in your movies...

Once you have decided on a theme, make a storyboard, a plot. Something that tells everything that will happen in your movie. Make an introduction, a climax an ending...

When you are ready to start, draw firstly the outlines, just some scratches, so you know more or less what you are doing. Then, make the fills, choose the best collors and stuff. Later on, make the shading, and remember to make them nicely, on the opposite direction of you lights, of course.

Getting bored: It WILL happen. One day you are just gonna wake up and realize you are bored with your movie, maybe because it's taking too long, or you had another idea. When this happens, take some days off, or start a new project.

WARNING: I probably don't do all that i said up here, cause i am lazy, but i'm sure you can do better than me =]

Variables

2009-01-24T10:40:00.004-02:00

Setting variables is VERY useful in games.
There are many ways to add variables, and many variables that can be added.
I will talk about Number, String, Boolean, Array

So, lets say we are editing our movie clip actions, and we want to add variables. Remember when i talked about clipevent, and i said that variables should be added on LOAD? That's what we are going to do now:

onClipEvent (load) {
var life:Number = 5;
var scorestring:String = '';
var dead:Boolean = false;
var bgarray:Array = (1,0,0,0,1);
}

So in this code i set 4 different types of variables. lets talk about each one:

Number: numbers are variables that you can increaase, or decrease with actions. for example:

life -= 2;

i just decreased life by 2.

String: strings are lines, that you can edit, so usually you set it as blank ( '' ), and you add a string later on. For example:

scorestring = 'flawless';

now the scorestring is saying flawless.

Boolean: boolean variables are true or false. Use it when something can either be true, or false. For example:

if ( life <=0 ) {
dead = true;
}

what i am saying here is that if the number variable life is smaller or equal to 0, the boolean variable dead is no longer true, it is false.

Array: Have you ever seen the matrix ? A matrix is a 2 level array, just for the record. arrays are complex, but very useful once you master them.
Here is a 2 level array (matrix):

map1 = [[1,1,1,1,1,1,1,1,1],
[1,0,0,0,0,0,0,0,1],
[1,0,0,0,0,0,0,0,1],
[1,0,0,0,0,0,0,0,1],
[1,0,0,0,2,0,0,0,1],
[1,0,0,0,0,0,0,0,1],
[1,0,0,0,0,0,0,0,1],
[1,0,0,0,0,0,0,0,1],
[1,1,1,1,1,1,1,1,1]];

if you don't understand arrays, don't worry, when i start the tutorials, i will eventually make one with arrays and you will understand it =]

OBS: i said there are many ways to add variables, but i showed you 1 way. sorry. Those variables could also be added like this:

onClipEvent (load) {
life = 5;
scorestring = '';
dead = false;
bgarray = (1,0,0,0,1);
}

i think this way is easier, but you can do both.

Sound

2009-01-24T10:21:00.007-02:00

Adding sounds to Flash isn't really hard. I'm gonna teach you 2 ways to do that, but in both, you have to have the song in the library. So go to FILE >> IMPORT >> select the song.

1-) Adding a song manually: to do that, select a frame, and go to its properties panel. There you will see an option where it says sound. Click there and select your song. And that's it =]. Now you can add effects and sync.
obs: I have had A LOT of problems when using this method, so i don't recommend it.

2-) Adding a song with AS: This method is a little harder. Firstly, right click it (on the library) and press linkage, and on the linkage window, chack export for action script,set the identifier to "sound"(w/o the quotes) and press OK.
Now, on the frame you want the sound to be, add this action:

song = new Sound();
song.attachSound("sound");
song.start(0, 1);

Explanation: on line 1 we set a new sound called "song" ( each new sound you add should have a different name, keep that in mind)
On line 2, we are attaching the song "sound" to "song"

and on line 3 we tell flash to start playing the song. On parenthesis, the number before the coma is the time it will be offset ( If you want the song to start playing on its 3rd second, this number should be 3), and the number after the coma is how many times the song will be played.

TIP: Generally, the function for stopping sounds is:
stopAllSounds ();

PS: Each new song MUST have a new identifier.

Oh, 1 more thing. The best place to get songs is at the NG audio portal

Clipevent + Conditions

2009-01-24T08:45:00.006-02:00

Hi, remember when we talked about functions for buttons ?
Let's talk about some for movie clpis. Usually, if you are adding actions to a movie clip you always have to start with :

onClipEvent (_____) {

inside parenthesis you can type:
load, unload, enterFrame, mouseDown, mouseMove, mouseUp, keyUp, keyDown, data

well, the most important are load, and enterframe, but they all can be useful. I will now talk briefly about some of these =]

you use load when you want the action to happen when the frame loads (this is good for setting variables)
you use enterFrame when you want the actions to happen when the timeline reaches the frame the movieclip is in.
mouseDown is used when you want something to happpen when you click the MC
mouseMove refers to when you move the mouse inside the MC
mouseUp refers to when you release your mouse after clicking on the MC
keyUp refers to when you press specified key
keyDown refers to when you let go specified key.

don't worry, i will talk about unload and data later =]

for now, let's talk about the structure of blocks of actions.
everytime you open up a bracket, you have to close it. Same for parenthesis. If you have any experience with any other type of coding, you should know this. In HTML, if you open a tag, you have to close it .
Take a look at this button's actions:

on (press) {
if (Key.isDown (Key.DOWN)) {
_root.gotoAndPlay ("intro");
}
}

you can see that i have closed every single bracket and parenthesis that i opened.
i know you are wondering about this code i showed you. Wanna learn ? Ok, let's talk about conditions =]
there are many conditions but for now i will talk about if, else if, else, while.

If is used when you want something to happen when specified condition is true. At the code i showed, when you press the button, it is only gonna go to the intro frame is the key DOWN (down arrow) is down. Pretty easy right ?

else if, is used after you closed an if statement. So basically, when the if statement isn't true, you are giving it another condition, if it's true, flash will perform your actions. That was kind of hard, so i will give you a brief example:

...
if ( Dead=true ) {
_root.gotoAndPlay ("dead");
}
else if ( Dead = false ) {
_root.gotoAndPlay ("alive");
}
...

Is it clear now ? if not, just write a comment.

Else is also used after an if statement. But it doesn't give another condition, it gives an action to be performed if the if statement isn't true. As an example, take a look at the codes i just showed you for else if. It could also be written as :

...
if (Dead=true) {
_root.gotoAndPlay ("dead");
} else {
_root.gotoAndPlay ("alive");
}
...

Both codes mean the same thing. Since Dead can only be true or false, there is no need to use else if. It will work, but it is wrong. This code tells flash to go to frame "dead" if the condition ( dead = true ) is true. Else, it goes to frame "alive". you should understand that.

using while is a little more complicated. uou used it when you want something to happen while a condition is true. So you will specify the condition you want to be true, and then you type what you want to happen. An example;

...
while ( dead = false ) {
this._x += speed;
}
...

that was easy right ? This code tells our MC to perform a code WHILE dead = false. =]

Enough of conditions, if you need help, write a comment.

Now i will talk more about action script. Well, you should know that flash is a vectorial program, so if you have had enough math classes you shoud know about the Y axis and the X axis. Here is an uggly example:

Y axis
^
|
|
|
|
|
--------------> X axis

i won't talk much about this now, but on the last code i wrote i said:

this._x += speed;

that means that the MC is going to the right at specified speed.
Now why is it going to the right ?
you see that += , that means the X value of the movie clip is going to increase.
We are ADDING a number ("speed") to its X value.
If we used -= , it would go to the left.
if we used _y, it would go up.
If we used _y and -=, it would go down.

you can also say:
this._x = 45 --> that means the mc is going to position 45 of the X axis.

I know this was a little hard, but when i start tutorials, it all will get as easy as hell.

This is it for now, next time i will talk about variables.

Filters

2009-01-21T10:43:00.006-02:00

Hello !!
Today, I am going to talk about filters. Filters are really easy to use, and they can add a cool effect to your flash.
Filters can be applied to movie clips and buttons, and there are many kinds of filters. To add a filter, select your symbol, go to the filters panel, and press the Plus ( ADD ) button.

There is bevel, gradient bevel, glow, gradient glow, blur and adjust color.
Each one has it´s own options and you can add more than one filter on 1 symbol.

If you wish to see how they work check some of my previous post, and watch the movie. I put bevel on the buttons, glow on text, and blur on special effects.

Now go try out the different effects you can get with filters !

Tip: If the movie clip is an animation, every frame on the animation will get the effect.

Reminder: I´m not sure, but i think filters won´t work on versions prior to flash 8

Stick Teleporter

2009-01-19T16:45:00.006-02:00

Hi guys ! I was taking a time and made a stick movie.. you can make movie just like this one with what you've learned so far =] , except for fillters ( ill talk about them)

So, anyways, you can watch it at NG : http://www.newgrounds.com/portal/view/479360

or, just watch it below:

Frame by Frame

2009-01-16T20:00:00.004-02:00

now that you know most about tweening, let's talk about a different type of animation. The Frame-by-Frame animation (fbf). This animation has a quallity. It shows each artist's unique style, and unlike tween, it doesn't look artificial. Now, did you really learn how to use the onion skin ?

I will teach you again. Press the onion skin button, just under the timeline. And on top of the Timeline, a marker is gonna show up. Drag the little dots to wich frame you wanna be able to see. And you will see all the frames you chose, but they will be transparent.

Use the onion skin to draweach frame of your movie. To make it look better, make frames in between the ones you already made.

Always remember that the rules of physics also work on your movie. So when something is on the air, make it go down, with a little acceleration. And when something hits the floor, make an easing, so your movie will look more realistic.

Frame by frame is good for drawing special effects, like water splashing, explosions, and blood. Look at some examples:

And always remember: if you are lazy (i am) you should change the frame rate to 12 fps. That way, you have to draw less frames ! Otherwise, you can leave it to 24, or even 30 fps.

ON Function

2009-01-15T21:26:00.003-02:00

hello there ! Had fun using tween ? I HIGHLY recomemmend you to get used to it, for it's the easiest way to make things move around. But now let's talk about actionscript. Remember the post Symbols - Part 2 ? when we used AS for the first time ? well, we used the ON function to make the BUTTON take us where we wanted to be. So let's talk more about this function. It is used mostly for buttons, but you can use it with movieclips too. So on this functions you type :

on (______) {
//condition;
}

inside the parenthesis, there are many things you can put. Let's talk about them briefly:

press: this is what you use when you want something to happen when you click the mouse over the hit area ( if it's a movieclip, there is no hit area, so it's just if you click on the movieclip)

release: use this when you wantsomething to happen when you release the mouse button over the BUTTON ( or movieclip)

releaseOutside: same thing as above, but when you release outside the symbol

rollOver: when the mouse gets over the symbol

rollOut: when you roll the mouse outside the symbol

dragOver: when you drag something over this symbol

dragOut: when you drag something out of this symbol

keyPress _____________ : when you press specified key.

In case you are wondering, i AM gonna talk about DRAG and keyPress, but not now. Wait for it.

Tweening

2009-01-15T18:48:00.009-02:00

Hi ! And today i will teach you about the automatic animation that we call tween. Have you ever used ImageReady ? it's the same principles... What the tween does is, when you draw the inicial and final stage of a movement, the tween will do the intermediate part, the rest. Ok, so let's try something easy. Remember the rectangle tool ? Click on it. Now press J for object drawing.

//explanation: the object drawing option is useful when making animations with tween, because everything you draw will be automatically transformed into a Drawing Object, wich is like a symbol, but you can't animate inside it.

Now draw your rectangle, go to frame 15 and press F6. On the 15th frame, move your rectangle to the right. Now select any frame between 1 and 14, and on the properties panel select TWEEN>MOTION.

//There are 2 types of tweens, Shape and Motion. Motion will move and/or reescale objects. And Shape will change their shape, color and more.

Test your movie. You will see the rectangle moving ! That's easier then drawing each frame right ? Now try free reescaling it. Cool right ?
Let's try some shape tween. Draw a circle (no need to use the object drawing if you don't want to). Now go to frame 15, press F6, and change it's shape dramatically. Now add a shape tween. You will see that it works good. But SOMETIMES (most times) shape tween cann get VERY CRAPPY. There is a little secret for it to work good. Do you wanna know? Let's learn with an exercise.

Use the text tool to write the number 1. Use times new roman, size 100. Select it, and break it apart (CTRL+B). On frame 10, press F7 and write number 2 on the same place, with same font and size. Add a shape tween and test your movie. Wasn't that crappy ? So we are gonna add Shape Hints. To do it, press CTRL+SHIFT+H, or go to MODIFY > SHAPE > ADD SHAPE HINT. A little red A will appear on both numbers. Now place it (by dragging it) on the top right corner of the number 1. Do the same with number 2. Now the hint should get GREEN for number 2, and yellow for number 1. Now repeat this process ( changing the spot) until you are satisfied with the results.
Here's mine:

oh, one more thing for this post to be over. you see what i just did above? 2 tweens at the same time ? they are only working because each one is on a DIFFERENT LAYER, and the bar in the middle and the text are on another different layer. If everything was in the same layer, it would get really messy, because the tween would envolve everything. So when making a movie, make 1 layer for EACH character, 1 for the background, 1 for each object...

Quick Guides

2009-01-13T21:33:00.015-02:00

Here is a series of quick guides for you :

Importing: to import an image, or a song, for example, press FILE > IMPORT > TO LIBRARY.

-Library: Well the library is where all media you used on your project is stored. Keeping your library organized is rather important. on the library you will see all the symbols you made, all the graphics, all sound, all images, and more. To get something from the library to stage, just drag it. To give a LINKAGE NAME to a symbol, right click it (on the library), and press LINKAGE. Check "export for action script" and that's it !
Also, the short cut for the library is F11.

-Colors: Now lets talk about the color panel. It shows outlines and fill colors, it gives you many options, like making gradients, changing alpha, and mixing colors.

-Breaking symbols apart: When you made something a symbol and you don't want it to be a symbol anymore, press CTRL+B. You can also do that for imported images so you can change them.

-Registration Point: it is that little + thing when you create a symbol. when it's important, i will tell you where we want it to be, but for now, just leave it where it is (top-left corner).

-Motion Guide: I said i would talk about that on the timeline post... Ok, a motion guide is used to make a movie clip go through a path. So draw a circle, convert it and press the motion guide button. A guide layer will show up. That's where you draw the path in wich the movie clip will go ( a simple line will do for now ). Now go to frame 15, and press F6 on both layers. On frame 15, place the circle at the end of the line you just drew. Now select any frame on the circle's layer (except frame 15) and make a motion tween).Test your movie. The circle should be following the line ( although you can't see it).

-Masks: you probably (or not) have already heard about masks. Lets make one right now. Draw a rectangle, and on the layer you just drew, double click the icon left of the layer name (a little paper). Than change its type to MASK. Now make a new layer , drag it under the the mask layer, and click the little paper next to this layer's name, and change it to MASKED. Now all you gotta do is draw anything on the layer you just created. Draw like a big'o'stick. Test your movie. You will see that only the part of the drawing inside the rectangle is showing. that's what we call a mask ! It gets pretty cool when you tween the mask. Look at what i did:

Different Types of Text: There are 3 types of text boxes, static, dynamic, and imput. Static is nothing special, it's just regular text. Dynamic is used for variables, so you can change it's instance and var in order to display your variables. Imput allows the player to interact with the text, it can be copied, and even changed.

Symbols - Part 2

2009-01-13T20:36:00.009-02:00

Did you make a good stick movie ? hope so. Any doubts right me a comment !

Lets move on with the lessons. We will now talk about buttons. I left the buttons for last because i am gonna teach you the Action Script for it ! Yay, now you will learn AS ( action script ) !!!
But before that, i have to talk about buttons. This type of symbol lets you perform an action everytime the mouse interact with the button. You can make buttons out of movieclips, but it's just stupid. I will teach you all about buttons with a lesson. So lets start.
draw a rectangle. Select it, and press F8, to convert it to a button. Inside the button you will see 4 frames. Up, Over, Down, and Hit. Up is what it shows when the mouse is NOT OVER the hit area. Over is when the mouse is over the hit area, Down is when you are clicking the hit area, and Hit is the hit area.
So when you convert your rectangle to a button, only the up frame is filled. press F6 until all frames are filled. Go to the over frame, and change the color. Do the same for the down frame. Test your movie. You will see that when your mouse is over the button, it changes, and when you click it, it changes again ! Cool right ?

But nothing actualy happens.. That is because there are no actions on it. On the inferior part of the window you should see the actions pannel, if you don't, just press F9. Each timeline and symbol can have it's own actions ( there are few exceptions, as i mentioned previously). So on the 1st frame of the main timeline paste this action:

stop();

this action stop your movie, so it won't keep playing. Now make a new blank keyframe on the second frame, and type the STOP action again. Then write something like "second frame" on the stage on the second frame (use the text tool). What you have now, is a timeline with 2 frames, and a button on the first one. Select the button, and open the actions pannel. Now type:

on (release) {
_root.gotoAndStop (2);
}

what this does is: when you release the button, the main timeline (root) will go to the second frame and stop. the number inside the parenthesis can either be the number of the frame you want to go to, or either the label of the frame you wanna go. lets try with a label ?
Label the first frame "main" (without the quotes). Now copy the button on the first frame and paste it on the second frame. Open up the actions for the button on the second frame, and delete everything. Now paste these actions there:

on (release) {
_root.gotoAndStop ("main");
}

Test your movie, when you click the button on the 1st frame, the timeline goes to the second frame, and when you click the button on the second frame, it goes back to the 1st button. Pretty easy right ?!

That's it for buttons for now. Learn these actions by heart, for you will use them A LOT. Try making what we just did with mu;tiple frames. good luck. See you next time !

Symbols - Part 1

2009-01-13T10:21:00.004-02:00

*I forgot to say something on the timeline thing. Giving names is very important to keep things organized. Naming your layers is good, but the most important thing is naming your frames. When you click on a frame, you will see on the actions pannel a field where it says FRAME LABEL. That's where the frame name goes.

Now, lets talk about symbols. When you are making animations, symbols are very important. To turn a drawing into a symbol, press F8. A window will pop up and you will see that there is a field for you to name your symbol, and there are 3 kinds of symbols.

MOVIE CLIP: A Movie Clip ( MC ) is like a whole new movie. When you double click a movieclip you will see that it has its own timeline. Pretty cool right ? So if you have a movie clip with 100 drawings inside it, you can place it on the 1st frame and you will just have used 1 frame of the main timeline. Let me make it clear for you. A movie clip is a symbol that has a movie inside it. The movie inside it can either be a loop, a whole movie, just 1 image, or anything you can come up with. To get used to them, try making multiple mc's inside each other. Like, the whole body is a mc, inside it there is the head mc, inside it the eye mc, inside it the pupil mc, and i will let you imagine the rest.
*Edit/Tip: If you have 2 of the same symbols, and you change one, the other one is gonna change too. So be careful with that, and remember that to undo something, just press CTRL+Z. Also, on the properties pannel for movieclips, you will see a field called INSTANCE NAME. THIS IS VERY IMPORTANT. WHEN I TELL YOU TO GIVE SOMETHING AN INSTANCE NAME, YOU HAVE TO WRITE ON THAT FIELD !!!!

GRAPHIC: This one is just like a movie clip, except it will ONLY play when the main timeline is playing, and you can't change it with actions. When you are making a movie, it is better to use graphics, rather that movie clips.

I'm not sure I am making my points here, so now i'm gonna make some explanations.
It's time to WORK !! Open up FLASH. If you don't have it, either get it, or download a trial at adobe.com . Ok, we are gonna make a stick movie. Why sticks ? Because they don't require any drawing skills. Ok, to make a stick movie we will use the pencil tool, and the onion skin ( i talked about those). It is very important that you often save your project, cause flash sometimes bugs, and all unsaved things are gone. Also if you screw up with the pencil, press CTRL + Z to undo an action. Also, that big white rectangle is what we call STAGE, so when i say stage, i mean that big white rectangle. We are gonna make a stick walking (or running). Do you know what sprites are ? when you were a kid playing SUPER MARIO, you didn't realize,but all those mario moves were just a couple of sprites. So we are gonna draw some sprites. Firstly, draw the stick with its legs wide open, and select the whole thing and convert it to a MOVIECLIP. Inside the movieclip make a new blank keyframe on the second frame ( F7, do you remember ?). Turn the onion skin on, and based on what you see from the previous frame draw the next step. Pretty easy right ? When you see you got a good loop ( a loop is a movie where the first frame can be the next frame of the last frame) just press CTRL+ENTER to preview your movie !!
Here is a sample, try making something like this:

The Timeline

2009-01-12T20:51:00.003-02:00

*Before you start this, be sure you have enough experience with the tools, try making complex drawings, if you can't, draw something pretty =]

The TIMELINE is the 2nd most important thing in Flash. That's the difference between flash and a drawing program. Unnderstanding the timeline is the 2nd most important thing to learn. Ok, if you've never seen a timeline before, better get used to it. It flows to the right, so left is past, and right is future. easy right. You will see there are numbers on it, like a ruler or something. those numbers refer to the frames. So each little square is a frame, and each frame has its number. Also, on the very left of the timeline, you will see the layers. layers are independent from one another. Each layer can ( and should ) be used to draw a different part of your animation. Example: if you draw a background and you want your character to go from one side to the other, you WILL make a new layer for him. In order to make a new layer, you have to press that little button on the left inferior corner, it's like a paper with a plus sign. Next to it is the motion guide button ( we will talk about that ) and next is the insert layer folder (to keep layers organized). The little trash is used to delete a layer. On right of the frame, you will see a pencil (indicates the frame you are on) a little dot ( click it to turn the layer invisible), another dot (click it to lock the layer) and a square (click it to show layer outlines). Back to the timeline now. when you open up a new document there is only gonna be an empty frame there ( you know its empty cause the circle is empty inside, when there is a little "a" on top of the layer it's because there are actions on it).If you want to create a new empty frame anywhere on the timeline, click on the place you want it to be and press F7. If you want the frame you clicked on to be just like the previous frame, press F6. Oh, i forgot. There are basically 2 types of frames. there are ordinary frames and KEY-FRAMES. These last ones are the ones created when you press F6 or F7. to create ordinary frames just press F5. To relocate a frame, select it by clicking it, that click it again and drag to where you want it to be. To select multiple frames, click anywhere and drag the mouse to the last frame you want to be selected. Under the timeline you will see many buttons, the first one is Center Frame ( never used it before ). Than you have onion skin ( very good for animating frame-by-frame, it shows the selected frame, before and/or after the one you are at, but we will talk about that later on), than you have onion outlines, wich is the same thing as onion skin, but with outlines. Than you have edit multiple frames, when you press it you draw on all the selected frames at the same time. Than modify layer markers, wich you wont need, than a number telling you in wich frame you are on, than the frame rate of your movie ( every animation has a frame rate, it is mesured is frames per second, and it determines the number of frames displayed each second, i recommend 24). Than you have the time elapsed.

That is it for timelines for now, but i will talk about them a lot yet. your homework now is to get used to it. try drawing with different layers, and remember that each keyframe can hold a hole new drawing, or the following part of the previus keyframe. Hey, that's what animation is all about. Next time we will talk about symbols !

EDIT: I forgot to tell you about the layer options. You see that paper icon left from the layer name ? double click it. you will see many options, that i will gladly explain later on !

Tools - Part 2

2009-01-10T20:15:00.004-02:00

9. Oval Tool (O): This tool is used when you want to draw circles. Hold SHIFT for perfect ones. They will be drawn with outlines, if you don't want them, turn'em off on the color panel.

10. Rectangle Tool (R) / Polystar Tool : Draw rectangles ( hold shift for squares; you can select the corner radius if you want ( good thing for buttons, for example )) , polygons ( select the number of faces by clicking options ) and stars (select the number of points by clicking options ).

11.Pencil Tool (Y) : Free hand outlines drawing tool. Pretty much it...

12.Brush Tool (B) : Free hand fill drawing tool. Has many options like several sizes, brushes, and you can even draw inside selections, behind stuff, and a lot more that i will let you find out alone.

13. Ink Bottle Tool (S): I have NEVER used this tool before, so you won't need it.

14. Paint Bucket (K) : paint fills inside outlines.

15. EyeDropper Tool (I) : Use it to select a color from anything on stage.

16. Eraser (E): I think you know what it does. But it has many options, so you can delete outline,fills, blah blah blah...

Tools - Part 1

2009-01-10T19:46:00.006-02:00

Well, first tutorial, let's talk about tools. open up flesh if you haven't.
1. Selection Tool (V) : this tool is used to select anything on the stage. If something is not selected, you can click on its edge and change it as you want (unless it is a symbol ( we will talk about that )).

2.Subselection Tool (A) : Well, this one is little more advanded. If you have ever had experience with Adobe Illustrator, you will feel confortable with this tool. When you click on a drawing using this tool, you get to see lots of guide points, that should make optimizing your drawing easier. you can drag the guide points on your will to change the drawing you made.

3.Free Transform Tool (Q) : Reescale anything, and if you hold CTRL, you get trapezoids.

4.Gradient Transform Tool (F): I'm still gonna talk about gradients, but this tool lets you transform it as you want, it's pretty cool when you transform radial gradients..

5. Line Tool (N): Draw lines with different strokes. (TIP : try holding SHIFT and see what happens).

6. Lasso Tool (L) : If you are using it's regular form, its like a free-hand selection tool, but it also can be a magic wand (Also seen on adobe photoshop, select stuff with the same color), and a polygon lasso tool ( NOT RECOMMENDED FOR BEGGINERS, you will get stuck with this tool !!! )

7. Pen Tool (P): This one lets you draw with those guide points we talked about.

8. Text Tool (T) : Write texts, on the options pannel you can see many weird options, we will talk about that later on !

That's it for part 1. Part 2 will come out soon !

Intro/help/contact

2009-01-09T17:48:00.010-02:00

well, since this is the first post, i will talk about this blog...
in here i will write tutorials about Adobe Flash, so YOU can be a programmer too =]

i am sorry for any english mistakes, and if i offend you. i am just trying to help. when i am talking about something, and i say i don't use it, most times i don't know how to use it. if you use it and you feel like everyone else should, add a comment to my post, and i will be grateful to change the post.

There are almost no rules for comments.. i will only delete things off topic

If you are looking for a specific topic, search the archive. If you wanna learn something i didn't talk about, or anything else, send me an email at:

luksfarris@gmail.com