Go to Content



Library

Home > Library

Flash Implementation with External Resources

By bada Master | 8204 views | Feb 21, 2012

In the previous article, we learned how to create a Motion Tween animation using Flash™. We guess you may have felt a strong attraction to the easy-to-use and powerful animation function of Flash™. This article will describe how to use external resources when creating Flash™ content. An "external resource" refers to the resource required to play a Flash content even if they are not included in the SWF file which is the final Flash™ output.

There are various types of external resources that can be used in Flash™. Not only image, sound and video files but also text and binary files can be used as external resources. Moreover, the Flash™ SWF file itself can be the resource of another SWF file. Although there are various formats for external resources, their usage and the Action Script code used for it are not much different for each of them.

The necessity of using external resources

First, let's take a look at the 2 reasons for using external resources in Flash™.

The first reason is to reduce the SWF Content Loading Time. The final output of Flash™, the SWF file, includes all the images, symbols and action scripts that are processed in the format defined in Flash™. To use the SWF file on a mobile phone, the mobile phone should load and re-interpret all of them. The loading time will be longer the bigger the SWF file is. However, loading time can be reduced if some of the resources of the SWF file exist as external resources.

The second reason is to improve the reusability of the created SWF file. Try thinking of the procedures to replace an image in an already created SWF file with another image. First, the FLA file that was used to create the SWF file is required. After preparing the file, you will have to replace the image in the FLA file and export the FLA file as an SWF file. However, if you implemented the SWF file using an external image, you could change the image simply by replacing the external image. That is, in this case, you wouldn't need to recreate the SWF file.

Using external resources, however, doesn't just have the advantages above. Have a look at the disadvantages when you use external resources.
First, although the initial SWF content loading time has been decreased, since loading external resources during the execution takes time, some time delays during execution may be introduced. However, if the size of the external resources that are to be loaded is not too big, users may not notice the time delay, but this should be carefully managed.

Second, since the code to load an external resource and display it on the screen should be implemented with an Action Script, the implementation is a bit more complicated than the implementation in the Flash™ Tool with just a few mouse clicks.

Third, since the SWF file should be distributed with the external resource files, management of the contents becomes a bit more cumbersome.

All the descriptions above are summarized in the table below. Since there are both advantages and disadvantages for using external resources, you need to choose whether to use the resource or not on the basis of the features of your Live Wallpaper.

External
Resources
SWF Size Package
Construction
Initial
Loading
Time
Runtime
Loading
Development
Not using Big SWF Big None Easy
Using Small SWF+External
resource files
Small Exist Difficult

Now let's have a more detailed look at how we can use external resources .. Let us do it by modifying the Christmas Live Wallpaper that we implemented in Chapter 3. We will replace the background image with an external red image and display the "Merry Christmas!" message that we'll load from an external text file.

Using external resources: Images

Unzip the "ChristmasWallpaper.zip" file from the attached files of this article and open the ChristmasWallpaper.fla file in the unzipped folder. Then you will see the blue background screen you implemented in Chapter 3.

Now, we will change the blue background image with an external image. First, in the Library pane on the right of the screen delete the "bg.jpg" file from the Bitmap folder and the "G_bg" symbol in the Graphic folder. To delete an item in the library, select the item and press the "DEL" key on the keyboard or click the wastebasket icon below the menu. Alternatively, you can drag an item and drop it on the wastebasket.

If you delete the "bg.jpg" and "G_bg" symbols from the library, the "L_bg" layer that included the "G_bg" symbol becomes an empty layer. You can check this by selecting [Control – Test Movie - Test] from the top menu or by pressing the Ctrl + Enter key combination.

Now, let's add an external image resource to the Christmas Live Wallpaper where the background became white.

To arrange an image on a Stage, there should be a Movie Clip Symbol in place. Select [Insert – New Symbol] from the top menu or press the Ctrl+F8 key combination to create the "MC_bg" Movie Clip Symbol as follows.

As the Movie Clip Symbol is created, the mode automatically changes to the mode where you can edit MC_bg. If you select "Scene 1" from the status bar at the top part of the screen, you can return to the Stage workspace.

Now, arrange the MC_bg on an appropriate location on the screen. Since MC_bg should be added to the L_bg layer corresponding to the background, select the "L_bg" layer in the "TIMELINE" and insert the created MC_bg Movie Clip from the library onto the Stage by dragging it. Now, we have to specify the location of the corresponding MC_bg Movie Clip.

To specify the location of the MC_bg Movie Clip, first select the MC_bg Movie Clip. However, since nothing appears on the screen, selecting the corresponding Movie Clip is not easy. To select it easily, you can select all by pressing the [Ctrl + A] key combination in the Stage. However, since, in this case, too many symbols are selected, lock layers other than the L_bg layer in the TIMELINE using the lock icon and then press the [Ctrl + A] key combination to select the MC_bg Movie Clip only. If the MC_bg Movie Clip has been selected, in the Align tab, select the "Align left edge" and "Align top edge" options to align it to the left and top to determine its location.

After locating the MC_bg Movie Clip, you have to add an external resource image to the Movie Clip. You can do this using Action Script. To change the properties of the MC_bg Movie Clip, a unique name for the symbol is required in the Action Script. When the MC_bg Movie Clip is being selected, select the "PROPERTIES" window and set the Instance Name to "mcBg".

Now, let's take a look at the implementation of the Action Script code. Action Script 3.0 provides the following 2 classes to load external resources.

  • The Loader class: This is used to load image files in the JPG, PNG or GIF format or to load SWF files.
  • The URLLoader class: This is used to load text or binary files.

Let's look at the external resources files, before going in depth on how to use these classes,. The external resource files that we will use are saved in the IdleRsrc folder below the path of the ChristmasWallpaper.fla file. Since the folder name "IdleRsrc" is a predetermined folder name that is used to export a Theme in the Samsung Theme Designer, it should not be renamed and should be specified in the Action Script code using its exact case-sensitive name.

Now, let's create the Action Script code to change the background image. Open the "Main.as" file and use the following code. The code in blue is for using external resources.

package 
{
	import flash.display.*;
	import flash.events.Event;
	import flash.net.URLRequest;

	public class Main extends MovieClip
	{
		private var bgLoader : Loader;
		private var bgUrl : URLRequest;

		public function Main()
		{
			addEventListener(Event.ADDED_TO_STAGE, handleAddedToStage);
		}
	
		private function handleAddedToStage(e:Event):void
		{
			removeEventListener(Event.ADDED_TO_STAGE, handleAddedToStage);
	
			stage.align = StageAlign.TOP;
			stage.scaleMode = StageScaleMode.SHOW_ALL;
			stage.tabChildren = false;
			stage.stageFocusRect = false;
	
			// Construct a Loader object to load an image.
			bgLoader = new Loader();
			// Construct a URLRequest object with the path of the background image to be loaded.
			bgUrl = new URLRequest("IdleRsrc/bg.jpg");
			// Register the listener that will be called when loading the background image is complete.
			bgLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, onBgLoaded);
			// Start loading the background image.
			bgLoader.load(bgUrl);
		}
			
		// The listener that will be called when loading the background image is complete.
		private function onBgLoaded(e:Event):void
		{
			bgLoader.contentLoaderInfo.removeEventListener(Event.COMPLETE, onBgLoaded);
			// Add the loaded background image as the child of the mcBG object.
			mcBg.addChild(bgLoader.content);
		}
	}
}

As you can see, the source code is not difficult. First, let's look at the handleAddedToStage() function that is called when the Stage is created for the first time. The function constructs a Loader Class object to load an external image resource, loads the "IdleRsrc/bg.jpg" file and registers the onBgLoaded() function as the listener function that will be called when the load is complete. In the onBgLoaded() function, you can find the part that adds the loaded content as the child of mcBG. That is, the loaded external image is added to the MC_bg Movie Clip that was empty as a child.

When all implementations are complete, save the source code and select [Control - Test Movie – Test] from the top menu or press the Ctrl + Enter key combination to check the operation. Then, you can see the white background for a moment and then the background is set to the red image that is loaded from the external resources while the screen blinks.

The reason why the white screen is temporarily displayed is that there is a time delay to load the external background image during runtime after loading the SWF, as described above. Therefore, displaying a progress icon or a text message "Loading…" indicating the loading progress would give a better user experience.

Using external resources: Text

Now, let's look at how to load an external resource in the text format.

First, let's take a look at the text file to be loaded. It's the "IdleRsrc /Message.txt" file that we copied and it contains the "Merry Christmas!" message.

To show the message, a text field and the layer to arrange this text field should be created. Click the "New Layer" in the "TIMELINE" at the bottom of the screen to add a layer and rename it "L_message". After that, drag the "Text Tool" item from the "Tools" bar to the right of the window and add a text field to an appropriate location by double-clicking it.

If a text field has been added to the screen, enter "tfMessage" in the "PROPERTIES" for the "Instance Name" that is used to access the text message in the Action Script. In addition to that, since the value of the text will be changed in the Action Script, set the properties such as "Dynamic Text" and "Use device fonts" as described in Chapter 2. Set the size to 30pt so that the message can be easily seen at the appropriate size and set the Font Color to white.

Now, let's create the Action Script code to read the text. Since the file is a text file, use the URLLoader class instead of the Loader class. If loading the text file is completed, replace the value of the Text Field that has already been added with the message of the loaded text file. That is, replace tfMessage.text with the message.

package 
{
	import flash.display.*;
	import flash.events.Event;
	import flash.net.URLRequest;
	import flash.net.URLLoader;

	public class Main extends MovieClip
	{
		private var bgLoader : Loader;
		private var bgUrl : URLRequest; 

		private var messageLoader:URLLoader;
		private var messageUrl:URLRequest;

		public function Main()
		{
			addEventListener(Event.ADDED_TO_STAGE, handleAddedToStage);
		}

		private function handleAddedToStage(e:Event):void
		{
			removeEventListener(Event.ADDED_TO_STAGE, handleAddedToStage);
			
			stage.align = StageAlign.TOP;
			stage.scaleMode = StageScaleMode.SHOW_ALL;
			stage.tabChildren = false;
			stage.stageFocusRect = false;
			
			// Construct a Loader object to load an image.
			bgLoader = new Loader();
			// Construct a URLRequest object with the path of the background image to be loaded.
			bgUrl = new URLRequest("IdleRsrc/bg.jpg");
			// Register the listener that will be called when loading the background image is complete.
			bgLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, onBgLoaded);
			// Start loading the background image.
			bgLoader.load(bgUrl);
			
			// Construct a URLLoader object to load a file.
			messageLoader = new URLLoader;
			// Construct a URLRequest object with the path of the file to be loaded.
			messageUrl = new URLRequest("IdleRsrc/Message.txt");
			// Register the listener that will be called when loading the file is complete.
			messageLoader.addEventListener(Event.COMPLETE,onMessageLoaded);
			// Start loading the file.
			messageLoader.load(messageUrl);
		}
        
		// The listener that will be called when loading the background image is complete.
		private function onBgLoaded(e:Event):void
		{
			bgLoader.contentLoaderInfo.removeEventListener(Event.COMPLETE, onBgLoaded);
			// Add the loaded background image as the child of the mcBG object.
			mcBg.addChild(bgLoader.content);
		}

		// This function is called when loading the file is complete.
		private function onMessageLoaded(e:Event):void
		{
			messageLoader.removeEventListener(Event.COMPLETE,onMessageLoaded);
			// The content of the loaded file is set to the text of tfMessage and is displayed on the screen.
			tfMessage.text = messageLoader.data;
		}
	}
}

 

Now the source code to display the text of an external file has been completed. Let's select [Control – Test Movie – Test] from the menu or press the Ctrl + Enter key combination to confirm the animation. Then, you will be able to confirm that the "Merry Christmas!" message is displayed on the screen.

As described at the beginning of this article, by using external resources, you can change the contents of the SWF without changing the FLA file. Why don't you confirm the sentence above by replacing the bg.jpg file in the IdleRsrc folder with your own image or the message in the message.txt file with your own message? However, keep in mind that the file names of the external resources must not be changed.

Creating a Theme Package including external resources

Now that the Flash content has been created, let's create a Theme Package (*.smt). We described earlier that Flash content should include resource files as well as the SWF file.

For a Theme Package that will include the SWF file with external resources, this has been considered. The Samsung Theme Designer provides all the features necessary for this.

Let's launch the Samsung Theme Designer and create a new bada 2.0 Theme Project. For more information about how to create bada 2.0 Theme Project, refer to Chapter 2.

When the project is created, and you select the Idle Screen in the Preview or Treeview window in the left pane, the Idle Wallpaper properties are displayed in the properties window in the right pane. In the properties window, if you change the "Graphic Type" from "image" to "flash", the "Flash File" input field below is enabled. If you click the Options button to the right of the input window, the Flash Settings dialog box appears.

If the Flash Settings dialog box appears as follows, specify the created "ChristmasWallpaper.swf" file in the "File" field. Then, specify the "IdleRsrc" folder including the external resource files below the folder including the ChristmasWallpaper.fla in the "SubDir" field.

If you specify the IdleRsrc folder, the IdleRsrc folder of the Theme Package is replaced with the specified folder. During this process, the following message appears. Select Yes.

We recommend that you carefully read the precautions regarding the naming of the sub folders of the Flash Settings dialog box. In a bada 2.0 Theme, there are 4 screens where Flash can be displayed; Idle Wallpaper, Lock screen, the Idle Wallpaper settings screen and the Lock Screen settings screen. To use a Flash file that uses external resources, you must name the external resource folder with the specified name.

When all the settings are complete, click the "Apply" button to finish the Idle Live Wallpaper setting. Then the Flash item will appear in the working window.

To export this as the final Theme Package file as an SMT file, just select "Export Theme" from the top menu as shown in the figure below. For more information, refer to Chapter 2.

Since the final SMT file contains the SWF file and the external resource files in it, you need to manage only the SMT file as if you are not using external resources.

We have now learned how to create Flash content using external resources. Actually, the Flash™ Live Wallpaper that we want to create is not an item that uses a lot of resources, so using external resources may not be necessary.

However, if you create lots of Live Wallpapers and become familiar with the Action Script code for the wallpapers, using external resources may make your work much easier because you can avoid editing the FLA file to create a Live Wallpaper.

ChristmasWallpaper.zip
Results.zip
Did this document help you? Yes | It's good,but ... | Not Helpful