One of the big mistakes that beginners make when they’re making their first Flash projects is importing all the graphics and making movieclips with tons of frames, resulting in a Flash file that is huge. The bigger the .swf, the longer it will take to load. The simplest way to fix this is to load larger files externally. Loading files is pretty easy in ActionScript 3 so I’m not going to show you how, I’ve just made this ExternalLoader class that does the job and I use it a lot at work. And to use it is the same as loading anything else in AS3. Just download the zip file and put the class wherever you save your custom classes.
My high school physics teacher always told his students that you shouldn’t worry if you didn’t understand what he was teaching right away, just keep at it and one day you’ll have that moment where BANG!, everything makes sense and how you see the world will change. Having that “ah-ha!” moment and having a greater understanding HTML/CSS, PHP, or ActionScript or any other web language won’t change how you see the world, but it will change your understanding of the Internet and suddenly everything you build will be more efficient and streamlined.
For me, it’s been different for everything I’ve tried to learn. For HTML/CSS I never had an moment where I just got it, I lucked out and understood what was going on right away. It’s one of those things where I have trouble talking about it and explaining it to people because I’ve never really had to think things through in a way that I would be able to communicate to others. ActionScript, on the other hand, is something I’ve had to put a lot of time into and while I found the beginning stuff not too difficult, when trying to move from simple stuff up to the more interesting and complicated, I found it a struggle sometimes to wrap my heads around some concepts. So what did I do? I kept at it. I looked at as many sources as I could to learn. I bought books by different authors, did as many tutorials as I could, because sometimes things aren’t explained in a way the I really understood. But then, every time I built something, whether for work or just for fun, I learned a little more. And along the way I had a series of small “ah-ha” moments that eventually lead to me being able to build things faster and with more efficient code.
I don’t believe you can force one of these moments but you can set yourself up to have one. A lot of the time when I figure things out, I have them when I’m no where near a computer. I’ll have them when I’m walking to work, thinking about what I’m working on and what I’m going to try to do that day. Sometimes I do a tutorial and one little part of it helps me realize the solution to something that’s been bugging me for weeks.
But beware, that “ah-ha” moment might never come. Sometimes your brain just isn’t wired to figure some stuff out. One thing I really wanted to do, was be able to make great digital art with Photoshop, but after watching a lot of videos and doing a bunch of tutorials, I found myself being constantly amazed by creativity when using some of the filters in Photoshop. No matter how much I tried, I just can’t think like that. And there’s nothing wrong with that, I can do a lot of stuff with Photoshop, but I’ll never be able to make some of the things I wish I could. The key is to find something that you both enjoy working with and are able to do, there’s no sense in beating your head against a brick wall.
So what’s the point of all this? Keep at it and eventually you’ll figure it out, something will click and you’ll look back at your old stuff and wonder what the hell you were thinking! Trust me, that’s actually a good thing.
As we should have expected, Adobe isn’t taking the Apple lead attack on Flash and support of HTML5’s video tag as a replacement, lying down. As Adobe gets closer to releasing Flash Player 10.1, it seems some of this might have just been due to the timing. Flash Player 10.1 is optimized for mobile and has made some big improvements for OS X. And some Flash evangilists and developers have come out in full force with examples of how much Flash Player has improved.
Mike Chambers posted some stats showing some performance tests he did on his Mac Pro where he compared HTML5/JavaScript examples to similar Flash examples. The performance varies surprisingly from browser to browser but it seems, at least to me, the Flash Player 10.1 performs very well on OS X. But I did see one thing that confirms something I’ve thought for a while, Safari for Windows is pretty bad. Although, why people use any Apple software on Windows is beyond me, it’s like Apple puts it out there to suck and hope people blame it on Windows, but that’s a completely different topic.
Fabio Sonnati put up a huge post called Flash Player 10.1 will kill HTML5. While I disagree with that statement, I agree with him that Flash video isn’t quite dead. And he’s got tons of info on all the codecs that Flash Player can play.
At gotoandlearn.com, Lee Brimelow put up a tutorial demonstrating the multi-touch gesture support that has been added to Flash Player 10.1 and AIR 2.0. It’s pretty simple stuff and as usual Lee shows how to do it in a very easy to understand style. At first I didn’t really care about multi-touch, but after seeing this, I’m actually kind of excited about it. It could really make for some interesting apps, especially with Flash CS5 being able to make iPhone apps. I plan on making my own stuff and just putting it on my phone!
The Flash Mobile Blog has a post about the distribution plan for Flash Player 10.1. They also go over the installation process on mobile devices, showing how close it is to the desktop so that people will have an easier time with it. They’re very hopeful that the Open Screen Project will result in Flash Player being on a majority of mobile devices. I think if they can get Flash on all Android and Windows Mobile devices, Apple might open up and they might at least figure out a compromise about Flash on the iPhone, even if we don’t get the full blown one on there.
So far from what I’ve seen in all these Flash vs HTML5 arguments, the people that are predicting Flash’s death seem to be the ones that never use it or have used it for a long time and have developed a big hate for Adobe over the years. ActionScript 3.0 is a pretty good language and the Flash IDE is a pretty good environment to work in, although the coder could use some work. And HTML5 needs JavaScript and debugging it is a pain! Hopefully the improvements the Flash Player are enough that I don’t have to worry about JavaScript debugging anytime soon.
HTML5 is in reality a long why from being finalized. Sure Safari, Chrome and Firefox support it and there’s a work around using Javascript to get Internet Explorer to work with it, but really it’s going to be a while before we get to use HTML5’s features and even then, I don’t think it’s going to change that much, at least in the being. The video tag is not close to being the Flash killer it’s been advertised as so far. The canvas tag will lead to some cool stuff being made but I’m not thrilled with the heavy use of Javascript to make things work. Plus, Javascript can be as big as, if not more of, a CPU hog than Flash. But with CSS3 I can see how web sites get made and displayed changing immensely.
Why am I so excited? It’s probably the little things, like being able to rotate elements or add gradients with out using images. Anytime you can use code to build an element and not use an image, the file size is going to be smaller and the page is going to load faster. I love building sites with CSS and rarely do I go back to the designer I’m working with and say “I can’t do that.” I enjoy the challenge, but most of the time, when there something that I can’t build, it’s something that I’ll be able to do with CSS3. I’m excited because this is going to open up new design possibilities that we haven’t be able to do yet. HTML5 will change the functionality of the web, but CCS3 will change the face of it.
Today I came across a link to 50 Awesome Animations made with CSS3 and although most of them only work in Safari and Chrome, it’s pretty exciting to see what can be done with CSS3. Some of them need Javascript, which is something I’m not too thrilled about. Why? Because one of the main complaints against Flash is it being a CPU hog and the cause of this a majority of the time is bad coding. And the amount of bad Javascript code out there dwarfs bad ActionScript code, so if CSS3 increases the amount of JS out there, I’m really hoping Microsoft steals V8, Chrome’s JS rendering engine! It’s open-source, but it would be more fun for everyone if MS stole it.
But once again, like my post about HTML5, we are going to have to wait for Microsoft to support CSS3 before we can really use it. Everything I read about CSS3 now tells you to make it look one way for supporting browsers and then another, less attractive way for IE. I don’t mind designs appearing a little different from browser to browser, but I have no interest in a site appearing completely different in one compared to the rest. Hopefully, with IE9 being released at the end of this year, Microsoft will add full CSS3 support and we can take the Internet to the next level, in terms of design.
The bottom line it this, CSS3 is going let us do things the either we weren’t able to do before or we needed something like Flash to create. It’s going to take some time, but over the next couple of years, what we are going to be able to do with a “static” web page is going to be amazing. The future is here, the rest of the Internet just needs to catch up!
Last week ActiveTuts put up a quick tutorial about building a sliding menu paddle, which isn’t anything too complicated but it was the first time I’d done anything with the built in Tween Class in ActionScript 3. Usually I’d use something like Tweener or TweenMax, but I thought I would see what you could do with this. What I decided to make was something that I would have loved to have been able to make with code when I was just beginning to learn AS3, a Flash site with sliding content. This would have been something I would have used movieclips I created in Flash and then created keyframe tweens to get the effect I wanted. This isn’t the most complex thing to create but it will help out beginners.
Here’s what we are going to build:
Start a new Flash file (AS3), mine’s the default – 550×400 with a white background and the framerate at 24. This is about the functionality, not the design, you can add that in after you get the all working. Save it as whatever you want, I called mine TweenSite.fla. Next, using the Text tool (T), type out something like button 1 on the stage. Make sure the button is set to Dynamic Text and the instance name is buttonText. This will allow us to control what the button says in our ActionScript file.
Now turn the text into a movieclip, F8 or Modify > Convert to Symbol. Call it MyButton, set the registration point to the top left and check the Export for ActionScript box.
Delete the MyButton from the stage, we’re going to add it using ActionScript. Finally, one the Document Class field, type Main. This will link our ActionScript file to the .fla. If you don’t know how the document class works, there’s a great video at gotoAndLearn.com.
And that is everything we are going to make in the .fla. Everything else now will be created with ActionScript.
Create a new ActionScript file, File > New… > New ActionScript File. Call it Main and save it in the same folder as your .fla. Instead of writing all the code in the .fla or even in just one .as file, we are going to build this OOP style, to make it easier to customize after it’s been built.
Here’s the code we are going to start with in Main.fla:
package { //We have to import the classes we are going to use importflash.display.MovieClip;
publicclass Main extendsMovieClip { //This creates an instance of the button we made privatevar button1:MyButton = new MyButton();
publicfunction Main():void { //This calls the init function which gets everything going init(); }
privatefunctioninit():void { //This adds the button to the stage addChild(button1); } } }
If you test this now, you should just be able to see the bottom and right side of our button. This because the position of something added to the stage is automatically 0,0. So just add this under addChild(button1):
1 2
button1.x = 30;
button1.y = 50;
This just positions our button the stage. Now to make this work the way we want to, we need more than one button, up with the other variable add this:
1 2 3
privatevar button2:MyButton = new MyButton(); privatevar button3:MyButton = new MyButton(); privatevar button4:MyButton = new MyButton();
What we’re doing here is making three more instances of the same button, but we’ll use our code to change the text. Underneath button.y = 50 add this:
Here we are adding the three other buttons to the stage and positioning them 40 pixels apart. Now if you test it, the buttons will all line up vertically but they all say button 1! So, how do we fix that? At the bottom of the init function add this:
Now if you test the movie, the text should have changed to what we have here. Now as it stands now, our “buttons” don’t really act like buttons. If you mouse over them, you won’t get the hand cursor that tells people that it’s a clickable button. We can fix this a couple of ways. One way would be in our Main.as file to set the buttonMode to true and something called mouseChildren to false for each button, but that would be a lot of code, and if we wanted to change something, like the names of buttons, we would have to change a lot. The simple way to do this is to make a new ActionScript file and put the settings in there. So create a new ActionScript file and save it as MyButton in the same folder as our other files. If you named your button something else, you have to name this file the same as your button because our Main file is going to import these settings and apply them to our buttons. Here’s the entire code for our MyButton.as:
publicclass MyButton extendsMovieClip { publicfunction MyButton() { //This gives movieclips the same properties as buttons, so the hand cursor appears buttonMode = true; //This stops the text from inside the MyButton movieclip from being selectable mouseChildren = false; } } }
Now if you test the movie, you’ll see that now the hand cursor appears and the text isn’t selectable. This is the main advantage of OOP, with a few lines of code, we have affected our entire navigation. Now, let’s add the gray block to our movie. Create a new ActionScript file and save it as Block.as. Here’s the code for Block:
publicclass Block extendsMovieClip { publicfunction Block() { //Draws the block using actionscript to keep file size down //First part is color, second is the alpha graphics.beginFill(0xCCCCCC, 1); //This draws a rectangle(x,y,width,height) graphics.drawRect(0,0,102,36); graphics.endFill(); } } }
Now back in Main.as we have some code to add. First add this up with the other variables:
1
privatevar block:Block = new Block();
Same as with the buttons, we are creating an instance of our Block class. Next in the init function, at the top, before all the buttons put this:
1
addChild(block);
Now at the bottom of the init function add this:
1 2
block.x = button1.x;
block.y = button1.y;
Now when we test our movie, the block will appear behind the top button. Next we’ll give our block something to do, at the top where we are importing the MovieClip class add this:
This is going to allow us to have mouse events and tween events in our Flash movie. Next with our other variables, add this:
1
privatevar barY:Tween;
Here we are creating our first tween. Now we need to tell our tween what to do:
1 2 3 4 5
privatefunction onNavClick(e:MouseEvent):void { //First we say what to tween, what property to affect, set what kind of ease(if any) we want to use, where to start the tween, where to end, how long to take, and the true means the time is in seconds, if it's set to false the tween is in frames
barY = new Tween(block,"y", Back.easeOut, block.y, e.target.y, 1,true); }
I’ve described what the Tween does in comments in the code. Next we need to add some listeners to call this function so it actually does something, what I usually do with listeners is create a function addListeners():
We need to add a listener to each button so that the block knows which button to go to. Inside the Main function add:
1
addListeners();
Now if you test the movie, you should get this:
OK, now let’s make those buttons control something. What we are going to do is just make four big blocks that slide into view. Once again, we aren’t designing anything we are just building the functionality. The block can be easily replaced with images, movieclips or external .swfs. To do this we are going to make a new ActionScript file and call it ContentBox.as. We’re going to make all the boxes in on class instead of making a separate one for each box. It’s just easier and it’s not too hard to build more custom classes for your own stuff later. Here’s the code for ContentBox:
Really simple stuff here, we’re just creating four boxes that are 345 by 360 and positioning them along the x-axis. I’ve also made each one a different shade of gray that way we can see the boxes move but we won’t blind ourselves with bright colors. Next, up with the variables, put this:
1
privatevar contentBox:ContentBox = new ContentBox();
Same stuff we did with the buttons, so you should know what’s going on here. If you test your movie now, you’ll see the first box and part of the second box, which isn’t really what we want, we just want to see the first box. To do this, we’ll just add a mask to our stage. Make a new ActionScript file and save it as MyMask.as. Here’s the code:
Pretty much the same as our ContentBox class, but with this our mask, the color isn’t going to matter. Now back in our Main.as file, add this code up with the other variables:
1
privatevar myMask:MyMask = new MyMask();
And then add this at the end of the init function:
1 2 3
addChild(myMask);
myMask.x = 185;
myMask.y = 20;
Now if we test this, there’s a red box over top of the first gray box, which I don’t think is quite what we’re going for here. So let’s add this line of code right under the last stuff we added:
1
contentBox.mask = myMask;
Now if we test it, the first gray box is back and we can’t see the other box anymore. Now we have one final thing to do and it’s not that major, we’re just going to apply the Tween code we used on our navigation to the boxes to make them slide into view when a button is clicked. First off, add this to your other variables:
1
privatevar contentX:Tween;
Next we need to add these listeners, which are pretty much the same as the other listeners, they are just calling another function:
Here we’re just using if statements to see which button was clicked and then telling contentBox what to change it’s x value to. Now if you test the movie you’ll see contentBox slide to the color that corresponds with the button we clicked on.
I hope this helped you out, this framework should be pretty easy to customize and allow you to build stuff pretty quickly.
I am excited about the future of web development, the stuff that we’re going to be able to do with HTML5 and CSS3 is going to be amazing, even some of the stuff that people are doing now it pretty intense and I’m beyond happy that most of them are showing how they did it. But, as usual, it seems that Microsoft is holding back the web with Internet Explorer. I’ll be the first to admit that IE8 isn’t that bad of a browser and even IE7 was a massive improvement over IE6. I don’t know why, but it just seems that Microsoft is always a generation behind the other browsers. Where would the web be if Firefox and the Webkit browsers hadn’t come along?
Because a vast majority, around 90% (including me), of computer users run Windows as their OS and I can only guess at the amount of those that only have IE installed, it’s going to be up to Microsoft to bring in widespread support for HTML5 and CSS3 features. And there’s the problem and something that I just can’t understand about Microsoft and their development of Internet Explorer. What is stopping them from adding the support for these features that all the other browsers seem to be able to add? You might think you can ignore this, believing most people are smart enough to use Firefox or Chrome, but they aren’t. My parents still don’t understand the concept of a web browser, much less that there’s more than one out there.
Perhaps Microsoft’s IE development is just part of the overall corporate direction of the company. Something that has become a giant pain in the butt of web people everywhere was the shift in Outlook 2007 to use Word’s HTML rendering instead of IE’s. This has sent the whole HTML email design world back to 1998. I know it’s not a glamorous side of web development, but a lot of clients want that service and I can’t tell you how much time I’ve spent building something that, by today’s standards, is simple and only a couple of lines of CSS, only to have to rebuild it in tables and inline styles.
HTML5 isn’t officially done yet, but there is enough support that you could build a site using it, but for the most part you have to include a Javascript file in order for IE to recognize the HTML5 tags, not really a big thing, but it is a pain, especially if someone has Javascript turned off in their browser. And, sadly, there’s no Javascript file you can use that makes IE recognize the unsupported CSS3 attributes, at least that I’m aware of.
So what does this all mean? In the end, either we wait for Microsoft and IE to catch up or we return to the days of building different versions of sites for different browsers. I managed to miss that the first time around and I really don’t want it to happen again, especially now that we have 5 widely used browsers, not 2. And it’s not just IE that’s behind on this. Most of the CSS3 examples I’ve seen out there only work in Safari and Chrome, Firefox can run some but not the ones that rely heavily on Javascript. And I don’t want anything to rely on Javascript, but that’s an entire other post.
Amazingly, Adobe’s Photoshop has been around for 20 years! Adobe TV has put a video of John Knoll, Thomas Knoll, Russell Brown, and Steve Guttman, the guys who created Photoshop, talking about what was going on when they came up with the program. I’m a huge history buff and I love technology so anytime I get to see a video like this, I’m thrilled.
A couple of highlights of the video is the early 90’s news clip and the guy who says Photoshop will ruin photography and eventually the world. And at the end when the guys make fun of CSI and the “enhance” technique.
Last night, Lee Brimelow put up a video on his blog showing Flash Player 10.1 and Adobe AIR running on the Motorola Droid.
This, plus the fact that Windows Mobile also runs Flash, is a huge deal for Flash developers. I think this move, with Flash CS5 making it easier to develop for mobile won’t be separating everything into Flash vs. HTML5 but perhaps, Apple users plus everyone else. I own an iPhone and I love it but I would really like to be able to make my own apps and games for it using the language and platform that I’m the most comfortable with, ActionScript and Flash. Hopefully, this move, plus the improvements that Adobe has made to Flash Player with 10.1, Apple will move closer to running Flash and AIR on their mobile products. Personally, I think the only reason Apple hasn’t yet has nothing to do with performance or battery usage, but because of their App Store. Apple the company is and has been, at least when Steve Jobs has been in charge, the ultimate control freak. It’s been said before and I completely agree with it, if Apple could find a way to control the software you use on your Macbook or iMac, they would. I could see Apple’s goal being an App Store for your iMac that is the only place that allows you to purchase and install software.
Hopefully it will never come to that. While I don’t think I could ever have an Apple computer as my main system, my wife and I love gaming too much, I could see myself using a Macbook Pro as my work computer. But that won’t happen if I have to let a company say what I can and cannot install on my computer.
The great thing about the Flash community is all the sharing. You can pretty much find the solution to any problem or question you have. There’s tons of blogs and forums out there that are full of information on Flash and ActionScript. And you can learn a lot from these resources, but, for me, I’ve found it easier and sometimes a lot more convenient to have a book or two you have look through. Since Flash was a class I took at school, I actually started learning about it from a book before I ever realized there was all this information out on the web and I think that the best way to get into Flash and ActionScript is to start with a book and then use online resources once you get a basic understanding.
Learning ActionScript 3.0 is a great book for someone just getting started with AS, someone migrating from AS2 to AS3 and even for an experienced Flash designer. It has an easy reading style moves you along at a quick pace. There’s also a great companion website at learningactionscript3.com. I can’t recommend this for an experienced developer because it covers just the basics of ActionScript 3 but it wouldn’t be a bad book to use as a refresher. While it’s a great book to for an introduction to AS3 and Flash, this book isn’t set up to be used as a reference text, it’s really just what it says it is, an introduction to ActionScript. I wish that this book had been out when I was in school, it would have been perfect for my switch to AS3.
As the title says, this is pretty much the essential book for any serious ActionScript developer. This book has 946 pages and, from what I can tell, covers every aspect of ActionScript 3. While a beginner could be in over their head, an experienced programmer will find this book to be a great introduction ActionScript 3. Colin Moock has a huge rep in the Flash community and is a great teacher. This book, along with the companion Lost ActionScript Weekend dvds, is a must have for any serious developer or designer the wants to take Flash to the next level.
This book is a little different than the other 2 on the list, it’s not really a step by step how to of using Flash and ActionScript. A bit newer than the other books, this one includes info on how to use Flash CS4 and migration from AS2 to AS3. About half the book is a How-To section, including topics like How Do I Work With Events and How Do I Work With XML. This shouldn’t be your first book when trying to learning AS3 but beside the other two it works really well, especially if you need to learn how to do something that you haven’t done before.
There’s a bunch of books out there, but these 3 are the ones that I’ve found helped me the most.
On to the final step in making our shooter! You can go back and check Step 1, Step 2, Step 3 and Step 4 if you missed something. In this step, we’re going to add a score and set up our rocket so it can be hit by the enemy ships. This one’s going to be pretty simple, the point of this whole tutorial was to show the basics of building a game in AS3. If you want to take it farther, it won’t be that difficult and will be a great learning experience.
The first thing we are going to do is use the Text Tool (T) to add a dynamic text block to the stage. I put mine in the bottom left, but you can put it anywhere. Make sure that it’s set to dynamic text, not static or input and give it an instance name of scoreTxt. Because it’s dynamic we can change the contents with ActionScript and it’s only going to take a few lines of code to do this. First, we need to add this to the bottom of the other variables:
1 2
//Sets the variable score as an integer var score:int = 0;
Next, in the rocketMovement function, right before the closing bracket, add:
1
scoreTxt.text = "Score: "+ score;
This sets the text inside our scoreTxt textfield with the text() method. We’re telling it to display the word Score plus our variable score, whose value we will assign next in our Enemy class. The reason at we are putting this line of code in the rocketMovement function is because we are listening for any changes to score every frame. We could create a new function just to update the score, but since rocketMovement is doing what we want anyway, we can just add it in there.
Now in the Enemy.as file we just have to had one little line of code. Put this in the moveEnemy function:
1
_root.score += 5;
Now, when the enemy ship is destroyed, the game will add 5 to the score.
The easiest way I’ve found to end the game is to use a Boolean. In the main code, I created a variable called dead, typed it to Boolean and set it to false:
//tests to see if the enemy ship has hit the rocket movieclip if(this.hitTestObject(_root.rocket)) { //if it has, dead is set to true
_root.dead = true; } //check to see if dead equals true if(_root.dead == true) { //remove listener and the ship from the stage removeEventListener(Event.ENTER_FRAME, moveEnemy);
_root.removeChild(this); //add the game over text to the stage var gameOver:GameOver = new GameOver();
_root.addChild(gameOver);
gameOver.x = 125;
gameOver.y = 100; //move the rocket off the stage
_root.rocket.x = -100;
_root.rocket.y = -100; }
I’ve created a moveclip that says Game Over, I named it gameOver and checked the Export for ActionScript box. When an enemy ship hits our rocket, the game will remove all the ships from the stage, move our rocket off of it and add the Game Over movieclip. The reason we are moving the rocket movieclip off the stage instead of removing it is because we put it on the stage in our .fla, if we had added it with addChild() we could remove it easier, but it’s not that big of a deal.
That’s it! Now you should have the basics of a shooter game that you can build on, adding lives and more than one kind of enemy shouldn’t be too hard. I hoped this helped and now I have to figure out what to build next.
