flash app creation tutorial -...

@Samsung Electronics Copyright All Rights Reserved 1

Flash App Creation Tutorial

Version 1.00

Samsung Smart TV



1. FLASH APPLICATION TYPE............................................................................................................................... 4

2. HOW TO MAKE FLASH APPLICATION ........................................................................................................... 5

2.1. APPLICATION STRUCTURE ................................................................................................................................... 5

2.2. APPLICATION CONFIGURATION ........................................................................................................................... 6

2.3. INDEX.HTML ........................................................................................................................................................ 7

2.4. ENTER AND EXIT IN FLASH APPLICATION ............................................................................................................ 8

2.5. JAVASCRIPT-ACTIONSCRIPT CALL .................................................................................................................... 12

2.6. FLASH CONTENTS OPTIMIZATION ...................................................................................................................... 12

2.7. VOLUME OSD DISPLAY..................................................................................................................................... 14



Preface

Purpose of Document

This document is written to provide the guide and tutorial for making Adobe Flash based Application on Samsung TV

using Samsung Smart TV SDK.

In this document, the scope of application is restricted to the simple flash animation and game.

The more detailed tutorial about Flash Video application is given in the other document.



1. Flash Application Type

Samsung Smart TV supports two kinds of Flash Application.

1. Stand-Alone Flash Application

It directly uses the flash player that Samsung TV provides.

2. Flash App Application

It uses the Flash Plug-In attached to Samsung TV Browser. In this type, SWF Objects are embedded into

HTML files.

To use the Device API that Samsung TV provides, we recommend you to make application as

Flash App application.

Notice! Samsung Smart TV SDK only supports the development and emulation of Flash App Application.



2. How to Make Flash Application

2.1. Application Structure

Fig 1. The folders and files of Sample Flash App Application

Files/Folder Contents

Common Includes the common Javascript APIs used in App Application

(Widget.js, TVKeyValue.js and so on)

Javascript Includes the Javascript files used in App Application

(Main.js)

thumbnail Includes the thumbnail image files used in Samsung TV Apps.

The path for thumbnail image files is specified in config.xml file.

config.xml Contains the information for executing App Application.

Index.html The main html documents, which is opened when executing App Application.

sample.swf Sample Flash file embedded in index.html

sample.fla Source file for sample flash file (sample.swf)



2.2. Application Configuration

To execute the flash App application, you have to configure as the following in config.xml file.

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

<widget>

<widgetname>Flash App Sample 1.04</widgetname>

<type>user</type>

<fullwidget>y</fullwidget>

<srcctl>y</srcctl>

<flashplayer>y</flashplayer>

<category>others</category>

<ver>1.04</ver>

<ThumbIcon>./thumbnail/CL_kids_106.png</ThumbIcon>

<BigThumbIcon>./thumbnail/CL_kids_115.png</BigThumbIcon>

<ListIcon>./thumbnail/CL_kids_85.png</ListIcon>

<BigListIcon>./thumbnail/CL_kids_95.png</BigListIcon>

<description>

Contents for Flash App Sample

</description>

<width>960</width>

<height>540</height>

<author>

<name></name>

<email></email>

<link></link>

<organization></organization>

</author>

</widget>

<fullApplication>y</fullApplication> : tag for executing Application in Full-screen mode.

<category>others</category> : tag for specifying the category of Application in Samsung TV Apps.

<srcctl>y</srcctl> : tag for automatic transition of source ( From TV, media and so on to Application)

<flashplayer>y</flashplayer> : tag for specifying the application type as Adobe Flash

<ThumbIcon>./thumbnail/CL_kids_106.png</ThumbIcon> : tag for specifying the path of thumbnail image files. Also

<BigThumbIcon>, <ListIcon>, <BigListIcon> should be specified for Samsung TV Apps service.

2.3. Index.html

To embed Flash object in HTML page, the flash object should be included using the following OBJECT tag in

index.html file.

<object type="application/x-shockwave-flash"> or

<object classid ="clsid :SAMSUNG-INFOLINK-FLASHPLAYER">

<html>

<body onload="Main.onLoad();" marginwidth="0" marginheight="0" topmargin="0"

leftmargin="0" rightmargin="0" bottommargin="0">

<object type="application/x-shockwave-flash" width="960" height="540">

<param name="movie" value="./sample.swf">

</object>

</body>

</html>

Notice! To render a flash object in Full screen (960x540 Resolution), the margin of body should be set to 0.

Also the following javscript file should be included in index.html to process key event and use

common javascript APIs.



<script type='text/javascript' language='javascript' src='Common/API/Plugin.js'></script>

<script type='text/javascript' language='javascript' src='Common/API/Widget.js'></script>



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

Setting Background to transparent

In case that the background of flash object should be transparent in HTML page, the property of

“wmode” of flash object should be set to “transparent”.

<param name=" wmode " value=" transparent">

In case that you would like to overlay flash object on top of TV screen, the <srcctrl> tag should

be set as <srcctl>n<srcctl> in config.xml.



2.4. Enter and Exit in Flash Application

Flash SWF file should include the following actionscript (Red line) for getting focus and exiting to Samsung Smart TV.

import flash.external.ExternalInterface;

var loop = 0;

//set focus to this flash content

ExternalInterface.call("document.getElementById(₩"sample₩").focus");

var eventListener = new Object();

eventListener.onKeyDown = function() {

switch(Key.getCode())

{

case Key.END:

TXT.text = "Return";

_root.moving_circle.stop();

ExternalInterface.call("document.getElementById(₩"sample₩").Exit");

break;

case Key.ENTER:

checkPressedButtom();

break;

}

}

Key.addListener(eventListener);

checkPressedButtom = function() {

if(Selection.getFocus() == "_level0.playBtn")

{

TXT.text = "Play";

_root.moving_circle.play();

}else if(Selection.getFocus() == "_level0.stopBtn")

{

TXT.text = "Stop";


}else if(Selection.getFocus() == "_level0.returnBtn")

{

TXT.text = "Return";


ExternalInterface.call("document.getElementById(₩"sample₩").Exit");



}else{

TXT.text = "Press Buttom";

}

}

Selection.setFocus("playBtn");

For Flash Object to get focus when stating application, the actionscript

ExternalInterface.call("document.getElementById(₩"sample₩").focus")

should be called. After this call, Flash Object can receive input from Remote controller.

“sample is the object ID of flash object. So, you should change it as the flash object ID that you’ve set.

Fig 2. The first scene of Sample Application



Fig 3. Selecting Play button in Sample Application

Fig 4. Selecting Stop button in Sample Application



Fig 5. Selecting Return button in Sample Application

To exit to Samsung Smart TV main screen from application, you should call the actionscript

ExternalInterface.call("document.getElementById(₩"sample₩").Exit").



2.5. Javascript-ActionScript Call

In previous section, actionscript in Flash application is called for getting focus and exiting application. This actionscript

is connected to the corresponding javascript that TV provides.

Also when calling javascript, the function that is specified in the corresponding actionscript can be

executed.

As the following, you can register the corresponding actionscript function to javascript function using “addCallback” of

ExternalInterface.

In the following example, the javascript “Play” is registered to actionscript “_externalResume”

// Wire up JS external interface - exposing functions

if(ExternalInterface.available){

ExternalInterface.addCallback("Play", null, _externalResume);

}

// Play

function _externalResume() :Void{

TXT.text = "Play by JS";

_root.moving_circle.play();

}

2.6. Flash Contents Optimization

Because of the limitation of Flash Player on TV, performance slow-down in an animation or sound/video processing

can be observed on TV, not on SDK. Here, we provide several tips for optimizing contents to reduce those problems on

TV.

Avoiding Sound Output delay

– Problem : Sound effect connected to key press is output with delay when pressing keys continuously.

– Cause : When pressing button continuously in Flash contents, press event is passed to Flash Player Engine

with the interval, and in case that flash engine on TV is busy processing animation or sound, sound effect is

buffered and output with delay.

– Tip for avoiding problem:

1. Execute sound effect when users release button.

2. Ignore the key press event given to Flash Application in the 500~800ms interval

3. Remove the unnecessary sound effect in case animation and sound effects are too much for TV HW.



Reducing the main memory usage

– Problem : Rendering speed gets slow when loading large size flash file, and stop playing flash application

when short of run-time memory.

– Cause : The run-time memory size that each Flash object instance is up to 60MB, and in case that other

application are using run-time memory already, the available memory size gets smaller.

– Tip for avoiding problem : To reduce the run-time memory that flash application requires, organize the

flash SWF as the following figure. Main.swf file acts as the main loader for sub swf files that have the actual

application contents.

Fig 6. The Structure of application which SWF Files Loads/Unloads

Performance Slow down in Animation

– Problem : Some frames in flash animation are dropped when Flash player on TV could not process each

animation frame in time.

– Cause : Flash player on TV could not render over 30 FPS for some complex Flash animations.

– Tip for avoiding problem

Lower frame Per second property value as 10~20 FPS in flash animation

Avoid Fade In/Fade Out effect in Flash animation

Recommend to use Vector Graphic animation rather than Image animation

Recommend to use HW code as the format of Sound/Image/Video contents.

2.7. Volume OSD Display

To show the Volume OSD that TV provides in Flash Application, you should include the following code in index.html

and Main.js.

In index.html, you should include the Main.js, and in Main.js, you should unregister volume up/down keys for TV to

handle this.

It is recommended not to register EXIT, MENU, SAMSUNG SMART TV key for TV to handle this automatically.

Index.html

<html>

<head>

<title>Flash Sample App</title>

</head>

<body onload="Main.onLoad();" marginwidth="0" marginheight="0" topmargin="0" leftmargin="0" rightmargin="0"

bottommargin="0">



<object type="application/x-shockwave-flash" id="sample" width="960" height="540">

<param name="movie" value="./sample.swf">

</object>



<object id="pluginObjectNNavi" border="0" classid="clsid:SAMSUNG-INFOLINK-NNAVI"

style="opacity:0.0;background-color:#000000;width:0px;height:0px;"></object>

<object id="pluginObjectTVMW" border=0 classid="clsid:SAMSUNG-INFOLINKTVMW"></object>



<script type='text/javascript' language='javascript' src='Common/API/Plugin.js'></script>

<script type='text/javascript' language='javascript' src='Common/API/Widget.js'></script>

<script type='text/javascript' language='javascript'

src='Common/API/TVKeyValue.js'></script>



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

</body>

Main.js (javascript)

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

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

Main.onLoad = function()

{



widgetAPI.sendReadyEvent();

window.onShow = Main.initKeys;

}

Main.initKeys=function()

{

var NNaviPlugin = document.getElementById("pluginObjectNNavi");

pluginAPI.SetBannerState(1);

NNaviPlugin.SetBannerState(2);

// Unregister for not processing the following keys in Flash Object

pluginAPI.unregistKey(7); //unregister volume up button

pluginAPI.unregistKey(11); //unregister volume down button

pluginAPI.unregistKey(27); //unregister mute button

pluginAPI.unregistKey(45); //unregister EXIT key

pluginAPI.unregistKey(262); //unregister MENU key

pluginAPI.unregistKey(147); //unregister Samsung Smart TV key

}

flash app creation tutorial -...

Documents