This year, hundreds of thousands of people will hear the words “You have cancer,” and there’s a good chance that some of them will be people we know and love. Most of us have been touched by cancer in some way… and we all have the power to make a difference. That’s why I have chosen to fight back right here in my own community by participating in the American Cancer Society Relay For Life®.

My girlfriend Maria is an employee at the Wilton, CT branch of the American Cancer Society, and has been actively involved in Relay for Life (and other cancer awareness programs) for over 5 years. Last summer her and I volunteered at several local relays, and were participants in another by forming a team of family and friends. It’s a night full of fun, hope, and remembrance. It’s a great event and one that should be experienced by any one who has been touched by this horrible disease.

Relay For Life is the American Cancer Society’s signature activity. It offers everyone in a community an opportunity to participate in the fight against cancer. Teams of people camp out at a local high school, park, or fairground and take turns walking or running around a track or path. Each team is asked to have a representative on the track at all times during the event. Relays are an overnight event, up to 24 hours in length.

The American Cancer Society sponsors Relay events across the country and chances are there is an event in your own town or nearby community. I encourage everyone to Find Your Nearest Event and get involved. While donations are always appreciated, these are free events, so even if you just choose to go and walk a few laps to show your support, Relay for Life is a wonderful event.

If you would like more information or help with forming your own team, please contact Maria DeCarlo at maria.decarlo@cancer.org or visit her Team Page for the Monroe, CT relay. Maria will be happy to help you find your closest relay and get you started as a team captain.

From Maria:

I Relay because cancer has touched too many people in my life… so I decided to do something about it. I formed a team (for the Monroe, CT Relay) last year, just to get family and friends to come and see what it was all about. To my surprise, we raised close to $2,000.00, and had the best time doing it. So, we’re back for a second season. If you’d like to check out my team page, make a donation or get involved, click here or email maria.decarlo@cancer.org

Thanks for reading, and I encourage everyone to get involved in your local Relay For Life event!

Some of the ones that I’ve used include:

kuler Create is a nice tool to from Adobe that helps create color themes. You can select your own colors and see what are complimentary colors, or you can create custom themes (and browse user submitted custom themes) to see how colors look when used together. Neat little tool.

FontStruct is a neat little tool by font retailer FontShop for creating, editing and sharing fonts. While the tool is very user intuitive and pretty powerful for a free access application, creating a full font family is still a long, tedious job. But, if you have a nice font style in mind that you want to create, a great tool to allow you to do it.

Dummy Text Generator is an extremely useful tool (especially when doing print mockups or proof of concepts) that creates dummy text (i.e. “lorem ipsum plorem”) for placement in mockups. It allows you to select a number of words or characters as well as the number of paragraphs to create a simple block of copy. Great for comping jobs when you don’t have final writing. It also allows you to go back to a writer with information about how much copy is needed for a job.

I’ll have to explore some of the other listed resources when I have more time, but I’ve found some great stuff from on SixRevisions.com, so I trust that this is another great list.

Lot’s of great info here for all levels of CSS. I’ll be honest, I haven’t read all of these, I’m putting some faith in the guys at toxel that this list is legit, but I do visit a lot of the sources sited here (Smashing Magazine, Noupe, NetTuts among others) and have always found some great information.

Hope you all find this info helpful!

Some of them on the list I use as my first stop when trying to get logo ideas (LogoPond, LogoSauce, LogoLounge) and others I’ve come across before, but not overly familiar with (LogoLog, SpoonFed, SpeckyBoy) but most are new to me, so definitely a lot of stuff here to check out.

A really great thing about these logo galleries is that they contain user submitted logos that are sometimes still in the design process, which other designers comment give feedback on. It’s a great way to get objective opinions from other professionals on logos you are working on to know if you are heading in the right direction. Even if you don’t submit your own logos, reading the comments on others can really teach you how to look at ALL logos.

Of course, not everyone gets through these tutorials without problems. I understand, it’s expected. I don’t fell that my tutorials are bad because some people have problems, and I don’t think people who have difficulties with the tutorial don’t know what they are doing. People learn differently and comprehend things differently, so not everyone gets through these tutorials without a hitch.

I get plenty of questions and comments when people are having problems with any of my Flash tutorials. And I absolutely welcome all questions and comments (good or bad). I try very hard to help users and answer any questions they may have. I’ve had several back and forth emails with different readers who have had questions, and hopefully have helped them solve the problems. Unfortunately, I’m not always able to answer questions for several reasons… sometimes I just don’t have the time, sometimes the reader didn’t provide enough info, sometimes the question is well beyond the scope of the tutorial… but no matter whether I can answer the question or not, I appreciate people asking. It let’s me know that people are reading them, which is very gratifying.

Recently, a reader was trying to apply one of my tutorials to a real world project, and was struggling to get it to do exactly what she needed. We’ve been communicating through email for several weeks now, and while we haven’t quite gotten to the desired result just yet, I think we will. As appreciation for my help, she has made a monetary donation to the site. While it wasn’t expected, and no dollar value was asked of her, it was very appreciated. She simply gave an amount that she thought was right, and I happily accepted. So, for that I would like to publicly say “thank you K (aka Lou in the comment string).”

Her donation will help keep this site running so that more tutorials can be written and hopefully help others learn Flash. I know it’s been a while since I’ve written a new Flash tutorial, but the readers have actually given me several new ideas, I just need to find the time to write them. Keep those questions and comments coming, and I’ll try my best to keep writing new tutorials.

-Mike

The goal of gotoAndLearnFlash is to have users find the Flash tutorials they want, and write their own reviews to let future readers of this site know whether the tutorial was really helpful or not. While my goal here is to find the best free online Flash tutorials the net has to offer, I simply don’t have the time to review each and every tutorial I come across. That is why I encourage users to check out the tutorials, come back and rate or review them for future readers.

Currently, there are only a few tutorials listed, but I try to add more and more when I can. The biggest hurdle is I really would like to review any tutorials that I post, but I simply don’t have the time. So, I’ve been posting some Flash tutorials without an editorial review in hopes that users will add their own reviews in the comments section. Better than a rating system, I believe a user review will help gauge whether the tutorial is really worth checking out. If you enjoy my tutorials, check out www.gotoandlearn.com to find more Flash tutorials from other authors that I found helpful.

If you haven’t visited psdtuts.com (and it’s sister site nettuts.com) I recommend you check it out. They always have some great, high-quality tutorials on Photoshop (while nettuts.com is focused on Web development tutorials).

In the past, web designers faced challenges if they chose to develop a site in Flash because the content they included was not indexable by search engines. They needed to make extra effort to ensure that their content was also presented in another way that search engines could find.

Thanks in part to Adobe’s new Searchable SWF library, Google has come up with new algorithms that better search and index Flash (.swf) files.

Basically, Google can now index any textual content in a Flash file (I was under the impression that it could always do that…). I would imagine this would be text blocks that haven’t been broken apart, which some designers do to apply animation effects. In other words, say you wanted a headline that came in one letter at a time (like a typewriter)…. each letter would be a seperate element, thus put together, it reads as a word, but Google would see it as the individual letters.

In addition to text blocks, Google can now track links to other pages. While things like anchor text and title tags cannot be attributed to these links, the fact that Google can now at least REACH these pages through Flash is huge!

Google still cannot index any image elements, or really anything other than text and urls, but this is still a really big step in getting Flash sites indexed (or even having Flash elements on a page support the page content).

Read the Google Webmasters Q and A about Flash indexing.

Level: This is a beginner lesson, but I will assume that the reader is familiar with the basic use of the Flash software including stage, timeline, drawing tools, property window, etc.

Version: I will be using Flash CS3 and AS2 (athough tut is compatible with earlier versions of Flash) and instructions are for the Mac. Windows users would use the PC counterparts for specific instructions on Flash Menu/Shortcut instuctions.

Description: The fifth part of a Flash tutorial on making a Flash game similar to the old BreakOut game for Atari. In previous parts, we created the movement for the paddle and the ball, set up the bricks and the script for collisions, added scores to our Flash game, and in our last tutorial, we set it up to go to a “You Win” screen. In this tutorial, we will set up a players “lives”, as well as what will happen when the player runs out of lives.

Demo:

(Refresh page if you don’t see the ball animation)

Let’s get started!

Let’s open up our Flash files from Part 4 of this game tutorial. While it’s not necessary, you may want to do a “Save As” and give your document a new name (”breakthru_game5.fla”). The reason you may want to do this is it might make it easier to review each part of the Flash tutorial later.

In our last tutorial, we set our Flash game to go to a new frame when the player “wins” the game (or clears the board). Now, we want our Flash movie to change if the player “loses” the game. By “losing” the game, we simply mean the player has run out of “lives” (or balls). So, the first thing we need to do is set up some new text boxes to display our players lives. This is done similarly to how we set up the score text in Part 3 of this Flash tutorial series. In fact, to get started, we are going to do a copy/paste of the text we set up.

—- ads by google —-

Click on frame 1 of our main timeline (Scene 1), and be sure your “score text” label is not locked. On the stage, select both the static text box (where it says “Score”) and the dynamic text box (the box with the dotted line around it) (Fig. 1). Tip: It may be easier to select these if you lock all the other layers except your “score text” layer.

Choose “Edit > Copy” (command-C) to add these items to the clipboard. Add a new layer above your “score text” layer and name your new layer “Player lives”. Click on frame 1 of your new layer and choose “Edit > Paste” (command-V) to paste a copy of your text boxed to the stage. Position these boxes at the bottom right corner of the stage, aligned with your score text boxes. Double click on the “Score” text on the right side of the stage, and type the word “Lives”. Now, click on the dynamic text box next to the “Lives” text and in the Properties Panel (”Window > Properties > Properties” or command-F3) change the “var” text field to say “lives” (Fig 2). Last step is to click on frame 2 of our “Player Lives” layer, and right-click (option-click) and choose “Remove Frames” from the menu flyout.

We now have our Player Lives text boxes ready, so now we have to add the code that will dynamically change when our paddle (player) misses the ball (player life). On our main timeline, click on frame 1 of the “actions” layer, open the Actions Panel (Windows > Actions or alt-F9) and add the following code below the existing code:

var lives = 5;

This, as you probably could guess, sets our dynamic text box with the var name of “lives” to display he number 5, where 5 is the number of chances the player has to drop the ball before losing the game.

Now that we assigned a number of player lives, we need to add some script that tells Flash to take away a life when the player misses the ball. On our stage, select the white circle (ball). You’ll remember in Part 1 of our Flash game tutorial we set added some script that reset our ball if the player missed the ball. In that same section of code (the if statement towards the bottom), we need to add some additional code to tell Flash to deduct a number from our “Lives” text box. Add the bold, blue code below to your existing code (green code should have been added in part 1):

if (this._y > 300) {
_root.lives -= 1;
if (_root.lives == 0) {
_root.play();
}
_x = 150;
_y = 100;

dir = Math.round(Math.random() * 1);
speed = 10;
if (dir == 1) {
var Ang = 45;
} else {
var Ang = 135;
}
xspeed = speed * Math.cos((Ang) * Math.PI / 180);
yspeed = speed * Math.sin((Ang) * Math.PI / 180);
}
}

Explanation of the new code:

if (this._y > 300) {
_root.lives -= 1;

If our ball y coordinate is greater than 300 (goes below the paddle), subtract our “lives” by 1.

if (_root.lives == 0) {
_root.play();
}

If our “lives” is equal to 0 (meaning we have no lives left), then play our main timeline.

Go ahead and test your movie. On start, you should see that you have “5″ lives. Each time you miss a ball, you should see your lives go down by 1 number. If your lives goes all the way to 0, you should see frame 2 of your main timeline come up… but wait, it still says “You Win…”. Well, we don’t want it to say that unless we clear the board, so we need to make it say something other than that if we lose, right? Well, luckily Flash makes it pretty easy to do that.

—- ads by google —-

Click on frame 2 of the “You Win” layer in your Flash file. Select the “Congratulations…” text box, and in the properties panel, change the drop down to “Dynamic Text” and in the “Var” text field give it the name “gameOver”. You’ll notice that when you change the text box to “Dynamic Text”, the actual text in your box did not change. That’s because you can input text to a dynamic text box in Flash and have it display in your movie, but because it’s “dynamic” you can modify it using ActionScript code. So, since if the player wins, we want this text to read “Congratulations…” we will leave this. But, if the Player loses, we need it to say something else. We’ll add that code now.

Click on frame 2 of your “actions” layer, open your Actions Panel and add the following code below the existing code:

if (_root.lives == 0) {
gameOver = “<p align=’center’>Sorry, you lose! <br><br>Your Final Score Is:</p>”;
}

What this says is if our player lives is equal to zero, our dynamic text box should insert the text between the quotation marks. But hold on a minute… what’s with all the extra text here? Well, if your familiar with HTML code, you should recognize this as HTML markup language. That’s right, Flash can render HTML text in a dynamic text field! But, for this to happen, we need to tell our text box to render HTML code.

Click on frame 2 of the “You Win” layer, and select the top dynamic text box. In the Properties Panel, click on the “Render Text as HTML” button (the button with the angle brackets (<>) on it (Fig 3).

That’s it! I must say our game is looking pretty good right now, don’t you agree? We have our basic challenge of bouncing a ball into multiple bricks, we can keep score, and now we only have a certain amount of chances in order to accomplish our goal. Pretty cool. While this game seems pretty complete, there’s so much more we can do to this game, including adding a start screen, adding additional levels and making different skill levels. Study up on these tutorials, and hopefully you can figure out how to do some of these things yourself, but if not, check back soon as I plan to cover all of these steps in future tutorials!

Thanks for reading, and I hope you were able to follow along and create your own Flash game, and I also hope that they have given you a nice little primer for Flash game development. Good luck and don’t forget to check back soon to expand on our Flash Breakout Game!

Source files (Flash 8): Flash Tutorial: Breakthru Flash Game Part 4

Level: This is a beginner lesson, but I will assume that the reader is familiar with the basic use of the Flash software including stage, timeline, drawing tools, property window, etc.

Version: I will be using Flash CS3 and AS2 (athough tut is compatible with earlier versions of Flash) and instructions are for the Mac. Windows users would use the PC counterparts for specific instructions on Flash Menu/Shortcut instuctions.

Description: The fourth part of a Flash tutorial on making a Flash game similar to the old BreakOut game for Atari. In the first part of our game tutorial, we created the movement for the paddle and the ball. In the second part of the Flash tutorial, we set up the bricks and applied the script for the collisions of the ball with the bricks. In the third part of our Flash game tutorial, we added scores to our flash game. Now, for the fourth part of our Flash game, we will have the game advance to a new screen when we “win” the game.

Demo:

Let’s get started!

Let’s open up our Flash files from Part 3 of this game tutorial. While it’s not necessary, you may want to do a “Save As” and give your document a new name (”breakthru_game4.fla”). The reason you may want to do this is it might make it easier to review each part of the Flash tutorial later.

In our last tutorial, we added a score using dynamic text to our Flash game. What we want to do now is have the game advance to a new screen when the player “wins” the game, or clears the board of the bricks. To do this, we will be advancing the game based on the players score. The first step in order to do this is to add the next “You Win” state (or screen) to our Flash file.

—- ads by google —-

On our movies main timeline (Scene 1), add a new layer called “You Win”, and move the layer under the “actions” layer. Click on frame 1 of our new layer, and add a blank keyframe (”Insert > Timeline > Blank Keyframe” or F6). Because we don’t want the other layers to be visible on frame 2 of our movie, select the 2 keyframe of all the layers below our “You Win” layer, and control-click (right-click) and select “Remove Frames” from the flyout menu.

Click on frame 2 of your “You Win” layer, select the Text Tool (T), set it to “Static Text” in your Properties Panel (”Window > Properties > Properties” or command-F3) and click on the stage and type something like

“Congratulations! You Win!” <return>
“Your Final Score Is:”

You should now have something similar to Fig. 1.

Select the Text Tool (T) again, and draw another text box below this text. In the Properties Panel, set the dropdown to “Dynamic Text”, in the “var” field give it a name of “scoreFinal” and select the “center align” paragraph setting (Fig 2).

Remember that in our previous tutorial, we added a stop(); action to frame 1 of our “actions” layer in our main timeline. So, if we were to test our movie now, we would still only be able to play our game and we would never see the “You Win” frame. So, what we need to do now is add some script that tells our Flash movie to advance to the next frame IF our score equals the “winning score”.

Open the Library window (”Window > Library” or command-L). Double click on your “mc_Brick” symbol in the library to bring up symbol editing mode. Click on frame 2 of the actions layer, open the Actions Panel (”Window > Actions” or alt-F9) and add the following code under the existing code:

if (_root.score == 160) {
_root.play();
}

What this is saying is if the dynamic text box on the main timeline with the var name “score” (which we set up in our previous tutorial) is equal to 160, than play our main timeline. We use 160 because there are 16 bricks worth 10 points each: 16 x 10 = 160. So, in order for our score to equal 160, all the bricks must be hit by our ball. Once that is done, we advance to the next frame of our main timeline (_root), if our score is less than 160, we remain on frame 1 of our main timeline (because of the stop(); action we already applied).

—- ads by google —-

Return to Scene 1 of your movie. Click on frame 2 of our “actions” layer and add a blank keyframe. With frame 2 still selected, open the actions panel and add the following code:

stop();

scoreFinal = score;

What this code does is stops our movie on frame 2 and sets our dynamic text box with a var name of “scoreFinal” (which we set earlier in this tutorial) to be the same as whatever the text is in our text box with the variable name of “score”. Of course you could simply say “scoreFinal = 160“, since we know that the score is 160 if they hit this frame, but I’m going to set it dynamically in order to give you a teaser for the next part of this series which is what happens if a player loses. After all, what fun is a game that you ALWAYS win??

For now, go ahead and test your movie. The game should play just like it did at the end of the last tutorial, but now when you have all the bricks cleared, you should see the “Congratulations…” text. Obviously, this “You Win” page isn’t the most exciting thing in the world, so I would hope that you might play around and stylize this on your own.

I hope you enjoyed this tutorial, and hopefully you’ll come back soon for the next part of the game tutorial. Thanks for reading, and if you have trouble, the commented source file is available below to help you along.

Continue to Part 5 >>

Source Files (Flash 8): Flash Tutorial: Breakthru Flash Game Part 4