overlaid image from flash memory...

@Samsung Electronics Copyright All Rights Reserved 1

Overlaid Image from Flash Memory

Tutorial

Version 1.00

Samsung Smart TV

Overlaid Image from Flash Memory Tutorial


1. OVERVIEW .............................................................................................................................................................. 4

2. INTRODUCTION .................................................................................................................................................... 4

2.1. DEVELOPMENT ENVIRONMENT ............................................................................................................................ 4

3. OVERALL STRUCTURE ....................................................................................................................................... 5

3.1. THE APP‟S DESIGN ............................................................................................................................................... 5

3.2. APP PROJECT DIRECTORY STRUCTURE .................................................................................................................. 5

4. APP CREATION....................................................................................................................................................... 6

4.1. STAGE 1 - CREATING THE BASIC APP ................................................................................................................... 6

4.2. STAGE 2 - CREATING THE FLASH FILE ................................................................................................................ 33

4.3. STAGE 3 - COMMUNICATING WITH FLASH FILE USING JAVASCRIPT ..................................................................... 37

5. CONCLUDING REMARKS ................................................................................................................................. 39



Preface

Purpose of Document

This document is a tutorial that is aimed at App developers for Samsung Smart TV, and is written to help developers

understand how to use the Adobe Flash Player features of the Samsung App service. These features are needed to access

Flash Memory and display their contents (images) by putting overlaid images on App and then remove it. With the help

of this tutorial a user can learn how to access Flash memory and display/hide its contents on flash.

It is recommended that you read “Development Guide for Samsung Smart TV” (hereinafter referred to as "the Guide")

and USB APIs. This document provides references to the Guide tutorial for your understanding. Other

recommendations are “Flash App Creation Tutorial” and “Samsung Smart TV SDKUX Guideline”.

Target Readers

This document is aimed at programmers who have used web development languages such as HTML, CSS, Action

Script and JavaScript. This document has been written on the assumption that readers have already read the Guide.



1. Overview

This tutorial will go step by step through the development of a App that features Flash Memory access and display

overlaid JPEG pictures like a stack and then removing images one-by-one. The main goal for this tutorial is to present

basic ideas in clear and possibly simple way. It focuses on providing basic code that needs to take place in any App that

uses Flash Memory Access. At the time of writing the Samsung Smart TV engine is supporting version 10 of the

Adobe Flash Player.

2. Introduction

In order to develop the Adobe Flash Player App, developers are required to have background knowledge such as HTML,

JavaScript, ActionScript and CSS. In general, there will be no explanation about HTML, JavaScript, ActionScript or

CSS provided in this document. However some aspects including cooperation between JavaScript and ActionScript will

be discussed as they are crucial for good understanding of the idea. Developing Apps suited for TVs is different from

developing Apps on PCs in several aspects. You can get more information on this from the Guide.

2.1. Development environment

You are going to use the Samsung Smart TV SDK ("SWDK") version 1.5 made by Samsung to create your App. With

use of the emulator provided with the SWDK, you can operate your App before actually putting it in your TV.

It is also possible to run the App on a TV using the "User App" feature. For details of this process please see the

document "User App for Samsung Apps Into a TV Set". Uploading to a TV is recommended as a test method.



3. Overall structure

In this section, we are going to examine the structure of the App that we will create.

3.1. The App’s design

Our Flash Player App will be composed of the following parts:

1. ActionScript based application:

a. Load_image.swf file - generated by the Flash application and played by Flash Player.

b. Load_image.fla file - contains ActionScript code to control the playback.

2. JavaScript based application:

a. Main.js - module with the basic player functionality

b. usb.js - Accesses Flash Memory devices and Contents

c. usbController.js - Helps in browsing contents

d. usbUI.js - Handles Displaying contents of Flash Memory

e. structure.js - Handles to store contents with relevant File/Directory information

3.2. App project directory structure

The following picture presents the App project directory structure:

Fig 1: File/Directory structure



Files/Directories Description

Common Includes the common Javascript APIs used in App

Javascript Includes the Javascript files used in App

Images Includes the all image files used in App

index.html Html file which runs in App

config.xml Configuration file for App

Main.css Cascade style sheet file

Load_Image.swf Flash file

Load_image.fla contains ActionScript code to control the flash display

4. App Creation

This section will briefly show the initial configuration of the App. It assumes that basic App creation is already

understood by the reader. For more detail on this part, please see the Guide tutorial.

4.1. Stage 1 - Creating the Basic App

Start the SWDK for Samsung TV Apps. Create a new App using the following config.xml file:

<?xml version="1.0" encoding = "UTF-8" ?>

<widget>

<widgetname>Image Overlay from USB</widgetname>

<type>user</type>

<fullwidget>y</fullwidget>

<srcctl>n</srcctl>

<flashplayer>y</flashplayer>

<category>others</category>

<ver>1.04</ver>

<ThumbIcon>Images/tut_106.png</ThumbIcon>

<BigThumbIcon>Images/tut_115.png</BigThumbIcon>

<ListIcon>Images/tut_85.png</ListIcon>

<BigListIcon>Images/tut_95.png</BigListIcon>

<description>Drawing overlaid Image from USB</description>

<width>960</width>

<height>540</height>

<author>

<name>Samsung Electronics Co. Ltd.</name>

<email></email>

<link>http://www.samsung.com</link>

<organization>Samsung Electronics Co. Ltd.</organization>

</author>

</widget>

<fullwidget>y</fullwidget> - this means that the App will run in full screen mode. This affects what keys are

registered by default.

<type>user</type> - this enables the user App feature for testing on a real TV set. This tag has no effect on the

emulator.

Add a file index.html as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Image Overlay From USB App Tutorial</title>



<link rel='stylesheet' type='text/css' href = 'Main.css'/>



<script type="text/javascript" src="$MANAGER_WIDGET/Common/API/Plugin.js"></script>

<script type="text/javascript" src="$MANAGER_WIDGET/Common/API/Widget.js"></script>

<script type="text/javascript" src="$MANAGER_WIDGET/Common/API/TVKeyValue.js"></script>

<script type="text/javascript" src="$MANAGER_WIDGET/Common/Util/Language.js"></script>

<script type="text/javascript" src="$MANAGER_WIDGET/Common/Util/Include.js"></script>

<script type="text/javascript" src="$MANAGER_WIDGET/Common/Plugin/Define.js"></script>



<script type='text/javascript' language='javascript' src='Javascript/Main.js'></script>

<script type='text/javascript' language='javascript' src='Javascript/usb.js'></script>

<script type='text/javascript' language='javascript' src='Javascript/structure.js'></script>

</div>



<div id="nav" class="widget" >

<img src="Images/btn/up.png"> Up

<img src="Images/btn/down.png"> Down

<img src="Images/btn/enter.png"> Enter / Display

<img src="Images/btn/exit.png"> Remove Image

<img src="Images/btn/return.png"> Return

</div>

<a href='javascript:void(0);' id='keyHandler' onkeydown='Main.keyHandler()'></a>

</body>

</html>

Add Plugin with class id SAMSUNG-INFOLINK-STORAGE for accessing Flash memory and create a Adobe flash

player object, Topic1 to Topic22 refers to the contents which are drawn onto their innerHtml at runtime.

Main.keyHandler() listens to the key events and takes appropriate action. For more details of index.html refer to “App

Development Guide for Samsung Smart TV.pdf”.

Main.css:

Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation semantics (the look and

formatting) of a document written in a markup language. CSS rules are added to a webpage either by writing the code

directly into the <head> of the webpage HTML, or by linking to a separate file. A separate file containing only CSS

rules is commonly referred to as a “stylesheet”, and has the extension “.css “.

body {

margin: 0;

padding: 0;



}

#mainBG

{

position : fixed;

left :0px;

top :0px;

width : 960px;

height : 510px;

visibility:visible;

background-image: url('Images/widget_bg.png');

}

#nav {

position: absolute;

top: 511px;

left: 0px;

width: 960px;

height: 29px;

background-color:#000;

color: #fff;

text-align:right;

}

#nav img {

vertical-align: -3px;

margin-left: 20px;

margin-right: 10px;

}

#Path

{

position :absolute;

left :30px;

top :30px;



height:10px;

width:350px;

visibility:visible;

}

#Topic1

{

position :absolute;

left :30px;

top :50px;

height:10px;

width:290px;

visibility:visible;

}

#Topic2

{

position :absolute;

left :30px;

top :70px;

height:10px;

width:290px;

visibility:visible;

}

#Topic3

{

position :absolute;

left :30px;

top :90px;

height:10px;

width:290px;

visibility:visible;

}

#Topic4



{

position :absolute;

left :30px;

top :110px;

height:10px;

width:290px;

visibility:visible;

}

#Topic5

{

position :absolute;

left :30px;

top :130px;

height:10px;

width:290px;

visibility:visible;

}

#Topic6

{

position :absolute;

left :30px;

top :150px;

height:10px;

width:290px;

visibility:visible;

}

#Topic7

{

position :absolute;

left :30px;

top :170px;

height:10px;

width:290px;



visibility:visible;

}

#Topic8

{

position :absolute;

left :30px;

top :190px;

height:10px;

width:290px;

visibility:visible;

}

#Topic9

{

position :absolute;

left :30px;

top :210px;

height:130px;

width:290px;

visibility:visible;

}

#Topic10

{

position :absolute;

left :30px;

top :230px;

height:10px;

width:290px;

visibility:visible;

}

#Topic11

{

position :absolute;



left :30px;

top :250px;

height:10px;

width:290px;

visibility:visible;

}

#Topic12

{

position :absolute;

left :30px;

top :270px;

height:10px;

width:290px;

visibility:visible;

}

#Topic13

{

position :absolute;

left :30px;

top :290px;

height:10px;

width:290px;

visibility:visible;

}

#Topic14

{

position :absolute;

left :30px;

top :310px;

height:10px;

width:290px;

visibility:visible;

}



#Topic15

{

position :absolute;

left :30px;

top :330px;

height:10px;

width:290px;

visibility:visible;

}

#Topic16

{

position :absolute;

left :30px;

top :350px;

height:10px;

width:290px;

visibility:visible;

}

#Topic17

{

position :absolute;

left :30px;

top :370px;

height:10px;

width:290px;

visibility:visible;

}

#Topic18

{

position :absolute;

left :30px;

top :390px;



height:10px;

width:290px;

visibility:visible;

}

#Topic19

{

position :absolute;

left :30px;

top :410px;

height:10px;

width:290px;

visibility:visible;

}

#Topic20

{

position :absolute;

left :30px;

top :430px;

height:10px;

width:290px;

visibility:visible;

}

#Topic21

{

position :absolute;

left :30px;

top :450px;

height:10px;

width:290px;

visibility:visible;

}

#Topic22



{

position :absolute;

left :30px;

top :470px;

height:10px;

width:290px;

visibility:visible;

}

.widget {

position: absolute;

top: 0px;

left: 0px;

color: #999;

font-size: 19px;

}

.fullscreen {

position: absolute;

top: 40px;

left: 500px;

width: 400px;

height: 300px;

}

#container {

width: 960px;

height: 540px;

}

In css # symbol is used for id and dot (.) is used for class. In Main.css you can define styles for different ids and classes.

For more details refer to “App Development Guide for Samsung Smart TV.pdf”.

mailto:[email protected]



Main.js:

var Main = {

player: null,

originalSource: null

}

/*Common API Objects*/

var widgetAPI = new Common.API.Widget();

var pluginAPI = new Common.API.Plugin();

var tvKey = new Common.API.TVKeyValue();

/*Function to be loaded on launch of widget*/

Main.onLoad=function()

{

alert("Main.onLoad()");

widgetAPI.sendReadyEvent();

usbController.init();

usbTV.init();

/*API for various TV functionalities*/

var mwPlugin = document.getElementById("pluginObjectTVMW");

this.originalSource = mwPlugin.GetSource();

mwPlugin.SetMediaSource();

/*Flash Object Support*/

Main.player = window["flvplayer"];

if(Main.player)

{ document.getElementById("keyHandler").focus(); }

else

{ alert("Flash Engine is not present"); }

}



/*Function to handle various key events*/

Main.keyHandler=function(){

alert("IN FIRST COLUMN%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%");

var dwKeyCode = event.keyCode;

switch(dwKeyCode) {

case tvKey.KEY_ENTER:

usbController.keyEnter();

break;

case tvKey.KEY_UP:

usbController.shiftUp();

break;

case tvKey.KEY_DOWN:

usbController.shiftDown();

break;

case tvKey.KEY_RETURN:

event.preventDefault();

usbController.keyReturn();

break;

case tvKey.KEY_EXIT:


Main.remove();

break;

default:

alert("Unhandled key");

break;

}

}



/*Function to unload widget*/

Main.onUnload=function()

{

var mwPlugin = document.getElementById("pluginTVMW");

if (mwPlugin && (this.originalSource != null) )

{

/* Restore original TV source before closing the widget */

mwPlugin.SetSource(this.originalSource);

alert("Restore source to " + this.originalSource);

}

}

/*Function to Add Images on stack */

Main.play = function(path)

{

try {

alert("playing...: "+path);

// Set media file URL

Main.player.showImage(path);

} catch (e) {

alert("Error in Main.play() function: " + e);

}

}

/*Function to remove images */

Main.remove = function()

{

try {

alert("removing...: ");

// Set media file URL

Main.player.rem_img();



} catch (e) {

alert("Error in Main.remove() function: " + e);

}

}

Main.js interacts directly with usbController and usbTV for storing and displaying contents.

usb.js:

/*Variable for USB connection event */

var USB_CONNECTED_EVENT = 0;

var USB_DISCONNECTED_EVENT = 1;

/*Variable to store USB Storage plugin*/

var usbPlugin = null;

var currentFile=0;

var currentLevel=0;

var currentFilePath = null;

var commonFilePath=null;

var usbTV =

{

/*Array to store USB contents*/

detailsArray:null,

}

/*Function to initialize USB functionality*/

usbTV.init = function()

{

//Number of USBs connected

var nUSBCount = 0;

//Number of Partitions in device

var nPartition = 0;

var Partition;

// Device ID of USB



var nid1;

var nid;

this.detailsArray=new Array();

//Path where USB is mounted

var mntPath;

usbPlugin = document.getElementById("pluginStorage");

// If there isn't mounted USB : -1

// otherwise : from 1 ~

nUSBCount = usbPlugin.GetUSBListSize();

if(nUSBCount == -1)

document.getElementById("Path").innerHTML="No USB Devices Found";

for (var i = 0; i < nUSBCount; i++)

{

nid1 = usbPlugin.GetUSBDeviceID(i);

nid = parseInt(nid1);

alert ("nid = " + nid);

alert ("VendorName =" + usbPlugin.GetUSBVendorName(nid));

alert ("ModelName =" + usbPlugin.GetUSBModelName(nid));

nPartition = usbPlugin.GetUSBPartitionNum(nid);

for (var j = 0; j < nPartition; j++)

{

mntPath = usbPlugin.GetUSBMountPath(nid, j);

usbTV.drawFileList (mntPath);

alert ("MountPath = " + usbPlugin.GetUSBMountPath(nid, j));

alert ("AvailSize = " + usbPlugin.GetUSBAvailSize(nid, j));

alert ("TotalSize = " + usbPlugin.GetUSBTotalSize(nid, j));

}

}



alert("nUSBCount=================="+nUSBCount);

alert("_------------------------------___________________________________________");

// Subscribe the USB Event

usbPlugin.SubscribeEvent(USB_CONNECTED_EVENT); // USB connection Event

usbPlugin.SubscribeEvent(USB_DISCONNECTED_EVENT); // USB Disconnection Event

usbPlugin.OnMessage = 'usbTV.Message';

}

/*Function to be executed on USB connection events*/

usbTV.Message = function()

{

//Number of USBs connected

var nUSBCount = 0;

//Number of Partitions in device

var nPartition = 0;

var Partition;

// Device ID of USB

var nid1;

var nid;

delete this.detailsArray;

this.detailsArray=new Array();

//Path where USB is mounted

var mntPath;

//USB plugin

usbPlugin = document.getElementById("pluginStorage");

currentFilePath=null;

// If there isn't mounted USB : -1

// otherwise : from 1 ~

nUSBCount = usbPlugin.GetUSBListSize();

if(-1 == nUSBCount)



{

document.getElementById("Path").innerHTML="No USB Devices Found";

usbUI.hide_data();

return;

}

for (var i = 0; i < nUSBCount; i++)

{

nid1 = usbPlugin.GetUSBDeviceID(i);

nid = parseInt(nid1);

alert ("nid = " + nid);

alert ("VendorName =" + usbPlugin.GetUSBVendorName(nid));

alert ("ModelName =" + usbPlugin.GetUSBModelName(nid));

nPartition = usbPlugin.GetUSBPartitionNum(nid);

for (var j = 0; j < nPartition; j++)

{

mntPath = usbPlugin.GetUSBMountPath(nid, j);

usbTV.drawFileList (mntPath);

alert ("MountPath = " + usbPlugin.GetUSBMountPath(nid, j));

alert ("AvailSize = " + usbPlugin.GetUSBAvailSize(nid, j));

alert ("TotalSize = " + usbPlugin.GetUSBTotalSize(nid, j));

}

}

alert("nUSBCount=================="+nUSBCount);

}

usbTV.drawFileList = function(mntPath)

{

usbTV.readV1 (mntPath);



}

/* Function for showing list of content, when enter a directory */

usbTV.readV1 = function(mntPath)

{

//Hide current listing

usbUI.hide_data();

var fs = new FileSystem();

commonFilePath = '/dtv/usb/' + mntPath;

if(currentFilePath == null)

{currentFilePath = commonFilePath;currentFile=0;}

else

{

currentFilePath = currentFilePath + '/'+mntPath;

var arr_length = this.detailsArray.length;

this.detailsArray.splice(0,arr_length);

currentFile=0;

}

alert("commonfilepath......"+currentFilePath);

var files = fs.readDir (currentFilePath);

this.detailsArray[currentFile]

for (var i = 0; i < files.length; i++)

{

alert ("-------- " + files[i].name);

//Save array element as new obeject

this.detailsArray[currentFile]=new usbDocument(files[i].name,currentLevel,0);

alert ("-------- ++++++" + this.detailsArray[currentFile].title);

if (files[i].isDir)

{

this.detailsArray[currentFile].hasChild=1;



}

currentFile++;

}

// Show Content Listing

usbUI.showUI();

}

/* Function for showing list of content of parent directory, when return from a directory */

usbTV.readPath = function()

{

usbUI.hide_data();

var pathStr=currentFilePath;

var slashPos=pathStr.lastIndexOf('/');

pathStr=pathStr.substring(slashPos-3,pathStr.length);

var str_to_search = 'usb';

alert("in readPath..."+ currentFilePath);

var i = 0;

while(i <3)

{

alert( "compared vals here "+ pathStr[i]+ " "+str_to_search[i]);

if(pathStr[i] == str_to_search[i])

++i;

else

break;

}

if(3==i)

//blockNavigation()

widgetAPI.sendReturnEvent ();

else

currentFilePath = currentFilePath.substring(0,slashPos);

var fs = new FileSystem();



In usb.js detailsArray is initialized with null. In usbTV.init() function usbPlugin is initialized with storage plugin that is

defined in index.html as ……… . It then checks number of USBs connected to TV. If there is no usb connected then

GetUSBListSize() function returns -1 or it will return number of USBs connected. If it returns -1then a message will be

displayed on screen. SubscribeEvent(…) function is used to subscribe event, when USB gets connected or disconnected.

In usbTV.drawFileList(…) function usbTV.readV1(…) is called.

In usbTV.readV1(…) function first of all current data gets hidden. Then „/dtv/usb/‟ is added in the beginning of

current mount path (mntPath). If USB is getting accessed first time after starting the App the currentFilePath will be

null, so it is assigned the value of commonFilePath. readDir function is executed on currentFilepath and it content is

stored in files array. Elements of files array are stored in detailsArray as usbDocuments. If any file is a directory then its

hasChild property is set to 1. Then the contents are shown on screen.

usbTV.readPath() function is triggered on pressin return key. In usbTV.readPath() function currentFilePath is checked.

If the last part of CurrentFilePath is usb then it should get out of App. If it is not the case then the part after the last slash

is removed from currentFilePath. Now currentFilePath is read and its contents are stored in files array and finally in

detailsArray that is displayed on screen.

usbTV.checkUSB() function returns true if any USB is connected, else return false.

usbcontroller.js

var usbController={

//Current focused element in listing

currDiv:0,

//Previously focused element in listing

prevDiv:0,

//Position of parent directory in previous listing

prevDir:0,

usbContent:null,

focussedContent:null,

}

usbController.init=function(){

document.getElementById("Topic"+(this.currDiv+1)).style.color="blue";

}

/*Function to go up in content listing */



usbController.shiftUp=function(){

this.prevDiv=this.currDiv;

this.currDiv--;

alert("contentBox===="+contentBox);

alert("this.currDiv===="+this.currDiv);

if(this.currDiv<0)

this.currDiv=contentBox-1;

usbController.blurTitle();

usbController.highlightTitle();

}

/*Function to go down in content listing */

usbController.shiftDown=function(){

this.prevDiv=this.currDiv;

this.currDiv++;

alert("contentBox===="+contentBox);

alert("this.currDiv===="+this.currDiv);

if(this.currDiv>=contentBox)

this.currDiv=0;

usbController.blurTitle();

usbController.highlightTitle();

}

/* Set focus on current element */

usbController.highlightTitle=function(){


}

/* Remove focus from previous element */

usbController.blurTitle=function(){



this.currDiv = this.prevDir;

usbController.changeFocus();

document.getElementById("keyHandler").focus();

}

/*If any USB is not connected*/

else

{ widgetAPI.sendReturnEvent (); }

}

/*Function to change focus*/

usbController.changeFocus=function(){

this.prevDiv=0;


}

Usbcontroller.js directly interacts with Main.js on button events and provides functionality of blur and highlighting

while browsing contents up and down. usbController.keyEnter() is called upon pressing enter button on remote and if

it‟s a file it calls Main.play(path), path is Flash memory file path where it is accessed. Main.play() and calls

Main.player.showImage(path), Load_image.fla should register showImage with a callback function.

In usbController.init() function color of currDiv element is changed to blue.

In usbController.shiftUp() function prevDiv is assigned the value of currDiv, and currDiv is decremented.

usbController.blurTitle() function is called to make previously focused element blur. usbController.highlightTitle()

function is called to make currently focused element highlighted.

usbController.shiftDown() is same as usbController.shiftUp(), only difference is currDiv is incremented.

In usbController.keyEnter() if current element is a directory means it has a child, then its position is saved in prevDir

element. Its title is assigned to focusedContent value. usbTV.readV1(…) is called on this value and focus is changed to

the first element of current directory. If current value is not a directory means it is a file then this file is displayed in

flash interface.

In usbController.keyReturn() function first it checks number of USBs connected. If any of it is connected then currDiv

element gets black, and usbTV.readPath() function is called which shows the listing of parent directory. currDiv

element gets value of prevDir, and focus is changed to current directory. If no USB is connected then App will be exited.



usbController.changeFocus() function changes the color of currDiv elenet to blue.

usbUI.js:

var usbUI={

contentArray:null,

}

var contentBox=0;

/* Function to show USB contents*/

usbUI.showUI=function(){

this.contentArray=usbTV.detailsArray;

contentBox=this.contentArray.length-2;

alert("contentBox=================="+contentBox);

var totalTopic=0;

if((this.contentArray.length-2)>22)

totalTopic=22;

else

totalTopic=this.contentArray.length-2;

for(var i=0;i<(totalTopic);i++)

{ alert("$$$$$$$$$$$$$$$$$$$$$$$$$$ FILE_NAME " +this.contentArray[i+2].title);

document.getElementById("Topic"+(i+1)).innerHTML=this.contentArray[i+2].title;

}

document.getElementById("Path").innerHTML="PATH: "+currentFilePath;

}

/* Function to hide USB contents*/

usbUI.hide_data=function(){

for(var i=0;i<22;i++)

document.getElementById("Topic"+(i+1)).innerHTML="";

}

usbUI.js defines how the content of flash memory will be displayed on TV screen.



contentArray is the array which contains the element of current directory. It is assigned the value of detailsarray that is

defined in usb.js.

In showUI function it shows the contents of current directory. If the number of contents is greater than 20 then variable

totalTopic (number of elements to show at one time) is set to 22. Then the title of all the contents are shown using for

loop. Content of Path div. is set to currentFilePath to show the usb file system path.

In hide_data function all the contents of Topic div. is set to nothing to hide the previous listing of directory. It is done so

that we can show the new listing of directory contents.

Structure.js:

/*Function to make new content node*/

var usbDocument=function(title,level,hasChild){

this.title=title;

this.level=level;

this.hasChild=hasChild;

}

var prevStates=function(currPos,prevPos){

this.currPos=currPos;

this.prevPos=prevPos;

}

Structure.js defines the structure of every directory node.

usbDocument function defines the title, level, and hasChild (if a file is directory) property of any node.

4.2. Stage 2 - Creating the Flash File

Creating .fla file:

Open Adobe Flash Professional CS5. Choose File > New. In New Dialog box select ActionScript 2.0 and press OK.

Select first frame in Timeline of first layer. Then press F9. This will open action panel for this frame, where we can

write our ActionScript code. Write this code in action panel.

/* Imported Classes*/

import flash.external.ExternalInterface;

import mx.transitions.Tween;



import mx.transitions.easing.*;

if (flash.external.ExternalInterface.available)

{

info("onLoad: External Interface available, exposing callbacks to enclosing JavaScript");

/*Register functions to call from javascripts*/

flash.external.ExternalInterface.addCallback("showImage",null, _externalShowImage);

flash.external.ExternalInterface.addCallback("rem_img",null, removeImage);

}

else

{

warn("onLoad: External Interface is not available - no methods exposed");

}

_root.createEmptyMovieClip("ImageContainer_mc",_root.getNextHighestDepth());

var top:Number = -1;

//Array to store clips

var clip_arr:Array = new Array();

//Top movie clip

var mc:MovieClip = null;

/*Function to remove Images from stack*/

function removeImage(){

if(top >= 0)

{

trace(pic_arr[top] + ": removed " + top);

new Tween(mc,"_alpha",Strong.easeOut,100,0,0.1,true);

clip_arr.pop();

top = clip_arr.length - 1;

mc = clip_arr[top];


}

}



/*Function to add Images in stack*/

function _externalShowImage(str:String) {

var mystr=str.substr(str.lastIndexOf('.')+1,str.length);

if ((mystr == "jpg" ) || (mystr == "png" ) || (mystr == "bmp" ) || (mystr == "jpeg" ))

{

top++;

if(mc)mc._alpha = 20;

ImageContainer_mc.createEmptyMovieClip("mc"+top, top+1);

mc = ImageContainer_mc["mc"+top];

mc._x = top*20;

mc._y = top*20;

mc.loadMovie(str);

clip_arr.push(mc);

clip_arr[top]._alpha = 100;

}

}

Decription of this actionscript code is give below:

if (flash.external.ExternalInterface.available)

{

info("onLoad: External Interface available, exposing callbacks to enclosing JavaScript");

/*Register functions to call from javascripts*/

flash.external.ExternalInterface.addCallback("showImage",null, _externalShowImage);

flash.external.ExternalInterface.addCallback("rem_img",null, removeImage);

}

else

{

warn("onLoad: External Interface is not available - no methods exposed");

}

The flash.external.ExternalInterface class is the External API, that enables straightforward communication between

ActionScript and the Flash Player container. We can call an ActionScript function in Flash Player, using JavaScript in

the HTML page.

First of all addCallBack function is used to register _externalShowImage and removeImage functions with name

showImage and rem_img, that will be called by javascript.

_root.createEmptyMovieClip("ImageContainer_mc",_root.getNextHighestDepth());



createEmptyMovieClip function is used to create a empty movie clip with ImageContainer_mc as it‟s instance name

and with currently available highest depth.

var top:Number = -1;

//Array to store clips

var clip_arr:Array = new Array();

//Top movie clip

var mc:MovieClip = null;

top variable shows number of images currently on stage this is initialized as -1, because initially array is empty. clip_arr

is array to contain clips.

/*Function to remove Images from stack*/

function removeImage(){

if(top >= 0)

{ trace(pic_arr[top] + ": removed " + top);


clip_arr.pop();

top = clip_arr.length - 1;

mc = clip_arr[top];


}

}

removeImage function is used to remove image from stack of images. top checks if there is any image in

ImageContainer_mc. If there is any image then it changes alpha property of currently overlaid image to 0 by making an

instance of Tween class obeject. Top most clip from stack is removed using pop() function. Then mc is assigned the new

top of clip_arr and its alpha is changed to 100, again using Tween class object. top clip is removed from array using pop

function and top is assigned the new value to show new number of images.

We have used Tween class to change the alpha property of clip smoothly.

/*Function to add Images in stack*/

function _externalShowImage(str:String) {

var mystr=str.substr(str.lastIndexOf('.')+1,str.length);

if ((mystr == "jpg" ) || (mystr == "png" ) || (mystr == "bmp" ) || (mystr == "jpeg" ))

{

top++;

if(mc)mc._alpha = 20;

ImageContainer_mc.createEmptyMovieClip("mc"+top, top+1);

mc = ImageContainer_mc["mc"+top];



mc._x = top*20;

mc._y = top*20;

mc.loadMovie(str);

clip_arr.push(mc);

clip_arr[top]._alpha = 100;

}

}

_externalShowImage function is used to draw an overlaid image in flash image interface. First of all type of file is

checked. Variable mystr stores the substring of file name starting from last index of dot (.) till the end of the string. If it

is jpg, png or bmp then succeeding statements will be executed.

Number of current images is incremented. _alpha value of previously overlaid image is changed to 20. A new movie

clip is created inside ImageContainer_mc using createEmptyMovieClip function with depth value top+1 to give it

highest depth value. This movie clip mc is then assigned to movie clip mc. Position of top left corner of this clip is

changed to show previously overlaid images also. This is done by multiplying 20 with index of this clip and assigning

this to _x & _y value of movie clip. This clip is then added in array and value of _alpha is changed to 100.

Save this file with some <filename>.fla (Load_image.fla in our case).

Creating .swf file:

Compile this .fla file by pressing Ctrl + Enter. A .swf file will be created with same name as fla file.

4.3. Stage 3 - Communicating with flash file using JavaScript

After finishing the Flash file part we are ready to implement all the event handling procedures we need.

/*Function to handle various key events*/

Main.keyHandler=function(){

alert("IN FIRST COLUMN%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%");

var dwKeyCode = event.keyCode;

switch(dwKeyCode) {



break;

case tvKey.KEY_UP:




break;



break;




break;



Main.remove();

break;

default:

alert("Unhandled key");

break;

}

}

First of all the Main.keyHandler() function, that is defined in Main.js retrieves the pressed key value from the global

event object that is provided by the App Engine. All the event.keyCode values are being compared with the enumeration

constants defined in the, common for all the Apps, library file provided by the tvKey object which has been defined

globally. The object could be created in any place of the code in the following form: var tvKey = new

Common.API.TVKeyValue(). It is true with the assumption that there is an html reference to its source file within the

index.html page. And finally we need the wrapper functions to execute Flash Player‟s commands.



break;

Enter key is used to usbController.keyEnter function described in usbController.js. It checks if file is directory or not if

it is an image in flash memory then it calls showImage function which calls _externalShowImage from ActionScript.

case tvKey.KEY_UP:


break;





break;

Up and down keys are use to go through the listing of current directory by calling usbController.shiftUp() and

usbController.shiftDown(), that are defined in usbController.js.




break;



Main.remove();

break;

Return key is used to come back to parent directory (if there is any) or return from App using usbController.keyReturn()

function, that is defined in usbController.js. Exit key is used to remove using rem_img which calls removeImage from

actionscript.

5. Concluding remarks

This tutorial has explored the main functions of the Flash Player plugin used to access USB device contents. It is

recommended that you read the full API description for each plugin, which you can find in the Guide.