May 9, 2012
Posted on May 9, 2012 in Hints and Tips | 10 comments
In this Premium tutorial, you’ll learn to use a physics engine to power a Bloons-style Flash game, in which a squirrel throws acorns at a grid of balloons to try to pop as many as possible.
Premium Preview
Let’s take a look at the result we will be working towards:
One of the most popular Flash games ever is Bloons, in which you play a monkey throwing darts to pop balloons. It’s spawned numerous sequels, even branching out into other genres like tower defense. This tutorial will show you how to create your own balloon popping game, using the QuickBox2D engine.
Read the Full Tutorial
Premium members can access the full tutorial right away!
If you’re not yet a Premium member, you can still read the first few steps for free.
Tuts+ Premium Membership
We run a Premium membership system which periodically gives members access to extra tutorials, like this one, from across the whole Tuts+ network. If you’re a Premium member, you can log in and read the tutorial. If you’re not a member, you can of course join today!
Also, don’t forget to follow @envatoactive on twitter, circle us on Google+, like us on Facebook, and grab the Activetuts+ RSS Feed to stay up to date with the latest tutorials and articles.
View full post on Activetuts+
May 9, 2012
Posted on May 9, 2012 in Hints and Tips | 10 comments
In this Premium tutorial, you’ll learn to use a physics engine to power a Bloons-style Flash game, in which a squirrel throws acorns at a grid of balloons to try to pop as many as possible.
Premium Preview
Let’s take a look at the result we will be working towards:
One of the most popular Flash games ever is Bloons, in which you play a monkey throwing darts to pop balloons. It’s spawned numerous sequels, even branching out into other genres like tower defense. This tutorial will show you how to create your own balloon popping game, using the QuickBox2D engine.
Read the Full Tutorial
Premium members can access the full tutorial right away!
If you’re not yet a Premium member, you can still read the first few steps for free.
Tuts+ Premium Membership
We run a Premium membership system which periodically gives members access to extra tutorials, like this one, from across the whole Tuts+ network. If you’re a Premium member, you can log in and read the tutorial. If you’re not a member, you can of course join today!
Also, don’t forget to follow @envatoactive on twitter, circle us on Google+, like us on Facebook, and grab the Activetuts+ RSS Feed to stay up to date with the latest tutorials and articles.
View full post on Activetuts+
Apr 15, 2012
Posted on Apr 15, 2012 in Hints and Tips | 10 comments
In this Premium Flash tutorial, you’ll learn how to create a simple wordsearch with a neat “highlighter” interface, which is easy to modify with your own words and layout. It’s a neat diversion you could add to any website, or something you could extend to make into a full game.
Premium Preview
Let’s take a look at the result we will be working towards:
In this tutorial we’ll use a series of ActionScript classes to create a classic Alphabet Soup wordsearch game. The objective of the game is to highlight letters to form a word. You will be able to create your own alphabet soup and include your own words.
Read the Full Tutorial
Premium members can access the full tutorial right away!
If you’re not yet a Premium member, you can still read the first few steps for free.
Tuts+ Premium Membership
We run a Premium membership system which periodically gives members access to extra tutorials, like this one, from across the whole Tuts+ network. If you’re a Premium member, you can log in and read the tutorial. If you’re not a member, you can of course join today!
Also, don’t forget to follow @envatoactive on twitter, circle us on Google+, like us on Facebook, and grab the Activetuts+ RSS Feed to stay up to date with the latest tutorials and articles.
View full post on Activetuts+
Mar 28, 2012
Posted on Mar 28, 2012 in Hints and Tips | 10 comments
This week, we’ve got a two-part Premium tutorial, detailing how to create an HTML5 Hangman game using the HTML5 canvas. You’ll learn how to draw directly to the canvas (both simple shapes and animations using a stylesheet), how to play audio in a way that works on all modern browsers, how to use Local Storage to keep scores that persist even when the browser is closed, and how to implement both keyboard and mouse controls.
Premium Preview
Let’s take a look at the final result we will be working towards:
Click to play the demo.
It’s easy to change any aspect of the game. Want to draw the hangman differently? You can tweak the drawing functions, or copy individual body parts from a separate image sprite sheet. Want different music or animation? No problem, just replace the files. Want to give the player more (or fewer) chances per word, to alter the difficulty? That’s easy too. And of course you can change the list of words.
Every concept and each line of code is explained, so you’re not just learning how to create a Hangman game – you’re learning how to code in JavaScript with the HTML5 APIs.
Read the Full Tutorial
Premium members can access the full two-part tutorial right away!
- The Basic Gameplay
- Bells and Whistles
If you’re not yet a Premium member, you can still read the first few steps of each part, using the links above.
Tuts+ Premium Membership
We run a Premium membership system which periodically gives members access to extra tutorials, like this one, from across the whole Tuts+ network. If you’re a Premium member, you can log in and read the tutorial. If you’re not a member, you can of course join today!
Also, don’t forget to follow @envatoactive on twitter, circle us on Google+, like us on Facebook, and grab the Activetuts+ RSS Feed to stay up to date with the latest tutorials and articles.
View full post on Activetuts+
Mar 28, 2012
Posted on Mar 28, 2012 in Hints and Tips | 10 comments
In this Quick Tip, we’ll create a static, re-usable ActionScript class that will produce a Typewriter effect with a single line. Read on!
Step 1: Brief Overview
We’ll split a user defined string into an array, and then add the resulting letters to a TextField one by one using the Timer class.
Step 2: Typewriter Class
Our class will be static, which means it doesn’t need to be instantiated using the new keyword. To access a static class member, use the name of the class instead of the name of an instance.
Create a new ActionScript file and write the following code:
package
{
import flash.text.TextField;
import flash.utils.Timer;
import flash.events.TimerEvent;
public final class Typewriter
{
/* Declare the variables and methods as static */
private static var chars:Array; //the characters in the string
private static var tf:TextField; //textfield to which the string will be written
private static var timer:Timer; //pauses between writing each character
private static var i:int = 0; //variable used to count the written characters
public static function write(txt:String, txtField:TextField, time:Number):void
{
chars = txt.split(""); //split the string into an array of characters
tf = txtField; //assign tf to the text field passed to the function
timer = new Timer(time); //set time according to parameter
timer.addEventListener(TimerEvent.TIMER, writeChar);
timer.start(); //start writing function
}
private static function writeChar(e:TimerEvent):void
{
if (i < chars.length)
{
tf.appendText(chars[i]); //writes a char every time the function is called
i++; //next char
}
if (i >= chars.length) //check whether string is complete
{
timer.stop();
timer.removeEventListener(TimerEvent.TIMER, writeChar); //clear timer
timer = null;
}
}
}
}
Step 3: Usage
The usage couldn’t be easier – just add the Typewriter.as class to your project folder and use the following code:
import Typewriter;
Typewriter.write('Text to Write', targetTextfield, 50);
That’s it, test your movie and you’ll see your TextField using the Typewriter effect.
Step 4: Example
I used the class in on this example swf so you can see the effect:
Conclusion
Use this class to create your own effects!
Thank you for reading. If you’d like a more advanced version of this effect for use in your projects, take a look at Rasmus Wriedt Larsen’s Letter By Letter Animation.
View full post on Activetuts+
