There are a variety of external assets that can be loaded into Flash at runtime which has several advantages:
We will examine six different assets that you can load.
NOTE: Third-party ActionScript libraries support even more asset types.
Loading assets of any kind is typically a five step process:
The most common assets that are loaded into a Flash movie are visual assets. This include swfs and images (jpg, png and gif). There are two major ways to implement visual assets:
Unlike other display objects (i.e., Movie Clip), the event listener on the Loader class is not attached to the object's instance. Instead it is attached to the contentLoaderInfo property of the Loader instance. This property references an instance of the LoaderInfo class that monitors, as the name implies, the information about the content of the Loader.
NOTE: If you were to attach an event listener DIRECTLY to the Loader's instance that is listening for a COMPLETE event, this event would be fired when the Loader was completely loaded---not when the content was completely loaded. While the code will still works, it is not completely accurate.
import flash.display.Loader; var myLoader:Loader = new Loader(); var myAsset:URLRequest = new URLRequest("sunset.jpg") myLoader.load(myAsset); myLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoadComplete); function onLoadComplete(eventObject:Event):void { eventObject.target.removeEventListener(Event.COMPLETE, onLoadComplete); addChild(myLoader); }
ALTERNATIVE: Instead of creating a variable that hold a reference to asset location (i.e., var myAsset:URLRequest = new URLRequest("sunset.jpg")), you could create the URLRequest object as an argument INSIDE of the Loader's load method like this: myLoader.load(new URLRequest("sunset.jpg")).
NOTE: The load( ) method tells the Loader object to "load" an asset, in this case an image or a swf.
Instead of using a Loader Class, you could use a UILoader Component.
While the Loader class will load various visual assets (images/swfs), the URLLoader will load various DATA (text, URL variables and binary data like an image). The URLLoader class should be not confused with URLRequest class. The default of the URLLoader is to load text. However, two other two types of data has to be to specified with the dataFormat property of the URLLoader instance:
Loading text is similar to loading visual assets with a few exceptions:
Follow the steps below to load some text into the Flash movie:
import flash.text.TextField; import flash.net.URLLoader; var myLoader:URLLoader = new URLLoader(); var myAsset:URLRequest = new URLRequest("constitution.txt"); myLoader.load (myAsset); myLoader.addEventListener (Event.COMPLETE, onLoadComplete); function onLoadComplete (eventObject:Event):void { var myTextField = new TextField() ; myTextField.x = myTextField.y = 50; myTextField.width = 400; myTextField.height = 200; myTextField.multiline = myTextField.wordWrap = true; myTextField.text = eventObject.target.data; addChild (myTextField); }
ALTERNATIVE: Instead of rewriting the object instance several times, you could use the "with" method to simplify the process. Replace the code in the onLoadComplete code block with the following code and test again:
var myTextField = new TextField(); with (myTextField) { x = myTextField.y = 50; width = 400; height = 200; multiline = myTextField.wordWrap = true; text = eventObject.target.data; } addChild (myTextField);
Instead of a using an instance of a TextField class, you could replace it with a dynamic text field and and a UI scroller compoent to it or you coud use a UI TextArea component that has a scroller built-in. We will do the latter.
import flash.text.TextField; import flash.net.URLLoader; var myLoader:URLLoader = new URLLoader(); var myAsset:URLRequest = new URLRequest("constitution.txt"); myLoader.load (myAsset); myLoader.addEventListener (Event.COMPLETE, onLoadComplete); function onLoadComplete (eventObject:Event):void { /* var myTextField = new TextField(); with (myTextField) { x = myTextField.y = 50; width = 400; height = 200; multiline = myTextField.wordWrap = true; text = eventObject.target.data; } addChild (myTextField);*/ myTextField.text = eventObject.target.data; }
Instead of using a TextField Class, you could use a TextArea Component.
One way to load data from a server is to use URL encoded variables that is similar to URL query string (name/value pairs) separated by ampersand. (i.e., firstName=Cornelius&lasName=Chopin). We will simulate a server by using a simply text file. Because we are loading URL variables, we need to set the dataFormat property of the URLLoader class to URLLoaderDataFormat.VARIABLES to convert the data to a URLVariables object. Name/Values pairs are created to match the name/values from the loading result.
Loading variables is similar to loading text with a few exceptions:
Follow the steps below to load variables into the Flash movie:
import flash.net.URLLoader; var myLoader:URLLoader = new URLLoader(); myLoader.dataFormat = URLLoaderDataFormat.VARIABLES; var myAsset:URLRequest = new URLRequest("variables.txt"); myLoader.load (myAsset); myLoader.addEventListener (Event.COMPLETE, onLoadComplete); function onLoadComplete (eventObject:Event):void { trace ("This is the complete file: " + eventObject.target.data) trace ("First Name: " + eventObject.target.data.firstName); trace ("Last Name: " + eventObject.target.data.lastName); myTextField.text = "First Name: " + eventObject.target.data.firstName + "\n" myTextField.text += "Last Name: " + eventObject.target.data.lastName }
NOTE: Notice there is no addChild( ) method because only traces are being used. Traces are optional.
One way to load data (i.e., image, sound) is to set the dataFormat property to URLLoaderDataFormat.BINARY
Loading binary data is similar to variables with a few exceptions:
Follow the steps below to load an image into the Flash movie:
import flash.net.URLLoader; import flash.display.Loader; var myLoader:URLLoader = new URLLoader(); myLoader.dataFormat = URLLoaderDataFormat.BINARY; var myAsset:URLRequest = new URLRequest("sunset.jpg"); myLoader.load (myAsset); myLoader.addEventListener (Event.COMPLETE, onLoadComplete); function onLoadComplete (eventObject:Event):void { var myBinaryLoader:Loader = new Loader(); myBinaryLoader.loadBytes (eventObject.target.data); addChild (myBinaryLoader); }
NOTE: This is similar to the loading_visual_assets.fla.
Loading sound is just as easy as loading data (text, HTML, CSS). Flash support the following three major sound formats: WAV, AIFF, and MP3. Other formats are also supported if you have QuickTime 4 or higher installed (Sound Designer II (.SDII), QuickTime Audio Only (MOV), System 7 (.SND)).
import flash.media.Sound; var mySoundObject:Sound = new Sound() var mySoundFile:URLRequest = new URLRequest("hifi.mp3") mySoundObject.load(mySoundFile); mySoundObject.addEventListener(Event.COMPLETE, onLoadComplete); function onLoadComplete(eventObject:Event):void { mySoundObject.play(); }
NOTE: You can control the volume, pan, start, pause and stop of the sound object by using it properties.
Like loading visual assets, you have two options to load video.
Working with video is a little more involved then working with sound. With video, you need
The NetConnection Class allows you to create create a NetConnection object that provides a local or network connection to a video. Usually you used a server, but since we are accessing the video locally we need to pass a value of null to the videoConnection.connect method.
import flash.net.NetConnection; import flash.net.NetStream; import flash.media.Video; //1. Create a NetConnection Object and store it in a variable for easy reference. This object provides an avenue to stream a video from a server or local drive. var videoConnection:NetConnection = new NetConnection() //Since we are connecting locally, we need to pass a value of null ~~~~~~~~~~~~ videoConnection.connect(null) //2.Create a NetStream Object and pass it the videoConnection Object.~~~~~~~~~~~~~~ var videoStream:NetStream = new NetStream(videoConnection) //3. Create a Video Object~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ var myVideo = new Video(); // Attach Video to VideoStream and display it. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ myVideo.attachNetStream(videoStream); addChild(myVideo); //Play Video ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ videoStream.play("skiing_0.f4v") // MetaData ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ /* The following 4 lines of code is needed; otherwise the video will play but you will received a 2044 error. The Help doc states that you cannot use the addEventListener method for the MetaData. So, we will apply the listener to the object that is the client property of a NetStream instances references. How: Create a generic object the will hold the onMetaData information. Then, associate this object with the NetStream and add the event listener to the NetStream object since Object is a dynamic class,we could do this. Notice the event listener is empty; however, it still handling the event -- ActionScript 3.0 for Adobe Flash CS3 Professional-Todd Perkins.*/ var metaListener:Object = new Object() metaListener.onMetaData = onMetaData videoStream.client = metaListener; function onMetaData(data:Object):void{} //Position the video on the stage ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ myVideo.x = 100 myVideo.y = 100
Just like we did with the UI Loader component, we can also do by using a FLV Playback component to load a video.
When loading any type of external asset, it is best practice to include the following functionalities:
Not just when loading external asset, removing eventListeners is important part of having optimal code. However, it also important to check to see if the asset file is missing, invalid, or the path is incorrect. You can report an error to the user using various Input/Output Error checking techniques (textField, prompt, etc.). Furthermore, if you have the potential of loading a very large asset (i.e., large imagr or video) or the user is using a low-bandwidth connection, it is important to implement a progressbar of some sort.
In this example, we will showcase the progress bar.
Follow the steps below to display progressbar before Flash movie loads:
import flash.events.ProgressEvent; myVideoLoader.source = "Mittelstet_RedefiningCulture.flv"; myVideoLoader.addEventListener (ProgressEvent.PROGRESS, onProgressListener); function onProgressListener (eventObject:ProgressEvent):void { progressBar.width = 100 * (eventObject.bytesLoaded/eventObject.bytesTotal); }
If you want to show a numerical percentage in a text field add the following:
function onProgressListener (eventObject:ProgressEvent):void { progressBar.width = 100 * (eventObject.bytesLoaded/eventObject.bytesTotal); loadPercentage_txt.text = String(100 * (eventObject.bytesLoaded/eventObject.bytesTotal)); }
In this example, we will showcase the remove event listener and the error trapping:
import flash.display.Loader; import flash.events.IOErrorEvent; import flash.net.URLRequest; var myLoader:Loader = new Loader(); var myAsset:URLRequest = new URLRequest("sunset.jpg") myLoader.load(myAsset); myLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoadComplete); function onLoadComplete(eventObject:Event):void { myLoader.contentLoaderInfo.removeEventListener(Event.COMPLETE, onLoadComplete); addChild(myLoader); } myLoader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, onErrorListener); function onErrorListener(eventObject:IOErrorEvent):void { trace("There was a error loading file"); trace(eventObject.text); }