Feb 1, 2012
Posted on Feb 1, 2012 in Hints and Tips | 10 comments
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!
View full post on Activetuts+
Jan 19, 2012
Posted on Jan 19, 2012 in Hints and Tips | 10 comments
In this tutorial I will introduce you to FZip, an AS3 Library that lets you open zip files inside your Flash projects. This can save a lot of bandwidth; in this tutorial we will load an 2.5MB zip file which contains 9.3MB worth of assets.
Final Result Preview
Let’s take a look at the final result we will be working towards. Click here to open a SWF that will in turn load a zip file full of images, and display them in a tiled grid.
(The blurring visible on some icons is due to Flash automatically attempting to scale them up to 32x32px, even though those particular images are 16x16px.)
Step 1: Getting the Library and Zip Archive
You will need to grad a copy of the FZip library from Claus Wahlers’ github.
Extract the library. Inside the src folder there is a folder named “deng”; copy this folder to the folder where you will store your FLA.
Next we need a zip archive to work with. I choose the WooFunction icon set, available for free from woothemes.com.
Save this to the same directory where you will store your FLA.
Step 2: Create New Flash Document
Open a new FLA and give it the following properties:
- Size: 550x400px
- Background Color: White
Save this as fzip.fla.
Step 3: Add Components to Stage
Go to Window > Components and drag a TileList component to the stage.
Under “Component Parameters” set the following properties:
columnCount: 16columnWidth: 32rowCount: 8rowHeight:32
Give the TileList the instance name imageTileList, and set the following properties in the “Position and Size” panel:
- X: 20
- Y: 68
- W: 100
- H: 100
Next select the Text Tool and make sure the following properties are set in the “Character” panel:
Now drag a TextField onto the stage, and give it the instance name imagesLoaded. Make sure the TextField is set to “Classic Text” and “Dynamic Text”, respectively, and set the following properties:
- X: 54
- Y: 161
- W: 454
- H: 60
Step 4: Create new AS3 Document
Go to File > New and choose “Actionscript File”.
Save this file as Main.as.
Step 5: Package, Imports and Constructor
Inside Main.as add the following:
private function demonstrate():void
package {
import flash.display.MovieClip;
import deng.fzip.FZip;
import deng.fzip.FZipFile;
import flash.display.Loader;
import flash.net.URLRequest;
import flash.events.*;
import fl.controls.TileList;
import fl.data.DataProvider;
public class Main extends MovieClip {
public function Main() {
setupZip();
}
}
}
Here we imported the classes we will need for this tutorial, and set up the Main() constructor function.
Step 6: Add Variables
Define the following variables above public function Main():
private var zip:FZip; // Instance of FZIP class
private var numFiles:int = 0; //Number of files
private var numFilesLoaded:int = 0; //Number of files loaded
private var done:Boolean = false; //Done processing zip archive?
private var tileListDp:DataProvider = new DataProvider();//Data provider for the TileList
Here we add some variables we will need throughout the tutorial. See the comments for their usage.
Step 7: setupZip()
Add the following new function below Main():
private function setupZip():void{
zip = new FZip();
zip.addEventListener(Event.OPEN, onOpen);
zip.addEventListener(Event.COMPLETE, onComplete);
zip.load(new URLRequest("wootheme.zip")); //change this to match your zip file's URL
imageTileList.visible = false;
}
Here we create a new instance of the FZip class, add two event listeners, and load our zip file. Last, we set imageTileList to be invisible (We don’t want it to show until all the images from the zip have loaded).
Step 8: onOpen()
Add the following new function beneath the setupFzip() function you entered above:
private function onOpen(evt:Event):void {
addEventListener(Event.ENTER_FRAME, onEnterFrame);
}
This function gets called when the zip archive has been opened. Here we add an ENTER_FRAME event listener.
Step 9: onComplete()
Add the following code new function beneath the onOpen() function you entered in the step above.
private function onComplete(evt:Event):void {
done = true;
}
This function gets called when there are no more files to process from the zip archive.
Step 10: onEnterFrame()
Add the following beneath the onComplete() function you entered above. This function will be triggered every frame after the zip file has been opened:
private function onEnterFrame(evt:Event):void {
//Only load 32 files per frame, to save processing power
for(var i:uint = 0; i < 32; i++) {
// any new files available?
if(zip.getFileCount() > numFiles) {
//yes so get it
var file:FZipFile = zip.getFileAt(numFiles);
// is this a png in the icons folder?
if(file.filename.indexOf("woofunction-icons") == 0 && file.filename.indexOf(".png") != -1) {
var loader:Loader = new Loader();
loader.loadBytes(file.content);
tileListDp.addItem({source:loader});
numFilesLoaded++;
}
numFiles++;
} else {
// no new files available
// check if we're done
if(done) {
removeEventListener(Event.ENTER_FRAME, onEnterFrame);
removeChild(imagesLoaded);
imageTileList.visible = true;
imageTileList.dataProvider = tileListDp;
}
//Exit the Loop
break;
}
}
imagesLoaded.text = numFilesLoaded + " Images Loaded";
}
Here’s the meat of the code.
Since this is running every frame, we’ll place an artificial restriction on the number of files within the archive that we deal with at once. That’s the purpose of the for-loop.
zip.getFileCount() reveals how many files are in the zip; numFiles stores how many files we’ve dealt with so far. So, line 5 checks whether there are still more files to deal with.
If there aren’t any files left, we skip to line 17 and just do some basic clearup: remove the ENTER_FRAME listener, remove the “loading” text field , make the tile list visible, and link it to the data.
If there are files left, we get the next one in our list using numFiles as an index. We then check whether it’s a PNG from the icons folder; since we know the structure of the zip beforehand, we can cheat and just check whether the file’s name and path contains “woofunction-icons” and “.png”.
To get the image from the zip and into a DisplayObject, we can use a Loader. This class is often used to load an image from a URL, but here we’re using its loadBytes() method to get the data from the ByteArray created by FZip.
Since Loader extends DisplayObject, we can just add it straight to the TileList’s DataProvider. Then we increment both numFilesLoaded and numFiles.
Why do we have two integers to keep track of how many files are loaded? Well, numFiles keeps count of all the files we’ve examined from the zip, whereas numFilesLoaded keeps count specifically of the image files that we’ve loaded into the DataProvider. It’s the latter variable that we use to update the “loading” text at the end of the function.
Conclusion
FZIP is an amazing little utility to save some loading time and bandwidth. I hope you’ve found this tutorial useful, and thanks for reading!
View full post on Activetuts+
Jan 3, 2012
Posted on Jan 3, 2012 in Hints and Tips | 10 comments
Something a little different for you this week: a Flash slideshow framework. As well as finding it directly useful for any presentations you may give, Premium members can download the full source code, and take it apart to see how the Greensock tweening libraries were used to put it together.
Preview
There are three example slideshows created with the framework:
The slideshows support images, SWFs, and FLV videos, and are all defined by a single simple XML file.
Download
All the files you need to actually use the slideshows are available in this free ZIP file.
If you’re a Premium member, you can download the source files as well; these use Greensock’s LoaderMax and TweenLite libraries, so make excellent examples. You could use these files as examples of how to use those libraries, or could extend them to add your own flair or new features.
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 Mobile Premium. 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!
View full post on Activetuts+
Jul 15, 2011
Posted on Jul 15, 2011 in Hints and Tips | 0 comments
This Quick Tip covers how to use AS3′s FileReference class in order to download and save external files from Flash RIAs without the need for server side scripts like PHP. All we need is the path of the file that we want to let the user download.
Final Result Preview
Let’s take a look at the final result we will be working towards:
Step 1: Create a New ActionScript 3.0 File
Create a new .fla file and save it into your project folder.
Step 2: Prepare the UI
For this Quick Tip, I created an interface. You can download it from the link at the top of the page or you can create your own.
In my .fla file, there are three images which represent the file types, and three download buttons which are MovieClip Objects
btn_img_download for the miki-monk.jpg filebtn_mp3_download for the some-audio.mp3 file btn_txt_download for the dummy-text.rtf file
and a progress bar at the bottom to track the download progress placed on the Stage.
Step 3: Create Document Class
We will write our code into a Document Class file. If you are not familiar with Document Class, you can get related information from another ActiveTuts+ Quick Tip.
Let’s create our Document Class file; click File>New then select “ActionScript 3.0 Class. Save the AS file into the same location as your .fla file.
Link your .fla file to the Action Script File that you created — simply write the name of your AS file into the related field in your .fla file.
Step 4: Using FileReference() in Our Code
Here is the Document Class that I used in this Quick Tip. Please read the comments in the code to understand the class behavior.
package
{
import flash.display.MovieClip;
import flash.display.Sprite;
import flash.events.MouseEvent;
import flash.events.ProgressEvent;
import flash.net.FileReference;
import flash.net.URLRequest;
import flash.text.TextField;
import flash.events.Event;
public class FileRefTut extends Sprite
{
//Download Buttons at the Stage.We have to define them as public variables in our Document Class in order to use them.
//Otherwise, we get error message from Flash.
public var btn_img_download : MovieClip,
btn_txt_download : MovieClip,
btn_mp3_download : MovieClip,
mc_loaded : MovieClip;
//Progress Bar
public var mc_progress : MovieClip,
//Dynamic TextField stays under the Progress Bar.
txt_prog : TextField;
//Arr_Links hold the list of files.
private var Arr_Links : Array;
//Default Path where the download is stored.
//You change it according to your setup.
//This is relative to the SWF.
private var defaultPath : String = "assets/";
//File Name
private var urlName : String;
//instance of FileReference() Class
private var fr : FileReference;
//url of the requested files
private var req : URLRequest;
public function FileRefTut() : void
{
//Set buttonMode to true to change mouse curser to hand icon
btn_img_download.buttonMode = btn_txt_download.buttonMode = btn_mp3_download.buttonMode = true;
//Set width of the mc_loaded progress bar to 0 when there isn't any downloading
mc_loaded.scaleX = 0;
//Create list of files to be downloaded
//These files must be in the folder specified by defaultPath
Arr_Links = ["miki-monk.jpg","some-audio.mp3","dummy-text.rtf"];
//Create a request object
req = new URLRequest();
//Create an instance of the FileReference Class
fr = new FileReference();
//ProgressEvent to scale Progress Bar
//We need to add ProgressEvent Listener based on the progress of FileReference
fr.addEventListener( ProgressEvent.PROGRESS,progressHandler );
//Use COMPLETE Event to determine when the download has finished
fr.addEventListener( Event.COMPLETE,completeHandler );
//Event Listeners for Download Buttons
//When user clicks any download button, call downloadFile(e:MouseEvent) function
btn_img_download.addEventListener( MouseEvent.CLICK,downloadFile );
btn_mp3_download.addEventListener( MouseEvent.CLICK,downloadFile );
btn_txt_download.addEventListener( MouseEvent.CLICK,downloadFile );
}
private function downloadFile( e : MouseEvent ) : void
{
//set the download path to the urlName variable according to clicked Download Button
switch (e.target.name)
{
case "btn_img_download":
urlName = Arr_Links[0];
break;
case "btn_mp3_download":
urlName = Arr_Links[1];
break;
case "btn_txt_download":
urlName = Arr_Links[2];
break;
}
//change text message "progress" to "downloading..." at txt_prog Dynamic TextFiled
txt_prog.text = "downloading...";
//Assign url to the req variable
req.url = defaultPath + urlName;
//Downlaod requested file
fr.download( req );
}
private function progressHandler( event : ProgressEvent ) : void
{
//We scale the progress bar according to ration of (event.bytesLoaded / event.bytesTotal)
//So, when scaleX reaches 1, it means the download is finished..
mc_loaded.scaleX = (event.bytesLoaded / event.bytesTotal) ;
}
private function completeHandler( event : Event ) : void
{
//reset progress bar to 0 after download is finished
mc_loaded.scaleX = 0;
//change text message
txt_prog.text = "download finished";
}
}
}
As you can see the key is to use FileReference with a URLRequest, to enable downloading files from our server. Basically we need 3 things:
- Create an instance of
FileReference Class
private var fr : FileReference;
- Create an instance of
URLRequest Class
private var req : URLRequest;
- Assign the file path to the
url parameter of URLRequest instance and call download method of FileReference Class
req.url = defaultPath + urlName;
fr.download( req );
Note: If you want to download files from another host, you have to put a crossdomain.xml file into that host. Let’s say, you put your swf file into www.host-a.com, and you want to download files from www.host-b.com with your swf file in www.host-a.com. To do that, you need permisson from www.host-b.com. So, you have to upload a crossdomain.xml file into www.host-b.com. If you wawnt learn more about crossdomain.xml files, there is another nice Quick Tip here.
Conclusion
In this Quick Tip, we learned how to download files from a server, via Flash, to the local system without any need for server side scripts like PHP. Hope you like this Quick Tip and thank you for reading it. If you have any questions, please drop a comment below.
View full post on Activetuts+
Jun 10, 2011
Posted on Jun 10, 2011 in Hints and Tips | 0 comments
By default, Flash can play WAV files when they’re located in the Library, but not when loading external files. Read through this Quick Tip to learn how to play them.
Step 1: Brief Overview
We’ll use common methods to request and load the desired WAV file, and use a fantastic third party class to play the loaded file.
Step 2: AS3WavSound
AS3WavSound (AWS) is an excellent ActionScript class that can play externally loaded wave files, go to its Google Code page and get the source code.
Now this class wasn’t exactly created for external wav playback; here is a short description from the author:
The Flex SDK does not natively support playing (embedded) .wav files. Thus far developers worked around this using ugly hacks (generating swf bytedata to trick the Flash Player). Not anymore. AWS in the slimmest sense simply is a single as3 class. It extends the generic Sound class in Flash and adds support for playing back WAVE data. You don’t need this sound class if you are working with the Flash IDE or Flex Builder, as they convert .wav data directly to Sound objects. The open source SDK compiler however, does not support this feature. But it does now!
The Flash IDE does indeed convert the wav data to Sound objects, but only for embedded files (imported to the Library); if you want to play an external wav file, use the following method…
Step 3: Usage
Prepare a new ActionScript class and write the following code:
package
{
import flash.display.Sprite;
import flash.events.MouseEvent;
import flash.net.URLLoader;
import flash.net.URLRequest;
import flash.events.Event;
import flash.utils.ByteArray;
import flash.media.Sound;
import org.as3wavsound.WavSound;
import org.as3wavsound.WavSoundChannel;
public final class Main extends Sprite
{
public final function Main():void
{
playB.addEventListener(MouseEvent.MOUSE_UP, loadWav);
}
private final function loadWav(e:MouseEvent):void
{
var urlRequest:URLRequest = new URLRequest('Phone.wav');
var wav:URLLoader = new URLLoader();
wav.dataFormat = 'binary';
wav.load(urlRequest);
wav.addEventListener(Event.COMPLETE, playWav);
}
private final function playWav(e:Event):void
{
var tts:WavSound = new WavSound(e.target.data as ByteArray);
tts.play();
}
}
}
This is basic code for loading an external file in AS3, the URLLoader class uses the URLRequest to determine the location of the file to be loaded (which is loaded as binary data) and when finished, the WavSound class is used to play the sound.
Step 4: Example
Check out the demo for a working example using the code.
Step 5: About WAV Files
Keep in mind that this class won’t play every wave sound: the file must have a sample rate of 44100, 22050, or 11025 Hz, and bitrate sample data of 8 or 16.
Conclusion
Use this class to play your external WAV files.
I hope you liked this tutorial, thank you for reading!
View full post on Activetuts+
