May 15, 2012 Posted on May 15, 2012 in Hints and Tips | 10 comments

Quick Tip: Versioning Your Files With Dropbox (via Webdesigntuts+)

Ian Yates of Webdesigntuts+ has posted a great Quick Tip explaining how you can use Dropbox or Google Drive as a simple, automated version control system. It’s worth checking out for web app and game developers too, so check it out below.

---

Introduction

Having a version history of your graphics documents may save you from that awful moment when you realize you’ve scrubbed over a crucial stage of the design process. Thanks to Dropbox, you may already be storing versions of your work without even having noticed…

Dropbox is like a time machine. It keeps snapshots of every change in your Dropbox folder over the last 30 days.

---

Version History in the Cloud

Remember, both Dropbox and Google Drive will keep snapshots of your files for just 30 days, unless you upgrade your account. You can read more of what Google has to say on the matter at support.google.com, or head on over to Dropbox Help to read up on their “Pack-Rat” pro feature (which gives you indefinite history storage).

---

Useful Resources

• Sign up for Dropbox if you haven’t already!
• Sign up for Google Drive

And don’t forget, you can view all the latest articles from across the Tuts+ network at the Tuts+ Hub!

View full post on Activetuts+

Feb 1, 2012 Posted on Feb 1, 2012 in Hints and Tips | 10 comments

Free Flash Debugger: Commando (With Premium Source Files)

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

Quick Tip: Use FZip to Open Zip Files Within AS3

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: 16
• columnWidth: 32
• rowCount: 8
• rowHeight: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:

• Size: 50pt
• Color: Black

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

Free Greensock-Based Flash Slideshow Framework (With Premium Source Files)

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.

---

Active 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 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

Quick Tip: Download Files Via SWFs Using FileReference

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 file
• btn_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:

1. Create an instance of FileReference Class

private var fr : FileReference;

2. Create an instance of URLRequest Class

private var req : URLRequest;

3. 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+