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_downloadfor the miki-monk.jpg filebtn_mp3_downloadfor the some-audio.mp3 filebtn_txt_downloadfor 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
FileReferenceClass - Create an instance of
URLRequestClass - Assign the file path to the
urlparameter ofURLRequestinstance and call download method of FileReference Class
private var fr : FileReference;
private var req : URLRequest;
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+
