Go to Content



Library

Home > Library

Simple Flash Development Practice

By bada Master | 10078 views | Jan 25, 2012

In the previous article, we introduced the Samsung Theme Service and briefly introduced Flash™, a newly added feature for themes on the bada 2.0 platform.

In this article, we would like to take a step forward by showing you 
  • How to create a simple Live Wallpaper using Flash™ and
  • How to create a Theme Package containing Flash content using the Samsung Theme Designer.
The Flash™ program used in this article is Adobe Flash™ CS 5.5 and the target model of the development is Wave3 (GT-S8600) that has a WVGA (480x800) resolution. Even for the Wave M (GT-S7250) or Wave Y (GT-S5380) models that have a HVGA (320x480) resolution, development is almost the same except for the resolution setting.

Implementing the ‘Hello world’ Idle Wallpaper

If you launch the Adobe Flash™ program, the intro screen appears as follows. In the intro screen, you can load an existing Flash document, create a new one and view the help information.



First, let’s create a new Flash Lite™ document. To create a new document, select [File – New] from the menu or press the Ctrl + N key combination. Alternatively, select “Flash Lite 4” from the “Create New” item in the center of the intro screen. If the following New Document window appears, select Flash Lite 4 and set the workspace size (Dimensions) to the resolution of your mobile phone.

In addition, you have to configure the Frame Rate (FPS). Setting it to 10~15 fps is recommended. If the FPS is too low, the implemented animation may not play smoothly. Note that if the FPS is too high, it may degrade the performance of the mobile phone.



If you complete the configuration, the following workspace is displayed. If you created a document in the intro screen or the Dimensions or FPS are not properly configured, you can change the settings in the PROPERTIES window.



The Flash™ application that we are going to create is a simple one that outputs “Hello World” at the center of the screen.

First, let’s add a Text Field to the screen. You can add a Text Field by selecting the Text Tool in the Tool Bar on the right of the screen.


 
Drag the mouse to the white workspace at the center of the screen so that the mouse pointer is placed on an appropriate point and type the “Hello World” text. If you select the Text Field, you can change the Size and Font Color in the PROPERTIES window. Let’s change the size and color of the text.



The actual workspace on the screen is called the Stage in the Adobe Flash™ tool. You can place primitive components of Flash™ animations here such as movie clips, buttons and images. From an Action Script viewpoint, a Stage is a global class. This part will be introduced in more detail in the following sections that deal with development using Action Script.

Now it’s time to check if the result has been made as expected. Before doing that, select [File – Save] from the menu or press the Ctrl + S key combination to save the result as HelloWorld.fla. “*.FLA” is the file extension for Adobe Flash™ files.


 
When the result is saved, select [Control – Test Movie – Test] from the menu or press the Ctrl-Enter key combination. Then you can view “Hello World” at the Size and Font Color you configured.


 
Now let's distribute the Flash™ file that we have made.

Select [File – Publish] from the menu or press the Alt + Shift + F12 key combination. This creates the HelloWorld.swf file. “*.SWF” is the file extension for final Adobe Flash™ distribution binary files. Of course, this file is used in the Samsung Theme Designer.



As described above, the HelloWorld.fla file that contains the information of a Flash document. To modify Flash content, you must have the FLA file. HelloWorld.html is the file that is created, so that you can view the SWF file in a web browser.

Although, this is a simple sample, the procedure to create a Flash™ Live Wallpaper is similar to the above procedure. By selecting components in the Tool Bar and changing the properties in the PROPERTIES window, you can create your own unique Flash animation movie.

By the way, if you want to stop displaying “Hello World” text when the user touches the screen or after a pre-determined amount of time has elapsed, what needs to be done?

To support this dynamic variability, you need to combine the Flash™ content you created with programming. Action Script is used for this purpose.
 
Implementing the ‘Hello world’ Idle Wallpaper Using Action Script

To learn how to use Action Script, let’s create a new Flash™ document HelloActonScript.fla. As described above, create the document and add a Text Field to an area of the Stage.

Select the created Text Field with the mouse and change the Text Type from the default “Static Text” to “Dynamic Text” in the PROPERTIES window as shown below. This declares that the value of the Text Field can be dynamically changed as the property name implies.



If you change the setting to “Dynamic Text”, the field above the “Dynamic Text” where you can enter the “Instance Name” is enabled. Type “tfMain” in this field. The Instance Name is a unique name used to identify the Text Field in the Action Script. The parent object also refers to the Text Field with this name.



Then, as shown above, you have to set the “Anti-alias” option to “Use Device Fonts”. When a Text Field is Dynamic Text, the font to be used should be included in the Flash Content because, using device fonts reduces the Flash content size and enables a sleek and clean display on a mobile phone. Now let’s see how to add an Action Script to directly set the value of the Text Field.

Select [File – New] from the menu. The New Document window appears. In this window, select “Action Script 3.0 Class”, type “Main” as the Class Name and click OK.



When the operation is complete, the Main Class including the automatically generated basic template code is created.



The Main Class is the Document class of Flash™. The Document Class is an empty movie clip that is generated when Flash™ content is created. Therefore, the Document class must inherit the MovieClip class.


public class Main extends MovieClip {……}
Now let’s add some code so that “Hello Action Script” is displayed when the screen is displayed. The following sample code is to set the text value of tfMain when the document appears.

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

    public class Main extends MovieClip
    { 
        public function Main()  // Constructor
        {
            // Register the listener method that will be executed when the Document Class   is added to the Stage.
             addEventListener(Event.ADDED_TO_STAGE, handleAddedToStage);
         }

         private function handleAddedToStage(e:Event):void
         { 
             // Release the registered event listener after use to prevent potential malfunctions.
             removeEventListener(Event.ADDED_TO_STAGE, handleAddedToStage);

             // To do :

             // Set the text of tfMain that is to be displayed on the screen.
             // The tfMain that is created in the Stage is automatically included in the Document Class.

             tfMain.text = "Hello ActionScript";
          }
     }
}

In addition, the Flash content will be used as a Live Wallpaper. Add the following Stage property setting code to the “// To do :” section of the handleAddedToStage() function.

      // Perform auto scale so that all the Stage is displayed on the screen even if the    resolution of the screen is not
      // matched with the Stage size.

      stage.align = StageAlign.TOP;
      stage.scaleMode = StageScaleMode.SHOW_ALL;

      // Set so that the Live Wallpaper is not focused when the user moves the focus by  pressing the buttons.
      stage.tabChildren = false;
      stage.stageFocusRect = false;

The above code must be included when implementing any Flash Live Wallpaper.

Select[File > Save] from the menu or press the Ctrl + S key combination. Save the code as Main.as file, in the folder that includes HelloActonScript.fla .“*.AS” is the file extension for Adobe Flash™ Action Script files.

Now, since the Action Script code implementation is completed, let’s return to the Stage editing screen. Select the “HelloActionScript.fla” file again in the top left tab where the opened files are listed. Select the Stage here and click the “Edit Action Script Settings” button of the [Publish – Script] item in the PROPERTIES window at the right of the screen.



If the “Advanced ActionScript 3.0 Settings” window appears as shown below, type “Main” in the Document class field and click OK. This is declaring that the class that is added to the Stage first when the Flash content is played is the Main class. That is, the Main class is specified as the starting point of the created Flash Content and will be executed first.


 
Select [Control – Test Movie – Test] from the menu or press the Ctrl + Enter key combination and check the operation.



Select [File – Publish] from the menu or press the Alt + Shift + F12 key combination to create the SWF distribution binary. In this case, only the SWF file is used for distribution. For further modification, there must be FLA and AS files.


 
Creating a Theme File

Now let’s look at how to create a Theme Package (*.smt) using the SWF file we created.

Launch the Samsung Theme Designer and create a new bada 2.0 Theme Project. To create a new project, select [Create New] from the menu or press the Ctrl + N key combination. The following dialog box appears. In the dialog box, select “bada 2.x Phone” and click OK.



The window with the bada 2.x Phone tab appears as shown in the figure below. Select your mobile phone model, select “Default” in the Select Showcase field and type “HelloWorld” as the Project Name.


 
When creating a project is complete, the following workspace appears where you can design a theme. Select the idle screen from the “Tree View Window” or “Preview Window” on the left and change the “Graphic Type” from “image” to “flash” in the PROPERTIES window on the right and click the “Flash File” option button.

If the PROPERTIES window does not appear, select [View – Windows] from the menu and then select the Properties Window.



If the Flash Settings Dialog box appears as shown below, specify the HelloWorld.swf or HelloActionScript.swf file that you have created above in the “File” field.



Check if the Flash contents are properly displayed in the left window and click “Apply”. Then, the Flash Live Wallpaper is applied for the idle screen.

Now let’s export the Theme Package. As shown by the figure below, select “Export Theme” from the Toolbar at the top.



As shown in the figure below, if you click the Export button in the “Theme Export” dialog box, the SMT file is finally created. The “bada Application” option in the Theme Export dialog box can be used while creating a package that can be registered to Samsung Apps. We will explain this option a bit more later.



To check the created SMT file, connect the mobile phone to the computer as a USB Mass Storage device and copy the SMT file to the “My Files – Others” folder.

For more information about exporting themes and checking mobile phones, refer to “Chapter 6. Exporting” in the Samsung Theme Designer User Guide (http://developer.samsung.com/themes/library).

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