SWF based Flash Application Tutorial

Version 1.00

Samsung SmartTV
@Samsung Electronics Copyright All Rights Reserved

SWF based Application Tutorial

Introduction .................................................................................................. 1.1 1.2 Purpose of This Document ............................................................................ Requirements ..........................................................................................

Packaging an SWF based Application ..................................................................... 2.1 Structure of SWF based Application .................................................................

Creating a Simple SWF based Application ................................................................ 3.1 3.2 Writing a config.xml .................................................................................. Sample SWF File ......................................................................................

@Samsung Electronics Copyright All Rights Reserved

SWF based Application Tutorial

1 Introduction
1.1 Purpose of This Document
This document is for explaining about the structure of Samsung SmartTV application that uses Adobe SWF file and how to make that application with authored SWF file. This document does not contain the contents about how to make Adobe AIR application and application using Flash Player Plug-In for Samsung SmartTV. Samsung TV Apps SDK does not provide the emulation of SWF based application.

1.2 Requirements
Adobe SWF file can be authored using Flash Authoring Tool. Samsung TV Apps SDK does not provide a method to author SWF file or export as SWF file format. We recommend to use Adobe Flash Authoring Tool for making Adobe SWF file and emulating the run on Samsung SmartTV. Adobe Flash Authoring Tool : Adobe Creative Suite, Adobe Flash Professional, Flash Builder, and so on

@Samsung Electronics Copyright All Rights Reserved

SWF based Application Tutorial

2 Packaging an SWF based Application

2.1 Structure of SWF based Application
If an application developer specifies the application type as Adobe SWF based application in the configuration file, Samsung SmartTV loads an Adobe SWF file into Flash player on Samsung SmartTV. So, in order to package as Samsung SmartTV application with SWF file, developer should provide a proper configuration file (config.xml), thumbnail images, and authored SWF File. For the supported SWF version and detailed specification, please refer to the accompanied document, Flash Player Specification

[Pic. 1] Sample package of SWF based application Here is the brief description about each component in SWF based application package. - config.xml The config.xml file contains information about the applications execution, update, operating environment setting and other related issues. Developer should not change the name of config.xml. - SWF file Developer should locate Adobe SWF file inside application package. Developer can specify the path and name for SWF file that Flash Player loads. In the above example package, we use sample.swf. - Thumbnail images: Developer should locate the images for icons shown in Samsung SmartHub. In config.xml, you can specify the path for thumbnail images. In the above example package, we put thumbnail images in thumbnail folder. Developer does not need to include the FLA file for SWF. We include the FLA file for sample.swf for developers reference.

@Samsung Electronics Copyright All Rights Reserved

SWF based Application Tutorial

3 Creating a Simple SWF based Application

3.1 Writing a config.xml
The config.xml file contains the information about applications execution, update, operating environment setting and other related issues. Depending on that information, the application manager controls the version of your application, sets an environment in which your application is run, and creates and manages user accounts. The config.xml file should be located in the directory in which the application is installed. The following is an example of config.xml for SWF based application. <?xml version="1.0" encoding=UTF-8 ?> <widget> <widgetname>SWFAppSample </widgetname> <type>user</type> <fullApplication>y</fullApplication> <category>LifeStyle</category> <ver>1.0</ver> <apptype>12</apptype> <ThumbIcon>./thumbnail/icon_106.png</ThumbIcon> <BigThumbIcon>./thumbnail/icon_115.png</BigThumbIcon> <ListIcon>./thumbnail/icon_85.png </ListIcon> <BigListIcon>./thumbnail/icon_95.png </BigListIcon> <contents>./sample.swf</contents> <Flashplayer>y</Flashplayer> <description> SWF based Application </description> <width>960</width> <height>540</height> </widget> SWF based application should include the following tags in config.xml file. - <apptype>12 or 13</apptype> : It specifies the version of SWF file. Although Samsung Flash Player has compatibility to lower version of SWF, we recommend to use the following app type for the corresponding version of SWF. 12 : Flash Lite 3.1 13 : Flash 10.1 - <contents> </contents> : It specifies the path and name that SWF file is located The following table describes other tags for Samsung SmartTV application.

Element
<widget> <ThumbIcon>

Description
Indicates that the information is relevant to the application. An icon image displayed in the Application Manager. It is used in case of no focus and its size is 106 x 86pixel. An icon image displayed in the Application Manager. It is used in case that the focus is placed on an image and its size is 115 x 95 pixel. An icon image displayed in the Application Manager. The size is 85 x 70 pixel. An icon image displayed in the Application Manager. The size is 95 x 78 pixel. The category to distinguish applications, available items are video, sports, game, lifestyle, information, others. Decides whether to synchronize with hub site. The application which doesnt need synchronization chooses n.

Value
File path

<BigThumbIcon> <ListIcon> <BigListIcon> <category> <autoUpdate>

File path File path File path String y|n

@Samsung Electronics Copyright All Rights Reserved

SWF based Application Tutorial Shows information on contents type - 11: HTML + java-script + Flash Player Object <apptype> - 12: Adobe SWF ( Ver. Flash Lite 3.1 ) - 13: Adobe SWF ( Ver. Flash 10.1 ) - 14 : Lua Script File path at the initial execution of contents Limited to non-HTML based applications <contents> - 12: Adobe SWF ( Ver. Flash Lite 3.1 ) - 13: Adobe SWF ( Ver. Flash 10.1 ) - 14 : Lua Script <channelType> Channel Bound Service Type(optional) Confirms the relations with root-child clarifying root application ID. <channelRoot> (Optional, Only when the channel bound service type is child.) When connected to more than one root, roots are distinguished by ::. Channel information to be executed channel bound <channelName> service (Distinguish each channel using :: Ex::AAA::BBB::CCC) (Optional, only if channel bound service type is root.) It decides whether the installed channelbound service is displayed on <channelDisplay> the first main screen or not. (If you want to hide the service in the first main screen, select n.) <cpname> Enter the application provider in this tag. The name of the JavaScript file that allows you to confirm account <cpauthjs> information of application providers. This file has to be written in a defined format. Decides a service is available to signin or not. If you select y, you can enter ID and password in Integrated Sign-in site of Application <login> Manager for sign-in. Validity verification should be preceded in JavaScript file corresponding to <cpauthjs> tag value. Indicates the application version. Depending on that version <ver> information, the server computer updates the corresponding application. Indicates the Application Managers version that is required to run an <mgrver> application having the config.xml file. Indicates whether the application is a full-screen or a single-wide one. <fullwidget> Display type affects the audio policy of the application when its run. Refer to Chapter. 6.4. Using Keys on Remote Control for details. If source conversion is needed, set this tag to y. If you select y, the TV source automatically switched from current TV channel or <srcctl> external input to the internal media player, and back again when the application is finished. Determines whether to use the childLock function. This function <childlock> enables the user to lock an application. Turns on and off the audio. If you select y, TV broadcasting sound is not outputted when entering the application. Set y if the <audiomute> application occupies full screen and set n if the application occupies parts of the screen. Turns on and off the video. If you select y, TV broadcasting is not <videomute> on the screen when entering the application. Sets the Disable dynamic contrast function. Dynamic contrast is the function to adjust TV contrast ratio and brighten TV screen by darkening the dark screen and lightening the light screen. The screen might get lighter or darker when application <dcont> is on with Dynamic contrast. y turns off the Dynamic contrast, and N turns on the Dynamic contrast. If the application is occupied on full screen, select y to remove sparkling. If the application is partially occupied, select n. Application playing video files can bring problems as stated below. <movie> 1. If a video file is played in a device connected to HDMI port such

Number

File Path

root | child Application ID String

y|n String String

y|n

x.xxx x.xxx y|n

y|n

y|n

y|n

y|n

y|n

y|n

@Samsung Electronics Copyright All Rights Reserved

SWF based Application Tutorial as DVD Player when executing an application (ex. YouTube) converting sources, sounds can be mixed. 2. Sparkling at the entry for application due to the difference of Frame rate between the TV image and playing video file. If you select y, you can prevent it from the problem above by ending operating the connected HDMI device when executing the application and fixing the Frame rate. <widgetname> Enter a name of application. <description> Enter a brief description of the application. Enter the screen area that the application will be occupying. <width> <height> Generally, it is recommended to enter 960 * 540 pixels, digital TV specification. <author> Enter a description of the author. This tag is used when needed to check network while operating an application. If the tag value is y and the network test result is fail, <network> entry for the application can be blocked with a message indicating the failure. Without any set value, default is y. This tag is used when needed to check whether the hub-site has been authorized or not while operating an application. If the tag value is <hubsite> y, and the hub-site has not been authorized, entry for the application can be blocked with a message indicating the failure. Without any set value, default is n. Indicates whether the application provides Push Notification Service. <pushNotice> Without any set value, default is n. This tag is reserved for former Push Notification Service. <pushControl> Without any set value, default is n. Indicates whether Push Notification Service is provided for specific <pushUerbinding> user. Without any set value, default is n. This tag should be enabled for application that use embedded flash <flashplayer> player object, or stand-alone flash player.

String String Number string

y|n

y|n

y|n y|n y|n y|n

3.2 Sample SWF File

Here, simple SWF File is provided as example. This SWF file is exported as Flash Lite 3.1 in Adobe Flash Creative Suite. This SWF file gets the simple remote controller input and does simple animation. Flash Player on Samsung Smart TV supports the following remote controller key inputs. Power, Menu, Volume, and Channel related keys are handled by TV itself, not Flash Player.

Key
4 Directional Keys ( Up / Down / Left / Right ) Enter Exit Color Key (Red/Blue/Green)

Behavior
4 directional navigation (same as PC, mobile phone) OK (same as PC, mobile phone) Exiting application, and go to SmartHub or previous application Developer can use these color keys for their purpose

The following are the snap-shots of example SWF file.

@Samsung Electronics Copyright All Rights Reserved

SWF based Application Tutorial

[Pic. 2] First Scene of Example SWF File

[Pic. 3] Focus movement using left key in Example SWF File

@Samsung Electronics Copyright All Rights Reserved

SWF based Application Tutorial

[Pic. 4] Focus on Exit Key in Example SWF File

The following is the part of action-script code used in example swf file. Selection.setFocus("playBtn"); moving_circle.onEnterFrame = function() { if(Selection.getFocus() == "_level0.playBtn"){ if(Key.isDown(Key.ENTER)){ _root.moving_circle.play(); } }else if(Selection.getFocus() == "_level0.stopBtn"){ if(Key.isDown(Key.ENTER)){ _root.moving_circle.stop(); } }

@Samsung Electronics Copyright All Rights Reserved