Activetuts+

Build an HTML5 MP3 Player With SoundManager 2 – Tuts+ Premium

James Tyner — Sat, 11 Feb 2012 07:00:45 +0000

It’s time for another Premium tutorial! This week, James Tyner will walk you through the process of building an HTML5 MP3 player, step by step, with the SoundManager 2 library, jQuery, and a little help from Flash (for extra audio functionality).

Premium Preview

Click for a demo.

In this tutorial I will show you how to create a JavaScript MP3 Player with jQuery and the SoundManager 2 JavaScript library that uses a hidden SWF file to play the sounds. (I could have used HTML5 Audio, but we would have lost the ID3 functionality, and so would have had to hard-code all of our artists and titles.)

You’ll use jQuery, jQuery UI, and jScroller to manage the UI, with graphics already provided for you, and learn how to use SoundManager 2, a cross-browser JavaScript audio library that even works on iOS (if you are willing to lose the extra features, such as ID3 functionality).

Everything is explained step by step as you build the player. Check out the demo to see the end result.

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 of the tutorial, which are enough to help you code the basic play and stop buttons..

Tuts+ Premium Membership

We run a Premium membership system which periodically gives members access to extra tutorials, like this one! You’ll also get access to Psd Premium, Vector Premium, Audio Premium, Net Premium, Ae Premium, Cg Premium, Photo Premium, and the new Mobile Premium too. If you’re a Premium member, you can log in and download 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.

Circular Motion in AS3: Make One Moving Object Orbit Another

Tyler Seitz — Fri, 10 Feb 2012 06:00:28 +0000

Having one object orbit another is a movement mechanic that’s been used since the early gaming era, and it remains handy to this very day! In this Quick Tip we will explore the mathematical function for orbiting, see how to modify it, and look at practical uses in actual game design.

Final Result Preview

Here’s what we will be working towards:

Step 1: The Orbiting Equation

To create an orbit we must define the following:

Origin – The object or position that the orbit centers on.
Orbiter – The object that orbits the origin.
Angle – The current angle of the orbiter.
Speed – The number of pixels our object orbits per frame.
Radius – The orbiter’s distance from the origin.

It is also helpful to note that Flash’s coordinate system is like a regular cartesian plane, except that the y-axis is flipped, so the value increases as we move downwards. The top-left corner of the stage has coordinates (0,0)

In this image, 0, 90, 180, and 270 refer to angles, measured in degrees.

Another thing that we need to understand is how to convert degrees to radians, which can easily be accomplished using the following formula:

Radians = Degrees * (PI / 180)

Here’s the actual orbiting function: it requires two lines, one to position the orbiter on the x-axis and the other to position it on the y-axis:

Orbiter X-Coord = Origin X-Coord + Radius * cos(Radians)

Orbiter Y-Coord = Origin Y-Coord + Radius * sin(Radians)

(In a normal Cartesian plane, sin is used for the x-coord and cos is used for the y-coord, but since our angles are increasing clockwise – due to the reversed y-axis – their places are swapped.)

Step 2: Writing the Equation in Code

We can now turn the logic into actual code that we can use. First, declare all of the variables:

public var orbiter:Orbiter = new Orbiter(); // The MovieClip That Orbits
public var origin:Origin = new Origin(); // The MovieClip That Is Orbited
public var angle:Number = 0; // The Initial Angle Orbiting Starts From
public var speed:Number = 3; // Number Of Pixels Orbited Per Frame
public var radius:Number = 75; // Orbiting Distance From Origin

Next rewrite the equation for use in AS3 and put it into an ENTER_FRAME event handler function:

var rad:Number = angle * (Math.PI / 180); // Converting Degrees To Radians
orbiter.x = origin.x + radius * Math.cos(rad); // Position The Orbiter Along x-axis
orbiter.y = origin.y + radius * Math.sin(rad); // Position The Orbiter Along y-axis

If you test now, nothing will happen; this is because the variable angle is neither increasing nor decreasing. Therefore, we must increase or decrease the value:

angle += speed; // Object will orbit clockwise
angle -= speed; // Object will orbit counter-clockwise

Now what if we want our orbiter to continuously face a direction? Well I have written an equation to do just that!

orbiter.rotation = (Math.atan2(orbiter.y-origin.y, orbiter.x-origin.x) * 180 / Math.PI);

Depending on which way you have drawn your orbiter movieclip you may have to subtract a certain angle (outside the brackets) to get it to face the correct way.

Step 3: Transforming the Equation

Now this may sound crazy, but some of us might want to have our object orbit in an ellipse. This is easily doable; all we have to do is multiply in a specific place in the equation. Multiplying the cos or sin functions by a postive whole number will cause the circle to stretch. Multiplying it by a decimal between 0 – 1 will cause it to compress. And multiplying it by a negative will cause it to flip along that axis:

(2 * Math.cos(rad)); // Stretch the orbit along the x-axis by a factor of 2
(0.5 * Math.sin(rad)); // Compress the orbit along the y-axis by a factor of 2 (i.e. halve it)
(-3 * Math.cos(rad)); // Flip the orbit along the x-axis and stretch it by a factor of 3

We can also shift the orbit in any direction we want by adding or subtracting from the equation on either axis:

orbiter.x = (origin.x + radius * Math.cos(rad))-50; // Shift the orbit 50 pixels left on the x-axis

If you want to learn more about cos, sin, and atan2, take a look at Trigonometry for Flash Developers.

Step 4: Practical Uses for the Equation

Now this is all fine and dandy, but what can it actually be used for? A wide variety of things actually!

If you have ever played Mario Kart you would have gotten the “three shells” powerup; those shells are orbiting using this very technique. Another example is the widely over-used circle pong game, where the paddle orbits along a ring on the outside. A third example is from top down zombie shooter games: a lot of them include a powerup where a grouping of barrels orbits around your player and crushes any zombies if they are hit trying to attack you.

As you can see the use for this technique can be used in anything from industry standard games to casual games.

Conclusion

Thank you for taking the time to learn this Quick Tip! If you have any questions leave a comment below.

Review: Construct 2, a Drag and Drop HTML5 Game Maker

Daniel Sidhion — Wed, 08 Feb 2012 13:00:29 +0000

Construct 2 is an HTML5 game making tool that doesn’t require any programming knowledge. You just drag and drop items around, add behaviors to them, and make them come alive with “events”.

In this review I will see what Construct 2 is capable of, from my perspective as a Flash game developer. Read the review to see whether or not this tool will serve the purpose of getting my games on more platforms!

First Impressions

Downloading and installing Construct 2 was very easy. It comes as a single .exe installer for Windows (no Mac version at the moment) and the installation steps are very simple.

When you first open the app, it shows you a nice “Hello!” popup asking if you want to read the tutorials, browse examples or buy a license. I chose not to do any of the above, because I wanted to see how intuitive Construct 2 would be for me.

If you ever want to read the manual, follow the tutorials or browse the forums, Construct 2 always provides links in the start page or through the “Home” menu.

Construct 2 has an interface very similar to Microsoft’s Office products. This makes it easy for people who are used to the Office products – but not for me, a fan of the old drop-down menus.

I started a new project by clicking the “Create new project” text in the start page, and after choosing whether I wanted to keep the project in a single file or in a folder, I was led straight to a blank screen, ready to work.

At that stage I didn’t know much about the tool, so I started by changing the Project Settings on the “Properties” tab on the left of the screen. After doing that, I started dragging a few images from my Windows folders to Construct 2, and it automatically recognized them and imported them into the project. Within minutes I managed to set up a very simple level for a platformer game, but at that moment the objects were only images in the screen.

Whenever I clicked an image in the screen (which is called an Object inside Construct 2), the “Properties” tab changed with the options I could change for that object. That’s how I found the “Behaviors” option and clicked it. After that a popup appeared so I could see the current behaviors on my object: none. I clicked the green plus image and it gave me a big popup to choose which behavior I wanted to add:

I could see the “Platform”, “Jump-thru” and “Solid” behaviors, so that was enough for me to start adding behaviors to my objects. Once I finished adding them, I clicked the green arrow in the top of the screen, “Run layout”. Within minutes I already had a game with simple platformer mechanics in it! Impressive.

Now I wanted to add an enemy to my platformer game, so I dragged in its image and tried to add a proper behavior to it. There wasn’t any behavior that would be obvious for an enemy, so I was a bit lost. I right-clicked the object and found the “Edit Event Sheet” option. So I clicked it and tried adding an event, but nothing I tried would make the enemy work. The events don’t have a good description, which makes them hard to use. I could do nothing but try to get help online (even the manual is online).

After a couple hours of reading, I wanted to start a new project. Turns out that everything I did with the enemy image was “wrong”. There were much simpler solutions to what I wanted to do and I learned so many other things that I just wanted to start a new project and apply everything I learned. And so I did.

My first experience with Construct 2 taught me that the tool is really great – it really helps you to make games easily – but some things are very complex at the moment, if you try to dive right in like I did. There isn’t something that will walk you through the application once you start your first project and many things aren’t descriptive enough. I wish that the initial screen either forced me to go read the tutorials online or provided me with a built-in walkthrough tutorial.

The First Game

Turns out that once you read some of their guides and tutorials, everything is very easy (and if you’re wondering which tutorials I read, they’re linked at the bottom of this review). I found myself creating many layouts and event sheets, and quickly adding objects to the screen as if I was using the good old Flash IDE. However, I realized that Construct 2 doesn’t have quick-align shortcuts as Flash does, and that makes it extremely hard and boring to align objects in the screen the way I want. Even using their built-in “Snap to grid” option didn’t help me much, as my objects often had different sizes and proportions from each other.

Animations are really easy to do. The tool allows me to import either many images which will be transformed into frames, or import a spritesheet that will be cropped to make frames. The only things I missed in it were the ability to add more than one image to the same frame, and an easy to use alignment system.

Within an hour, I already had a very simple memory game in my screen. I only had to add the events that would control the game mechanics. And that was initially a big problem. Coming from a programming background, having to visually create the mechanics with events and a limited set of conditions was very hard. I felt I wasn’t free to just go on and “code” anything I wanted in the game, and soon became upset with the event system. It was only after reading (yet another) tutorial on their site that I changed my mind.

I found myself playing for two hours adding and removing events, changing conditions and actions. As soon as I understood how Construct 2′s event system worked, it was a really fun challenge to “program” the events to do what I wanted, since I had only a set of limited conditions and actions to use. It was both challenging and relaxing to be able to visually organize your game and see it evolving without writing a single line of code!

The events for my memory game

After 3 hours of learning and applying this new knowledge in the tool, I had finished my very first game with Construct 2. My conclusion? Construct 2 is a very powerful tool once you learn how to use it, otherwise you’ll feel like a complete fool in front of it. I wish it was easier to use with more descriptive options, but after three hours I felt as if I was already a pro with the tool, because it was so easy to add, change and remove things!

My Conclusions

Construct 2 is a very interesting tool. For people who are already game developers, I found it can be a fun experience and it can teach you a few things about making things simpler, but it isn’t a tool that I would use in my routine. Due to HTML5′s still experimental nature, you’ll find that some features that your game may require won’t work properly across all devices. One example is audio: this simple memory game that I created uses only two sounds – a background music and a card flip effect – and yet I noticed differences between Firefox, Chrome and Android’s browser (which just doesn’t play audio).

When it comes to using Construct 2 to help me expand my game to another platform, that’s something you may want to think about first. It’s very easy to just import all the images in there and set up everything, but the problem comes with events: you’ll spend a lot of time organizing events to make them work the same way as your game in Flash (if that’s the platform you first built your game in).

However, Construct 2 can have a very interesting use for game developers: rapid prototyping and testing whether an idea is fun or not. Within minutes or hours you can just create a level or a small shooter game using behaviors and let people play it, giving feedback as to whether the prototype is fun or not.

For people who want to get into making games but don’t know or have trouble with programming, Construct 2 is the perfect tool. You can quickly learn the event system and start making a game. Construct 2 can export your game to work within Kongregate and on mobile devices. It’s the perfect opportunity to make games and share with friends!

Here is a quick list of pros and cons, based on my experience:

Pros:

You can make a game within minutes
The behavior system is very intuitive and easy to use
You can make custom plugins for the tool, extending its abilities
Once you learn how to use the event system, you feel like a pro using the tool
Allows rapid prototyping

Cons:

Isn’t descriptive enough
You WILL have to read many tutorials and guides to properly use the tool
Lacks many features for visually positioning and changing elements in the screen, such as quick aligning
Exports only as an HTML5 game

For people who are wondering whether or not the “Standard” version of the product is worth it: looking at the comparison table, the only drawbacks of the free version are the limited number of events (you will need many of them for a “proper” game) and the inability to offer your games as commercial products.

The free version’s limit on the number of layers you can have is arguably not a problem: I would easily manage to do everything in three layers; a fourth one would just make things easier. I don’t think you would need more than that, unless you are creating something really big. My opinion: if you’re just looking to make games for fun, the free version is more than enough. If you want to sell your games or get some money with them, the standard version is the way to go.

Extra Resources

Below is a quick list of the tutorials and guides that helped me a lot when learning the tool:

Beginner’s guide to Construct 2 – You won’t do a thing within Construct 2 without this
Adding sound – a beginner’s guide – For people who want to use sounds in the game
Animation Control – Event Based – Really helpful guide for animations and controlling them from a single place in the event sheet
Building a platform game – a beginner’s guide – Useful for learning the basics of a platformer game within Construct 2
How to series – ‘In Game Shop’ – Perfect for learning how to organize your variables and event sheets
About Picking – For understanding how the events pick objects
Randomized an array for a deck of cards – For learning to use arrays within Construct 2

And you can see the game I created within three hours here:

Click to play

The source files are available here.

Render an MP3 Audio Spectrum in Flash With computeSpectrum()

Amila Prabhath Senadheera — Tue, 07 Feb 2012 17:00:04 +0000

In this tutorial, I’ll teach you how to create a visual representation of a sound file’s audio spectrum, using Flash’s SoundMixer.computeSpectrum method. We’ll use four classes for this effect: Sound, SoundChannel, SoundMixer, and ByteArray. I’ll explain each classes as we use them.

Final Result Preview

Let’s take a look at the final result we will be working towards:

Click to view the demo

Step 1: Set Up Your Flash File

Launch Flash Pro and create a new Flash Document. Set the stage size to 500x300px, the background color to #000000, and the frame rate to 24fps.

In your timeline, select the existing layer and rename it “Buttons”. Then click Window > Common Libraries > Buttons.

Select your favorite button set, then drag and drop the ‘Play’ and ‘Stop’ buttons to the bottom-right corner of the stage.

Set the instance names of these buttons to play_btn and stop_btn, respectively.

Step 2: Create the Document Class

Create a new AS file, and save it as Main.as. Add this code (read the comments for more details):

This code should be placed in our new Class:

package  {
	import flash.display.Sprite;
	import flash.media.Sound; //The Sound class is the first step in working with sound. It is used to load a sound, play a sound, and manage basic sound properties.
	import flash.net.URLRequest;

	public class Main extends Sprite {
		private var sound:Sound;
		public function Main() {
			sound = new Sound(new URLRequest("sound.mp3")); //assign music to the sound variable.
			sound.play(); //play assigned sound.
		}
	}
}

You’ll need to put an MP3 file called sound.mp3 in the same directory as your FLA’s output directory. Any MP3 will do; on is included in the tutorial’s source download.

Step 3: Document Class

Add the class name to the Class field in the Publish section of the Properties panel to associate the FLA with the Main document class.

If you’re not familiar with the concept of a document class,check out this Quick Tip before reading further.

Then press Ctrl+Enter to test your Application.

Step 4: Handling the Sound Using Buttons

Let’s add an instance of a new class: SoundChannel. This class is used to keep different sounds in separate audio channels; each channel is created by an instance of SoundChannel, and we use these instances to control the sounds.

package  {
	import flash.display.Sprite;
	import flash.media.Sound;
	import flash.media.SoundChannel;
	import flash.net.URLRequest;
	import flash.events.MouseEvent;
	public class Main extends Sprite {
		private var sound:Sound;
		private var channel:SoundChannel;

		public function Main() {
			sound = new Sound(new URLRequest("sound.mp3"));
			play_btn.addEventListener(MouseEvent.CLICK,onPlayHandler);
			stop_btn.addEventListener(MouseEvent.CLICK,onStopHandler);
		}

		private function onPlayHandler(event:MouseEvent):void{
			channel = sound.play();
		}

		private function onStopHandler(event:MouseEvent):void{
			channel.stop();
		}
	}
}

As you can see, when Play is clicked, we don’t just play the MP3, we also assign it to a SoundChannel. We can then control the playback through this SoundChannel instance later – in this case, by making it stop.

Step 5: Create Simple Animation

Now let’s create some simple animation for this sound, again using the SoundChannel class.

package  {
	import flash.display.Sprite;
	import flash.media.Sound;
	import flash.media.SoundChannel;
	import flash.net.URLRequest;
	import flash.events.MouseEvent;
	import flash.events.Event;

	public class Main extends Sprite {

		private var sound:Sound;
		private var channel:SoundChannel;

		public function Main() {
			sound = new Sound(new URLRequest("sound.mp3"));
			play_btn.addEventListener(MouseEvent.CLICK,onPlayHandler);
			stop_btn.addEventListener(MouseEvent.CLICK,onStopHandler);
		}

		private function onPlayHandler(event:MouseEvent):void{
			channel = sound.play();//assign sound to channel class
			addEventListener(Event.ENTER_FRAME,animateBars); //render the animation every frame
		}

		private function onStopHandler(event:MouseEvent):void{
			channel.stop();
			graphics.clear();
			removeEventListener(Event.ENTER_FRAME,animateBars);//stop rendering the animation
		}

		private function animateBars(event:Event):void{

			graphics.clear();

			graphics.beginFill(0xAB300C,1);
			//Draw a rectangle whose height corresponds to channel.leftPeak
			graphics.drawRect(190,300,50,-channel.leftPeak * 160 );
			graphics.endFill();

			graphics.beginFill(0xAB300C,1);
			//Draw a rectangle whose height corresponds to channel.rightPeak
			graphics.drawRect(250,300,50,-channel.rightPeak  * 160 );
			graphics.endFill();
		}
	}
}

The leftPeak and rightPeak properties of a SoundChannel instance correspond to the current amplitude of the sound, through the left and right channels. Think of it this way: if you have stereo speakers, then leftPeak is the volume of the sound coming out of the left speaker, and rightPeak is the volume of the sound coming out of the right speaker.

You can press Ctrl+Enter to test your application:

Step 6: What Is SoundMixer?

The SoundMixer class controls all embedded and streaming sounds in the application, for all SoundChannels at once.

It has three methods: areSoundsInaccessible(), which determines whether any sounds are inaccessible due to security reasons; stopAll(), which stops playback of all sounds; and computeSpectrum(), which is what we’re interested in for this tutorial. The latter method takes a “snapshot” of the current sound, and pushes it into a ByteArray object.

Step 7: What Is ByteArray?

The ByteArray class provides methods and properties to optimize reading, writing, and working with binary data. It stores data as an array of bytes, hence its name. Find out more with this Introduction to ByteArray.

Step 8: More Complex Animation

So now let’s create a more complex animation using the SoundMixer.computeSpectrum() method. Again, read the comments in the code to fully understand the behavior:

package {
	import flash.display.Sprite;
	import flash.media.Sound;
	import flash.utils.ByteArray;
	import flash.events.Event;
	import flash.media.SoundMixer;
	import flash.filters.GlowFilter;
	import flash.net.URLRequest;
	import flash.events.MouseEvent;
	import flash.media.SoundChannel;

	public class Main extends Sprite{
		private var sound:Sound;
		private var channel:SoundChannel;
		private var byteArr:ByteArray = new ByteArray();
		private var glow:GlowFilter = new GlowFilter();
		private var filterArr:Array;
		private var line:Sprite = new Sprite();

		public function Main(){
			// create a "glow" effect for the animation we will render
			glow.color = 0x009900;
			glow.alpha = 1;
			glow.blurX = 10;
			glow.blurY = 10;

			// load your MP3 in to the Sound object
			sound = new Sound(new URLRequest("sound.mp3"));
			// apply the glow effect
			filterArr = new Array(glow);
			line.filters = filterArr;
			addChild(line);

			play_btn.addEventListener(MouseEvent.CLICK,onPlayHandler);
			stop_btn.addEventListener(MouseEvent.CLICK,onStopHandler);
		}

		private function onPlayHandler(event:MouseEvent):void{
			channel = sound.play(0,1000);
			addEventListener(Event.ENTER_FRAME,spectrumHandler);
		}

		private function onStopHandler(event:MouseEvent):void{
			channel.stop();
			line.graphics.clear();
			removeEventListener(Event.ENTER_FRAME,spectrumHandler);
		}

		private function spectrumHandler(event:Event):void{
			line.graphics.clear();
			line.graphics.lineStyle(1,Math.random() * 0xFFFFFF);
			line.graphics.moveTo(-1,150);
			// push the spectrum's bytes into the ByteArray
			SoundMixer.computeSpectrum(byteArr);

			for (var i:uint=0; i<256; i++){
				// read bytes and translate to a number between 0 and +300
				var num:Number = byteArr.readFloat() * 150 + 150;
				//use this number to draw a line
				line.graphics.lineTo(i*2,num);
			}
		}
	}
}

The most important parts of this code are lines 53 and 57. Here, the whole sound wave is translated to a ByteArray, which is then read, byte by byte, and translated into a set of numbers.

The ByteArray will be 512 floats long; in the for loop, we only read the first 256 floats, which correspond to the entire sound wave of the left channel (the sound coming through the left speaker).

Press Ctrl+Enter to test your Application.

Step 9: Fill in the Gaps

We can fill in the area underneath the line to give us a different effect:

All we need to do is draw a box and fill it in, using graphics methods. The code for this is as follows:

package {
	import flash.display.Sprite;
	import flash.media.Sound;
	import flash.utils.ByteArray;
	import flash.events.Event;
	import flash.media.SoundMixer;
	import flash.filters.GlowFilter;
	import flash.net.URLRequest;
	import flash.events.MouseEvent;
	import flash.media.SoundChannel;

	public class Main extends Sprite{
		private var sound:Sound;
		private var channel:SoundChannel;
		private var byteArr:ByteArray = new ByteArray();
		private var glow:GlowFilter = new GlowFilter();
		private var filterArr:Array;
		private var line:Sprite = new Sprite();

		public function Main(){
			glow.color = 0xFF0000;
			glow.alpha = 1;
			glow.blurX = 10;
			glow.blurY = 10;

			sound = new Sound(new URLRequest("sound.mp3"));

			filterArr = new Array(glow);
			line.filters = filterArr;
			addChild(line);
			addChild(play_btn);
			addChild(stop_btn);

			play_btn.addEventListener(MouseEvent.CLICK,onPlayHandler);
			stop_btn.addEventListener(MouseEvent.CLICK,onStopHandler);
		}

		private function onPlayHandler(event:MouseEvent):void{
			channel = sound.play(0,1000);
			addEventListener(Event.ENTER_FRAME,spectrumHandler);
		}

		private function onStopHandler(event:MouseEvent):void{
			channel.stop();
			line.graphics.clear();
			removeEventListener(Event.ENTER_FRAME,spectrumHandler);
		}

		private function spectrumHandler(event:Event):void{
			// draw one edge of the box, and specify a fill
			line.graphics.clear();
			line.graphics.beginFill(0xFF0000,1);
			line.graphics.lineStyle(1,0xFF0000);
			line.graphics.moveTo(-1,150);
			SoundMixer.computeSpectrum(byteArr);

			for (var i:uint=0; i<256; i++){
				var num:Number = byteArr.readFloat() * 200 + 150;
				line.graphics.lineTo(i*2,num);
			}

			//draw the rest of the box
			line.graphics.lineTo(512,300);
			line.graphics.lineTo(0,300);
			line.graphics.lineTo(-1,150);
		}
	}
}

Step 10: Try Something Different

We can take this idea further, to add even more interesting and complex effects:

In this case, we’ll draw two spectra on top of each other, one for the left channel and one for the right. To achieve this, we’ll use two for loops that each read in 256 floats, one after the other.

package {
	import flash.display.Sprite;
	import flash.media.Sound;
	import flash.utils.ByteArray;
	import flash.events.Event;
	import flash.media.SoundMixer;
	import flash.filters.GlowFilter;
	import flash.net.URLRequest;
	import flash.events.MouseEvent;
	import flash.media.SoundChannel;

	public class Main extends Sprite{
		private var sound:Sound;
		private var channel:SoundChannel;
		private var byteArr:ByteArray = new ByteArray();
		private var glow:GlowFilter = new GlowFilter();
		private var filterArr:Array;
		private var line:Sprite = new Sprite();
		private var num:Number;
		public const GRAFT_HEIGHT:int = 150; //set animation height
		public const CHANNEL_SIZE:int = 256; //set left/right channel size

		public function Main(){
			glow.color = 0x009900;
			glow.alpha = 1;
			glow.blurX = 10;
			glow.blurY = 10;

			sound = new Sound(new URLRequest("sound.mp3"));

			filterArr = new Array(glow); //add glow to the animation
			line.filters = filterArr;
			addChild(line);

			play_btn.addEventListener(MouseEvent.CLICK,onPlayHandler);
			stop_btn.addEventListener(MouseEvent.CLICK,onStopHandler);
		}

		private function onPlayHandler(event:MouseEvent):void{
			channel = sound.play(0,1000); // play sound 1000 times
			addEventListener(Event.ENTER_FRAME,spectrumHandler);
		}

		private function onStopHandler(event:MouseEvent):void{
			channel.stop();
			line.graphics.clear();
			removeEventListener(Event.ENTER_FRAME,spectrumHandler);
		}

		private function spectrumHandler(event:Event):void{
			num = 0;

			line.graphics.clear(); // create current graphics
			line.graphics.lineStyle(0, 0x00FF00);
			line.graphics.beginFill(0x00FF00,0.5);
			line.graphics.moveTo(0,GRAFT_HEIGHT);

			SoundMixer.computeSpectrum(byteArr);// add bytes to Sound mixer

			for (var i:int = 0; i < CHANNEL_SIZE; i++) {
                		num = (byteArr.readFloat() * GRAFT_HEIGHT);
                		line.graphics.lineTo(i * 2, GRAFT_HEIGHT - num);
            		}

			line.graphics.lineTo(CHANNEL_SIZE * 2, GRAFT_HEIGHT);
			line.graphics.endFill();

			line.graphics.lineStyle(0, 0xFF0000);
			line.graphics.beginFill(0xFF0000, 0.5);
			line.graphics.moveTo(CHANNEL_SIZE * 2,GRAFT_HEIGHT);

			for (i = CHANNEL_SIZE; i > 0; i--) {
				num = (byteArr.readFloat() * GRAFT_HEIGHT);
				line.graphics.lineTo(i * 2, GRAFT_HEIGHT - num);
			}

			line.graphics.lineTo(0, GRAFT_HEIGHT);
			line.graphics.endFill();
		}
	}
}

Conclusion

So we have learnt how to use the various Sound classes, and how to create beautiful sound drawing animations using SoundMixer.

Thank you for taking the time to read this article, because this is my first tutorial. If you have any questions, please leave them in a comment.

Browser Extension: Arrange Tumblr Posts in Chronological Order

Michael James Williams — Sun, 05 Feb 2012 07:00:50 +0000

Creating little browser extensions is a great way to learn JavaScript. You don’t need to worry about cross-browser compatibility, you can make the project as small or large as you like, and you can fix problems in other people’s websites that bug you, specifically. In this post, we’ll create a short script that automatically rearranges Tumblr archive pages to read in chronological order – and we’ll learn about NodeList on the way.

The Problem

This week, Ryan North started a new Tumblr, in which he’s going through the novelization of the first Back to the Future movie, one page at a time. This is a thing I wish to read.

Click to read.

However, Tumblr displays its posts in reverse chronological order – that is, with the most recent posts first. This makes sense for a lot of sites on Tumblr, but in this instance, I really want to read them in the order they were written. The current site layout means that, to do that, I have to scroll down to the top of the first (first written) post, scroll down as I read it, and then scroll up to the top of the second post, and scroll down through that…

This is a tiny, tiny first world problem – totally trivial and almost embarrassing to mention. But that doesn’t mean I don’t want to fix it.

By the end of this tutorial, you’ll make this Tumblr – or any Tumblr you choose – display its posts in chronological order on the page, automatically.

How Can We Do This?

We don’t have control over the BtotheF site design; it offers no options to us, so we can’t change the order in which the posts are displayed on the page server-side.

But once the HTML is sent to the browser, it’s ours. We can manipulate it however we want. And, of course, the language with which we can do this is JavaScript.

I’ll give a quick demo. I’ll be using Chrome, and recommend that you do, too – if you can’t, or don’t want to, then grab a copy of Firebug.

Browse to http://btothef.tumblr.com/ and open the JavaScript console (Tools > JavaScript Console, in Chrome). Type:

alert("Hi");

…and hit Enter.

Wow! … Okay, fine, that didn’t prove much. Try this:

document.body.appendChild(document.createTextNode("Hi"));

This will take the HTML document’s <body> element, and append a new text node – a piece of text, basically – containing the word “Hi”. If you didn’t follow any of that, get up to speed with HTML.

To see the result, scroll right down to the bottom of the Tumblr:

Slightly more impressive, since we’ve actually changed the contents of the page. The new text node is right at the bottom because we’ve used appendChild() – which adds the specified node after everything else inside the <body>. As far as our browser is concerned, the last few lines of HTML now look like this:

<!-- END TUMBLR CODE -->

Hi
</body>
</html>

So! Now we have two issues:

How do we use JavaScript to rearrange all the posts in the page?
How do we make this happen automatically, without having to mess around in the console every time we read the Tumblr?

We’ll address these in order.

Rearranging the Posts

First, let’s figure out how to “find” all of the posts in the HTML. In Chrome, right-click somewhere in the top post, and select “Inspect element”. (Firebug should add the same shortcut to Firefox; for other browsers, try the magnifying glass icon.)

The Elements tab of the Developer Tools will appear, with the element you selected highlighted:

As you hover over different elements in this HTML view, you’ll see them highlighted in the page itself. Eventually, you’ll find that the entire post is contained in a div with a class of post. As you can see from the screenshot above, there are several other such div elements, and they are all contained in a master div with an id of contents.

We can select all of these post elements at once with a single line of code; type this into the JavaScript console:

document.getElementById("contents").getElementsByClassName("post");

(Technically, we could have just written document.getElementsByClassName("post"), but who cares?)

You’ll see – again, in Chrome – some feedback:

Great! This indicates that it worked. If you click the arrows, you’ll see the contents of each div.

We might as well assign this to a variable, to save us having to type it out over and over:

var posts = document.getElementById("contents").getElementsByClassName("post");

(This time, the console will return undefined; you can check that it assigned the variable correctly by just typing the word posts in the console.)

We can loop through all of the elements in posts as if it were an array:

for (var i=0; i < posts.length; i++) {
     console.log(posts[i]);
}

Hit Shift-Enter to add a new line to your code without running it, in the JavaScript console. console.log() just traces its contents to the console, which is far less annoying than an alert() and far less disruptive than adding text to the HTML DOM.

The result of this simple loop will just be a list of all the div elements. Cool. So presumably we can do something like this…

var numPosts = posts.length;
for (var i=numPosts - 1; i >= 0; i--) {
     posts.push(posts[i]);
}

Try it out! You’ll see this:

TypeError: Object #<NodeList> has no method 'push'

Rats.

A NodeList Is Not an Array

When we use getElementsByClassName(), we don’t retrieve a simple array of elements, we retrieve a NodeList. Like an array, this is a collection of elements; unlike an array, the collection is updated in real time. If the HTML DOM is modified, the contents of posts gets modified to match.

For example, let’s create a new div with a class of post and append it to the contents div:

var newPostDiv = document.createElement("div");
newPostDiv.setAttribute("class", "post");
document.getElementById("contents").appendChild(newPostDiv);

Run that, then type posts and hit Enter. You’ll see an extra div in the list – even though we haven’t touched the posts variable.

Since a NodeList is not an array, it doesn’t have most of the methods and properties of Array, such as push() In fact, we’ve already used the only property: length. The only method is .item(n), which just gets the nth item in the list.

However, our earlier demonstration with appendChild() does suggest an alternative solution: what if, instead of trying to rearrange the elements of the NodeList within the NodeList, we rearranged them within the page?

First, we’ll run through the list in reverse order, and append each element in turn to the contents div; then, we’ll remove the original posts.

Refresh the Tumblr page to clear out all the extra rubbish we’ve added to the DOM, then do the first step, of adding the elements in reverse order:

//have to define posts again, since we lost it when we refreshed
var posts = document.getElementById("contents").getElementsByClassName("post");
var numPosts = posts.length;
for (var i=numPosts - 1; i >= 0; i--) {
     document.getElementById("contents").appendChild(posts[i]);
}

Okay, now we… wait, what?

The (chronological) first post is already at the top, and the last post is at the bottom, with no posts repeated. This may seem surprising, but it makes sense: we didn’t clone any elements of the NodeList, we just appended them to the contents div, in reverse order. Since the NodeList always reflects the contents of the HTML DOM, we just moved each of the 11 elements to a new position – the 11th element got added to the end (no change in position); then the 10th got moved to be after that; the 9th after that, and so on, until the 1st element was right at the end.

So, problem solved, in five simple lines of code. Now let’s automate it.

Turning It Into a Browser Extension

Three of the top four browsers allow you to create browser extensions – installable add-ons – using JavaScript. (It will not surprise you to learn that Internet Explorer is the exception.) Here are the instructions for Chrome, the instructions for Firefox, and the instructions for Safari.

But we’re not going to use any of those. Instead, we’ll use a great add-on called Greasemonkey, which allows you to install little JS scripts without needing to package them up as full-blown browser extensions. Essentially, it injects snippets of JavaScript into the page, once it’s loaded.

Chrome already has Greasemonkey support baked in. Opera has something very similar to Greasemonkey baked in: UserJS. For Firefox, you’ll need to install the Greasemonkey extension. For Safari, install SIMBL, and then GreaseKit. For IE, install IE7Pro or Trixie.

Writing the Greasemonkey Script

Create a new text file, and name it ChronologicalTumblr.user.js. Make sure you remove the default .txt extension, and that you use .user.js, rather than just .js – this is the extension for a Greasemonkey script.

Copy our post rearrangement code into the file:

var posts = document.getElementById("contents").getElementsByClassName("post");
var numPosts = posts.length;
for (var i=numPosts - 1; i >= 0; i--) {
     document.getElementById("contents").appendChild(posts[i]);
}

Now, we need to add some extra metadata at the top of the script – details about the script itself. All these details should go in comments, starting with ==UserScript== and ending with ==/UserScript==:

// ==UserScript==
//
// ==/UserScript==

var posts = document.getElementById("contents").getElementsByClassName("post");
var numPosts = posts.length;
for (var i=numPosts - 1; i >= 0; i--) {
     document.getElementById("contents").appendChild(posts[i]);
}

First, we’ll add a name and a description:

// ==UserScript==
// @name          Chronological Tumblr
// @description	  Displays Tumblr posts in chronological order
// ==/UserScript==

var posts = document.getElementById("contents").getElementsByClassName("post");
var numPosts = posts.length;
for (var i=numPosts - 1; i >= 0; i--) {
     document.getElementById("contents").appendChild(posts[i]);
}

Then, we’ll specify a namespace. The combination of the name and the namespace is what uniquely identifies the script; if you try to install another Greasemonkey script with the same name and namespace as an existing script, it will overwrite the old one – if only the name or the namespace match, it’ll just install the new one alongside the old.

It’s common to use a URL here, so I’ll use Activetuts+’s. You should use your own, since you’re in control of it:

// ==UserScript==
// @name          Chronological Tumblr
// @description	  Displays Tumblr posts in chronological order
// @namespace      http://active.tutsplus.com/
// ==/UserScript==

var posts = document.getElementById("contents").getElementsByClassName("post");
var numPosts = posts.length;
for (var i=numPosts - 1; i >= 0; i--) {
     document.getElementById("contents").appendChild(posts[i]);
}

Now we need to specify which URLs this script should affect – that is, on which web pages the JavaScript should automatically be injected into. I want this script to work on the BtotheF homepage, plus the other archive pages, like http://btothef.tumblr.com/page/2:

// ==UserScript==
// @name          Chronological Tumblr
// @description	  Displays Tumblr posts in chronological order
// @namespace      http://active.tutsplus.com/
// @include       http://btothef.tumblr.com/
// @include       http://btothef.tumblr.com/page/*
// ==/UserScript==

var posts = document.getElementById("contents").getElementsByClassName("post");
var numPosts = posts.length;
for (var i=numPosts - 1; i >= 0; i--) {
     document.getElementById("contents").appendChild(posts[i]);
}

The * is a wildcard; it ensures that the script will be inserted into every single archive page of the BtotheF Tumblr.

We could use a wildcard to make every single Tumblr’s archive pages display in chronological order:

// ==UserScript==
// @name          Chronological Tumblr
// @description	  Displays Tumblr posts in chronological order
// @namespace      http://active.tutsplus.com/
// @include       http://*.tumblr.com/
// @include       http://*.tumblr.com/page/*
// ==/UserScript==

var posts = document.getElementById("contents").getElementsByClassName("post");
var numPosts = posts.length;
for (var i=numPosts - 1; i >= 0; i--) {
     document.getElementById("contents").appendChild(posts[i]);
}

In this case, it might be a good idea to improve your script to insert a button or link into the page that rearranges the posts when clicked. That way, you can use it when appropriate, without having to manually add every single Tumblr’s URL as an @include parameter.

There are other metadata parameters you could add, but this is all we need for now.

Finishing Off

Installing the script in Chrome is easy: just drag and drop it from your hard drive into a browser window. It’ll warn you that scripts could potentially be dangerous (just click Continue), and then check again that you want to install this specific one:

Hit Install. If you’re using another browser, refer to the relevant Greasemonkey script’s manual – in any case, it’ll be simple.

Once it’s installed, you can see it in your list of extensions:

Head back to http://btothef.tumblr.com/, or hit refresh if you still have it open.

The posts are now automatically displaying in chronological order!

It’s not perfect: you may have noticed that the navigation buttons have been moved to the top of the page, since they are contained in a div with a class of post. But hey – if that bugs you, you have the tools to fix it now.

Quick Tip: How to Debug an AS3 Error #1203

Dru Kepple — Fri, 03 Feb 2012 08:00:40 +0000

In this Quick Tip, we’ll discuss the confusing AS3 error 1203, “no constructor found”, which crops up without provocation and is rather unfortunately worded. We’ll examine the scenario in which it will appear, and how to fix it.

Step 1: An Obligatory But Somewhat Useless Description of Error 1203

First, here is the language of the error:

1203: No default constructor found in base class flash.display:BitmapData.

It’s difficult to break this down into plain English. So let’s next move on to a scenario that produces this error.

Step 2: A Busted Project

You can find this project in the download package, in the folder “busted“. It consists of the following (which you can use to re-create this project if you prefer a hands-on approach):

A FLA named Busted.fla. It is empty, but is linked to the document class described next.

A document class named Busted.as. This extends Sprite and simply creates an instance of the class described next, and adds it to the stage.
The contents of the class are as follows:

    package {
        import flash.display.*;
        public class Busted extends Sprite {
            public function Busted() {
                var bmp:Bitmap = new Bitmap(new BustedBitmap());
                addChild(bmp);
            }
        }
    }

The BustedBitmap class extends BitmapData, and so we use it to feed a Bitmap object, which is then added to the stage.

Another class file named BustedBitmap.as. As mentioned previously, this extends BitmapData, and its purpose is to be a BitmapData that automatically supplies itself with some Perlin noise. Its contents are:

    package {
        import flash.display.*;
        public class BustedBitmap extends BitmapData {
            public function BustedBitmap() {
                perlinNoise(100, 100, 2, 1024, false, false, 7, true);
            }
        }
    }

So, in the BustedBitmap constructor, we call perlinNoise() and thus we automatically have something interesting in the pixel data, so we can see something right away when displaying on the stage.

Now, go ahead and test the movie. You will get Error 1203, pointed at line 4 of BustedBitmap.as. And line 4 is…


public function BustedBitmap() {

Step 3: What’s All This, Then?

So what happened? The big thing to keep in mind is that we’re writing a class that is a subclass of another class (BitmapData in this case). Also keep in mind that when a class is instantiated, the constructor is called as part of the “new” process.

If you do not actually write a constructor, ActionScript will imply one for you. It will look like this:

public function [NameOfClass]() {

}

Where “[NameOfClass]” will match the name of your class.

Similarly, if you write a subclass, and don’t call super() in it, then ActionScript will imply that call for you, as well. It will look like this:

public function [NameOfSubclass]() {
    super();
    // Other explicit code in subclass constructor
}

Note that it happens on the first line, and is simply a call to super with no arguments.

Finally, we get to the root of the problem. If your subclass omits an explicit call to super, and your superclass’s constructor has required parameters, then your implicit call to super does not supply the required parameters. You’d think that an argument mismatch error could catch this, but consider that since there isn’t any code actually written to make the mismatch, ActionScript can only complain that the lack of a default constructor.

In our example, BustedBitmap extend BitmapData, which has a constructor defined in the documentation as so:

BitmapData(width:int, height:int, transparent:Boolean = true, fillColor:uint = 0xFFFFFFFF)

The first two parameters are required, and we’re not supplying them.

Step 4: It’s as Simple As…

The solution is, once you understand the problem, extremely simple. You need to explicitly call the super constructor, at least if there are required parameters. In other words, in our BustedBitmap class, this following highlighted line will fix the problem:

package {
    import flash.display.*;
    public class BustedBitmap extends BitmapData {
        public function BustedBitmap() {
            super(600, 400);
            perlinNoise(100, 100, 2, 1024, false, false, 7, true);
        }
    }
}

And that will do it.

As a teachable moment, I’d like to add that, when extending another class, it’s generally a good idea to include the explicit call to super. Even if there are no parameters at all, required or otherwise (as in Sprite or MovieClip), an explicit call can declare intention and awareness of the nature of the subclass. More practically, explicit calls give you an opportunity to run some code prior to the call to super, which may be helpful in certain situations.

Step 5: …And That Is All

Yet another error demystified; the challenge for this one is that the real cause of the error is quite buried. Once you become handy with a shovel, though, the fix is easy enough.

Thanks for reading, and be ready for more debugging tips.

Best of Tuts+ in January 2012

David Appleyard — Thu, 02 Feb 2012 08:00:18 +0000

Each month, we bring together a selection of the best tutorials and articles from across the whole Tuts+ network. Whether you’d like to read the top posts from your favourite site, or would like to start learning something completely new, this is the best place to start!

Psdtuts+ — Photoshop Tutorials

Create a Pimped Out Truck Using Photoshop and Point and Shoot Photos

Making modifications to your car or truck in Photoshop can be a lot of fun. In this tutorial we will demonstrate how to create a pimped out truck modification using photos taken with a simple point and shoot camera, with no advanced lighting setup. Let’s get started!

Visit Article
Create an Elephant Sundae Using Photo Manipulation Techniques

Photoshop is great at seamlessly combing photos to create an entirely new scene. In this tutorial we will create an elephant sundae using several stock photos. Let’s get started!

Visit Article
The Incredible Digital Art of Michael Oswald

In this article we will be featuring the work of Michael Oswald. Oswald is a digital artist with a unique style. His technique involves a combination of photo manipulation and digital painting techniques and the results are often stunning. Let’s take a look!

Visit Article

Nettuts+ — Web Development Tutorials

Sublime Text 2 Tips and Tricks (Updated)

Sublime Text 2 is one of the fastest and most incredible code editors to be released in a long time! With a community and plugin ecosystem as passionate as this one, it just might be impossible for any other editor to catch up. I’ll show you my favorite tips and tricks today.

Visit Article
An In Depth Analysis of HTML5 Multimedia and Accessibility

In this tutorial, youll learn how HTML5 helps to provide you with several ways of presenting your media content to users. As a result, youll increase the availability of your media to users with different
needs and requirements, making it more accessible.

Visit Article
Writing an API Wrapper in Ruby with TDD

Sooner or later, all developers are required to interact with an API. The most difficult part is always related to reliably testing the code we write, and, as we want to make sure that everything works properly, we continuosly run code that queries the API itself. This process is slow and inefficient, as we can experience network issues and data inconsistencies (the API results may change). Let’s review how we can avoid all of this effort with Ruby.

Visit Article

Vectortuts+ — Illustrator Tutorials

How to Illustrate a Microscope in Illustrator

The microscopes is a symbol of our civilization. Throughout this tutorial on how to illustrate a vector microscope you’ll take advantage of numerous Illustrator tools. You will learn how to use blends, art brushes and 3D rendering in Adobe Illustrator. Let’s get started!

Visit Article
Create a Picture Gallery in Illustrator

This work is a common project created together with Iaroslav Lazunov and Alexander Egupov. We have used 3D rendering, Blends, Opacity masks, making this three-dimensional stage with vanishing points. Learn every step in how to create this picture gallery work.

Visit Article
Important Resources for Learning How to Design Typefaces and Full Fonts

If you’re serious about creating a typeface design, then you’ll need some solid resources to get started. Learn effective typeface design workflows, how to take an initial spark of an idea from sketch, through Illustrator, into Fontlab, and then work your creation into a complete and custom font design. Here are multiple tutorials that show you how to create fonts in Illustrator and Fontlab, and you can also dive into articles that describe the foundation of quality type design with ample inspirational examples.

Visit Article

Webdesigntuts+ — Web Design Tutorials

A Beginner’s Guide to Pairing Fonts

Pairing fonts can be a challenge. Selecting two or more fonts which work well is one thing – selecting two which work together to achieve your typographic aims may have you reaching for the aspirin. Let’s see if we can alleviate any headaches. This guide will help you get started with font pairing for the web.

Visit Article
Design a Series of Smart Banner Ads in Photoshop

With the continuous growth of the Internet, online marketing has gotten bigger every year, and along with it, the advertising industry. One major factor in all this craziness is buying and selling ads.

Visit Article
Twitter Bootstrap 101: Introduction

Twitter’s Bootstrap is an excellent set of carefully crafted user interface elements, layouts, and javascript tools, freely available to use in your next web design project. This video series aims to introduce you to Bootstrap; taking you all the way from downloading the resources, to building a complete Bootstrap-based website.

Visit Article

Phototuts+ — Photography Tutorials

HDR: Love it or Leave It?

There are few techniques in the photography world that divide our community as much as HDR. High dynamic range images, or HDR images, are a special type of composite image that combines several images at different exposure settings in order to create an image with increased dynamic range. The look provided by HDR is loved by many, and disliked by perhaps just as many. In today’s article, we’re going to take a better look at what HDR is, and get some opinions from photographers using HDR.

Visit Article
Inspiring Images of Cars and Motorcycles

Cars and motorbikes have been around for 100 years. Throughout the century, they have looked beautiful, satisfied our need for speed and become a symbol for thrill seeking. Today, we’ll look at photos ranging from brand new Ferrari’s to classic muscle cars.

Visit Article
Quick Tip: GIMP Portable – Take Your Editing Software With You

While a number of smartphones now offer photo editing basics (and a plethora of apps to expand things even more), the portability of a solid photo editing program has been hard to come by. Photoshop is a monster in regards to space requirements and its ability to work on any system where it is not expressively installed. Picasa can be fairly ‘lightweight’ but lacks many of the more advanced photo editing tools. So what about GIMP?

Visit Article

Cgtuts+ — Computer Graphics Tutorials

Modeling, UVmapping And Texturing A Low Poly T-Rex In Blender, Part 1

In the first tutorial of 2012 you’ll learn how to create an awesome low-poly dinosaur using Blender and Gimp. In today’s post artist Karan Shah will walk you through the entire modeling process step by step, and show you how to create an optimized model suitable for use in any game engine.

Visit Article
Create A Realistic Explosion In Maya Using Maya Fluids

Today you’ll learn to animate and shade fluids, understand all of the major attributes, learn how adding fields will allow you to gain better control over your simulation, and how to light and render the final animation.

Visit Article
SpeedTree To UDK: The Complete Workflow, Part 1 Creating The Tree

Due to the shear number of polygons often required to make believable 3D trees, creating realistic ones for use “in-game” can be a challenging, time consuming task. SpeedTree from IDV aims to change all that with it’s intuitive UI, ease of use and powerful toolset. Making believable trees and plants has literally never been easier!

Visit Article

Aetuts+ — After Effects Tutorials

Dominoes” CameraTracker and Cinema 4d Case Study – Day 1

In this tutorial we’re going to go over the principle functionality of CameraTracker from The Foundry, learning basic workflow, optimizing results, aligning the ground plane and exporting this data from After Effects to Cinema 4d.

Visit Article
Make An Amazing Motion Reactant Flame – Tuts+ Premium

Using just a few video elements of torch flames, we composite a burning hand by using a series of null objects and expressions to drive a time lagged displacement effect to simulate fire burning from a moving source. We use the Puppet tool for the distortion and throw on some tracked lighting effects and a displacement map for the Heat. This principle can be used to add realistic, fluid motion to any tracked object.

Visit Article
Key Tips To Becoming A Successful Video Freelancer

Youve watched thousands of tutorials. Youve put in countless hours and spent many late nights working on personal projects. Youve finally come to the conclusion that this may just be something you would like to do for a career. It can seem a little intimidating at first, because how are you going to convince someone to pay you to do this? Up until now youve been your only client. How do you get more? Im going to share my insight and experiences on how to successfully launch your freelance career this year!

Visit Article

Audiotuts+ — Audio & Production Tutorials

Free Professional Quality Audio Unit Plug-ins for Mac

Lets face it, software is expensive. While there are hundreds of free plug-ins available online, more often than not two problems will arise: One, most of them are for PCs leaving us Mac users feeling left out. Two, most of them are vary poor quality.

While I do agree with the saying, “The tools are only as good as the artist,” I also believe the opposite is true; that at some point the artist can only be as good as his tools are.

Visit Article
Quick Tip: Drum Processing Part 4: Tips and Tricks

This short series of quick tips is designed to give you a good overview of the audio processing techniques involved in creating a professional sounding drum beat for use in house, electro and breaks in Cubase. In this final part we will look at a few ways to add even more life to your drums.

Here is a sample of the type of beat you could expect to end up with at the end of this series of tips:

Visit Article
Quick Tip: Use the Doubling Technique for Quick Drums

It’s 3:30 in the afternoon when your phone rings. The head of a music library is calling and she needs your help. They have a commercial for an A-list client that needs music, and they want you to submit an entry. You’ll get $10,000 if you land the gig.

Visit Article

Activetuts+ — Flash, Flex & ActionScript Tutorials

Create a Microphone-Controlled Flash Game: Code

In this mini-series, we’re creating a spaceship game where the main control is via the microphone: shout louder to make the ship fly higher. So far, we’ve created all the required graphical elements for the game. Now, it’s time to work on our code. We’ve got a lot to do, so let’s get started!

Visit Article
Why Bother With jQuery? A Guide for (Former) Flash Developers

If you, like many Flash developers, are looking into using HTML5 for your web apps, you’ll almost certainly have come across jQuery. It’s a very popular JavaScript library, used by a large percentage of the most visited websites – but what’s all the fuss about, and should you use it?

Visit Article
An Introduction to the HTML5 Gamepad API

As HTML games begin to gradually increase in popularity, vendors are starting to introduce some exciting new APIs to make gaming that little bit sweeter for both us developers and our end players. One of these is the GamepadAPI, which allows you to connect your good old console gamepad into your computer and use it for browser based games, plug and play style. Let’s dive in!

Visit Article

Wptuts+ — WordPress Tutorials

The Rise of HTML5 in WordPress

2011 was a big year for the advancement of HTML5 in the web development community. It became pretty widely adopted, especially for the mobile web. There have been major projects that help developers use HTML5, like Paul Irish’s HTML5 Boilerplate (technically 2010, but popularized in 2011) and books galore!

Visit Article
Reusable Custom Meta Boxes Part 3: Extra Fields

In Part 1 and Part 2 of our custom meta box template tutorial series, we learned how to create a field array to loop through and create a custom meta box with your standard fields. Now let’s throw in a bit of JavaScript for some fancy, but highly useful fields.

Visit Article
The Ultimate Quickstart Guide to Speeding Up Your WordPress Site

Give your site a boost! Implement crucial optimization techniques that will improve not only your ySlow score, but your Google rank too. In this tutorial we will cover all aspects of W3 caching, ySlow, Google page speed, CSS sprites & htaccess rules, to achieve a high ySlow score like i have done on my blog.

Visit Article

Mobiletuts+ — Mobile Development Tutorials

iOS SDK: Creating an Awesome Carousel

Engage your users with stunning carousels. We’ll look at how easy and clean it can be to implement scrollable, interactive carousels in your iOS applications. With high configurability, you can have 3D, flat, rotating, and endless scrolling arrays for data, images, or buttons.

Visit Article
PhoneGap From Scratch: Introduction

Want to learn how to use PhoneGap, but don’t know where to get started? Join us as we put together “Sculder”, not only a tribute to an excellent science fiction TV series, but a fully-fledged native mobile application for the believer in you!

Visit Article
Mobile Flash is Far From Dead: Setting the Record Straight

In light of recent announcements from Adobe, there has been a lot of confusion over the state of the Flash Platform – specifically in regard to Flash content on mobile devices. This article seeks to clarify many of the misconceptions that exist by addressing the main points of confusion around these announcements regardless of the initial, monumental, and absolutely unbelievable blunders from failed public (and private) relations messaging and general marketing surrounding these announcements.

Visit Article

Free Flash Debugger: Commando (With Premium Source Files)

Aditya Keerthi — Wed, 01 Feb 2012 08:00:55 +0000

Commando is a Flash debugger that lets you change variables at runtime and run your own custom commands. It will allow you to try out whatever tweaks you want, without the hassle of changing your code and recompiling every time. This debugger also comes with its own memory monitor, and an output panel that is similar to the output dialog in the Flash IDE.

See Commando in Action

Why Use Commando?

Using Commando you can change your code at runtime. Let’s pretend you are making a platformer game. You have a jumpPower variable, but when testing your game you feel that the player can’t jump high enough. So instead of going back and changing your code, you can just type set jumpPower(25) in Commando and you can try out the new value.

Of course, this is just a simple demonstration; Commando can be extended even more. Just continue reading…

Configuration

First, download the ZIP file included with this article. Then, add the SWC file to your project’s library path.

Once you have added the SWC to your project’s library path, all you need are three lines of code to add an instance of Commando on the stage:

import com.pxlcoder.debug.Commando;

var commando:Commando = new Commando(flash.ui.Keyboard.ENTER, this);
addChild(commando);

Now press CTRL+ENTER (CMD+ENTER on a Mac), and you will see Commando up and running in your Flash project!

Explore

Commando comes with eight built-in functions. In this section I will explain what they are and how to use them.

Math

Using the Math function you can do addition, subtraction, multiplication and division between two numbers. The Math function can also calculate the square root of a number. For example, type math 1+1 or math sqrt(144) in the Commando dialog. The answer will show up in the output dialog.

Hide

You can use the Hide function to hide objects. You can type hide monitor or hide output to hide the two panels at the bottom. You can also use the Hide function with movieclips or buttons by simply typing hide myInstanceName.

View

You can use the View function to view hidden objects. You can type view monitor or view output to show the two panels at the bottom. You can also use the View function with movieclips or buttons by simply typing view myInstanceName. If any of your objects have their visible property set to false, typing view myInstanceName will set it to true.

Set

Using the Set function you can set values of your variables or you can set properties of your objects. To use the Set function on variables type set myVariable(myValue). To use the Set function on objects, type set myInstanceName(myPropertyName,myValue).

Get

Using the Get function you can get the values of your variables and properties. To use the Get function type get myVariable. You can also get properties by typing get myInstanceName.myPropertyName.The values will show up in the output dialog.

Probe

Using the Rrobe function you can get the probe all of the properties of an object. To use the Probe function type: probe myObjectInstanceName. The properties will be traced in the Flash IDE, rather than in the Commando output dialog.

Remove

You can use the Remove function to remove objects from the stage. To use the Remove function type remove myInstanceName.

Add

You can use the Add function to add objects back on to the stage. To use the Add function type add myInstanceName.

Note: Commando’s built-in functions each evaluate a single string, so after you type your function name and press space, make sure to type your arguments without any spaces. Instead, type your arguments as one continuous word, with commas if necessary.

Extend

While Commando has many great built-in functions, you may want something more. To solve this problem, Commando comes with a function to add your own custom commands.

Here is a quick code example of how you can create your own custom commands:

import com.pxlcoder.debug.Commando;

var commando:Commando = new Commando(flash.ui.Keyboard.ENTER, this);
addChild(commando); 

commando.addCommand("output", outputFunction); //Sets the command keyword to "output" and calls the outputFunction below

public function outputFunction(s:String):void {
     commando.output(s); //A call to Commando's built-in output dialog
}

Now press CTRL+ENTER (CMD+ENTER on a Mac), to run your code. In the Commando dialog, type output hello, and press Enter. The output dialog will now say hello!

You can also remove commands from Commando by using the removeCommand() function.

import com.pxlcoder.debug.Commando;

var commando:Commando = new Commando(flash.ui.Keyboard.ENTER, this);
addChild(commando); 

commando.removeCommand("output");

Recap: Commando has three functions that you can access; addCommand(), output() and removeCommand().

Conclusion

At the end of the day, debugging is the most important part in the development process. Commando has everything you could ever ask for in a debugger. You can use it for anything and everything.

If you’re a Tuts+ Premium member, you can download the source files for Commando – just log in and head to the Source File page.

Any questions, comments or concerns? Feel free to get in touch in the comments.

Take control of your Flash projects!

Create an HTML5 Canvas Tile Swapping Puzzle

Brad Manderscheid — Tue, 31 Jan 2012 07:00:39 +0000

In this tutorial we will be working with the HTML5 canvas and Javascript to create a dynamic tile swapping game. The result will be a puzzle that works with any given image, and has flexible difficulty levels that are easily adjusted.

The Complete HTML5 Canvas Puzzle

Here is a quick shot of the puzzle we will be building:

Click to play

A couple of notes:

Cross-browser compatibility: This puzzle was tested and works in all versions of Safari, Firefox, and Chrome that support the canvas element.
Mobile: The code provide here works in the above-mentioned desktop browser and is not optimised for mobile. The puzzle will load and render just fine, but because of the touch and drag behaviors in mobile browsers, optimization is required for it to function correctly. Optimizing this puzzle for mobile will be covered in a future tutorial.
Adjustable Difficulty: The code contains a constant, PUZZLE_DIFFICULTY, that determines the number of pieces. In the demo above, this is set to 4, giving a 4×4 puzzle. We can easily change this – for example, this version has a PUZZLE_DIFFICULTY of 10.

Getting Started

To get started, create a directory for the project. Place an image in the directory that you want to use as your puzzle. Any web friendly image will do, and it can be any size your heart desires – just make sure it fits within the fold of your browser’s window.

Step 1: Creating the HTML Template

Open a new file using your favorite text editor and save it inside your project directory, next to your image. Next, fill out this basic HTML template.

<!DOCTYPE html>
<html>
<head>
    <title>HTML5 Puzzle</title>
    <script>

    </script>
</head>

<body onload="init();">
    <canvas id="canvas"></canvas>
</body>

</html>

All we need to do here is create a standard HTML5 template containing one canvas tag with the id of “canvas”. We’ll write an onload listener in the body tag which will call our init() function when fired.

Now start by placing your cursor inside the script tag. From here on out it’s all javascript. With the exception of the initial variables, I’ll be organising the sections by function. First showing you the code and then explaining the logic.

Ready? Let’s get right to it!

Step 2: Setting Up Our Variables

Let’s set up our variables and take a look at each one.

const PUZZLE_DIFFICULTY = 4;
const PUZZLE_HOVER_TINT = '#009900';

var _canvas;
var _stage;

var _img;
var _pieces;
var _puzzleWidth;
var _puzzleHeight;
var _pieceWidth;
var _pieceHeight;
var _currentPiece;
var _currentDropPiece;

var _mouse;

First we have a couple of constants: PUZZLE_DIFFICULTY and PUZZLE_HOVER_TINT. The PUZZLE_DIFFICULTY constant holds the number of pieces in our puzzle. In this application, the rows and columns always match, so by setting PUZZLE_DIFFICULTY to 4, we get 16 puzzle pieces in total. Increasing this increases the difficulty of the puzzle.

Next is a series of variables:

_canvas and _stage will hold a reference to the canvas and to its drawing context, respectively. We do this so we don’t have to write out the entire query each time we use them. And we’ll be using them a lot!
_img will be a reference to the loaded image, which we will be copying pixels from throughout the application.
_puzzleWidth, _puzzleHeight, _pieceWidth, and _pieceHeight will be used to store the dimensions of both the entire puzzle and each individual puzzle piece. We set these once to prevent calculating them over and over again each time we need them.
_currentPiece holds a reference to the piece currently being dragged.
_currentDropPiece holds a reference to the piece currently in position to be dropped on. (In the demo, this piece is highlighted green.)
_mouse is a reference that will hold the mouse’s current x and y position. This gets updated when the puzzle is clicked to determine which piece is touched, and when a piece is being dragged to determine what piece it’s hovering over.

Now, on to our functions.

Step 3: The `init()` Function

function init(){
    _img = new Image();
    _img.addEventListener('load',onImage,false);
    _img.src = "mke.jpg";
}

The first thing we want to do in our application is to load the image for the puzzle. The image object is first instantiated and set to our _img variable. Next, we listen for the load event which will then fire our onImage() function when the image has finished loading. Lastly we set the source of the image, which triggers the load.

Step 4: The `onImage()` Function

function onImage(e){
    _pieceWidth = Math.floor(_img.width / PUZZLE_DIFFICULTY)
    _pieceHeight = Math.floor(_img.height / PUZZLE_DIFFICULTY)
    _puzzleWidth = _pieceWidth * PUZZLE_DIFFICULTY;
    _puzzleHeight = _pieceHeight * PUZZLE_DIFFICULTY;
    setCanvas();
    initPuzzle();
}

Now that the image is successfully loaded, we can set the majority of the variables declared earlier. We do this here because we now have information about the image and can set our values appropriately.

The first thing we do is calculate the size of each puzzle piece. We do this by dividing the PUZZLE_DIFFICULTY value by the width and height of the loaded image. We also trim the fat off of the edges to give us some nice even numbers to work with and assure that each piece can appropriately swap ‘slots’ with others.

Next we use our new puzzle piece values to determine the total size of the puzzle and set these values to _puzzleWidth and _puzzleHeight.

Lastly, we call off a few functions – setCanvas() and initPuzzle().

Step 5: The `setCanvas()` Function

function setCanvas(){
    _canvas = document.getElementById('canvas');
    _stage = _canvas.getContext('2d');
    _canvas.width = _puzzleWidth;
    _canvas.height = _puzzleHeight;
    _canvas.style.border = "1px solid black";
}

Now that our puzzle values are complete, we want to set up our canvas element. First we set our _canvas variable to reference our canvas element, and _stage to reference its context.

Now we set the width and height of our canvas to match the size of our trimmed image, followed by applying some simple styles to create a black border around our canvas to display the bounds of our puzzle.

Step 6: The `initPuzzle()` Function

function initPuzzle(){
    _pieces = [];
    _mouse = {x:0,y:0};
    _currentPiece = null;
    _currentDropPiece = null;
    _stage.drawImage(_img, 0, 0, _puzzleWidth, _puzzleHeight, 0, 0, _puzzleWidth, _puzzleHeight);
    createTitle("Click to Start Puzzle");
    buildPieces();
}

Here we initialize the puzzle. We set this function up in such a way that we can call it again later when we want to replay the puzzle. Anything else that needed to be set prior to playing will not need to be set again.

First we set _pieces as an empty array and create the _mouse object, which will hold our mouse position throughout the application. Next we set the _currentPiece and _currentPieceDrop to null. (On the first play these values would already be null, but we want to make sure they get reset when replaying the puzzle.)

Finally, it’s time to draw! First we draw the entire image to display to the player what they will be creating. After that we create some simple instructions by calling our createTitle() function.

Step 7: The `createTitle()` Function

function createTitle(msg){
    _stage.fillStyle = "#000000";
    _stage.globalAlpha = .4;
    _stage.fillRect(100,_puzzleHeight - 40,_puzzleWidth - 200,40);
    _stage.fillStyle = "#FFFFFF";
    _stage.globalAlpha = 1;
    _stage.textAlign = "center";
    _stage.textBaseline = "middle";
    _stage.font = "20px Arial";
    _stage.fillText(msg,_puzzleWidth / 2,_puzzleHeight - 20);
}

Here we create a fairly simple message that instructs the user to click the puzzle to begin.
Our message will be a semi-transparent rectangle that will serve as the background of our text. This allows the user to see the image behind it and also assures our white text will be legible on any image

We simply set fillStyle to black and globalAlpha to .4, before filling in a short black rectangle at the bottom of the image.

Since globalAlpha affects the entire canvas, we need to set it back to 1 (opaque) before drawing the text. To set up our title, we set the textAlign to ‘center’ and the textBaseline to 'middle'. We can also apply some font properties.

To draw the text, we use the fillText() method. We pass in the msg variable and place it at the horizontal center of the canvas, and the vertical center of the rectangle.

Step 8: The `buildPieces()` Function

function buildPieces(){
    var i;
    var piece;
    var xPos = 0;
    var yPos = 0;
    for(i = 0;i < PUZZLE_DIFFICULTY * PUZZLE_DIFFICULTY;i++){
        piece = {};
        piece.sx = xPos;
        piece.sy = yPos;
        _pieces.push(piece);
        xPos += _pieceWidth;
        if(xPos >= _puzzleWidth){
            xPos = 0;
            yPos += _pieceHeight;
        }
    }
    document.onmousedown = shufflePuzzle;
}

Finally it’s time to build the puzzle!

We do this by building an object for each piece. These objects will not be responsible for rendering to the canvas, but rather to merely hold references on what to draw and where. That being said, let’s get to it.

First off, let’s declare a few variables that we’ll be reusing through the loop. We want to set up the loop to iterate through the number of puzzle pieces we need. We get this value by multiplying PUZZLE_DIFFICULTY by itself – so in this case we get 16.

In the loop:

    for(i = 0;i < PUZZLE_DIFFICULTY * PUZZLE_DIFFICULTY;i++){
        piece = {};
        piece.sx = xPos;
        piece.sy = yPos;
        _pieces.push(piece);
        xPos += _pieceWidth;
        if(xPos >= _puzzleWidth){
            xPos = 0;
            yPos += _pieceHeight;
        }
    }

Start by creating an empty piece object. Next add the sx and sy properties to the object. In the first iteration, these values are 0 and represent the point in our image where we will begin to draw from. Now push it to the _pieces[] array. This object will also contain the properties xPos and yPos, which will tell us the current position in the puzzle where the piece should be drawn. We’ll be shuffling the objects before its playable so these values don’t need to be set quite yet.

The last thing we do in each loop is increase the local variable xPos by _pieceWidth. Before continuing on with the loop, we determine if we need to step down to the next row of pieces by checking whether xPos is beyond the width of the puzzle. If so, we reset xPos back to 0 and increase yPos by _pieceHeight.

Now we have our puzzle pieces all stored away nicely in our _pieces array. At this point the code finally stops executing and waits for the user to interact. We set a click listener to the document to fire the shufflePuzzle() function when triggered, which will begin the game.

Step 9: The `shufflePuzzle()` Function

function shufflePuzzle(){
    _pieces = shuffleArray(_pieces);
    _stage.clearRect(0,0,_puzzleWidth,_puzzleHeight);
    var i;
    var piece;
    var xPos = 0;
    var yPos = 0;
    for(i = 0;i < _pieces.length;i++){
        piece = _pieces[i];
        piece.xPos = xPos;
        piece.yPos = yPos;
        _stage.drawImage(_img, piece.sx, piece.sy, _pieceWidth, _pieceHeight, xPos, yPos, _pieceWidth, _pieceHeight);
        _stage.strokeRect(xPos, yPos, _pieceWidth,_pieceHeight);
        xPos += _pieceWidth;
        if(xPos >= _puzzleWidth){
            xPos = 0;
            yPos += _pieceHeight;
        }
    }
    document.onmousedown = onPuzzleClick;
}

function shuffleArray(o){
    for(var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
    return o;
}

First things first: shuffle the _pieces[] array. I’m using a nice utility function here that will shuffle the indices of the array passed into it. The explanation of this function is beyond the topic of this tutorial so we’ll move on, knowing that we have successfully shuffled our pieces. (For a basic introduction to shuffling, take a look at this tutorial.)

Let’s first clear all graphics drawn to the canvas to make way for drawing our pieces. Next, set up the array similar to how we did when first creating our piece objects.

In the loop:

    for(i = 0;i < _pieces.length;i++){
        piece = _pieces[i];
        piece.xPos = xPos;
        piece.yPos = yPos;
        _stage.drawImage(_img, piece.sx, piece.sy, _pieceWidth, _pieceHeight, xPos, yPos, _pieceWidth, _pieceHeight);
        _stage.strokeRect(xPos, yPos, _pieceWidth,_pieceHeight);
        xPos += _pieceWidth;
        if(xPos >= _puzzleWidth){
            xPos = 0;
            yPos += _pieceHeight;
        }
    }

First of all, use the i variable to set up our reference to the current piece object in the loop. Now we populate the xPos and yPos properties I mentioned earlier, which will be 0 in our first iteration.

Now, at long last, we draw our pieces.

The first parameter of drawImage() assigns the source of the image we want to draw from. Then use the piece objects sx and sy properties, along with _pieceWidth and _pieceHeight, to populate the parameters that declare the area of the image in which to draw from. The last four parameters set the area of the canvas where we want to draw. We use the xPos and yPos values that we are both building in the loop and assigning to the object.

Immediately after this we draw a quick stroke around the piece to give it a border, which will separate it nicely from the other pieces.

Now we wait for the user to grab a piece by setting another click listener. This time it will fire an onPuzzleClick() function.

Step 10: The `onPuzzleClick()` Function

function onPuzzleClick(e){
    if(e.layerX || e.layerX == 0){
        _mouse.x = e.layerX - _canvas.offsetLeft;
        _mouse.y = e.layerY - _canvas.offsetTop;
    }
    else if(e.offsetX || e.offsetX == 0){
        _mouse.x = e.offsetX - _canvas.offsetLeft;
        _mouse.y = e.offsetY - _canvas.offsetTop;
    }
    _currentPiece = checkPieceClicked();
    if(_currentPiece != null){
        _stage.clearRect(_currentPiece.xPos,_currentPiece.yPos,_pieceWidth,_pieceHeight);
        _stage.save();
        _stage.globalAlpha = .9;
        _stage.drawImage(_img, _currentPiece.sx, _currentPiece.sy, _pieceWidth, _pieceHeight, _mouse.x - (_pieceWidth / 2), _mouse.y - (_pieceHeight / 2), _pieceWidth, _pieceHeight);
        _stage.restore();
        document.onmousemove = updatePuzzle;
        document.onmouseup = pieceDropped;
    }
}

We know that the puzzle was clicked; now we need to determine what piece was clicked on. This simple conditional will get us our mouse position on all modern desktop browsers that support canvas, using either e.layerX and e.layerY or e.offsetX and e.offsetY. Use these values to update our _mouse object by assigning it an x and a y property to hold the current mouse position – in this case, the position where it was clicked.

In line 112 we then immediately set _currentPiece to the returned value from our checkPieceClicked() function. We separate this code because we want to use it later when dragging the puzzle piece. I’ll explain this function in the next step.

If the value returned was null, we simply do nothing, as this implies that the user didn’t actually click on a puzzle piece. However, if we do retrieve a puzzle piece, we want to attach it to the mouse and fade it out a bit to reveal the pieces underneath. So how do we do this?

First we clear the canvas area where the piece sat before we clicked it. We use clearRect() once again, but in this case we pass in only the area obtained from the _currentPiece object. Before we redraw it, we want to save() the context of the canvas before proceeding. This will assure that anything we draw after saving will not simply draw over anything in its way. We do this because we’ll be slightly fading the dragged piece and want to see the pieces under it. If we didn’t call save(), we’d just draw over any graphics in the way – faded or not.

Now we draw the image so its center is positioned at the mouse pointer. The first 5 parameters of drawImage will always be the same throughout the application. When clicking, the next two parameters will be updated to center itself to the pointer of the mouse. The last two parameters, the width and height to draw, will also never change.

Lastly we call the restore() method. This essentially means we are done using the new alpha value and want to restore all properties back to where they were. To wrap up this function we add two more listeners. One for when we move the mouse (dragging the puzzle piece), and one for when we let go (drop the puzzle piece).

Step 11: The `checkPieceClicked()` Function

function checkPieceClicked(){
    var i;
    var piece;
    for(i = 0;i < _pieces.length;i++){
        piece = _pieces[i];
        if(_mouse.x < piece.xPos || _mouse.x > (piece.xPos + _pieceWidth) || _mouse.y < piece.yPos || _mouse.y > (piece.yPos + _pieceHeight)){
            //PIECE NOT HIT
        }
        else{
            return piece;
        }
    }
    return null;
}

Now we need to backtrack a bit. We were able to determine what piece was clicked, but how did we do it? It’s pretty simple actually. What we need to do is loop through all of the puzzle pieces and determine if the click was within the bounds of any of our objects. If we find one, we return the matched object and end the function. If we find nothing, we return null.

Step 12: The `updatePuzzle()` Function

function updatePuzzle(e){
    _currentDropPiece = null;
    if(e.layerX || e.layerX == 0){
        _mouse.x = e.layerX - _canvas.offsetLeft;
        _mouse.y = e.layerY - _canvas.offsetTop;
    }
    else if(e.offsetX || e.offsetX == 0){
        _mouse.x = e.offsetX - _canvas.offsetLeft;
        _mouse.y = e.offsetY - _canvas.offsetTop;
    }
    _stage.clearRect(0,0,_puzzleWidth,_puzzleHeight);
    var i;
    var piece;
    for(i = 0;i < _pieces.length;i++){
        piece = _pieces[i];
        if(piece == _currentPiece){
            continue;
        }
        _stage.drawImage(_img, piece.sx, piece.sy, _pieceWidth, _pieceHeight, piece.xPos, piece.yPos, _pieceWidth, _pieceHeight);
        _stage.strokeRect(piece.xPos, piece.yPos, _pieceWidth,_pieceHeight);
        if(_currentDropPiece == null){
            if(_mouse.x < piece.xPos || _mouse.x > (piece.xPos + _pieceWidth) || _mouse.y < piece.yPos || _mouse.y > (piece.yPos + _pieceHeight)){
                //NOT OVER
            }
            else{
                _currentDropPiece = piece;
                _stage.save();
                _stage.globalAlpha = .4;
                _stage.fillStyle = PUZZLE_HOVER_TINT;
                _stage.fillRect(_currentDropPiece.xPos,_currentDropPiece.yPos,_pieceWidth, _pieceHeight);
                _stage.restore();
            }
        }
    }
    _stage.save();
    _stage.globalAlpha = .6;
    _stage.drawImage(_img, _currentPiece.sx, _currentPiece.sy, _pieceWidth, _pieceHeight, _mouse.x - (_pieceWidth / 2), _mouse.y - (_pieceHeight / 2), _pieceWidth, _pieceHeight);
    _stage.restore();
    _stage.strokeRect( _mouse.x - (_pieceWidth / 2), _mouse.y - (_pieceHeight / 2), _pieceWidth,_pieceHeight);
}

Now back to the dragging. We call this function when the user moves the mouse. This is the biggest function of the application as it’s doing several things. Let’s begin. I’ll break it down as we go.

    _currentDropPiece = null;
    if(e.layerX || e.layerX == 0){
        _mouse.x = e.layerX - _canvas.offsetLeft;
        _mouse.y = e.layerY - _canvas.offsetTop;
    }
    else if(e.offsetX || e.offsetX == 0){
        _mouse.x = e.offsetX - _canvas.offsetLeft;
        _mouse.y = e.offsetY - _canvas.offsetTop;
    }

Start by setting _currentDropPiece to null. We need to reset this back to null on update because of the chance that our piece was dragged back to its home. We don’t want the previous _currentDropPiece value hanging around. Next we set the _mouse object the same way we did on click.

    _stage.clearRect(0,0,_puzzleWidth,_puzzleHeight);

Here we need to do clear all graphics on the canvas. We essentially need to redraw the puzzle pieces because the object being dragged on top will effect their appearance. If we didn’t do this, we’d see some very strange results following the path of our dragged puzzle piece.

    var i;
    var piece;
    for(i = 0;i < _pieces.length;i++){

Begin by setting up our usual pieces loop.

In the Loop:

        piece = _pieces[i];
        if(piece == _currentPiece){
            continue;
        }

Create our piece reference as usual. Next check if the piece we are currently referencing is the same as piece we are dragging. If so, continue the loop. This will keep the dragged piece’s home slot empty.

        _stage.drawImage(_img, piece.sx, piece.sy, _pieceWidth, _pieceHeight, piece.xPos, piece.yPos, _pieceWidth, _pieceHeight);
        _stage.strokeRect(piece.xPos, piece.yPos, _pieceWidth,_pieceHeight);

Moving on, redraw the puzzle piece using its properties exactly the same way we did when first drew them. You’ll need to draw the border as well.

        if(_currentDropPiece == null){
            if(_mouse.x < piece.xPos || _mouse.x > (piece.xPos + _pieceWidth) || _mouse.y < piece.yPos || _mouse.y > (piece.yPos + _pieceHeight)){
                //NOT OVER
            }
            else{
                _currentDropPiece = piece;
                _stage.save();
                _stage.globalAlpha = .4;
                _stage.fillStyle = PUZZLE_HOVER_TINT;
                _stage.fillRect(_currentDropPiece.xPos,_currentDropPiece.yPos,_pieceWidth, _pieceHeight);
                _stage.restore();
            }
        }

Since we have a reference to each object in the loop, we can also use this opportunity to check if the dragged piece is on top of it. We do this because we want to give the user feedback on what piece it can be dropped on. Let’s dig into that code now.

First we want to see if this loop has already produced a drop target. If so, we don’t need to bother since only one drop target can be possible and any given mouse move. If not, _currentDropPiece will be null and we can proceed into the logic. Since our mouse is in the middle of the dragged piece, all we really need to do is determine what other piece our mouse is over.

Next, use our handy checkPieceClicked() function to determine whether the mouse is hovering over the current piece object in the loop. If so, we set the _currentDropPiece variable and draw a tinted box over the puzzle piece, indicating that it is now the drop target.

Remember to save() and restore(). Otherwise you’d get the tinted box and not the image underneath.

Out of the Loop:

    _stage.save();
    _stage.globalAlpha = .6;
    _stage.drawImage(_img, _currentPiece.sx, _currentPiece.sy, _pieceWidth, _pieceHeight, _mouse.x - (_pieceWidth / 2), _mouse.y - (_pieceHeight / 2), _pieceWidth, _pieceHeight);
    _stage.restore();
    _stage.strokeRect( _mouse.x - (_pieceWidth / 2), _mouse.y - (_pieceHeight / 2), _pieceWidth,_pieceHeight);

Last but not least we need to redraw the dragged piece. The code is the same as when we first clicked it, but the mouse has moved so its position will be updated.

Step 13: The `pieceDropped()` Function

function pieceDropped(e){
    document.onmousemove = null;
    document.onmouseup = null;
    if(_currentDropPiece != null){
        var tmp = {xPos:_currentPiece.xPos,yPos:_currentPiece.yPos};
        _currentPiece.xPos = _currentDropPiece.xPos;
        _currentPiece.yPos = _currentDropPiece.yPos;
        _currentDropPiece.xPos = tmp.xPos;
        _currentDropPiece.yPos = tmp.yPos;
    }
    resetPuzzleAndCheckWin();
}

OK, the worst is behind us. We are now successfully dragging a puzzle piece and even getting visual feedback on where it will be dropped. Now all that is left is to drop the piece. Let’s first remove the listeners right away since nothing is being dragged.

Next, check that _currentDropPiece is not null. If it is, this means that we dragged it back to the piece’s home area and not over another slot. If it’s not null, we continue with the function.

What we do now is simply swap the xPos and yPos of each piece. We make a quick temp object as a buffer to hold one of the object’s values in the swapping process. At this point, the two pieces both have new xPos and yPos values, and will snap into their new homes on the next draw. That’s what we’ll do now, simultaneously checking whether the game has been won.

Step 14: The `resetPuzzleAndCheckWin()` Function

function resetPuzzleAndCheckWin(){
    _stage.clearRect(0,0,_puzzleWidth,_puzzleHeight);
    var gameWin = true;
    var i;
    var piece;
    for(i = 0;i < _pieces.length;i++){
        piece = _pieces[i];
        _stage.drawImage(_img, piece.sx, piece.sy, _pieceWidth, _pieceHeight, piece.xPos, piece.yPos, _pieceWidth, _pieceHeight);
        _stage.strokeRect(piece.xPos, piece.yPos, _pieceWidth,_pieceHeight);
        if(piece.xPos != piece.sx || piece.yPos != piece.sy){
            gameWin = false;
        }
    }
    if(gameWin){
        setTimeout(gameOver,500);
    }
}

Once again, clear the canvas and set up a gameWin variable, setting it to true by default. Now proceed with our all-too-familiar pieces loop.

The code here should look familiar so we won’t go over it. It simply draws the pieces back into their original or new slots. Within this loop, we want to see if each piece is being drawn in its winning position. This is simple: we check to see if our sx and sy properties match up with xPos and yPos. If not, we know we couldn’t possibly win the puzzle and set gameWin to false. If we made it through the loop with everyone in their winning places, we set up a quick timeout to call our gameOver() method. (We set a timeout so the screen doesn’t change so drastically upon dropping the puzzle piece.)

Step 15: The `gameOver()` Function

function gameOver(){
    document.onmousedown = null;
    document.onmousemove = null;
    document.onmouseup = null;
    initPuzzle();
}

This is our last function! Here we just remove all listeners and call initPuzzle(), which resets all necessary values and waits for the user to play again.

Conclusion

Click here to see the final result.

As you can see, you can do a lot of new creative things in HTML5 using selected bitmap areas of loaded images and drawing. You can easily extend this application by adding scoring and perhaps even a timer to give it more gameplay. Another idea would be to increase the difficulty and select a different image in the gameOver() function, giving the game levels.

Vector Regions: Hiding From a Field of View

Kah Shiu Chong — Mon, 30 Jan 2012 18:00:20 +0000

This entry is part 2 of 2 in the series Vector Regions

Previously, we explored the approach of using vector regions to implement the field of view of a turret. Troops approached the turret on open field and no hindrances lay between them. Now suppose there is a hinderance, say a wall, that obscures the visibility of troop from turret; how should we implment that? This tutorial suggest an approach to tackle this issue.

Final Result Preview

Let’s take a look at the final result we will be working towards. Click on the turret at the bottom of the stage to start the simulation.

Step 1: The Basic Concept

So here’s what we try to achieve in this tutorial. Observe the image above. The turret can see the trooper unit if it’s within turret’s field of view (top). Once we place a wall in between the turret and the trooper, the trooper’s visibility is shielded from turret.

Step 2: Recap

First of all, let’s do a little revision. Say the vector of turret’s line of sight is P and the vector from turret to trooper is Q. The trooper is visible to the turret if:

Angle between P and Q is less than the angle of view (in this case 30° on both sides)
Magnitude of P is more than Q

Step 3: Approach Overview

Above is the pseudo-code for the approach we shall undertake. Determining whether the trooper is within the turret’s field of view (FOV) is explained in Step 2. Now let’s get to determining whether the trooper is behind a wall.

We shall use vector operations to achieve this. I’m sure by the mention of this, the dot product and cross product quickly come to mind. We shall make a little detour to revise these two vector operations just to make sure everyone’s able to follow.

Step 4: Dot and Cross Product between Vectors

Let’s revisit the vector operations: dot product and cross product. This is not a Math class, and we have covered these in more detail before, but still, it’s good to refresh our memory on the workings so I’ve included the image above. The diagram shows “B dot A” operation (top right corner) and “B cross A” operation (bottom right corner).

More important are the equations of these operations. Take a look at the image below. |A| and |B| refer to the scalar magnitude of each vector – the length of the arrow. Note that the dot product relates to the cosine of the angle between the vectors, and the cross product relates to the sine of the angle between the vectors.

Step 5: Sine and Cosine

Drilling further into the topic, Trigonometry comes to play: the sine and cosine. Im sure these graphs rekindle fond memories (or agonies). Do click on the buttons on Flash presentation below to view those graphs with different units (degrees or radians).

Note that these wave forms are continuous and repetitive. For example, you can cut and paste the sine wave into the negative range to get something like below.

Step 6: Summary of Values

Degree	Sine of degree	Cosine of degree
-180	0	-1
-90	-1	0
0	0	1
90	1	0
180	0	-1

The table above shows the cosine and sine values corresponding to specific degrees. You’ll notice the positive sine graph covers 0° to 180° range and positive cosine graph covers -90° to 90°. We shall relate these values to the dot product and cross product later.

Step 7: Geometric Interpretation of Dot Product

So how can all these be useful? To cut to the chase, the dot product is a measure of how parallel the vectors are whereas cross product is a measure of how orthogonal the vectors are.

Lets deal with the dot product first. Recall the formula for the dot product, as mentioned in Step 4. We can determine the whether result is positive or negative just by looking at the cosine of the angle sandwiched between the two vectors. Why? Because the magnitude of a vector is always positive. The only parameter left to dictate the sign of the result is the cosine of the angle.

Again, recall that positive cosine graph covers -90° – 90°, as in Step 6. Therefore, the dot product of A with any of the vecotrs L, M, N, O above will produce a positive value, because the angle wedged between A and any of those vectors is within -90° and 90°! (To be precise, the positive range is more like -89° – 89° because both -90° and 90° produces cosine values of 0, which brings us to the next point.) The dot product between A and P (given P is perpendicular to A) will produce 0. The rest I think you can already guess: the dot product of A with K, R, or Q will produce a negative value.

By using the dot product, we can split the area on our stage into two regions. The dot product of the vector below with any point that lies inside of the "x"-marked region will produce a positive value, whereas the dot product with those in the "o"-marked region will produce negative values.

Step 8: Geometric Interpretation of Cross Product

Let’s move on to the cross product. Remember that the cross product relates to the sine of angle sandwiched between the two vectors. The positive sine graph covers a range of 0° to 180°; the negative range covers 0° to -180°. The image below summarises these points.

So, looking again at the diagram from Step 7, the cross product between A and K, L, or M will produce positive values, while the cross product between A and N, O, P, or Q will produce negative values. The cross product between A and R will produce 0, as sine of 180° is 0.

To clarify further, the cross product of vector between any point that lies in the "o"-marked region below will be positive, whereas those in "x"-marked region will be negative.

One point to take note of is that, unlike the dot product, the cross product is sequence sensitive. This means results of AxB and BxA will be different in terms of direction. So as we write our program, we need to be precise when choosing which vector to be compared against.

(Note: These concepts explained apply to 2D Cartesian space.)

Step 9: Demo Application

To reinforce your understanding, I’ve placed here a little application to let you play with. Click on the blue ball at the top of stage and drag it around. As you move, the text box value will update depending on which operation you have chosen (dot or cross product between the static arrow with the one you control).

You may observe one oddity with the cross product’s inverted direction. The region on top is negative and the bottom is positive, in contrast with our explanation in previous step. Well, this is due to the y-axis being inverted in Flash coordinate space compared to Cartesian coordinate space; it points down, whereas traditionally mathematicians take it as pointing upwards.

Step 10: Defining Regions

Now that you have understood the concept of regions, let’s do a little practice. We shall divide our space into four quadrants: A1, A2, B1, B2.

I’ve tabulated the results to check for below. “Vector” here refers to the arrow in the image above. “Point” refers to any coordinate in the specified region. The vector divides the stage into four main areas, where the dividers (dotted lines) extend to infinity.

Region	Vector on diagram cross product with point	Vector on diagram dot product with point
A1	(+), because of Flash coordinate space	(+)
A2	(+)	(-)
B1	(-), because of Flash coordinate space	(+)
B2	(-)	(-)

Step 11: Regions Divided

Here’s the Flash presentation showcasing the ideas as explained in step 10. Right click on stage to pop the context menu and select the region you would like to see highlighted.

Step 12: Implementation

Here’s the ActionScript implementation of the concept explained in Step 10. Feel free to view the whole piece of code in the source download, as AppLine.as.

//highlighting color according to user selection
private function color():void
{
	//each ball on stage is checked against conditions for selected case
	for each (var item:Ball in sp)
	{
		var vec1:Vector2D = new Vector2D(item.x - stage.stageWidth * 0.5, item.y - stage.stageHeight * 0.5);

		if (select == 0) {
			if (vec.vectorProduct(vec1) > 0) item.col = 0xFF9933;
			else item.col = 0x334455;
		}
		else if (select == 1){
			if (vec.dotProduct(vec1) > 0) item.col = 0xFF9933;
			else item.col = 0x334455;
		}
		else if (select == 2){
			if (vec.vectorProduct(vec1) > 0 && vec.dotProduct(vec1) > 0) item.col = 0xFF9933;
			else item.col = 0x334455;
		}
		else if (select == 3){
			if (vec.vectorProduct(vec1) > 0 &&vec.dotProduct(vec1) <0) item.col = 0xFF9933;
			else item.col = 0x334455;
		}
		else if (select == 4){
			if (vec.vectorProduct(vec1) < 0 &&vec.dotProduct(vec1) > 0) item.col = 0xFF9933;
			else item.col = 0x334455;
		}
		else if (select == 5){
			if (vec.vectorProduct(vec1) < 0 &&vec.dotProduct(vec1) < 0) item.col = 0xFF9933;
			else item.col = 0x334455;
		}
		item.draw();
	}
}
//swapping case according to user selction
private function swap(e:ContextMenuEvent):void
{
	if (e.target.caption == "VectorProduct")	select = 0;
	else if (e.target.caption == "DotProduct")	select = 1;
	else if (e.target.caption == "RegionA1")	select = 2;
	else if (e.target.caption == "RegionA2")	select = 3;
	else if (e.target.caption == "RegionB1")	select = 4;
	else if (e.target.caption == "RegionB2")	select = 5;
}

Step 13: Shielded Visibility

Having understood the geometrical interpretations of dot product and cross product, we shall apply it to our scenario. The Flash presentation above shows variations of the same scenario and summarises the conditions applied to a trooper shielded by a wall yet inside the turret’s FOV. You can scroll through the frames using the arrow buttons.

The following explanations are based upon the 2D Flash coordinate space. In Frame 1, a wall is placed between the turret and the trooper. Let A and B be the vectors from the turret to the tail and the head of the wall’s vector, respectively. Let C be the vector of the wall, and D be the vector from the tail of the wall to the trooper. Finally, let Q be the vector from the turret to the trooper.

I have tabulated the resulting conditions below.

Location	Cross Product
Troop is in front of wall	C x D > 0
Troop is behind wall	C x D < 0

This is not the only condition applicable, because we also need to restrict the trooper to within the dotted lines on both sides. Check out frames 2-4 to see the next set of conditions.

Location	Cross Product
Troop is within the sides of the wall.	Q x A < 0, Q x B > 0
Troop is to the left of the wall	Q x A > 0, Q x B > 0
Troop is to the right of the wall	Q x A < 0, Q x B < 0

I think my fellow readers can now choose the appropriate conditions to determine whether the trooper is hidden from view or not. Bear in mind that this set of conditions are evaluated after we found troop to be within turret’s FOV (refer to step 3).

Step 14: Actionscript Implementation

Here’s the ActionScript implementation of the concepts explained in Step 13. The image above shows the initial vector of the wall, C. Click and drag the red button below and move it around to see the area shielded. You may view the full source code in HiddenSector.as.

Okay, I hope you have experimented with the red ball, and if you are observant enough you might have noticed an error. Note there is no area shielded as the red button moves to the left of the other end of the wall, thus inverting the wall vector to point to left instead of right. The solution is in the next step.

However, before that let’s look at an important ActionScript snippet here in HiddenSector.as:

private function highlight():void {
	var lineOfSight:Vector2D = new Vector2D(0, -50)
	var sector:Number = Math2.radianOf(30);

	for each (var item:Ball in sp) {
		var turret_sp:Vector2D = new Vector2D(item.x - turret.x, item.y - turret.y); //Q

		if (Math.abs(lineOfSight.angleBetween(turret_sp)) < sector) {

			var wall:Vector2D = new Vector2D(wall2.x - wall1.x, wall2.y - wall1.y); //C
			var turret_wall1:Vector2D = new Vector2D(wall1.x - turret.x, wall1.y - turret.y); //A
			var turret_wall2:Vector2D = new Vector2D(wall2.x - turret.x, wall2.y - turret.y); //B
			var wall_sp:Vector2D = new Vector2D (item.x - wall1.x, item.y - wall1.y); //D

			if ( wall.vectorProduct (wall_sp) < 0 // C x D
			&& turret_sp.vectorProduct(turret_wall1) < 0 // Q x A
			&& turret_sp.vectorProduct(turret_wall2) > 0 // Q x B
			) { item.col = 0xcccccc }
			else { item.col = 0; }
			item.draw();
		}
	}
}

Step 15: Direction of Wall

To solve this issue, we need to know whether the wall vector is pointing to the left or the right. Let’s say we have a reference vector, R, that’s always pointing to the right.

Direction of vector	Dot Product
Wall is pointing to right (same side as R)	w . R > 0
Wall is pointing to left (opposite side of R)	w . R < 0

Of course, there are other ways around this problem but I figure it’s an opportunity to utilise concepts expressed in this tutorial, so there you go.

Step 16: Actionscript Tweaks

Below is a Flash presentation which implements the correction explained in Step 15. After you have played with it, scroll down to check the ActionScript tweaks.

The changes from the previous implementation are highlighted. Also, the sets of condition are redefined according to the wall direction:

private function highlight():void {
	var lineOfSight:Vector2D = new Vector2D(0, -50);
	var sector:Number = Math2.radianOf(30);
	var pointToRight:Vector2D = new Vector2D(10, 0); //added in second version

	for each (var item:Ball in sp) {
		var turret_sp:Vector2D = new Vector2D(item.x - turret.x, item.y - turret.y); //Q

		if (Math.abs(lineOfSight.angleBetween(turret_sp)) < sector) {

			var wall:Vector2D = new Vector2D(wall2.x - wall1.x, wall2.y - wall1.y); //C
			var turret_wall1:Vector2D = new Vector2D(wall1.x - turret.x, wall1.y - turret.y); //A
			var turret_wall2:Vector2D = new Vector2D(wall2.x - turret.x, wall2.y - turret.y); //B
			var wall_sp:Vector2D = new Vector2D (item.x - wall1.x, item.y - wall1.y); //D

			var sides: Boolean; //switches according to wall direction
			if (pointToRight.dotProduct(wall) > 0) {
				sides = wall.vectorProduct (wall_sp) < 0 // C x D
				&& turret_sp.vectorProduct(turret_wall1) < 0 // Q x A
				&& turret_sp.vectorProduct(turret_wall2) > 0 // Q x B
			}
			else {
				sides = wall.vectorProduct (wall_sp) > 0 // C x D
				&& turret_sp.vectorProduct(turret_wall1) > 0 // Q x A
				&& turret_sp.vectorProduct(turret_wall2) < 0 // Q x B
			} 

			if (sides) { item.col = 0xcccccc }
			else { item.col = 0; }
			item.draw();
		}
	}
}

Check out the full source in HiddenSector2.as.

Step 17: Set Up the Wall

Now we shall patch our work onto Scene1.as from the previous tutorial. First, we shall set up our wall.

We initiate the variables,

public class Scene1_2 extends Sprite
{
	private var river:Sprite;
	private var wall_origin:Vector2D, wall:Vector2D; //added in second tutorial

	private var troops:Vector.<Ball>;
	private var troopVelo:Vector.<Vector2D>;

…then draw the wall for the first time,

public function Scene1_2() {
	makeTroops();
	makeRiver();
	makeWall(); //added in 2nd tutorial
	makeTurret();
	turret.addEventListener(MouseEvent.MOUSE_DOWN, start);
	function start ():void {
		stage.addEventListener(Event.ENTER_FRAME, move);
	}
}

private function makeWall():void {
	wall_origin = new Vector2D(200, 260); wall = new Vector2D(80, -40);
	graphics.lineStyle(2, 0);
	graphics.moveTo(wall_origin.x, wall_origin.y);
	graphics.lineTo(wall_origin.x + wall.x , wall_origin.y+wall.y);
}

…and redraw on each frame, because the graphics.clear() call is somewhere in behaviourTurret():

//added in 2nd tutorial
private function move(e:Event):void {
	behaviourTroops();
	behaviourTurret();
	redrawWall();
}

//added in second tutorial
private function redrawWall():void {
	graphics.lineStyle(2, 0);
	graphics.moveTo(wall_origin.x, wall_origin.y);
	graphics.lineTo(wall_origin.x + wall.x , wall_origin.y+wall.y);
}

Step 18: Interaction with Wall

Troops will interact with the wall as well. As they collide with the wall, they will slide along the wall. I will not try to go into details of this as it has been documented extensively in Collision Reaction Between a Circle and a Line Segment. I encourage readers to check that out for further explanation.

The following snippet lives in the function behaviourTroops().

//Version 2
//if wading through river, slow down
//if collide with wall, slide through
//else normal speed
var collideWithRiver:Boolean = river.hitTestObject(troops[i])

var wall_norm:Vector2D = wall.rotate(Math2.radianOf( -90));
var wall12Troop:Vector2D = new Vector2D(troops[i].x - wall_origin.x, troops[i].y - wall_origin.y);
var collideWithWall:Boolean = troops[i].rad > Math.abs(wall12Troop.projectionOn(wall_norm))
&& wall12Troop.getMagnitude() < wall.getMagnitude()
&& wall12Troop.dotProduct(wall) > 0;

if (collideWithRiver) troops[i].y += troopVelo[i].y*0.3;
else if (collideWithWall) {
	//reposition troop
	var projOnNorm:Vector2D = wall_norm.normalise(); projOnNorm.scale(troops[i].rad -1);
	var projOnWall:Vector2D = wall.normalise();
	projOnWall.scale(wall12Troop.projectionOn(wall));
	var reposition:Vector2D = projOnNorm.add(projOnWall);
	troops[i].x = wall_origin.x + reposition.x; troops[i].y = wall_origin.y + reposition.y;

	//slide through the wall
	var adjustment:Number = Math.abs(troopVelo[i].projectionOn(wall_norm));
	var slideVelo:Vector2D = wall_norm.normalise(); slideVelo.scale(adjustment);
	slideVelo = slideVelo.add(troopVelo[i])
	troops[i].x += slideVelo.x; troops[i].y += slideVelo.y;
}
else troops[i].y += troopVelo[i].y

Step 19: Checking Troopers’ "Hidden-ness"

Finally, we come to the meat of this tutorial: setting up the condition and checking whether troopers are behind the wall and therefore shielded from turret visibility. I have highlighted the important patch codes:

//check if enemy is within sight
//1. Within sector of view
//2. Within range of view
//3. Closer than current closest enemy
var c1:Boolean = Math.abs(lineOfSight.angleBetween(turret2Item)) < Math2.radianOf(sectorOfSight) ;
var c2:Boolean = turret2Item.getMagnitude() < lineOfSight.getMagnitude();
var c3:Boolean = turret2Item.getMagnitude() < closestDistance;

//Checking whether troop is shielded by wall
var withinLeft:Boolean = turret2Item.vectorProduct(turret2wall1) < 0
var withinRight:Boolean = turret2Item.vectorProduct(turret2wall2) > 0
var behindWall:Boolean = wall.vectorProduct(wall12troop) < 0;
var shielded:Boolean = withinLeft && withinRight && behindWall

//if all conditions fulfilled, update closestEnemy
if (c1 && c2&& c3 && !shielded){
	closestDistance = turret2Item.getMagnitude();
	closestEnemy = item;
}

Check out the full code in Scene1_2.as.

Step 20: Lauch the Application

Finally, we can sit back and check out the patch in action. Hit Ctrl + Enter to see the results of your work. I have included a copy of the working Flash presentation below. Click on the turret at the bottom of the stage to start the simulation.

Activetuts+

Build an HTML5 MP3 Player With SoundManager 2 – Tuts+ Premium

Premium Preview

Read the Full Tutorial

Tuts+ Premium Membership

Circular Motion in AS3: Make One Moving Object Orbit Another

Final Result Preview

Step 1: The Orbiting Equation

Step 2: Writing the Equation in Code

Step 3: Transforming the Equation

Step 4: Practical Uses for the Equation

Conclusion

Review: Construct 2, a Drag and Drop HTML5 Game Maker

First Impressions

The First Game

My Conclusions

Extra Resources

Render an MP3 Audio Spectrum in Flash With computeSpectrum()

Final Result Preview

Step 1: Set Up Your Flash File

Step 2: Create the Document Class

Step 3: Document Class

Step 4: Handling the Sound Using Buttons

Step 5: Create Simple Animation

Step 6: What Is SoundMixer?

Step 7: What Is ByteArray?

Step 8: More Complex Animation

Step 9: Fill in the Gaps

Step 10: Try Something Different

Conclusion

Browser Extension: Arrange Tumblr Posts in Chronological Order

The Problem

How Can We Do This?

Rearranging the Posts

A NodeList Is Not an Array

Turning It Into a Browser Extension

Writing the Greasemonkey Script

Finishing Off

Quick Tip: How to Debug an AS3 Error #1203

Step 1: An Obligatory But Somewhat Useless Description of Error 1203

Step 2: A Busted Project

Step 3: What’s All This, Then?

Step 4: It’s as Simple As…

Step 5: …And That Is All

Best of Tuts+ in January 2012

Psdtuts+ — Photoshop Tutorials

Nettuts+ — Web Development Tutorials

Vectortuts+ — Illustrator Tutorials

Webdesigntuts+ — Web Design Tutorials

Phototuts+ — Photography Tutorials

Cgtuts+ — Computer Graphics Tutorials

Aetuts+ — After Effects Tutorials

Audiotuts+ — Audio & Production Tutorials

Activetuts+ — Flash, Flex & ActionScript Tutorials

Wptuts+ — WordPress Tutorials

Mobiletuts+ — Mobile Development Tutorials

Free Flash Debugger: Commando (With Premium Source Files)

See Commando in Action

Why Use Commando?

Configuration

Explore

Math

Hide

View

Set

Get

Probe

Remove

Add

Extend

Conclusion

Create an HTML5 Canvas Tile Swapping Puzzle

The Complete HTML5 Canvas Puzzle

Getting Started

Step 1: Creating the HTML Template

Step 2: Setting Up Our Variables

Step 3: The init() Function

Step 4: The onImage() Function

Step 5: The setCanvas() Function

Step 6: The initPuzzle() Function

Step 3: The `init()` Function

Step 4: The `onImage()` Function

Step 5: The `setCanvas()` Function

Step 6: The `initPuzzle()` Function

Step 7: The `createTitle()` Function

Step 8: The `buildPieces()` Function

Step 9: The `shufflePuzzle()` Function

Step 10: The `onPuzzleClick()` Function

Step 11: The `checkPieceClicked()` Function

Step 12: The `updatePuzzle()` Function

Step 13: The `pieceDropped()` Function

Step 14: The `resetPuzzleAndCheckWin()` Function

Step 15: The `gameOver()` Function