Go to Content



Library

Home > Library

Flash Shared Object Practice - 1

By bada Master | 6768 views | May 08, 2012

In the previous tutorial, we worked on lock screens using the bada Flash Extension. However, the Lock in the previous tutorial can only be disabled when an action is predefined during the development stage.

In this chapter, we work on a lock screen where the Lock is disabled when the user enters the correct 4-digit password. In this situation, what happens if the 4-digit password is predefined during the development stage? All users using the lock screen then have the same password. This is obviously not what users want. Users want to setup their own unique password and want to change it when needed. This means there must be settings for the user to change their password. Once the user changes the password, this password must then be stored in a specific place to read when needed.

The following flowchart shows a summary of this scenario with 2 Flash files.

The LockScreen.swf file disables the Lock when the user enters the correct password. LockScreenSetting.swf prompts the user for the current password and also allows the user to change the password to a new one if the correct password is entered.

In this case, there must be a data exchange between the 2 different Flash files, and the data must be retained even when the mobile phone is powered off. Flash provides a SharedObject class to store nonvolatile data on the local system. For more information on the SharedObject class, refer to the link below.

http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/net/SharedObject.html

Creating a Lock Screen Using a Password

First, create a LockScreen.swf file. The Flash created is configured with a keypad to input a password and a textbox to display the password as shown in the screenshot below.

As in the previous tutorial, this practice starts from creating the L_cover layer as the top-level layer of the lock screen animation. Then we place the translucent image, G_cover graphic, in an appropriate location. Unzip the "ChristmasLockScreen.zip" file provided with this tutorial to view the complete source as shown in the screenshot below. For more information on the source, refer to the beginning of Chapter 5.

Next, place the number keypad image on top of the translucent cover background. All the images, such as the Normal and Press images of each keypad number and text field background, you need for this exercise are included in the ChristmasLockScreenResource folder of the attachment.

To import these images to the Library, go to [File > Import > Import to Library…] in the top menu, select all items in the "ChristmasLockScreenResource" folder in the File Selection window, then click Open.

As explained in the previous course, the file format of the images is PNG and the graphic is automatically created. After changing the automatically created graphic name to "G_original file name", move the PNG files to the bitmap folder and the graphic files to the Graphic folder.

Next, arrange the buttons to use for the keypad on the Stage. Remember from Chapter 3 that there are 3 basic symbols (graphics, movie clips, buttons) in Flash. The button symbols that you are using now for the keypad buttons are interactive objects that react to user events. These Symbols are specialized for various user mouse events, including pressing and releasing objects.

First, create the button symbol for the number 0 on the keypad. To create a symbol, either select [Insert > New Symbol] from the top menu as shown in the screenshot below, or press the F8 shortcut key. You can also select "New Symbol…" from the menu that appears when you right-click an empty area in the Library with your mouse.

Enter "BTN_key_0" as the name when the "Create New Symbol" window appears, check to see that Button is selected as the Type, then click OK.

An empty button is created after you click OK as shown in the screenshot below. You can see that the button is configured with Up, Over, Down, and Hit in the timeline, unlike movie clips.

The "Up" frame means the normal state of a button as its definition. The "Over" frame if for the Mouse Over state. The "Down" frame shows the state of the button when it is pressed down. The "Hit" frame is different from other frames and is not displayed on the screen but is used to directly designate the touch area of a button. This frame can be skipped because the whole object itself will become the touch area if not assigned. But on the other hand, could be useful when the size of an object is too small to be used as the touch area by itself.

Drag and drop "G_key_0" graphic from the Library Graphic folder while the "Up" frame is selected. In order to place the symbol onto 0, select the "ALIGN" menu, and then "Align left edge" and "Align top edge".

Next, go to the Down frame, which is displayed when the button is pressed. The Up frame is the image that displays the normal state of the button, so a key frame is created by default. However, the Down and Over frames are not created by default. So a key frame must be manually inserted. Select Down in the timeline, then either right-click with your mouse and select "Insert Blank Keyframe" or press F7.

If an empty key frame is created in the Down frame, drag the "G_key_0_pressed" graphic in the Library Graphic to the stage and then select "Align left edge" and "Align top edge" from the ALIGN menu to assign the location as in the previous step. Once this is done, select "Scene 1" from the top stage status bar of the top image to return to the task stage.

You have now created the button for key_0 on the keypad. Buttons from 1 to 9, Clear, and Back Space buttons are also created using with the same method. Try creating button for the rest of the keypad.

Next, arrange the buttons on the Stage into your keypad. Create a new layer with the name "L_button" in the timeline, then drag and drop the button items from the Library onto the Stage and place them in the appropriate locations. The "L_button" Layer is the layer that the user manually inputs data into and is placed over the cover image. So it must be the top-level layer that goes over the L-cover.

Once the buttons are in place, you must assign an Instance Name to each button for it to be available in Action Script. You can do this by clicking each button to select it and then assign an Instance Name to it in the top of the "PROPERTIES" window on the right. For each numeric button, assign names like "btnKey0, btnKey1, …, btnKey9". Input "btnKeyClear" for the Clear button, "btnKeyBackspace" for the Backspace button, and so forth.

Once the keypad configuration is done, now you must create a text field where the password input is displayed. Add a new layer with the name "L_text_field_bg" on the timeline, then drag and arrange the "G_text_field_bg" graphic to an appropriate location so that it can be used as the background image for the text field.

Next, add a new layer with the name "L_text_field", select "Text Tool" from the tools bar, and drag it to the screen to create the text field.

Select the text field, then enter "tfPassword" for the Instance Name in the "PROPERTIES" window in order for it to be available in Action Script. Set the properties accordingly. Text content changes dynamically in Action Script as explained in Chapter 2. Therefore, make sure you don't forget to set "Dynamic Text" and "Use device fonts".

Finally, manually enter the guide string from the Stage to display on the top of the lock screen. Create a new layer with the name "L_message" in the timeline, then create a text field using the "Text Tool" in the tools bar. Enter a message to display. In this example, "Enter Password to Unlock" is entered.

The basic configuration is done at this point. Next, check your work by either going to [Control > Test Movie > Test] in the top menu or by pressing Ctrl + Enter.

Configuration the Action Script for the Lock Screen

By registering an event listener for each keypad button in Action Script, you can add a feature to display the value of each button pressed in the text field. For convenience, the maximum length of the password is limited to 4-digits.

First, go over the SharedObject class. The very first thing to do when the Action Script runs is to import the stored password from the SharedObject. However, if the lock screen was installed for the first time, or if the mobile phone was reset to its factory settings, then there is no stored password. A new SharedObject value must be created with the predefined Default Password.

Refer to the code below to see how values are imported with the SharedObject.

// Must be imported to use SharedObject.
import flash.net.SharedObject;

// Assign the Default Password as "0000".
private var DEFAULT_PASSWORD:String = "0000";

private var lockScreenSharedObject:SharedObject;

// Create a SharedObject with "LockScreen" in the root path.
lockScreenSharedObject = SharedObject.getLocal("LockScreen","/");

// If there is no password value in the LockScreen SharedObject, then use the default password.
if (lockScreenSharedObject.data.password == undefined)
{
lockScreenSharedObject.data.password = DEFAULT_PASSWORD;
      lockScreenSharedObject.flush();
 }

// Import the password from the LockScreen Shared Object.
savedPassword = lockScreenSharedObject.data.password;

Next, look at the complete code in the Main.as file.

There is no special code other than the portion where the SharedObject is used above. However, this updates the tfPassword value whenever keys are pressed. There is some code that changes a character to '*'.

package 
{
    import flash.display.*;
    import flash.events.Event;
    // Must be imported to process the Mouse Event for the Button Symbols.
    import flash.events.MouseEvent;
    // Must be imported to use SharedObject.
    import flash.net.SharedObject;
    // Must be imported to enable the Flash Extension's Lock Screen Class
    import com.osp.flashextension.LockScreen;

    public class Main extends MovieClip
    {
        // Password length is fixed at 4-digits.
        private var PASSWORD_LENGTH:Number = 4;
        // Assign the Default Password as "0000".
        private var DEFAULT_PASSWORD:String = "0000";

        private var lockScreenSharedObject:SharedObject;

        // Variable to save the Password the user enters.
        private var inputPassword:String = new String();
        // Variable to save the Password imported from the SharedObject.
        private var savedPassword:String = new String();

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

            // Create a SharedObject with "LockScreen" in the root path.
            lockScreenSharedObject = SharedObject.getLocal("LockScreen","/");
        }

        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;

            // Reset the variable and text field.
            inputPassword = "";
            savedPassword = "";
            tfPassword.text = "";

            // If there is no password value in the LockScreen SharedObject, then use the default password.
            if (lockScreenSharedObject.data.password == undefined)
            {
                lockScreenSharedObject.data.password = DEFAULT_PASSWORD;
                lockScreenSharedObject.flush();
            }

            // Obtain the password from the LockScreen SharedObject.
            savedPassword = lockScreenSharedObject.data.password;

            addEventListener(MouseEvent.MOUSE_DOWN, handleMouseDown);
            addEventListener(MouseEvent.MOUSE_UP, handleMouseUp);
        }

        private function handleRemovedFromStage(e:Event):void
        {
            removeEventListener(Event.REMOVED_FROM_STAGE, handleRemovedFromStage);

            removeEventListener(MouseEvent.MOUSE_DOWN, handleMouseDown);
            removeEventListener(MouseEvent.MOUSE_UP, handleMouseUp);
        }

        private function handleMouseDown(e:MouseEvent):void
        {
            removeEventListener(MouseEvent.MOUSE_DOWN, handleMouseDown);
            addEventListener(MouseEvent.MOUSE_UP, handleMouseUp);
            
            // Instance is returned if either the MovieClip or Button are touched.
            switch (e.target.valueOf())
            {
                // Substitute the password numbers that correspond to each button.
                case btnKey() :
                    inputPassword +=  "0";
                    break;
                case btnKey1 :
                    inputPassword +=  "1";
                    break;
                case btnKey2 :
                    inputPassword +=  "2";
                    break;
                case btnKey3 :
                    inputPassword +=  "3";
                    break;
                case btnKey4 :
                    inputPassword +=  "4";
                    break;
                case btnKey5 :
                    inputPassword +=  "5";
                    break;
                case btnKey6 :
                    inputPassword +=  "6";
                    break;
                case btnKey7 :
                    inputPassword +=  "7";
                    break;
                case btnKey8 :
                    inputPassword +=  "8";
                    break;
                case btnKey9 :
                    inputPassword +=  "9";
                    break;

                // If the Clear button is pressed, reset.
                case btnKeyClear :
                    inputPassword = "";
                    break;

                // If the Backspace button is pressed, delete the last number from the value entered.
                case btnKeyBackspace :
                    inputPassword = inputPassword.substr(0,inputPassword.length - 1);
                    break;

                // If no button, cancel.
                default :
                    return;
            }

            // Display all digits except for the last one as '*' to protect the password.
            tfPassword.text = "";
            for (var i : Number = 0; i < inputPassword.length - 1; i ++)
            {
                tfPassword.appendText("*");
            }

            tfPassword.appendText(inputPassword.charAt(inputPassword.length - 1));
        }

        private function handleMouseUp(e:MouseEvent):void
        {
            removeEventListener(MouseEvent.MOUSE_UP, handleMouseUp);
            addEventListener(MouseEvent.MOUSE_DOWN, handleMouseDown);

            // Check that the password, once entered, matches the PASSWORD_LENGTH.
            if (inputPassword.length == PASSWORD_LENGTH)
            {
                // Disable the lock if the password is correct.
                if (savedPassword == inputPassword)
                {
                    var lockScreen:LockScreen = new LockScreen();
                    lockScreen.launchCallLogApp("previous");
                }
                
                // Reset for the next input.
                inputPassword = "";
                tfPassword.text = "";
            }
        }
    }
}

Once you are done writing your code, check your work by either going to [Control > Test Movie > Test] from the top menu or by pressing Ctrl + Enter. The value of the button pressed shows up in the text field while other values entered before are displayed as "*".

Once you've confirmed the action, the only step left is to export the ChristmasLockScreen.swf file to the theme package. For more information about this, refer to Chapter 5.

You created a Flash lock screen using the values stored in a SharedObject. However, there is an even more important step left: Store the user value in the SharedObject after configuring a separate lock screen setting. The next chapter describes this in detail.

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