Flash Lessons .:.
Over the years I have had the great pleasure of teaching students how to create projects using Adobe Flash. Working with Flash is thrilling as well as challenging. I have been to many, many sites, such as www.actionscript.org
and many more, seeking help to become a better Flash user. Teaching myself for years, and now starting to teach others, has been a bit of a mountain to climb. Having been at it about 10 years, I have finally discovered a way to teach my students much more effectively, using another Adobe program called Captivate.
Here, is my humble library.
:: In this lesson you will create a ball to move across the screen.
:: In this lesson, you will create boundaries to make the ball bounce off of them and stay on the screen.
:: In this lesson you will create a paddle that will replace the bottom boundary of the screen. You will also be able to control the paddle with you mouse movements.
:: In this lesson we take care of a little glitch in the code to make things work better.
:: We introduce a single block and work on getting the ball to bounce off of it's sides correctly.
:: Here we make the block dissapear once hit by the ball.
:: Here we figure out a way to arrange the blocks in a neat and orderly fashion.
:: In this lesson we clean up our work before we move on.
:: We add some basic control to the way the ball bounces off the paddle.
PADDLE CONTROL EDGES
:: Here we advance our control of the paddle and ball interaction.
:: Add a play button to our game.
:: Create more levels to our game.
:: Create a way to count and keep track of how many blocks are on the stage.
:: Make the ball start at a certain point at the beginning of a level.
PRIZE BLOCK GREEN
:: The beginning of creating blocks that hold prizes. This one makes the paddle wider.
PRIZE BLOCK RED
:: A prize to make the paddle more narrow.
PRIZE BLOCK YELLOW THROUGH
:: A prize that allows the ball to pass through blocks without bouncing.
:: A lesson on making everything look more stylish.
PRIZE BLOCK PURPLE HOLD
:: A prize that allows the user to hold the ball by holding down a key.
:: Here is a lesson on how to make the most basic animation imaginable. The methods used here are intentionally simplistic and, therefore, not particularly effective. The purpose of this lesson is mainly to give the learner a chance to do some simple manipulation of the tools and the timeline. (Contains Audio : fileSize = 7.5MB)
:: Here is a lesson that will show you one of the most basic ways to create motion in Flash. This is a great technique to use if you just want an object to move from one place to another without having to draw all the intermediate steps. Set point A and point B and Flash will do the rest.
:: Here is a lesson on how to get Flash to morph a graphic from one shape to another. Just as with a motion tween, you set point A and point B and Flash does the rest, only this time the two points are more like "shape A" and "shape B".
:: In this lesson, you find out how to make a mask. A mask is where you set the graphic or shape on one layer to act as if it were a window to see the layers below it through. Just think of the kind of mask you put on your face, where the eye holes are like the windows you see through. Same concept.
:: In this lesson we go over how to create a button and some of the basic features involved with using one.
DUPLICATE MOVIE CLIP
:: In this lesson we create a copy of one of the symbols in our library as a way to show you how you can copy and then modify an existing symbol to create a new on and save yourself time.
:: In this lesson we create a motion guide which allows you to use an invisible line on one of the layers to dictate the path an object moves along during a motion tween.
:: In this lesson I show you how to take a bitmap (regular picture) and turn it into a vector image. This is a must-see for any Flash user.
:: In this lesson we go over some basic ways to create an animation. The methods here aren't very complicated and not very efficient either. But, beginners will learn some simple ideas in this tutorial. The real purpose of this lesson is to actually show what kinds of problems arise when an animation is created in such a way. In a later lesson, called "smartAnimation" these shortcomings will revealed when I show you a way to make editing your animation much, much easier.
:: In this lesson we create symbols inside of symbols and show you the power and usefulness of doing such things. Be careful to understand what is happening here. This technique can be very powerful, if used right, and is almost necessary to master. But, this concept can be a very big headache if you don't come to grips with how it's accomplished.
:: In this lesson we will work with buttons and explore how they can be used to control the timelines of symbols. This lesson will give you some insight into a concept called "pathing". Very important!
PAINT THE CAR
:: In this lesson we use buttons to control the timelines of different symbols and allow the viewer to select different colors from the choices we setup for them.
:: In this lesson we put some simple code into the timeline such that when the submovie timeline finishes, it triggers the parent timeline to move to the next frame.
:: In this lesson we use some of the same concepts to setup some of the features you would need if you were to create a virtual gas station.
:: In this lesson you will learn the simple, but very important and useful code for selecting a random number.
:: In this lesson we explore some of the important properties you can manipulate, such as x position, y position, transparency, xScale, yScale, rotation, width, height, etc.
:: In this lesson I will show you how you can use trace(); to get the computer to give you some of the answers you will sometimes so desperately need.
:: Here we are revisiting the animation idea. Only this time I will show you (now that you've been exposed to some basic actionscript code) a much better way of controlling animation.
CONTROL + C & CONTROL + ALT + S & CONTROL +SHIFT +V
:: Here's a lesson with a funny name! This is one of my favorite key combinations. It's a series of 3 different keyboard shortcuts that I find myself using almost every time I work in Flash (well, maybe not EVERY, but enough for me to go through the trouble of showing you). You 'll want to get good at this one!
:: In this lesson I will show you how to use a for loop to do all kinds of work for you. Anytime you have a symbol you want to create a multitude of copies of and you don't want to have to do it all by hand, forLoop is your hero! Don't let the look of the code intimidate you. Just memorize it, get familiar with what each part does, and move on. You'll be using it in all kinds of ways!
:: Obviously, I must feel that you can't get enough of this trace(); trick. And, rightfully so! It's something I use and most all Flash developers use to get info out of the computer. It is said to be useful in "debugging" your code. What that means, is when something is not working right, and you can figure out what it is, trace can be your best friend. Sometimes, using it can let you know exactly what part of your code is working right and what part is not. You really need to use this one!
THREE FRAMES ARCHITECTURE
:: In this lesson I show you how to setup the keyframes inside a symbol to create a loop in the timeline. What this does is make it possible to store some of your code in a place (frame1) where it can be called on whenever you need it, while there is also a place (frame2) where your code is being processed constantly. Learning to build timelines in this manner is what has made the greatest difference in my ability to create simple games. I learned this trick by doing the tutorials at www.bit-101.com
and I owe the creator of that site my gratitude.
INTRO TO ARRAYS
:: In this lesson you will learn how to create an array and use "push" to push information into it.
:: In this lesson you will learn how to use "pop" to take out the last element in an array.
:: Learn how to use "shift" to remove the first element in an array.
:: Use "unshift" to insert an element into the first position of an array.
:: Learn to use "splice" to delete any element or multiple elements in an array. You can also use this method to insert new elements into any desired position within the array.
Array Application Part1
:: In this lesson we create an associative array, like a backpack to hold items.
Array Application Part2
:: In this lesson we create a pay button to populate one of the pockets in our backpack with money.
Array Application Part3
:: In this lesson we create a way to buy a ham sandwich. It takes money out of our money pocket and puts the sandwich in our lunch pocket.
Array Application Part4
:: In this lesson we create a way to trade our ham sandwich for a ice cream and some money. We program it so it checks for the correct amount of money. If there's enough money, and a ham sandwich in our backpack, the trade will take place. We will end up with our ham sandwich removed from our array, ice cream in the dessert pocket of our backpack (array) less some money.
BUILDING A GAME
:: Here are my instructions for meeting the timed quiz for arrowKeys.
:: Here are my instructions and tips for meeting the timed quiz for arrowKeys.
:: Here are my tips for meeting the criteria for making a healthBar in the required time limit.
:: Here are my tips for meeting the criteria for making a healthPack in the required time limit.
:: Here are my tips for meeting the criteria for making a extraMan in the required time limit.
:: In this lesson, we make it so player1 can't go through the walls.
:: In this lesson we rearrange the walls to form a room.
:: In this lesson I show you one way to add more rooms to your project.
:: Here is a tip that will make drawing the walls much easier and keep them consistent from room to room.
:: In this lesson I explain the procedure I have found works best and fastest to build consecutive rooms as required for this project.
:: In this lesson we use the idea of calling each room a unique column as it would be in a grid: rows x columns, to help keep track of what frame in the timeline the program needs to go to as we move from room to room.
:: In this lesson we simply build a few rooms in a new row right off the one we've already built so we can test our ability to move out of the original row of ten rooms (columns).
:: In this lesson we actually write the code that will allow us to move from one row to another while keeping track of what room/column we are in so that it all makes sense according to the map we're trying to build and use.
:: In this lesson we will simply move a stickMan figure across the screen.
:: In this lesson we discover the value of using different layers to put our objects behind or in front of each other.
:: In this lesson we expand on the use of layers.
:: In this lesson we use onionSkin to give ourselves better control of the animation process to make more realistic movements from frame to frame.
:: In this lesson we create a rain drop and get it to fall from the top of the stage to the bottom using some code in 3 frames.
:: In this lesson we add some code to make the raindrop fall again and again from random locations and speeds.
:: In this lesson we make the rain splash when it reaches the bottom of the stage.
:: In this lesson we add some uneven ground and use a shapeflag style hitTest to get the rain to splash at any moment it hits it.
ASTEROID FIELD GAME
ASTEROID1 :: asteroidImage
:: In this lesson we take a bitmap image of an asteroid and use trace bitmap along with a mask to hide everything except for the asteroid part. To make this easier on yourself, I recommend you download each of the three images here: 1stAsteroid
. I might also add that by using these bitmap images, you actually run the risk of lagging the computers of the people who will be playing your game. So, it might actually be smarter for you to just draw your own asteroids, although it probably won't look as cool.
ASTEROID2 :: asteroidMovement
:: In this lesson we use some code to make the asteroid move.
ASTEROID3 :: moreAsteroids
:: In this lesson we use the same sort of technique to create more asteroids. Emphasis is put on using the work we've already done to make creating the new asteroids easier than building them from scratch.
ASTEROID4 :: background
:: In this lesson we put a background into the game, behind everything else.
ASTEROID5 :: spaceshipImage
:: In this lesson we use the same sort of technique to mask a trace bitmapped image of a spaceship into the game.
ASTEROID6 :: moveShip
:: In this lesson we put some code into the ship to make it respond to our keyboard arrow keys.
ASTEROID7 :: explodeShip
:: In this lesson we put a shape tween inside the ship and then put some code into the asteroids to make the ship explode.
ASTEROID8 :: explodeAsteroid
:: In this lesson we do the same sort of shape tween explosion inside the asteroids.
ASTEROID9 :: shapeFlag
:: In this lesson we change our simple hitTest into a shapeFlag style hitTest to improve the way the ship and asteroids collide.
ASTEROID10 :: hitCenter
:: In this lesson we modify the shapeFlag code a little bit to give the hitTest a little more realism be also counting the center as part of the hitTest, in case the ship passes into the middle of the asteroid in a diagonal move that gets around the other points.
ASTEROID11 :: bullet
:: In this lesson we create a bullet that the ship will use to shoot the asteroids with.
ASTEROID12 :: manyBullets
:: In this lesson we write more code to allow for many bullets.
ASTEROID13 :: limitedBullets
:: In this lesson we add a timer to the bullets to keep too many bullets from shooting out at once.
ASTEROID14 :: destroyAsteroids
:: In this lesson we enable the bullets to destroy the asteroids.
ASTEROID15 :: tougherAsteroids
:: In this lesson we fool with the code a little more to make the asteroids take more than just one bullet to destroy.