May 7, 2012
Posted on May 7, 2012 in Hints and Tips | 10 comments
Path following is a simple concept to grasp: the object moves from point A to point B to point C, and so on. But what if we want our object to follow the path of the player, like ghosts in racing games? In this tutorial, I’ll show you how to achieve this with waypoints in AS3.
Final Result Preview
Click the SWF, then use the arrow keys to move around. Press space to switch to the ghost, which will follow the path you’ve created.
The Logic Behind Path Following
Let’s suppose the player moves 4 units left and 2 units down from our point of origin. For our ghost to end up in the same location it will have to also move 4 units left and 2 units down from the same point of origin. Now let’s say our player is moving at a speed of 2; for the path following to remain accurate our ghost will also have a speed rate of 2.
What if our player decides to take a pause before continuing on? The obvious solution is for the ghost to keep track of the player’s exact position every tick – but this will involve storing a lot of data. Instead, what we’ll do is simply store data every time the player presses different keys – so if the player moves right for ten seconds, we’ll store the same amount of data as if the player moved right for half a second.
For this technique to work our ghost must abide by the following rules:
- The ghost and player have the same point of origin.
- The ghost must follow the exact same path as the player.
- The ghost should move at the same speed as the player.
- The ghost has to store the current time each time the player’s motion changes.
Step 1: Setting Up
Start by creating a new Flash file (ActionScript 3.0). Set the width to 480, the height to 320 and frames per second to 30. Leave the background color as white and save the file as CreatingGhosts.fla; lastly set its class to CreatingGhosts.
Before we move into the classes we need to create a pair of MovieClips. Start by drawing two separate 20px squares without a stroke. Convert the first fill to a MovieClip, setting its registration to the center, naming it player and exporting it for ActionScript with the class name Player. Now repeat the same process, except replace the name with ghost and the class with Ghost. Remove these MovieClips from the stage.
Create your document class with the following code:
package{
import flash.display.*;
import flash.events.*;
public class CreatingGhosts extends MovieClip{
public var player:Player = new Player();
public function CreatingGhosts(){
addChild(player);
}
}
}
Self explanatory; our next step will be to set up the Player class:
package{
import flash.display.*;
import flash.events.*;
import flash.geom.Point;
import flash.ui.Keyboard;
import flash.utils.Timer;
import flash.utils.getTimer;
public class Player extends MovieClip{
public var startPos:Point;
public var startTime:int;
public var speed:Number = 2;
public var currentLife:int;
public var keyPressLeft:Boolean = false;
public var keyPressRight:Boolean = false;
public var keyPressUp:Boolean = false;
public var keyPressDown:Boolean = false;
public function Player(){
}
}
}
The first three variables are used to help meet the rules; startPos is our point of origin, startTime is the time when the Player was added to the stage and speed is our our rate of movement. currentLife is an addition used to check how many times the player has died, accordingly each path is stored and obtainable through that value. The last four variables are used to check key presses.
It’s time to create the Ghost class:
package{
import flash.display.*;
import flash.events.*;
import flash.geom.Point;
import flash.utils.getTimer;
import flash.utils.Timer;
public class Ghost extends MovieClip{
static public var waypoints:Array = new Array();
static public var times:Array = new Array();
public var i:int = 0;
public var startTime:int;
public var speed:Number = 2;
public var selectedLife:int;
public function Ghost(){
}
}
}
The two static variables, waypoints and times, will be used to store arrays; the first will store coordinates of the player’s positions whenever the player changes motion, and the second will store the times at which each change occurred. The other variables match those from the Player class.
Step 2: Initializing the Player
Within the Player’s constructor add the following line:
addEventListener(Event.ADDED_TO_STAGE, init);
Next create the init() function:
public function init(e:Event){
}
First, we need to obtain the startTime and push a new time array to the Ghost’s times array. (This is a little confusing; the ghost has multiple time arrays to allow it to deal with multiple lives in the future.)
startTime = flash.utils.getTimer();
Ghost.times.push(new Array);
currentLife = Ghost.times.length - 1;
Ghost.times[currentLife].push(flash.utils.getTimer() - startTime);
startTime is set to the current time (a value in milliseconds); we add a new child array to the Ghost’s times array; our currentLife is set to the index of this new array; and we push the time that has elapsed during this function to the first element of this new array.
Now we set up the starting position:
startPos = new Point(stage.stageWidth/2, stage.stageHeight/2);
this.x = startPos.x;
this.y = startPos.y;
Ghost.waypoints.push(new Array);
Ghost.waypoints[currentLife].push(startPos);
Our point of origin is set to the center of the stage; we reposition our Player to the origin; a new array is added to the waypoints array in the Ghost class; and the first position is pushed to that array.
So, at the moment, Ghost.times[0][0] contains the number of milliseconds since the SWF was set up (practically zero), and Ghost.waypoints[0][0] contains a Point set to the center of the stage.
Our aim is to code this so that if, after one second, the player presses a key, then Ghost.times[0][1] will be set to 1000, and Ghost.waypoints[0][1] will be another Point, again set to the center (because the player will not have moved yet). When the player lets go of that key (or presses another), Ghost.times[0][2] will be set to the current time, and Ghost.waypoints[0][2] will be a Point that matches the player’s position at that time.
Now, here are the three event listeners:
addEventListener(Event.ENTER_FRAME, enterFrame);
stage.addEventListener(KeyboardEvent.KEY_DOWN, keyDown);
stage.addEventListener(KeyboardEvent.KEY_UP, keyUp);
Step 3: Key Events
For now let’s ignore the enterFrame and focus on the key presses.
public function keyDown(e:KeyboardEvent){
if (e.keyCode == Keyboard.LEFT && keyPressLeft == false){
updateWaypoints();
keyPressLeft = true;
}else if (e.keyCode == Keyboard.RIGHT && keyPressRight == false){
updateWaypoints();
keyPressRight = true;
}
if (e.keyCode == Keyboard.UP && keyPressUp == false){
updateWaypoints();
keyPressUp = true;
}else if (e.keyCode == Keyboard.DOWN && keyPressDown == false){
updateWaypoints();
keyPressDown = true;
}
if (e.keyCode == Keyboard.SPACE){
destroy();
}
}
Just a few simple if-statements to prevent bugs in key presses, and two new functions that are being called. updateWaypoints() will be called every time new points and times are to be pushed to the ghost arrays, and destroy() is used to remove the Player and add the Ghost to the stage. But before we go to those functions let’s finish off the key press functions.
public function keyUp(e:KeyboardEvent){
if (e.keyCode == Keyboard.LEFT && keyPressLeft == true){
updateWaypoints();
keyPressLeft = false;
}else if (e.keyCode == Keyboard.RIGHT && keyPressRight == true){
updateWaypoints();
keyPressRight = false;
}
if (e.keyCode == Keyboard.UP && keyPressUp == true){
updateWaypoints();
keyPressUp = false;
}else if (e.keyCode == Keyboard.DOWN && keyPressDown == true){
updateWaypoints();
keyPressDown = false;
}
}
This time we do the opposite: the variables are set to false when the key is released and the waypoints are updated.
I will elaborate in more detail on what is happening between those functions. Each time you press a key the waypoints and times are updated, so if you press another to cause a change a point and its corresponding time are added to the ghost arrays.
But what happens if the player decides to randomly release a key and cause change again? Well we account for that by updating the waypoints and times again. If this was not done the Ghost would not be able to account for 90 degree turns; instead it would move on an angle towards the next point.
Step 4: Updating and Destroying
Our updateWaypoints() function is fairly simple, seeing as it consists of code that we have already written:
public function updateWaypoints(){
Ghost.times[currentLife].push(flash.utils.getTimer() - startTime);
Ghost.waypoints[currentLife].push(new Point(this.x, this.y));
}
The destroy() function is just as simple! Waypoints are updated, a Ghost is added, event listeners are stopped and our Player is removed:
public function destroy(){
updateWaypoints();
var ghost:Ghost = new Ghost();
parent.addChild(ghost);
removeEventListener(Event.ENTER_FRAME, enterFrame);
stage.removeEventListener(KeyboardEvent.KEY_DOWN, keyDown);
stage.removeEventListener(KeyboardEvent.KEY_UP, keyUp);
parent.removeChild(this);
}
Step 5: The Player’s enterFrame
Begin by creating the function:
public function enterFrame(e:Event){
}
For the purposes of this tutorial we will add some simple collision with borders, to show how the waypoints are updated on this change:
if((this.x-(this.width/2)) > 0){
}
if((this.x+(this.width/2)) < stage.stageWidth){
}
if((this.y-(this.height/2)) > 0){
}
if((this.y+(this.height/2)) < stage.stageHeight){
}
Now are player should only move in the specified direction while it isn’t touching a border. Inside the first if-statement add the following code for moving left:
if(keyPressLeft == true){
if((this.x-(this.width/2)) <= 0){
updateWaypoints();
this.x = this.width/2;
}else{
this.x -= speed;
}
}
First we check if the left key is currently down, then we check to see if the Player’s position is greater than or equal to 0; if so we update our waypoints and reposition the player to the edge of the left side; if not we continue to move the player left.
The exact same thing is done for the other three sides:
if(keyPressRight == true){
if((this.x+(this.width/2)) >= stage.stageWidth){
updateWaypoints();
this.x = (stage.stageWidth - (this.width/2));
}else{
this.x += speed;
}
}
if(keyPressUp == true){
if((this.y-(this.height/2)) <= 0){
updateWaypoints();
this.y = this.height/2;
}else{
this.y -= speed;
}
}
if(keyPressDown == true){
if((this.y+(this.height/2)) >= stage.stageHeight){
updateWaypoints();
this.y = (stage.stageHeight - (this.height/2));
}else{
this.y += speed;
}
}
And with that we are finished with the Player Class!
Step 6: Initializing the Ghost
Add the following line inside the Ghost’s constructor:
addEventListener(Event.ADDED_TO_STAGE, init);
Like before create the init() function:
public function init(e:Event){
selectedLife = times.length - 1;
this.x = waypoints[selectedLife][0].x;
this.y = waypoints[selectedLife][0].y;
startTime = flash.utils.getTimer();
addEventListener(Event.ENTER_FRAME, enterFrame);
}
We start by selecting the path we want to use (by default it will choose the last array); we then position the ghost to the origin and set our Ghost’s start time. Then an event listener for the enterFrame is created.
Step 7: The Ghost’s enterFrame
Naturally we create our enterFrame function:
public function enterFrame(e:Event){
}
Now we have to loop through our time array. We do this through the variable i; we check if it is less than the length of the array and we also check if the time elapsed is greater than or equal to the current time in the array:
while (i < times[selectedLife].length - 1 && flash.utils.getTimer() - startTime >= times[selectedLife][i]) {
i++;
}
The next thing to do is to move the Ghost if the time elapsed is less than the current time from the array:
if (flash.utils.getTimer() - startTime < times[selectedLife][i]) {
updatePosition();
}
Step 8: Updating the Ghost’s Position
We’ll start this step off by creating the updatePosition() function:
public function updatePosition(){
}
Next add two variables, to represent the difference and the distance between the old and the new position:
var diff:Point = waypoints[selectedLife][i].subtract(new Point(this.x, this.y));
var dist = diff.length;
We subtract the points from each other to find the distance. Now, we must move the ghost:
if (dist <= speed){
this.x = waypoints[selectedLife][i].x;
this.y = waypoints[selectedLife][i].y;
}else{
diff.normalize(1);
this.x += diff.x * speed;
this.y += diff.y * speed;
}
First we check whether the distance is less than the speed (i.e. the distance the ghost moves each tick); if so we move the Ghost directly to the point. However, if the distance is less then we normalize the difference (“means making its magnitude be equal to 1, while still preserving the direction and sense of the vector” – Euclidean Vectors in Flash), and we increase the Ghost’s position along the direction of the point.
(more…)
May 5, 2012
Posted on May 5, 2012 in Hints and Tips | 10 comments
Today, Matt Porter takes a look at a recently released mining game, currently doing very well on Newgrounds: Utopian Mining, developed by Schulles.
Play the Game
Click to play on Newgrounds
Overview
Utopian Mining is one of the most polished RPG digging games I’ve played on the web in some time. It does so much right that it stings horribly when you do come across its few faults. My expectations were set high after seeing the excellent scores on Newgrounds and playing for a few moments, but I quickly learned that the game wasn’t all my hopes had wanted it to be.
My high expectations aside, there’s a lot to be learned from this wonderful little (emphasis on little) game.
Gameplay
The object is simple. You’re a tiny mining robot hanging out in a town that was recently destroyed by a horrible storm, and you need to collect materials while digging to get the town up and running again. There’s been a decent number of games in this genre over the years, and they’ve always done quite well in the eyes of players; quite well for sponsors too seeing as they continue to get sponsored by large sites such as Newgrounds and Kongregate. There’s definitely some concrete evidence as to why they do so well, which I’ll go over shortly.
Utopian Mining doesn’t really mix things up too much from your standard RPG digger, but it does add a few (extremely linear) quests, as well as a bit of story. Quests generally consist of giving someone money or a certain material, all of which is laid out in the exact order you would achieve if said quests didn’t exist, making the quests more of an illusion than anything.
The game appears to be a lot more content filled at first, especially when new buildings rise as you complete quests, and you learn of a beach far to the east, but it quickly becomes apparent that these changes hardly affect gameplay and are mostly visual fluff. Buildings give a small discount in restoring power to your robot, and the beach is used to get sand for a quest just once (yes, once). This visual fluff is of course a welcome addition, especially in the eyes of sponsors, but I fear that these quests will quickly feel shallow to the average player, leaving them with a desire for just a bit more depth. I would have loved to see quests be less linear, and to have them alter how the game is actually played. Unlocking new upgrades in the shop would have been great incentive to complete a difficult, and not immediately rewarding quest. In addition to these faults, the player also isn’t alerted when a quest is complete, which seems like a no-brainer for an otherwise very polished game.
The beach
The largest flaw of the game is that it’s so simple it becomes ridiculously easy to complete. It’s so unbalanced, that if it wasn’t short, slightly addicting, and quite charming, it would likely fail to be a decent game. Many players, such as myself, often skip cheap upgrades, and save up for the next reasonable purchase. This may take an extra five or ten minutes to do early on in the game, but it generally pays off. The same is true for buying equipment in games such as Final Fantasy, or really any game that offers an upgrade system of some sort.
The problem with Utopian Mining, is that it doesn’t only pay off – it actually destroys whatever challenge may have ever existed. I beat the entire game within an hour, and wasn’t remotely challenged beyond the first five minutes; in fact, my robot never even died. Generally speaking, the challenge of a game should increase as you go on, but Utopian Mining simply gets easy, whether you skip upgrades or not. Schulles (the developer) simply didn’t pay enough attention to the balance of the game, and it unfortunately reared it’s ugly head for me, and from the looks of other reviews, many other players.
Close to death, but never in any real danger.
While casual gaming is fun, it’s important to challenge players, or at least make them feel like they completed something difficult, even if “difficult” simply translates to time consumption (a common tactic of MMORPGs). While I don’t want to write out a game design document in this review, a simple addition to make the game more challenging would have been more hazards, such as lava pits. As it is, going deeper and running out of energy are the only things that can kill you, and that obviously doesn’t really work.
One of the more minor flaws, in my opinion, is the rather clunky user interface. For an example, let’s look at the shop screen:
To navigate the shop, you must press 1-4 to switch between categories (chassis, drill, batter, cooling liquid), use the arrow keys to go up and down, X to select, and C to exit. I love retro games, and I’m all about ditching the mouse when it really isn’t needed, but this wasn’t one of those times. There’s no reason to neglect the mouse for a simple shopping interface, especially when it would be faster and less frustrating to use for the player, and could work alongside keyboard controls as well. There’s no reason to annoy your players because you feel like being truly retro; give players an option, and both casual and hardcore players will be happy.
While Utopian Mining has its flaws, as almost all games do, it does a lot right. It takes everything you’d expect from an RPG digging game, strips it down, and polishes what little it has to an extreme. It’s basic, but it’s addicting, and for any game developer, that’s a good thing. Getting players to return to your game is not only great for increasing views, but it also helps developers gain more recognition, and both sponsors and developers will earn a decent bit more revenue, assuming the developer put ads such as Mochi or CPMstar in their game.
The unfortunate side to this, for Utopian Mining, is that the game isn’t quite long enough to ensure a returning play from most players, as it’s generally beaten in the first sitting. As far as the core mechanics go, they’re addicting. The game lacks any sort of real depth (aside from the digging bit [that was a terrible pun - Ed.]), but that aside, players seem to get addicted, and want more. The core mechanics of the game are undeniably an extremely strong point, and seeing them presented in such a polished manner has appeared to be an easy win for game developers.
Graphics
I’ve said it before, and I’ll say it again: I absolutely love retro and retro-inspired games. Utopian Mining offers some very nice looking retro graphics, which instantly earn my approval. The world is charming on the surface, and while a bit bland below, it’s done well enough to please the eyes. The animations are extremely simple, but they get the job done, and there’s no need for more.
As far as details go, the game doesn’t skimp out, and there’s actually a decent attention to detail. The ground gets darker as you go deeper, digging has a cool particle effect of dirt flying out, and warnings appear in a simple, but cool fashion across the screen. Overall, the graphics are top-notch for a retro-inspired style, and I wouldn’t change them a bit.
Audio
The audio is also extremely well done in Utopian Mining, and has very little room for improvement. The music on the surface is excellent and charming, which sets an immediately positive mood for players. Upon digging and going below the surface, the music instantly changes with a nice fading touch, which is a great addition.
Sound effects are nicely done, even if a bit simple. I would have appreciated some variation when collecting different materials, but that’s a minor piece of polish the develop chose not to include. All in all, the sounds are quite fitting, retro, and very well done.
Conclusion
Utopian Mining is undeniably a great game, it’s just a great game that has been done before. What I appreciate most about it, is that it takes the core mechanics, leaves behind the extras, and makes the game shine nonetheless. It’s an excellent game for developers to study, as there’s very little to it, yet it’s quite successful. I know my interest has been piqued by it, and I plan to explore development in the genre myself. All in all, Utopian Mining is a charming and simple game that can pass some time for the casual gamer, teach some important lessons to game developers looking for them, or both.
Your Turn
What do you think of Utopian Mining?
View full post on Activetuts+
May 2, 2012
Posted on May 2, 2012 in Hints and Tips | 10 comments
In this short tutorial I will introduce you to ASAudio, and AS3 library that greatly reduces the amount of code needed to create and manipulate sound object in your ActionScript projects.
Step 1: Examining ASAudio
ASAudio is an ActionScript 3 library that greatly reduces the amount of code needed to create and manipulate (volume changes, pan) audio files’ within your ActionScript Projects. Traditionally you would need to do the following to load in, play, and change the volume of a Sound within ActionScript:
var urlRequest:URLRequest = new URLRequest("path/to/track.mp3");
var sound:Sound = new Sound(urlRequest);
var soundChannel:SoundChannel = sound.play();
var soundTrans:SoundTransform = soundChannel.soundTransform;
soundTrans.volume = .5;
soundChannel.soundTransform = soundTrans;
With ASAudio all you need to do is the following
var track:Track = new Track("path/to/track.mp3");
track.start();
track.volume = .5;
Step 2: Getting the Library
Head over to the project’s Google Code page and download the latest version of ASAudio.
Once you have downloaded it, extract it and copy the the “com” folder that is inside the “src” folder to the folder where you will be creating your ActionScript project.
Step 3: New ActionScript Project
Start a new ActionScript project, and save it in your project folder as “asAudio.fla”. Under the “PROPERTIES” panel, set the stage color to white and give it a width and height of 500x150px.
Now create a new ActionScript File and save this as “Main.as”. Set this as your Document Class.
Step 5: Imports and Constructor Function
Add the following to the “Main.as” you created in the step above.
package {
import flash.display.Sprite;
import com.neriksworkshop.lib.ASaudio.*;
import flash.media.Sound;
import flash.events.MouseEvent;
import flash.events.Event;
public class Main extends Sprite {
public function Main() {
trace("Working");
}
}
}
Here we import the classes we will need throughout this tutorial, and setup our Main() constructor.
Step 6: Track
The Track is the fundamental class of ASAudio. Everything you do with the library depends on the Track. In this step we will create a new Track, and play it. Enter the following code above the Main() within “Main.as”.
var track:Track = new Track("BoozeandBlues.mp3");
And the following within the Main() constructor.
public function Main() {
track.start();
}
To create a Track you pass in a path to the mp3. We then call the start() method of the Track within Main().
If you test now you should hear the mp3 play.
Step 7: Setting up the Interface
In this step we will setup the interface for the project so we can control our Track‘s.
From the Component Window drag 4 buttons and a slider onto the Stage. You can get to the Components Window by choosing Window > Components or by pressing CTRL+F7.
Give the buttons the following properties, one by one.
- X: 21.00 , Y:61.00, Label:”Play TracK”, Instance Name:”playTrackBtn”
- X: 175.00, Y:61.00, Label:”Play Group”, Instance Name”playGroupBtn”
- X: 333.00, Y:61.00, Label:”Play Playlist”, Instance Name”playListBtn”
- X: 21.00, Y:100.00, Label:”Stop Track”, Instance Name”stopTrackBtn”
Here is a screenshot of the first Button’s setup.
Give the slider the following properties.
- X: 21.00, Y:29.00, Instance Name:”trackSlider”
- maximum: 1
- miniumum: 0.1
- snapInterval: 0.1
- tickInterval: 0.1
- value: 1
- liveDragging: “Make sure it is checked”
Here we set some initial values for the slider. I won’t go over them as you can refer to my Quick Tip that covers the sliders functionality.
Step 8: Controlling the Track
In this step we will code the start, stop, and volume functionality for the track we created in the previous step. Add the following to “Main.as”.
public function Main() {
addListeners();
}
private function addListeners():void{
trackSlider.enabled = false;
playTrackBtn.addEventListener(MouseEvent.CLICK,playTrack);
stopTrackBtn.addEventListener(MouseEvent.CLICK,stopTrack);
trackSlider.addEventListener(Event.CHANGE,adjustTrackVolume);
}
Here we call the addListeners() function within our Main() constructor. Inside addListeners we set the disable the trackSlider and add Listeners to 3 of our buttons.
Step 9: playTrack()
The playTrack() function will tell the track to start playing. Add the following beneath the addListeners() function you created in the step above.
private function playTrack(e:MouseEvent):void{
trackSlider.enabled = true;
track.start();
track.volume = 1.0;
}
Here we enable the trackSlider play the Track using the start() method and set the volume of the track using the volume property.
Step 10: stopTrack()
The stopTrack() function will be used to stop the Track. Add the following beneath the playTrack() function you added in the step above.
private function stopTrack(e:MouseEvent):void{
track.stop();
}
Here we simply call the stop() method on the Track.
Step 11: adjustTrackVolume()
The adjustTrackVolume() function will be used to adjust the volume of the Track. Add the following beneath the stopTrack() function you created in the step above.
private function adjustTrackVolume(e:Event):void{
track.volume = e.target.value;
}
Here we set the volume of the track equal the the sliders value property. Because we set the maximum to 1 and the minimum to 0.1 it will always be a number between 0.1 and 1.0 incremented by 10ths. i.e 0.1, 0.4, and so on.
If you test the movie now you should be able to play, stop, and adjust the volume of the Track.
Step 12: Groups
You may have been wondering what the “Play Group” button was for? Well, along with offering basic the basic Track ASAudio has a notion of “Groups” which allows you to stack sounds together and play them together all at once. Add the following within the addListeners() function you created in the step above.
private function addListeners():void{
trackSlider.enabled = false;
playTrackBtn.addEventListener(MouseEvent.CLICK,playTrack);
stopTrackBtn.addEventListener(MouseEvent.CLICK,stopTrack);
trackSlider.addEventListener(Event.CHANGE,adjustTrackVolume);
playGroupBtn.addEventListener(MouseEvent.CLICK,playGroup);
}
Here we add a Listener to our playGroupBtn that will call the playGroup() function. We will code this next.
Step 13: playGroup()
Add the following beneath the adjustTrackVolume() function you creafted in the step above.
private function playGroup(e:Event):void{
var group:Group = new Group( [new Track("piano.mp3"), new Track("drumbeat.mp3")] );
group.start();
}
Here we create a new Group by passing in an Array of tracks. We then call the start() method which tells the Group to start playing.
If you test now you should hear the “piano.mp3″ and “drumbeat.mp3″ playing simutaneously.
Step 14: Playlist
Along with offering the Group, ASAudio has a notion of a PlayList. The PlayList is like a playlist on an MP3 player. You “queue” up songs and when one finishes it continues to the next. Add the following within the addListeners function.
private function playPlayList(e:Event):void{
var playList:Playlist = new Playlist( [new Track("piano.mp3"), new Track("drumbeat.mp3")] );
playList.loop = false;
playList.start();
}
Like the Group we create a new PlayList by passing in an Array of Tracks. We set the PlayList to not loop and call the start() method.
You can now test and see the PlayList in action.
Conclusion
You have learned about ASAudio and seen how it can greatly reduce the amount of code needed to create Audio within your ActionScript Projects. This library has more to offer including fade, pause, and mute methods… I suggest you take a look through the documentation to see what all is available. I hope you found this useful and thanks for reading!
View full post on Activetuts+
May 1, 2012
Posted on May 1, 2012 in Hints and Tips | 10 comments
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!
We’ve Been in Kuala Lumpur!
This month we’ve been attending an Envato company meet-up in Malaysia. We’ve had a fun time working together as a team, made lots of exciting plans for the future of Tuts+, and also had the chance to meet up with lots of our readers! Thanks to everyone who took the time to attend our community meet-up and, if you’re interested, you can find out a bit more about our trip here (and see a few photos!)
Above: A happy bunch. Clockwise from left: Michael James Williams (Activetuts+ editor), Japh Thomson (Wptuts+ Editor), Ian Yates (Webdesigntuts+ editor), and David Appleyard (Tuts+ Manager).
Psdtuts+ — Photoshop Tutorials
-
Photoshop CS6 is packed with new features and effects that you can use in your work. In this tutorial we will utilize Photoshop’s new 3D capabilities as well as its new content aware features to create a Micro Machines inspired composition. Let’s get started!
Visit Article
-
Photoshop is a great tool because it allows us to be creative and produce imagery that would be impossible to create otherwise. In this Tuts+ Premium tutorial, author Tony Aubé will create a snowy landscape from desert photography and photos of sand. This tutorial is available exclusively to Tuts+ Premium Members. If you are looking to take your photo manipulation skills to the next level then Log in or Join Now to get started!
Visit Article
-
Layer styles are a powerful and time saving feature that can help you apply amazing effects to your designs. In this tutorial we will use layer styles to create a light bulb inspired text effect in Photoshop. Let’s get started!
Visit Article
Nettuts+ — Web Development Tutorials
-
If you’re working on a large project, you’ll no doubt have a build script or a bunch of task scripts to help with some of the repetitive parts of the process. You might use Ant or Rake, depending on the language the project is written in.
Visit Article
-
Sure, we’re all familiar with borders. Is there anything new that could possibly be introduced? Well, I bet there’s quite a few things in this article that you never knew about!
Visit Article
-
I’m frequently asked about how I’m able to create new directory structures and files so quickly in Sublime Text 2. Well the answer is that this functionality is not offered natively; instead, I use a helpful plugin. I’ll demonstrate it in this video.
Visit Article
Vectortuts+ — Illustrator Tutorials
-
The line of action is a key ingredient to making your character’s poses look more dynamic. In this guide, we will explore what the line of action is and how it can be used to make your character poses come alive.
Visit Article
-
If you’re looking for free vector grunge graphics, such as distressed backgrounds, worn textures, dirty paint splatter, and more, then you’ve found a compilation worth downloading. We’ve collected an assortment of vector grunge illustrations, free vector grunge textures, and wickedly worn graphics available for free download. Jump in and grab these free grunge vectors now and start making grunge vector art for your next project.
Visit Article
-
This tutorial will cover the process of creating a vintage inspired retro flyer design. There are four main areas of concentration to achieve this look and feel: color, type, character and texture. We’ll review a complete vintage vector design workflow to create this retro flyer design. Let’s get started.
Visit Article
Webdesigntuts+ — Web Design Tutorials
-
Avoiding repetitive tasks is always going to speed up your workflow. In today’s Quick Tip we’ll do just that, by utilizing Photoshop’s actions panel and combining it with hotkeys. Watch this quick screencast and I guarantee you’ll save tons of time next time you’re designing!
Visit Article
-
During previous screencasts in this series we’ve covered a lot of ground, building our responsive (or adaptive) layout with the Skeleton boilerplate. It’s now time to finish all the final details; arguably the most time-consuming part of any website build!
Visit Article
-
Photoshop CS6 has been hailed as a huge improvement for web and UI designers. Im going to share with you some of the features that Photoshop CS6 Beta has to offer and demonstrate how they can help you in your web or UI design workflow.
Visit Article
Phototuts+ — Photography Tutorials
-
Real estate is one of the world’s most competitive industries. Dominated by ambitious agents looking for the next big sale, selling real estate is all about setting yourself apart from the competition. What better way to catch a buyer’s eye than the perfect photo of the perfect home? In today’s article, we’re taking a look at the exciting world of real estate photography.
Visit Article
-
An 18% gray card is a handy accessory that every serious photographer should keep in their bag. It doesn’t cost much and it barely takes up any space. If you encounter a situation where you have mixed lights, this unassuming piece of plastic helps you determine the white balance. It can also be used to determine the correct exposure.
Visit Article
-
The final printed image is the culmination of my journey in creating a piece of artwork that represents my view of the world around me. As photographers in the digital age we spend far too much time staring at our photographs on our computer screens and very little time holding them in our hands. I still take great pride in every print I produce. There are a myriad of options for printing your work today, from canvas wraps to Metal prints, however for me there is something timeless and classic about a finely Matted and Framed print.
Visit Article
Cgtuts+ — Computer Graphics Tutorials
-
In this tutorial you’ll learn how to create a complete character rig for a voodoo doll character in Maya using the Setup Machine and Face Machine plugins from Anzovin studios. You’ll learn how these plugins can save you valuable time during rigging by allowing you to utilize pre-built body and face rigs which can then be customized to fit you and your character’s specific needs.
Visit Article
-
In this tutorial we’re going to create a smooth, stylish countdown animation. You can use words, letters, logos or whatever you want to make this type of animation. As you can see it’s easy to set up and looks very stylish and attractive.
Visit Article
-
This week, Cgtuts+ has teamed up with our sister site Psdtuts+ to bring you this amazing two part, in-depth tutorial from Nacho Riesco. In this tutorial we are going to sculpt a Micro Bionic Insect with chemical war purposes using simple hard-surface modelling techniques with the Clipping Brush, Masking and much more. Head over to Psdtuts+ for the conclusion of this project where we’ll composite our render passes from Zbrush, and create the final image in Photoshop!
Visit Article
Aetuts+ — After Effects Tutorials
-
In today’s tutorial we’re going to take you step by step through everything you need to know to build your own rugged light dimmers. We use these exact dimmers on all our studio and on location shoots. Besides being extremely durable, these little devices provide a wider range of lighting options and are surprisingly valuable when you have to light a scene in a tight location.
Visit Article
-
We always tend to go to Photoshop for working with still images, but today I’d like to bring up a few thoughts about why working in After Effects might be a better solution for your next project.
Visit Article
-
In this tutorial we will track freeze frames into a hand-held scene utilizing The Foundry’s CameraTracker to achieve an effect that is often referred to as “StroMotion”. We’ll be talking about different methods of how to remove the subject from the background and how to line everything up. Enjoy! 
Visit Article
Audiotuts+ — Audio & Production Tutorials
-
Loops can form the foundation of a track, and are useful for quickly putting some ideas together when sketching out an arrangement. Samples provide us with sounds and colors to create our music with. But where can you download great loops and samples? Here are 30+ great places to start.
Every music producer worth his salt is in the process of building up a useful collection of useable sounds.
Visit Article
-
We’ve all seen how you can morph one face into another in the graphical world. In this screencast Rishabh Rajan shows us how to achieve the same thing with audio using Pro Tools.
Visit Article
-
Although this is a series on mixing, it feels incomplete not to get into at least a brief discussion on master bus options and to discuss what exactly goes on when you print all your hard work to a single and final stereo file. Due to the depth of this topic, I am splitting it into two parts.
Visit Article
Activetuts+ — Flash, Flex & ActionScript Tutorials
-
In this tutorial, I’ll introduce you to Google’s new web programming language, Dart, and explain why you should like it and what you need to know about it. Learn about this new language and form some opinions about it – will it really replace JavaScript?
Visit Article
-
In this tutorial I will show you how to access the same saved data in separate Flash and JavaScript apps, by storing it in HTML5 LocalStorage and using ExternalInterface to reach it with AS3. We will create the same app in both JavaScript and Flash to demonstrate that it is platform agnostic.
Visit Article
-
Impact is an incredibly powerful HTML5 game framework which takes advantage of modern browser’s canvas element and can also run on mobile or be compile into a native iOS app. In this video I will go over the framework, how to set up a project, some background into how to create classes in it and finally go over the core classes that make up the framework. This is a high level overview which will give you a general sense for how things work.
Visit Article
Wptuts+ — WordPress Tutorials
-
Usually a website needs a contact form to communicate with the site owner. One of our favorites is Contact Form 7. Let’s see what it can do!
Visit Article
-
For a lot of WordPress projects these days we use custom post types. The WordPress development team created some handy methods to integrate them into your projects. But when you use custom post types, taxonomies and meta boxes frequently, it’s quite probable that you’re going to repeat yourself. That’s why we are going to use the power of these WordPress functions to build a more powerful class, which we can use to quickly register post types, taxonomies and meta boxes.
Visit Article
-
When we talk about WordPress we usually associate it with either being a blogging platform or just another content management system, but what about as an Intranet? This tutorial will show you how you can turn your basic installation of WordPress into a robust Intranet for your business.
Visit Article
Mobiletuts+ — Mobile Development Tutorials
-
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, and buttons.
Visit Article
-
In this tutorial series, you will learn how to create a minimalistic Alphabet Soup game. The goal of this game is to allow the player to pick words out from a jumbled set of letters. Read on!
Visit Article
-
At some point in your iOS development career, you will have the need to interact with a web service from within your app. You may need to access remote data, parse a social network feed, or even download some assets into your application. This quick tip will teach you to do so without using third party libraries!
Visit Article
View full post on Activetuts+
Apr 28, 2012
Posted on Apr 28, 2012 in Hints and Tips | 10 comments
In this video I will discus some tips and tricks for optimizing your Impact games and how to get the best performance possible across desktop to mobile. I will cover ways to reduce draw calls, how to set up setting properties for your levels and other important things I have learned through trial and error while building games with Impact.
Watch the Screencast
More Info and Links
To learn more about Impact visit http://ImpactJS.com and check out a copy of my book on Impact called Introducing HTML5 Game Development, published by O’Reilly.
View full post on Activetuts+
Page 3 of 253«12345...102030...»Last »
