FrozenHaddock Flash Games, Tutorials and Resources

11Apr/100

PHP Tutorial Part I

This is a colloquial PHP tutorial. You need to know the basics of HTML and how the internet works.

So. PHP. Awesome. What is PHP? It stands for "PHP: Hypertext Preprocessor." It doesn't make sense when you think about it, but you can ask Wikipedia for more details. Now, we raise the question as to why not to use plain HTML. Well, you can't have dynamic content without some sort of server-side scripting, such as PHP, ASP, JSP, or something else.

Bookmark and Share
[del.icio.us] [Digg] [Google] [LinkedIn] [StumbleUpon] [Windows Live] [Yahoo!] [Email] More »
Powered by Bookmarkify™
Tagged as: , Continue reading
10Jun/095

HTML Basics

This is a lengthy tutorial about HTML basics.

Prepare yourself.

Origin

HTML stands for HyperText Markup Language. That means that it's text with uncanny abilities to manipulate time and space, and present to you web pages. It's based on a tag system, like XML. Obviously, you don't see these tags everywhere; they represent content that your browser shows you. This tag system works like this:

<element-type>element content</element-type>

What that means is that the element type (in those weird greater-than/less-than brackets) define a type of object to be displayed on the page. The most basic type is the <html> element, because that starts any html document. The element content, is obviously, the element's content. For example, if you put some text in the html, that's what pops up on the web page. The thing is, once you open the tag, you've got to close it, which is usually done by putting a tag just like the opening one, except with a forward-slash in front of its name, like so:

<html>MY TEXT IS HERE LOLOLOLOL.</html>

Basic Tags

So, yeah, as you may have guessed, there's more than just an HTML tag. There's the head and body tags, script tags, text-formatting tags, style tags, and a bunch more. However, you can nest those tags. Nesting is when you put one tag inside another, like so: <html><body>Wee! More text is here!</body></html> REMEMBER: The tags MUST be in the right order! First in, last out! So this would be WRONG: <html><body>Even more text!</html></body>. Although a web browser would probably still display that correctly, you still shouldn't.

Here's some basic tags:
<p></p> This is the paragraph tag, for guess what? Paragraphs! Note that between paragraphs, there's an involuntary line break that the browser renders.

<head></head> This is where fancy HTML describing stuff, like META (don't ask about that, that's too complicated to get into right now) goes, but other stuff like scripts can go in there.

<script></script> This one's very hard to guess ;). It defines a script, by default in JavaScript, which is part of what makes those HTML pages so snazzy.

<body></body> This is where all the content goes, like text and pictures and flash and whatnot.

<br /> This is a line break, which is equivalent to pressing Enter or Return in a text document.

Empty Elements

Now, I am going to explain the weirdness of the br tag. Obviously, it would be rather annoying to have to go <br></br> when there's NO CONTENT IN IT. So to make sure that no idiot DID try to put content in it, those W3C people or whoever felt like making this fancy stand-alone tag, called an EMPTY ELEMENT.

Saving the dang thing

Now, let's try actually MAKING an HTML document.

First off, HTML is PURE TEXT. Guess what? That means you can edit it in a text editor, like NotePad, ScITE, Crimson Editor (which I really like), or anything else that strikes your fancy. So, start out by making a new text document. Now you can put any HTML code in it, and then save it. Now, it's important that you save it as an HTML file. This is done by an horribly easy process, once you do it the first time. See that extension, like "Untitled1.txt"? Well, just change that txt to html! Now it should be called "Untitled1.html" (of course, you may want to change Untitled1 to something else, but I'm going to refer to it as that for the rest of the tutorial).

Okay, first of all, if any Windows users are out there, you may encounter some problems. In the folder, or Desktop, or wherever you saved it, it may say "Untitled1.html.txt", which is not gonna work. So this is what you've got to do (if you run Windows- I'm not sure if this happens in Mac or Linux, or how to fix it in those).

But try this first: Save it as type "All Files (*.*)" and add the extension manually. So after changing the type to all files, save it as Untitled1.html. Thanks, Brett Page, for that method, because that saves a whole lot of work. But if that fails, then read on.

First, go to that Control Panel thing. If you run Vista, you may want to switch to Classic View for a while. There should be an icon called "Folder Options". Open that up. As you may have foreseen, it will present to you a window. This window should have three tabs at the top (although in XP, I can't be sure, since I'm running Vista). Go to the tab labelled "View". There should be a sort of box at the bottom called "Advanced Settings", with a load of checkboxes, radio buttons, and other assorted goodies.

Folder Options

Scroll down until you find the checkbox with the option "Hide extensions for known file types". Uncheck that thing. And poof, the deed is done! Press OK or Apply, doesn't really matter which, and get out of that window. You can also get out of the Control Panel, now, and you Vista users can set it back to "Control Panel Home".

Now go back to "Untitled1.html.txt" and get rid of the ".txt" so it reads "Untitled1.html". If everything worked right, Windows should give you an annoying error, "If you change a file name extension, the file may become unusable. Are you sure you want to change it?" Say yes.

Now, try opening it. If this is the first time you've opened an HTML file locally, you'll get some message box saying Windows doesn't know what the heck to open the file with, so check the radio button labelled "Select from a list of installed programs" and press OK. Then find your default web browser, click it, and press OK to that. It should then open up in your web browser. If you had any text in that, it should pop up in the web page. When you want to edit it, right-click it, select Open With, and choose your text editor.

The Image Tag

Now back to the image tag. In "Untitled1.html", type something like this:

<html><body><img /></body></html>

So let's make this image tag work! This image tag is only gonna know what image it needs if it has a SOURCE.

Like this: <img src="C:\Users\Me\Pictures\Lolcatz.jpg" />

Of course, this source could be anywhere on your computer, or even on the internet (just type the full URL, like http://www.google.com/intl/en_ALL/images/logo.gif). But it's important to know how to access this image relatively. The way I just showed you was an ABSOLUTE path, meaning that no matter where this HTML file is on the computer, it's always gonna have the same image. But relatively means that the path is RELATIVE, so depending on where the HTML file is, the image file's path is gonna be different.

The basis of the relative path is the ".." operator thing. That means that it goes one directory up. So if you said the source was "../lolcatz.jpg", that would mean go to the folder above an look in there for lolcatz.jpg. Also, the single dot operator thing, ".", means just the current folder. This isn't really handy until later, with really fancy scripts, but you may want to remember it now.

A Real Example Type Thing

Now, back to an actual HTML document. Start out with the opening HTML tag, that starts any HTML document. And then make a body tag (we'll be skipping the head tag, because that's more stuff for the web browser itself, not much for the user). Now you've got: <html><body>

Amazing. Now, let's put some text in, using the <p> tag. Enclose some text in the paragraph, like "This is my picture:" or "ILIEKZ LOLCATZ". Whatever you feel like. Now close the paragraph tag (remember, first in, last out!). Now, because we feel like making a line break, we use <br />.

And now for the semi-final part. An image. Using your mad HTML skizzlez you probably haven't gained throughout this tutorial, make the image tag, and make an ACTUAL IMAGE on your hard drive, or internet. I'm not gonna be checking these, so it doesn't matter. Now close all the tags that need closing.

Your final product should look something like this:

<html>
<body>
<p>OMG LOLCATZ</p>
<img src="..\..\My Pictures\LOLOLOL\omglolcatz.png" />
<body>
</html>

Now we open it. Save and get out of the text file, right-click it, select "Open With", and choose your default web browser. You will probably see some words, a line break, and a picture. And that concludes this amazingly lengthy basic HTML tutorial. (yay! no more reading for you!)

Bookmark and Share
[del.icio.us] [Digg] [Google] [LinkedIn] [StumbleUpon] [Windows Live] [Yahoo!] [Email] More »
Powered by Bookmarkify™
Tagged as: , , 5 Comments
26Mar/098

AS3: Avoider game, part 12, and a new project

The latest post at MichaelJWilliams' blog brings his AS3 Avoiding game tutorial to an end with part 12 ...or does it?

This final segment details garbage collection, the nitty gritty part of game development that's important to you, but doesn't bother the players that much, until they notice the lag that inevitably comes from leaving each of those enemies onstage...

Anywho, it's a must-read and a nice tie-up-the-loose ends post, and this series of tutorials is once of the best out there.

Now, why may it not be coming to an end?

Myself and Michael shall shortly be launching a new site geared around the wonderful Avoiding game, hosting both our tutorials amongst other things, and we'd love for you to get involved! Perhaps you have an avoiding game you've written and want to show it off, or you want to share the secrets to that interesting feature you've worked in, throw us an email or hit me up in the comments for this post and we'll get back to you. Stay tuned for more information :)

Bookmark and Share
[del.icio.us] [Digg] [Google] [LinkedIn] [StumbleUpon] [Windows Live] [Yahoo!] [Email] More »
Powered by Bookmarkify™
Filed under: AS3, Flash, FrozenHaddock, Tutorials, User Contributions 8 Comments
25Mar/090

AS3: Avoiding Game Tutorial, pt.11

Here we go, another interesting instalment in MichaelJWilliams' AS3 Avoiding game tutorial, part 11, covers saving and loading shared objects in AS3. Handy for keeping highscores, level progress and stats. Make sure you check it out!

Bookmark and Share
[del.icio.us] [Digg] [Google] [LinkedIn] [StumbleUpon] [Windows Live] [Yahoo!] [Email] More »
Powered by Bookmarkify™
Filed under: AS3, Games, Tutorials, User Contributions No Comments
23Mar/090

AS3: Button Mashing Game

You may or may not recall, a long time ago, I wrote a tutorial on how you could create a button mashing game in AS2. (Yes, I also promised more parts to it and didn't deliver, eep!) And a little while ago, someone commented asking for an AS3 conversion.

Now, I'm still not confident enough with AS3 to go writing game engine tutorials with it, so I leapt over to the forum and asked if anyone there would take on the challenge.

Luckily for me, HiddenSpartan did, and has very nicely allowed me to post it up here on the blog.

You can grab the source at HiddenSpartan's DeviantART page, here, or download it from FH, here. Remember to give credit if you use it!

Bookmark and Share
[del.icio.us] [Digg] [Google] [LinkedIn] [StumbleUpon] [Windows Live] [Yahoo!] [Email] More »
Powered by Bookmarkify™
Filed under: AS3, Engines, Flash, User Contributions No Comments
19Mar/093

8-Way movement in AS3

Now, you'll have to bear with me on this one, (I'm still learning AS3 too) but I may well have an AS3 tutorial for you today!

Let's learn how to listen for keys, and how to react to keyboard input. In this example, how to move a player when the user hits the cursor/WASD keys. (Which I have shown you before in AS2)

I'll be putting all of this code on the frame (Sorry strict AS3 writers, but for now, it's frame coding for me!), I will however place the character from the library, leaving nothing on the stage.

Setting up the stage and character

After quickly setting up your stage (I have mine on 24fps, 550 by 400px, you can have yours however you like so long as it's an Actionscript 3 document), you'll need to draw your character. For the purposes of this tutorial I've drawn a face, but let's face it, I'm no artist. So I'm sure you can think of something more imaginative :)

Library / Linkage / Document Setup

Library / Linkage / Document Setup

Once you've drawn your character, you need to convert it to a movie clip and give it an appropriate name (Anything will do), then you can delete it from the stage. Don't worry, it's not gone. Hit CTRL+L to bring up your library (if it isn't already open) and you'll see it right there at the top.

Right click your object and hit linkage, changing the class to 'char' as shown above. This will let us reference it in our code.

Getting your character onstage

That's all the setup we need to do, so lets move onto the code shall we? Click on the first frame in your timeline, and hit F9 to open the actions panel if it's not open already. This is where we will be coding the entireity of your character's movement.

Actions Panel

Actions Panel

The first thing we're going to do is to bring our player onto the stage from the library, and set it's position onstage. Remember how we gave it a class 'char'? Well now's the time to use it.

  1. var myChar:char = new char();
  2. myChar.x = 275;
  3. myChar.y = 200;
  4. addChild(myChar);

Basically, what we're doing here is creating a new instance of our 'char' object, and giving it the name myChar. We then set it's x and y coordinates (Note that AS3 does not use _x,_y as AS2 did) before finally adding it to the stage with addChild. Go ahead and test your movie, see if everything's working as it should be.

Positioned

Positioned

Looks like it's going fine to me! We'd better get our character moving eh?

Keylisteners and keyCodes

Now, unlike AS2, AS3 does not have a built in function for checking if a key is down. Instead, it checks for when a key is pressed, and when it is released. To do this, we're going to have to use a special type of Event Listener, called a Key Listener. Two infact!

  1. stage.addEventListener(KeyboardEvent.KEY_DOWN, keyDownFunction);
  2. stage.addEventListener(KeyboardEvent.KEY_UP, keyUpFunction);

These are our Keylisteners. The top one waits until a key is pressed, and then runs a function, in this case (imaginatively) called 'keyDownFunction'. And yep, you guessed it, the bottom one waits for a key to be released and then runs 'keyUpFunction'. Now, maybe we'd better write those functions eh?

The two functions are alike, in that both will check the key pressed/released and then set a boolean for movement accordingly. (A Boolean being a variable that is either true, or false.) We'll know that your character should be moving if the corresponding key has been pressed, but not yet released, so that's what we'll check for.

First things first, we need to define our Boolean variables at the top of the code, and initially set them to false.

  1. var moveLeft,moveRight,moveUp,moveDown:Boolean = false;

That should do the trick! Now down to the function...

Our code so far

Our code so far

To define our function, we need this first line:

  1. function keyDownFunction(event:KeyboardEvent) {

This includes the function identifier (keyDownFunction) which we use to call it when it's needed.

Next, I've included this line. Not nessicarily needed for the game, it will send the corresponding keycode for the key you've pressed to the output panel. This comes in handy when working out what keyCodes you need to check for.

  1. trace("Key Pressed: "+(event.keyCode));

Traces make no difference to the final .swf file, but can be extremely helpful when debugging code! You can omitt this line if you wish to.

Now we get to the meat of the function, the iftests that check against the key you pressed, and act accordingly.

  1. if (event.keyCode==37||event.keyCode==65) {
  2. moveLeft=true;
  3. }
  4. if (event.keyCode==39||event.keyCode==68) {
  5. moveRight=true;
  6. }
  7. if (event.keyCode==38||event.keyCode==87) {
  8. moveUp=true;
  9. }
  10. if (event.keyCode==40||event.keyCode==83) {
  11. moveDown=true;
  12. }

You'll see that in AS3 I have referenced the actual keyCodes of the keys, rather than naming the cursor keys Key.LEFT/Key.RIGHT etc. I think AS3 enforces this, anyone who knows differently do leave a comment won't you? Memorising keyCodes isn't my forté, hence the trace line. Another notable difference from this to AS2 is that you can no longer use the AND or OR keywords in if statements, instead having to use && or || respectively.

The keyCodes here are those for WASD and the Cursor keys.

37 & 65 - Left Cursor & A
39 & 68 - Right Cursor & D
38 & 87 - Up Cursor & W
40 & 83 - Down cursor and S

The function will set the corresponding Boolean variable to true when the key is pressed.

Now for the function that's carried out when a key is released:

  1. function keyUpFunction(event:KeyboardEvent) {
  2. if (event.keyCode==37||event.keyCode==65) {
  3. moveLeft=false;
  4. }
  5. if (event.keyCode==39||event.keyCode==68) {
  6. moveRight=false;
  7. }
  8. if (event.keyCode==38||event.keyCode==87) {
  9. moveUp=false;
  10. }
  11. if (event.keyCode==40||event.keyCode==83) {
  12. moveDown=false;
  13. }
  14. }

Pretty similar to the firs one, the only difference being that it sets the Boolean to false when the right key is released.

Let's get it moving then, eh?

Because this is a tutorial, and it's here to teach you something (I hope!) then I'll introduce the AS3 enterFrame listener here too, and control the player movement from a function. Which we'll write now.

  1. function moveChar() {
  2. if (moveLeft) {
  3. myChar.x-=speed;
  4. }
  5. if (moveRight) {
  6. myChar.x+=speed;
  7. }
  8. if (moveUp) {
  9. myChar.y-=speed;
  10. }
  11. if (moveDown) {
  12. myChar.y+=speed;
  13. }
  14. }

This function is pretty self explanatory. If the boolean is true, it'll move the character in the correct direction by 'speed', which is a variable we should define at the start of the file.

  1. var speed:Number = 5;

There. All done right? Nope! We need to make sure this function runs every frame! So it's back to those Event Listeners again.

  1. addEventListener(Event.ENTER_FRAME, enterFrameFunc);

This listener will run the function identified as 'enterFrameFunc', every frame. Simple enough, so we'll just go and write that function to finish off our code:

  1. function enterFrameFunc(event:Event) {
  2. moveChar();
  3. }

Now you can test your movie and move your character with the WASD/Cursor keys, Huzzahs and Hurrahs!

Key Control in as3 swf

And I'll just paste the entire script for you copy-pasters... (You'll learn nothing, nothing!)

  1. addEventListener(Event.ENTER_FRAME, enterFrameFunc);
  2. stage.addEventListener(KeyboardEvent.KEY_DOWN, keyDownFunction);
  3. stage.addEventListener(KeyboardEvent.KEY_UP, keyUpFunction);
  4.  
  5. var moveLeft,moveRight,moveUp,moveDown:Boolean = false;
  6. var speed:Number = 5;
  7.  
  8. var myChar:char = new char();
  9. myChar.x = 275;
  10. myChar.y = 200;
  11. addChild(myChar);
  12.  
  13. function keyDownFunction(event:KeyboardEvent) {
  14. trace("Key Pressed: "+(event.keyCode));
  15. if (event.keyCode==37||event.keyCode==65) {
  16. moveLeft=true;
  17. }
  18. if (event.keyCode==39||event.keyCode==68) {
  19. moveRight=true;
  20. }
  21. if (event.keyCode==38||event.keyCode==87) {
  22. moveUp=true;
  23. }
  24. if (event.keyCode==40||event.keyCode==83) {
  25. moveDown=true;
  26. }
  27. }
  28. function keyUpFunction(event:KeyboardEvent) {
  29. if (event.keyCode==37||event.keyCode==65) {
  30. moveLeft=false;
  31. }
  32. if (event.keyCode==39||event.keyCode==68) {
  33. moveRight=false;
  34. }
  35. if (event.keyCode==38||event.keyCode==87) {
  36. moveUp=false;
  37. }
  38. if (event.keyCode==40||event.keyCode==83) {
  39. moveDown=false;
  40. }
  41. }
  42.  
  43. function moveChar() {
  44. if (moveLeft) {
  45. myChar.x-=speed;
  46. }
  47. if (moveRight) {
  48. myChar.x+=speed;
  49. }
  50. if (moveUp) {
  51. myChar.y-=speed;
  52. }
  53. if (moveDown) {
  54. myChar.y+=speed;
  55. }
  56. }
  57.  
  58. function enterFrameFunc(event:Event) {
  59. moveChar();
  60. }

So, that concludes this tutorial! You can grab the source .fla here, 'cause we're good like that. Please remember, this is as much a learning experience for me as it is for you, if you can see anywhere I've done something wrong, or in an odd way, or if you can improve upon it in any way, please feel free to! Comment below or hit the forums with any questions or comments you may have, and I hope this helps!

Bookmark and Share
[del.icio.us] [Digg] [Google] [LinkedIn] [StumbleUpon] [Windows Live] [Yahoo!] [Email] More »
Powered by Bookmarkify™
Tagged as: , , , , , , , , , , 3 Comments
11Mar/092

AS3: Avoiding game tutorial parts 8, 9 and 10

Ok, so last time remember how I said I couldn't blog about these fast enough?

I wasn't lying :P

MichaelJWilliams has been rather busy with his continuation in AS3 of our Avoiding game tutorial, and since my last post has released parts 8, 9 and 10! Covering Preloaders, Music, Sound Effects and Multiple Levels, these installments are a valued addition, and you should definitely go check them out!

Bookmark and Share
[del.icio.us] [Digg] [Google] [LinkedIn] [StumbleUpon] [Windows Live] [Yahoo!] [Email] More »
Powered by Bookmarkify™
Filed under: AS3, Flash, Tutorials, User Contributions 2 Comments
22Feb/093

AS3: Avoiding game tutorial pt.7

It seems MichaelJWilliams is releasing these tutorials faster than I can blog about them now!

Part 7 of Michael's translation of our AS2 Avoiding game tutorial series has now been released over on his blog, and as per usual, I highly recommend it! In this installment, Michael talks you through adding Keyboard control to your player.

(Note: It's not really a translation anymore, he's overtaken us in features now!)

Meanwhile, I'll hijack the bottom of this post to remind any readers who aren't aware, we do have a forum, where help and feedback can be gotten quicker than in comments, or email, and from a wider range of developers. So I suggest you go and check it out!

Bookmark and Share
[del.icio.us] [Digg] [Google] [LinkedIn] [StumbleUpon] [Windows Live] [Yahoo!] [Email] More »
Powered by Bookmarkify™
Filed under: AS3, Flash, Tutorials, User Contributions 3 Comments
3Feb/092

AS3 Avoider: Updates and Part 5

Hey everyone, you remember Michael James Williams? Writer of the AS3 version of our very own Avoiding Game Tutorial? He's back and he's blogging!

After taking time out of blogging to complete some contract work, Michael's writing once more and his first action has been to rewrite sections of the AS3 Avoiding Game tutorial (Parts 1, 2, 3 and 4) to increase efficiancy and reusability of code, and I fully advise you to check them out again. Michael says they'll be quicker to follow the second time round ;)

Also, he has released Part 5 of the AS3 Avodiing Game tutorial, which introduces Score, a Clock and will explain the concept of class inheritance to you. I know I'll be following it after checking through the first four parts again!

Bookmark and Share
[del.icio.us] [Digg] [Google] [LinkedIn] [StumbleUpon] [Windows Live] [Yahoo!] [Email] More »
Powered by Bookmarkify™
Tagged as: , , , , , , , , 2 Comments
26Jan/093

AS3 preloader tutorial

Preloader Tutorial

Hello and welcome to..

THE ULTIMATE AS3 PRELOADER TUTORIAL

sorry, I couldn't help myself, but now without further delay, here it is!!

1. The .FLA
First we create a new Actionscript 3 flash file. Then change the dimensions to the dimensions of your game/movie.
Then we'll have to link an actionscript file to our .fla so either type "Preloader" in the class textbox on your current screen
or goto "File->Publish Settings->Flash" and then look for a Settings button next to the dropdown box where you choose your script version.
and then set te Document class to "Preloader".
OK, our .fla is done and set up for the job.

2. The .as
This is the most important step in the creation of our preloader now we will make the actionscript to go with our .fla.
First I'll post all the code and then I'll explain it step by step.

package{
import flash.display.Sprite;
import flash.display.Loader;
import flash.events.Event;
import flash.events.ProgressEvent;
import flash.net.URLRequest;

public class Preloader extends Sprite{
var request:URLRequest = new URLRequest("site.swf");
var loadbar:Sprite = new Sprite();
var rect:Sprite = new Sprite();
var loader:Loader = new Loader();

public function Preloader():void{
loadbar.x = 175;
loadbar.y = 190;
addChild(loadbar);
rect.x = 1;
rect.y = 1;
loadbar.addChild(rect);
loadbar.graphics.lineStyle(2,0xffffff);
loadbar.graphics.drawRect(0,0,200,20);
rect.graphics.beginFill(0xffffff);
rect.graphics.drawRect(0,0,198,18);
rect.graphics.endFill();
loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, loadProgress);
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loadComplete);
loader.load(request);
addChild(loader);
}

private function loadProgress(event:ProgressEvent):void{
var percentLoaded:Number = event.bytesLoaded/event.bytesTotal;
rect.scaleX = percentLoaded;
}

private function loadComplete(event:Event):void{
removeChild(loadbar);
}
}
}

This might be a bit overwhelming at the time but don't worry, when you're done with the tutorial you're going to laugh in the face of AS3, Mwahaha!

package{

Every .as file starts with "package{ " wich contains the code of our .as file.

import flash.display.Sprite;
import flash.display.Loader;
import flash.events.Event;
import flash.events.ProgressEvent;
import flash.net.URLRequest;

then comes a declaration of all the files we have to include.

public class Preloader extends Sprite{

This is the declaration of our class it will hold all the functions and variables, as you can see it extends a Sprite since our loadbar is going to be a sprite.

var request:URLRequest = new URLRequest("main.swf");
var loadbar:Sprite = new Sprite();
var rect:Sprite = new Sprite();
var loader:Loader = new Loader();

here we declare some variables. a new URLRequest wich will hold the request to our main game/movie, two Sprites one for the entire loadbar and one that will hold the filling of our loadbar, and last but certainly not least a Loader that will load the requested game/movie from the urlrequest.

public function Preloader():void{

This is the initialize function wich will be executed on the loading of our .fla file.

loadbar.x = 175;
loadbar.y = 190;
addChild(loadbar);

Here we set the location of our loadbar Sprite to the center of the stage minus the half of it's width so that is will be perfectly centered in the middle of our screen. The last line add the Sprite to the stage.

loadbar.addChild(rect);

here we add the Sprite to the stage but this time inside the loadbar Sprite.

loadbar.graphics.lineStyle(2,0xffffff);
loadbar.graphics.drawRect(0,0,200,20);

Here we draw the outline of our loadbar using actionscript. the first line set the style of the line to a thickness of 2 and the color black.
the second line draws a rectangle with no filling from the point (0,0) to the point (200,20) inside the loadbar Sprite.

rect.graphics.beginFill(0xffffff);
rect.graphics.drawRect(0,0,200,20);
rect.graphics.endFill();

This is where we draw the filling of our loadbar. The first line sets the color of our filling to black. the second line draws a rectangle inside our rect Sprite wich is located inside our loadbar Sprite, so the location of our rectangle is loadbar.rect. the last line ends our fill.

loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, loadProgress);
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loadComplete);

This adds some eventlisteners to our loading progress. the first is to track how many bytes have been loaded and the second is to track when the loading is complete.

loader.load(request);
addChild(loader);

These lines will load the main game/movie and add it to the stage.

private function loadProgress(event:ProgressEvent):void{
var percentLoaded:Number = event.bytesLoaded/event.bytesTotal;
rect.scaleX = percentLoaded;
}

here we declare the function that is used to track the loading progress and handle accordingly.
it calculates a percentage based on the amount of bytes loaded and the total bytes being loaded, the percentage will be a number between 0 and 1.
then it sets the width of our filling to the right percentage.

private function loadComplete(event:Event):void{
removeChild(loadbar);
}


this function will be called by our eventlistener when the loading of our game/movie is done, it will remove the loading bar so the only thing visible will be our main game/movie. you can also add additional code to accompany the completion here like a trace telling that the loading is done.

This is all! Now go test your movie using a nice big main game/movie and if you run into any trouble, just post the problem here and I'll be happy to help you sort things out.

here are the source files (use them wisely):

preloader

Bookmark and Share
[del.icio.us] [Digg] [Google] [LinkedIn] [StumbleUpon] [Windows Live] [Yahoo!] [Email] More »
Powered by Bookmarkify™
Filed under: AS3, Flash, Tutorials 3 Comments
   Older Entries »

Search

Recent Posts

Categories

Recent Comments

Meta

Affiliates



JDog053 - Flash Games, Tutorials and More...
FreelanceFlashGames blog.