Bigfoot Studios

Flash Develop

2011-11-15T17:20:00.000-08:00

I've just started using Flash Develop, not enough to give a decent review, but enough to say, 'Hey... I kinda' like this!' but it didn't start out so well... I figured, what better way to dive back into AS3 and get used to Flash Develop, than by going through Michael James William's AS3 Avoider Game Tutorial? So I started on section 1, everything was going great... FD booted right up, it asked me to create a package, and... oh crud, which one should I pick? AS3 Project? Flash IDE project? AS3 with Preloader? HaXe? ...what the heck is HaXe? I definitely don't want Haxe, I guess... right? No, no, course not...
Would you believe Michael helped me again? I found this post over on Active Tuts+ which explained which one was for me.

OK, Really getting started now
Ok, so my project is open and I jump right into section 1 of the AS3 tutorial. I scan down because a lot of the prep doesn't seem to apply... then I make my first enemy (using the Flash IDE), export the SWC, and import it into FD (the whole reason I jumped into FD in the first place - but that's for another story)
I'm just humming along now! I create a new class: Enemy.as and then I press Ctrl+Enter to test my 'game'!
...wait, there's no enemy on the screen! Where the heck is the enemy I just created? I check, double-check, TRIPLE check my spelling. I copy and paste from the tutorial.

Will. Not. Appear.

I remove the AS file from my project and add that code to my main AS file and now my enemy is there. ...huh?
Time to hit Google again... thankfully I found this post on One Giant Medias website before I went completely bald from frustration. It notes:

Issue:
Using custom classes with the same names as linkage library movie clips in Flash IDE would trace output but not show up on stage

and then it goes on to explain how to get it working.

So, I went back to the Flash IDE, right-clicked my Enemy in the library and chose Linkage...

I changed the class to FL_Enemy, saved, and published the file.

Time to go back to Flash Develop, now open up that Enemy.as class file and change

public class Enemy extends MovieClip

public class Enemy extends FL_Enemy

...by the way, you don't have to pick FL_Enemy for the library class, it can be anything, but appending FL_ is a suggestion from the OneGiantMedia blog article. Of course, you'd have known that if you clicked the link above!

...back to programming!

-Bigfoot

Update!

2009-09-11T19:11:00.000-07:00

It's been a while, thought it was time to post an update. Life's been exciting lately. I'm about to find out whether my wife is pregnant with a boy or a girl... I got laid off from my job... worked two new jobs (though only kept the second one...), and received two other offers (it's nice to feel wanted!)... and found out how to make a killer blended coffee drink! Ok, that last was the least exciting, but I'm going to fill you in on the details anyways...

What you'll need...

A blender (we have a 'Magic Bullet')

A pot of coffee (we used Wal-Mart brand)

Ice cube trays (these came with the apartment, believe it or not)

Sugar (sweeten to your taste, I like a little, my sweetie loves it sweeter!)

Milk (We've made it with both 1% and evaporated milk - both good!)

Some dark chocolate (optional)

First, make a pot of coffee... After it's cooled down, pour the brewed coffee into ice cube trays and freeze overnight.
The next morning, put some coffee cubes, sugar, milk, and chocolate into the blender and blend until smooth. ...That's it! Try it!

Ok, on to other stuff... I've been working on Tonypa's tile based game flash tutorials aaaand the jury is still out on whether I like them or not. I'll finish them, and then maybe I'll feel more qualified to give my opinions...
You'll just have to come back!

Getting rid of duplicate lines of code

2009-08-11T22:34:00.000-07:00

I just finished one of MJW's sh'm'up tutorials and by the end I had multiple lines that were duplicates of each other. For example:

{

removeChild( bullet );

bullets.splice( j, 1 );

}

While this used to be okay - I just wanted working code! - Now, after these tutorials I'm spoiled. Some would say a better (though very beginner!) programmer. I feel like I need to compact it and clean it up as much as possible.
So I created a public function called removeClip (first it was removeEnemy, then I figured I could use it for the bullets too, and maybe other things later!) and passed it three variables:

instance of the clip I wanted to remove.

the position it was in the array

and, the array name.

Tada!

public function removeClip( movieClip:MovieClip, i:int, array:Array ):void

{

    removeChild( movieClip );

    array.splice( i, 1 );

}

Then I just went back through AvoiderGame.as and replaced all those lines that removed the bullet / enemy with:
removeClip( enemy, i, army );
or
removeClip( bullet, j, bullets );

Michael, thanks for teaching us how to code.

EDIT: MJW posted a comment on trimming down my code even more that I'd like to share! (Especially in case you don't read the comments...)

He wrote: "I'm not sure if you know this, but all arrays have a method, .indexOf( item ), that returns the index of the item specified (or -1 if the item is not in the array).

So you can write "array.splice( array.indexOf( movieClip ), 1 )", for example. This way you don't have to pass the index of the item through to the function each time!"

I've used his suggestion, and changed my removeClip function to this:

public function removeClip( movieClip:MovieClip, array:Array ):void

{

    removeChild( movieClip );

    array.splice( array.indexOf( movieClip ), 1 );

}

I guess if you wanted, you could also make a check to make sure it was part of that array before trying to splice, like this:

public function removeClip( movieClip:MovieClip, array:Array ):void

{

    removeChild( movieClip );

    if( array.indexOf( movieClip ) != -1  )

    {

        array.splice( array.indexOf( movieClip ), 1 );

    }

}

Anyways, it might not seem like a lot at first. You're only slimming it down by one small variable. But that's one less variable for every bullet that leaves the screen, or hits an enemy, plus every enemy that gets hit, or leaves the screen, and in a much bigger game it would really start adding up.

A little more information about it here from Senocular

MJW Avoider Game ep11ch1

2009-08-06T12:43:00.000-07:00

Alrighty-- Another challenge! I already wrote below about my fun with isNaN during this challenge. But let me try to document what I did for the challenge itself. Won't be too long...

Staying in the GameOverScreen.as file, I added the following to the constructor. (I called my array bestScoreArray) I wanted to check if the array was undefined or empty, and if so, create it.

if( isNaN(sharedObject.data.bestScoreArray) )

{

    sharedObject.data.bestScoreArray = new Array();

}

Then, I figured I'd plug information when the final score was set. So down in the setFinalScre function:

else if( scoreValue > sharedObject.data.bestScore )

{

//  sharedObject.data.bestScore = scoreValue;

    sharedObject.data.bestScoreArray = [scoreValue, sharedObject.data.totalGames, "Test"];          

}

I'm grabbing three pieces of information and sticking it in an array -- score, total number of games played when that score was reached, and an arbitrary string of text just to test.

Ok, now I need to make sure it's working, so I threw this down below in the same 'setFinalScore' function. It will loop through the array and 'trace' every item to the output window.

for (var i:int = 0; i < sharedObject.data.bestScoreArray.length; i++ ) 

{

    trace( i, sharedObject.data.bestScoreArray[i] );

}

Now run it.

D'oh! Didn't work... why not? Looking back through my code I realized this was wrong:

if( isNaN( sharedObject.data.bestScoreArray ) )

Can you spot why? Because we're creating an array... so it's NEVER going to be a "number" (isNaN checks if something is 'not a number')

So, change that to this, and try again:

if( sharedObject.data.bestScoreArray == null )

{

    sharedObject.data.bestScoreArray = new Array();

}

Voila! Should work now. If you have any problems, let me know.

Master! Master! Where's the dreams that I've been after...

2009-08-05T17:24:00.000-07:00

I'm an Experts-Exchange fan. It's a great place to get quick help on technology problems. Well, how kewl is this? I got the rank of "Master" on there, and now they're sending me a free t-shirt. Not often that places actually do give away something free, they didn't even ask for s/h... :)

	Bigfoot

Wow, and Blogger.com totally screwed up the formatting on that signature...

What is isNaN()?

2009-08-05T16:37:00.000-07:00

So earlier I worked through MJWs Avoider Game Tutorial Chapter 11 and got to the challenges. I was excited! I wanted to save some data to the local computer too! So my first addition was going to be adding how many times the player played my game. Sounds easy enough, it was using the same idea as saving the highest score, right?

Well, I figured GameOverScreen.as was as good a place as any -if not better!- to do this. So I added the following lines:

sharedObject.data.totalGames += 1;

trace( sharedObject.data.totalGames );  

But my output didn't read "1" - it said NaN. Whaaaat?
So I threw in an IF statement:

if( sharedObject.data.totalGames == null )

{

    sharedObject.data.totalGames = 0;

}

Haha! MJW helped me to learn to code!
...only problem was: It didn't work. My output still read NaN.
Not one to just ask a question and wait for the answer (sorry, I told you to post a comment on MJW's site if you had a question... I'm a hypocrite) I browsed to Google and searched for an answer.

The answer to my problem was isNaN! Here's what I put in my code:

if( isNaN(sharedObject.data.totalGames) )

{

    sharedObject.data.totalGames = 0;

}

sharedObject.data.totalGames += 1;

trace( sharedObject.data.totalGames );

Now that works! I didn't even have to 'import' anything... though I did search for that because I accidentally put isNan (note the lower case 'n') in my code and got an error.

So there you go... isNaN()

Michael asked for it...

2009-08-03T18:26:00.000-07:00

MJW left a comment asking if I was going to post my game anytime soon. So by, umm... popular demand (Hey, 50% of my blogs' commenters asked for it!!) - here it is!

The game gets difficult REALLY quick. But I don't really expect you to play it long. I'm just trying to get the basics down right now.

http://bigfoot-avoidergame.googlecode.com/files/Avoider.swf

Comments, banter, criticism? Close your browser...
Want to lavish praise? Leave it in the comment section!
Kidding... I want to hear it all - leave me a comment if you play. We'll call it "Comment-Ware"

MJW Avoider Game ep8ch1

2009-07-29T17:11:00.000-07:00

...That'd be episode 8, challenge 1

So now that he's shown us the magic of adding sound, he wants us to figure out how to create a Mute button on our own... sheesh. :) This was the easiest challenge, so far. But, so that I can solidify this in my own head, and in case you need help, here goes my thought process:

The first step I wanted to complete, had nothing (directly) to do with sound. I wanted Flash to recognize another button was being pressed. Instead of being original, I picked "m" as my mute button... Feel free to pick L, meaning "Let the music stop", or ß (ALT+0223) for "This music was picked for the beta. If you don't like it you can turn it off."

Going back and referencing my old code, I made these additions:

All of them are in the AvoiderGame.as file.

Create a publicly accessible variable (outside contructor)...

public var mKeyIsBeingPressed:Boolean;)

Initialize it in the contructor...

mKeyIsBeingPressed = false;

Inside the onKeyPress function

if( keyboardEvent.keyCode == 77 )

{

    mKeyIsBeingPressed = true;

}

Michael let you figure out the onKeyRelease function, and a student is not above his teacher, so I'll let you figure that out too.... :P

Then in the onTick function, I used a trace() command as a placeholder

if( mKeyIsBeingPressed ) 

{

    trace( "You're pressing M!!!" );

}

Don't forget to "Disable Keyboard Shortcuts"

...and then watch your Output window. When you press m, it should fill up with "You're pressing M!!!" over and over...

Ok, so it's working, I have a stream of useless output to prove it. Now I want it to actually do something useful! I created some new global variables:

public var musicPosition:int;

public var musicIsMuted:Boolean;

musicPosition is an integer. It's going to be equal to where the music was muted, so that when it's unmuted it'll play from the same spot. I guess that makes it a pause button... so, sue me.
musicIsMuted is straight forward. It's a true/false value of whether the music is muted.

...and then I initialized them, one in the constructor (musicIsMuted), and one in the onTick function

musicIsMuted = false;

and

if( mKeyIsBeingPressed ) 

{

    if( musicIsMuted )

    {

    }

    else

    {

        musicPosition = Math.floor(bgmSoundChannel.position);

    }

}

Ok, ok.... I did a little more then initialize it. I put together the basic if...else structure I was going to use. If the m key is being pressed, then if the music is already muted, do nothing right now, else check the position (in milliseconds) it was muted at, and put that into our variable, as a whole number (that's what Math.floor() does, if you don't remember)

Now, let's flesh it out some. If the music wasn't muted already, what do we want to do? We want to stop the background music from playing, and we want to change our variable (musicIsMuted) which tells us if the music is playing to true.

else

{

    musicPosition = Math.floor(bgmSoundChannel.position);

    bgmSoundChannel.stop();

    musicIsMuted = true;

}

If the player already muted the music, and now wants it to play again (cause they miss those jazzy synth beats!) then we would want it to play from where it stopped (we can do that by passing the play() function an argument), and change the musicIsMuted variable back to false.

if( musicIsMuted )

{

    bgmSoundChannel = backgroundMusic.play( musicPosition );

    musicIsMuted = false;

}

Now save everything and test your game... Easy, huh?
Oh, wait, you say it keeps rapidly turning off and on? Crud! Well, we can fix that using some tidbits from Michael's sh'm'up tutorial.

Create another global variable:

public var ticksSinceMutePressed:int;

Initialize it in the constructor:

ticksSinceMutePressed = 0;

and change your function to:

if( mKeyIsBeingPressed ) 

{

    if( ticksSinceMutePressed > 10 )

    {

        if( musicIsMuted )

        {

            bgmSoundChannel = backgroundMusic.play( musicPosition );

            musicIsMuted = false;

        }

        else

        {

            musicPosition = Math.floor(bgmSoundChannel.position);

            bgmSoundChannel.stop();

            musicIsMuted = true;

        }

    ticksSinceMutePressed = 0;

    }

}

ticksSinceMutePressed += 1;

If you haven't read that tutorial already, and can't piece together what I did, head over and check it out. No use in me re-inventing the wheel.

Avoider Game Shmup

That should do it. Now you can hear the 'thump, thump, thump' of the enemys coming on screen without that pesky synth-music playing in the background!

Disappearing Flash Window?

2009-07-27T12:29:00.001-07:00

I've had a bizarre problem happen with Flash CS3 twice now since I've been using it. I don't know what causes this but Flash disappears when I "restore" the window (when it's not maximized) It's really bizarre. I mean, I can work with it maximized just fine, but I don't want it to HAVE to be maximized.
I tried:
Right-clicking it's button in the taskbar and selecting "Move", and then using the arrow keys and/or the mouse. Didn't do anything.
Right-clicking it's button in the taskbar and selecting "Size"... Didn't do anything.
I think I tried reinstalling Flash the first time. (I'm in IT - it was like a personal challenge!) - Didn't do anything.
Reset settings in Flash. Doing this caused my preferences to reset, unfortunately it didn't fix my problem. - Didn't do anything useful.
This time I searched online and found the solution on Experts-Exchange.

"I found this config file and renamed it:
C:\Documents and Settings\%username%\Local Settings\Application Data\Macromedia\Flash 8\en\Configuration\panelset.xml

Flash started again and all windows are visible again.  The above file was recreated..."

So I tried the same thing, since I'm using CS3 they changed the name of the file on us, it's now called "workspacelayout.xml" - when I renamed it (to .old) and restarted Flash, I was able to restore my window and it actually showed up!
"Happy! Happy! Joy! Joy! Happy! Happy! Joy! Joy! Happy....."

Bee Stings

2009-07-24T17:20:00.000-07:00

Wow, I forgot how much bee stings can hurt! I haven't been stung in years, but was driving back from the gym earlier with my window open (I don't have A/C) A bee flew in, landed on me, stung me, and flew back out the window!
Stupid bee...
Yowch!

Trace()

2009-07-23T15:59:00.000-07:00

I cannot over. emphasize. my. love. of. the. Trace. Command (ok, maybe I can overemphasize it)

Seriously though, when it comes to debugging my AS3 code, trace() is invaluable!

For example, when trying to create different start buttons for mouse and keyboard controls I was trying to send navigation events, and changing variables, creating variables... sometimes, at first I wasn't sure if the code I implemented worked so I used trace to spit out some information into the 'output' tab. (It's down between 'Properties' and 'Compiler Errors')

Here's how you use it:

trace( variableName ); // Outputs the value of that variable

trace( "Your Text Here" ); // Outputs 'Your Text Here'

trace( "AvoiderGame.as Line 37 xSpeed = ", xSpeed ); //Outputs 'AvoiderGame.as Line 37 xSpeed = 6' (or whatever the value of xSpeed is...)

Easy Peasy Lemon Squeezy!

Reclaiming my zeal!

2009-07-23T12:01:00.000-07:00

I've found an awesome AS3 tutorial! It's on Michael James William's blog and it's all about creating your own 'Avoider' game using Action Script 3... speaking of AS3 - holy cow it's different from AS2, this isn't some minor revision! It's like learning a whole new language. Kinda reminds me of when I was learning C++ because it's more OOP.
Anyways, Mike's (can I call you Mike?) tutorial - which is using FrozenHaddock's Avoider Game tutorial and upgrading it to AS3 - is a great resource for learning AS3, and if you're just starting to play with Flash that's where you want to begin. So go there, check it out! Participate in the comments if you have a problem... I know I will be :)

Included with the later 'chapters' of his tutorial are some 'challenges' - I love this part! The purpose of his tutorial isn't just to walk you through doing everything. Like a good teacher, he sets out some goals for you to try to accomplish on your own, and then provides support if (WHEN) you need it by means of the comments section.

If you haven't gone through the tutorial yet, go do it! I'm going to post what I did on some of the challenges here.

Chapter 7 Challenges
One of the challenges is creating a second button on the menu screen, so that one would start the game with mouse control and the other with keyboard control. I mulled over this for three days!

My first step was to duplicate the startButton in AvoiderGame.fla, I named the instance of the copy - kbStartButton. I also edited the button so that when I hovered my mouse over it it said "Keyboard" and the original startButton says "Mouse"

My next steps were in creating an event listener for my 'keyboard control' button (I named the instance kbStartButton (Line 4 in the code below)

public function MenuScreen()

{

    startButton.addEventListener( MouseEvent.CLICK, onClickMouse );

    kbStartButton.addEventListener( MouseEvent.CLICK, onClickKeyboard );

    Mouse.show();

}

You notice, I also changed onClickStart to onClickMouse.
And also in the function...

public function onClickMouse( event:MouseEvent ):void

{

    dispatchEvent( new NavigationEvent( NavigationEvent.MOUSE ) );

}

Plus a new function that we referenced in the event listener (onClickKeyboard)

public function onClickKeyboard( event:MouseEvent ):void

{

    dispatchEvent( new NavigationEvent( NavigationEvent.KEYBOARD ) );

}

We referenced a .MOUSE and a .KEYBOARD navigation event, so go to our NavigationEvent.as file and add:

public static const RESTART:String = "restart";

public static const START:String = "start";

public static const MENU:String = "menu";

public static const KEYBOARD:String = "keyboard";

public static const MOUSE:String = "mouse";

Now, going back to the DocumentClass.as file, change your constructor to:

public function DocumentClass()

{

    menuScreen = new MenuScreen();

    menuScreen.addEventListener( NavigationEvent.KEYBOARD, onRequestStart );

    menuScreen.addEventListener( NavigationEvent.MOUSE, onRequestStart );

    menuScreen.x = 0;

    menuScreen.y = 0;

    addChild( menuScreen );

}

Go down to the onRequestStart function, and add this to the top:

if(navigationEvent.type == "keyboard") 

{

    useMouseControl = false;

}

if(navigationEvent.type == "mouse")

{

    useMouseControl = true;

}

Now, go to AvoiderGame.as - don't worry, we'll be back here in a minute!

Create a variable for choosing the mouse, I called it iChooseMouse

public var iChooseMouse:Boolean;

and change the constructor for AvoiderGame to accept this new variable. While you're at it, add a line that makes useMouseControl equal to iChooseMouse.

public function AvoiderGame( iChooseMouse )

{

    useMouseControl = iChooseMouse;

...

Now, stroll back to DocumentClass.as and change every instance of

playScreen = new AvoiderGame();

to...

playScreen = new AvoiderGame( useMouseControl );

Save all your .AS files and give it a test run. Should work!

Slacker!!!

2007-12-12T12:10:00.000-08:00

I start a blog, and then take a hiatus from doing Flash... what's up with that?
What can I say? It got busy around work, and I didn't have much time to work on the Blog. But now I've got this zeal. I want to write, so I'm back. I'm working on getting the actionscript code to look better. In doing so I totally screwed up the code in my post, so I'll have to remember where I was at and redo it. But it's all for the best...

Getting Started

2007-10-02T13:56:00.000-07:00

First, I'd like to thank (and plug) the http://www.actionscript.org/forums/ which I wholeheartedly encourage you to join and participate on, and http://www.emanueleferonato.com/ since Emanuele's blogs kick butt.

Creating Our Hero

I’m going to assume you already Flash installed. If not, you’ll probably wanna go skim your installation documentation. This is a bit embarrassing, but when I first opened Flash, I was given the options of Create [a] New ‘Flash File’, ‘ActionScript File’, ‘Flash Project’… Ummm… I didn’t know which one to pick. I dinked around, trying to figure it out. Finally I read some tutorials and downloaded their source files (.fla) only to delete everything out and save the blank one as my own. …then I figured out I just choose ‘Flash File’, and since most of the tutorials I find (this one included) are still using ActionScript 2.0, that’s the one I pick too (yep, follllow the crowd)

So, now you’ve got a blank workspace –probably with a size of 550 x 400. One layer, and one frame. If you pressed Ctrl + Enter to test the movie, you’d see a lovely scene full of nothingness.

Quite beautiful in a minimalist sort of way.

We're going to make a little ship, or ball... my ship looks like a ball, and for that matter is gonna bounce like one too!

Go up to the menu bar, and click View > Grid > Edit Grid (or Press Ctrl + Alt + G) If it's not selected, click Show grid. Click Snap to Grid (or Press Ctrl + Shift + ' later), and change the grid width and height to 20 px x 20 px.

Click Modify > Document (Ctrl+J). You'll see the dimensions of your project, by default 550px x 400px. In this window, change the Frame rate to 40 fps.

Click OK, then select the Oval tool in your tools palette (or Press 'O'). Also in the tools palette, pick a fill color for your ship. Pick a color, any color! I'm gonna go with #FF6600 - the color formerly known as orange. I like having a nice, thick border on my images, you can do this too. In the properties inspector (by default down at the bottom), you can choose the thickness of the border, change that to 3.

Now we get to create something!

Hold shift while you click and drag your mouse to make a 2 x 2 square circle (40px x 40px ...did I just direct you to create a square circle??). Wow, impressive ship you have there, huh?

Now we want to add something so we'll know which way the ship is facing. Undo Snap to grid (ctrl+shift+'), change your fill color to something else, and create an oval shape on the left side of the ship.

Does your mouse keep jumping around when you're trying to make an oval? Press Ctrl+Shift+/ to take off Snapping to Objects and try again.

Use the selection tool now (V), and highlight the entire ship by clicking and dragging a box around it. Now on the menu bar, click Modify > Convert to Symbol (F8), and name it ship. Remember that Flash is case-sensitive (i.e. ship is not the same as Ship or shiP or sHIp or Battlestar-Galactica) Make sure the 'Type' is Movie Clip, and click the box that says 'Export for ActionScript'

Lovely!

Not too terribly exciting, but at least it's efficient. You won't see this one crashing too many systems!

With your ship still selected, press Delete. It's okay! We've added it to our library (there's a panel on the right side of the screen) where we can grab an instance of it at any time.
Giving Our Hero Some Action

Now we've got a blank workspace again, that's okay. We'll add our ship back in using ActionScript!
Press F9 (Window > Actions on the Menu Bar)

Actionscript Code:



 start_y=150;

 start_x=150; 
 onenterframe=function(){

        movieclipname._x=start_x;
        movieclipname._y=start_y;
 }

More to come....

In the beginning...

2007-10-01T15:10:00.000-07:00

there was blog.
So this is it. I've decided to start a blog.
Why would I do this when I have little to say outside of cyberspace (you may or may not be asking...)?
Because I've decided to add Actionscript to my forté. So this will be my journey. I've already been working on it for two or three weeks, so it won't be my entire journey. But you can be here for most of it.
...and maybe I can help you learn a thing or too if you're interested in Flash, Actionscript, Photoshop, or something completely different. I just don't know how this blog will evolve.