Post on 27-Mar-2019
transcript
@Samsung Electronics Copyright All Rights Reserved 1
External Call of Multimedia
Device API Tutorial
Version 1.00
Samsung Smart TV
External Call of Multimedia Device API Tutorial
@Samsung Electronics Copyright All Rights Reserved 2
1. OVERVIEW .............................................................................................................................................................. 4
2. INTRODUCTION .................................................................................................................................................... 4
2.1. DEVELOPMENT ENVIRONMENT ............................................................................................................................ 5
3. OVERALL STRUCTURE ....................................................................................................................................... 5
3.1. THE APP’S DESIGN ............................................................................................................................................... 5
3.2. APP PROJECT DIRECTORY STRUCTURE .................................................................................................................. 6
4. APP CREATION....................................................................................................................................................... 7
4.1. STAGE 1 - CREATING THE BASIC APP ................................................................................................................... 7
4.2. STAGE 2 - CREATING THE FLASH FILE ................................................................................................................ 19
4.3. STAGE 3 - COMMUNICATING WITH FLASH FILE USING JAVASCRIPT ..................................................................... 31
5. CONCLUDING REMARKS ................................................................................................................................. 35
External Call of Multimedia Device API Tutorial
@Samsung Electronics Copyright All Rights Reserved 3
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 on TV. With the help of this tutorial user can use Device API calls externally in ActionScript and use there
externally defined functions in JavaScript. This tutorial will provide a brief explanation about using Player
(Multimedia) and Audio APIs and other simple player functionality such as play, pause and stop.
It is recommended that you read “Development Guide for Samsung Smart TV” (hereinafter referred to as "the Guide").
This document provides references to the Guide tutorial for your understanding. Other recommendations are “Flash
Application Creation Tutorial” and “Samsung TV Application 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.
External Call of Multimedia Device API Tutorial
@Samsung Electronics Copyright All Rights Reserved 4
1. Overview
This tutorial will go step by step through the development of a App that features how to use Player and Audio Device
APIs externally using ExternalInterface class of flash. The main goal for this tutorial is to present basic ideas in clear
and possibly simple way on how to provide Player and Audio functionality for a video that is present on Apache Server.
It focuses on providing basic code that needs to take place in any App application that uses Adobe Flash Player as well
as brief description of using streaming media. It is been assumed that the complete environment have been set up and
audio file need to be provided. At the time of writing the Samsung Smart TV engine is supporting version 8 of the
Adobe Flash Player.
Fig 1: View of the App.
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.
External Call of Multimedia Device API Tutorial
@Samsung Electronics Copyright All Rights Reserved 5
2.1. Development environment
It is recommended that you should use Samsung Smart TV SDK Version 1.5 or higher by Samsung to create your
App. With use of the emulator provided with the SDK, you can operate your App before actually putting it in your TV.
It is also recommended that you should use Adobe Flash Authoring Tool: Adobe Flash Professional or Flash CS4 or
higher to develop flash file.
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) external_call.swf file - generated by the Flash application and played by Flash Player.
b) external_call.fla file - contains ActionScript code to control the playback.
2. JavaScript based application:
a) Main.js - module with the basic player functionality
External Call of Multimedia Device API Tutorial
@Samsung Electronics Copyright All Rights Reserved 6
3.2. App project directory structure
The following picture presents the App project directory structure:
Fig 2: File/Directory structure
Files/Directories Description
External_Call_Multimedia The main folder of the App. It contains the index.html, config.xml and
external_call.fla and swf files with other files.
Common Includes the common Javascript APIs used in App Application (needed when
App running on SDK emulator not for TV)
Javascript Includes the Javascript files used in App. Here it contains Main.js
Images Includes the all image files used in App.
btn Directory contains images used for navigation buttons.
index.html Html file which runs in App
config.xml Configuration file for App
Main.css Main style file used by browser
external_call.swf Flash file embedded in index.html
external_call.fla Source file for swf and contains ActionScript code to control the flash display
External Call of Multimedia Device API Tutorial
@Samsung Electronics Copyright All Rights Reserved 7
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 SDK for Samsung TV Apps. Create a new App using the following config.xml file:
<?xml version="1.0" encoding = "UTF-8" ?>
<widget>
<widgetname>External Call of Multimedia API</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>External Call of Multimedia API Functions</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>
config.xml is an XML file in the root of the application structure that holds information about setting an application.
Please note the following settings that we have used:
<fullwidget>y</fullwidget> : this means that the App will run in full screen mode. This affects what keys are
registered by default.
External Call of Multimedia Device API Tutorial
@Samsung Electronics Copyright All Rights Reserved 8
<type>user</type> : this enables the user App feature for testing on a real TV set. This tag has no effect on the
emulator.
<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>Images/tut_106.png</ThumbIcon>: tag for specifying the path of thumbnail image files. Also
<BigThumbIcon>, <ListIcon>, <BigListIcon> should be specified for Samsung TV Apps service.
For detailed information see “Flash App Creation Tutorial” document.
Add a file index.html as follows:
Note: Use “$MANAGER_WIDGET/Common/API/Widget.js” to run on TV and use “Common/API/Widget.js” to
run on simulator to include common javascript files. Please refer to chapter 5 in “Development Guide for Samsung
Smart TV” for more detail.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<!-- Common widget API -->
<script language="javascript" type="text/javascript"
src="$MANAGER_WIDGET/Common/API/Widget.js"></script>
<script language="javascript" type="text/javascript"
src="$MANAGER_WIDGET/Common/API/TVKeyValue.js"></script>
<script language="javascript" type="text/javascript"
src="$MANAGER_WIDGET/Common/API/Plugin.js"></script>
<!-- Scripts -->
<script language="javascript" type="text/javascript" src="Javascript/Main.js"></script>
<!-- CSS -->
<link rel="stylesheet" href="Main.css" type="text/css">
<!-- Plugins -->
<object id="pluginObjectPlayer" border=0 classid="clsid:SAMSUNG-INFOLINK-
PLAYER"></object>
<object id="pluginObjectTVMW" border=0 classid="clsid:SAMSUNG-INFOLINK-
TVMW"></object>
<object id="pluginAudio" border=0 classid="clsid:SAMSUNG-INFOLINK-AUDIO"></object>
External Call of Multimedia Device API Tutorial
@Samsung Electronics Copyright All Rights Reserved 9
<object id='pluginObjectNNavi' border=0 classid='clsid:SAMSUNG-INFOLINK-
NNAVI'></object>
<!-- Flash Object -->
<object type="application/x-shockwave-flash" width="960" height="120" id="flvplayer"
class="fullscreen">
<param name="movie" value="external_call.swf">
<param name="quality" value="high">
<param name="bgcolor" value="black">
</object>
</head>
<body onload="Main.onLoad();" onunload="Main.onUnload();">
<!-- Sides of video box -->
<div id="video_top"></div>
<div id="video_left"></div>
<div id="video_right"></div>
<div id="video_bottom"></div>
<!-- Seekbar -->
<div id="seekBar_BG"> </div>
<div id="seekBar"></div>
<!--User Guidelines -->
<div id="nav" class="widget">
<img src="Images/btn/play.png"> Play
<img src="Images/btn/pause.png"> Pause
<img src="Images/btn/stop.png"> Stop
<img src="Images/btn/vol_up.png"> Vol Up
<img src="Images/btn/vol_down.png"> Vol Down
<img src="Images/btn/mute.png"> Mute
<img src="Images/btn/return.png"> Return
</div>
</body>
</html>
index.html file serves as the access point of the application. The above code is about HTML code that includes the
Main.js file and calls the Main.onLoad() function when the document is loaded. There are two ways to include
External Call of Multimedia Device API Tutorial
@Samsung Electronics Copyright All Rights Reserved 10
Main.onLoad() function. You can include Main.onLoad() function in HTML file or in javascript file(Main.js). Use
one way at a time to avoid Main.onLoad() function double call. We are using second method i.e. Main.onLoad()
function included in javascript file.
In index.html we have loaded flash file as an object to html. For more details of index.html refer to the Guide “App
Development Guide for Samsung Smart TV.pdf”.
Add as CSS file 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 {
padding: 0;
margin: 0;
border: 0;
}
.widget {
position: absolute;
top: 0px;
left: 0px;
color:#ffffff;
font-size:19px;
}
.fullscreen {
position: absolute;
top: 390px;
left: 0px;
width:960px;
height: 120px;
}
#video_top{
position: absolute;
External Call of Multimedia Device API Tutorial
@Samsung Electronics Copyright All Rights Reserved 11
top: 0 px;
left: 0px;
width: 960px;
height: 30px;
background-color:#ffffff;
}
#video_left{
position: absolute;
top: 30px;
left: 0px;
width: 260px;
height: 360px;
background-color:#ffffff;
}
#video_right{
position: absolute;
top: 30px;
left: 701px;
width: 260px;
height: 360px;
background-color:#ffffff;
}
#video_bottom{
position: absolute;
top: 360px;
left: 260px;
width: 441px;
height: 22px;
background-color:#ffffff;
}
#seekBar_BG{
position: absolute;
top: 382px;
left: 260px;
External Call of Multimedia Device API Tutorial
@Samsung Electronics Copyright All Rights Reserved 12
width: 441px;
background-color:#000000;
height: 8px;
}
#seekBar{
position: absolute;
top: 382px;
left: 261px;
width: 0;
height: 8px;
background-color:#5182ca;
}
#nav {
position: absolute;
top: 511px;
left: 0px;
width: 960px;
height: 29px;
background-color:#000000;
text-align: right;
}
#nav img {
vertical-align: -3px;
margin-left: 20px;
margin-right: 10px;
}
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 the Guide.
Background color for left, right and upper parts of video player box is set as white (#ffffff) to set similarity between
flash interface and html part.
External Call of Multimedia Device API Tutorial
@Samsung Electronics Copyright All Rights Reserved 13
Main.js:
/*Common API Objects*/
var widgetAPI = new Common.API.Widget();
var tvKey = new Common.API.TVKeyValue();
var pluginAPI = new Common.API.Plugin();
//value of volume
var vol = 0;
//value of mute status
var userMute = 0;
//total duration of video being played
var total = 0;
var Main =
{
plugin : null,
pluginAPI : null,
pluginAudio : null,
player : null,
originalSource : null
}
/*Function to be loaded on launch of widget*/
Main.onLoad = function()
{
widgetAPI.sendReadyEvent();
Main.player = window["flvplayer"];
if(Main.player)
{
Main.plugin = document.getElementById("pluginObjectPlayer");
Main.pluginAPI = document.getElementById("pluginObjectTVMW");
Main.pluginAudio = document.getElementById("pluginAudio");
NNaviPlugin = document.getElementById("pluginObjectNNavi");
External Call of Multimedia Device API Tutorial
@Samsung Electronics Copyright All Rights Reserved 14
this.originalSource = Main.pluginAPI.GetSource();
Main.pluginAPI.SetMediaSource();
//To show volume OSD
NNaviPlugin.SetBannerState(1);
//Unregister Keys
pluginAPI.unregistKey(tvKey.KEY_VOL_UP); //unregister volume up button
pluginAPI.unregistKey(tvKey.KEY_VOL_DOWN); //unregister volume down button
pluginAPI.unregistKey(tvKey.KEY_MUTE); //unregister mute button
pluginAPI.unregistKey(tvKey.KEY_EXIT); //unregister EXIT key
pluginAPI.unregistKey(tvKey.KEY_MENU); //unregister MENU key
pluginAPI.unregistKey(tvKey.KEY_INFOLINK);//unregister Info key
//Get current volume
vol = Main.pluginAudio.GetVolume();
//Get current mute status
userMute = Main.pluginAudio.GetUserMute();
//Event when file is playing
Main.plugin.OnCurrentPlayTime = 'setTime';
//Event when file is complete
Main.plugin.OnRenderingComplete = 'setComplete';
}
else
{ alert("Flash Engine is not present");
return ;
}
}
/*Function to unload widget*/
Main.onUnload=function()
{
// var mwPlugin = document.getElementById("pluginTVMW");
Main.plugin.Stop();
External Call of Multimedia Device API Tutorial
@Samsung Electronics Copyright All Rights Reserved 15
if (Main.pluginAPI && (this.originalSource != null) )
{
/* Restore original TV source before closing the widget */
Main.pluginAPI.SetSource(this.originalSource);
alert("Restore source to " + this.originalSource);
}
}
/* Function to change seekbar*/
setTime = function(time)
{
total = Main.plugin.GetDuration();
var fraction = time/total;
document.getElementById("seekBar").style.width = fraction*440;
}
/* Function when File is complete */
setComplete = function()
{
Main.player.audiostop();
}
/*Function to handle various key events*/
Main.keyDown = function()
{
var keyCode = event.keyCode;
switch(keyCode)
{
case tvKey.KEY_PLAY:
Main.player.audioplay(vol,userMute);
break;
case tvKey.KEY_PAUSE:
Main.player.audiopause();
External Call of Multimedia Device API Tutorial
@Samsung Electronics Copyright All Rights Reserved 16
break;
case tvKey.KEY_STOP:
Main.player.audiostop();
break;
case tvKey.KEY_VOL_UP:
case tvKey.KEY_PANEL_VOL_UP:
Main.volInc();
break;
case tvKey.KEY_VOL_DOWN:
case tvKey.KEY_PANEL_VOL_DOWN:
Main.volDec();
break;
case tvKey.KEY_MUTE:
Main.handleMute();
break;
case tvKey.KEY_RETURN:
Main.player.js_return();
break;
default:
alert("Unhandled key");
break;
}
}
/* Function for volume increment*/
Main.volInc = function()
{
Main.player.js_incVol();
if(userMute == 1)
{
External Call of Multimedia Device API Tutorial
@Samsung Electronics Copyright All Rights Reserved 17
Main.pluginAudio.SetUserMute(false);
userMute = Main.pluginAudio.GetUserMute();
Main.player.js_getMute(0);
}
alert("mute: ..." + userMute);
}
/* Function for volume decrement*/
Main.volDec = function()
{
Main.player.js_decVol();
if(userMute == 1)
{
Main.pluginAudio.SetUserMute(false);
userMute = Main.pluginAudio.GetUserMute();
Main.player.js_getMute(0);
}
alert("mute: ..." + userMute);
}
/* /* Function to handle mute key*/
Main.handleMute = function()
{
Main.player.js_changeMute(userMute);
userMute = Main.pluginAudio.GetUserMute();
alert("mute: ..." + userMute);
}
/*Function to show volume on flash interface */
Main.getVol = function()
{
vol = Main.pluginAudio.GetVolume();
Main.player.audioVol(vol);
}
window.onkeydown = Main.keyDown;
External Call of Multimedia Device API Tutorial
@Samsung Electronics Copyright All Rights Reserved 18
The Main.onLoad() function is called when the DOM window.onload event occurs. First of all, the Main.onLoad event
handler sends information to the Samsung Smart TV that the App is about to start.
In Main.js we have declared common modules such as API.Widget, API.TVKeyValue and API.Plugin as global
variables so that these can be use later in code.
In Main.onLoad function we call sendReadyEvent() function that makes the Application Manager display the
application on the screen.
In the same function Device API objects SAMSUNG-INFOLINK-PLAYER, SAMSUNG-INFOLINK-TVMW,
SAMSUNG-INFOLINK-AUDIO and SAMSUNG-INFOLINK-NNAVI are stored in Main’s member object using
ids, so that we can use these APIs functions.
PLAYER module supports to control various functionalities of multimedia playback.
TVMW module supports to control various functionality about basic application, language, country, input source (TV,
HDME, etc.), key registration, etc. in DTV platform.
Audio module supports to control audio relative functions (ex: Volume, Mute, etc) of DTV platform.
NNavi module supports to control Samsung Smart TV specific functions in DTV platform. (ex: DUID, ServerType,
etc.)
Then NNavi module’s SetBannerState(nState) function is used to show TV volume. nState is set to 1 to show volume
OSD.
Then to Volume OSD on screen Volume keys, Mute, Exit, Menu and Samsung Smart TV keys are unregistered using
unregist() function of Common.API.Plugin. After unregistering any key we cannot use user defined function for these
key events, when showing OSD on html but it will not work with flash.
Current TV volume is stored in vol variable using Audio API’s GetVolume() function.
Current Mute state is s stored in userMute variable using Audio API’s GetUserMute() function.
Main.plugin.OnCurrentPlayTime event is set to setTime function to show current position of playing video.
OnCurrentPlayTime is sent by media player to notify current playback time.
Main.plugin.OnRenderingComplete event is set to setComplete function to reset the player status using Actionscript’s
audiostop() function.
OnRenderingComplete event is sent by media player when it reaches to the end of stream.
setTime(time) function calculates total duration of multimedia file using GetDuration() function, of PLAYER device
API and stores it in total variable. Here time is automatically send for every milisecond. Then it calculates the fraction
of video file that is already played. After that it set the width of seek bar equal to fraction multiplied by total length of
seek bar(440).
External Call of Multimedia Device API Tutorial
@Samsung Electronics Copyright All Rights Reserved 19
setComplete() function calls audiostop() that is registered with externalStop() of ActionScript function using
addCallback() of ExtenalInterface class.
Main.onUnload() function is called when App is unloaded.
Main.keyDown() function is called, when any key press event occurs. It calls the specific function according to key
pressed.
4.2. Stage 2 - Creating the Flash File
This section will describe how to make a basic ActionScript application that can communicate with a App written in
JavaScript. Since that some practical experience in programming ActionScript with FL Adobe Flash CS 4 (or 5)
development environments is here mandatory. Below is the complete code for the actionscript that has been used in the
flash file “play_mp3.fla”. Later in this section we have discussed about the individual component of actionscript code.
Creating fla file:
We are using Adobe Flash Professional CS5 suit for our App. You can use other versions of Adobe flash (like Adobe
Flash CS 3 and CS 4) in the similar way.
First of all open Adobe Device Central CS5 and select CREATE tab from the top left panel. Now Select Player
Version - Flash Lite 3.1, ActionScript - Version 2.0, and Content Type - Application. At the bottom check use
customized Size and enter width (960) and height (120) for the flash and press create button. Here height of flash is not
set for full screen (540) because we are also showing player interface in html. A blank document will get opened on
Adobe Flash Professional CS5.
Now, insert new symbol (Ctrl + F8). Select movie clip to create movie clip symbol. Give it any name, play_mc in this
case. It will open this clip in editing mode. Now from Window tab select components. Drag a button on clip and give it
some name. Come back to main stage by selection Scene 1 tab.
Fig 3: Creating movie clip.
External Call of Multimedia Device API Tutorial
@Samsung Electronics Copyright All Rights Reserved 20
Similarly, create new layers each for pause and stop buttons separately and name the layers as pause_mc and stop_mc
(you can use your own name to layers) respectively, create movie clips as told for play and name the symbols pause_mc
for pause and stop_mc for stop.
Drag all of the clips on stage from library. Give play clip an instance name play_mc. Give pause clip an instance name
pause_mc. Give stop clip an instance name stop_mc. These instances names will be used in the code to handle above
components.
For creating volume OSD graphics, Create a new layer give it name ch_vol. Create a movie clip for stroke give it any
name. For creating movie clip from menu tab click Insert>New symbol, name it (here as vol_bar) with type movie clip
selected. Then it is opened for editing.
Fig 4: Creating Rectangle for volume OSD.
Create a rectangle with fill color white and its boundary black. Make its length 150. Create another layer in same clip
give it name vol_val (or any other name). Create a movie clip with any name. This will open it in editing mode. In this
clip add a rectangle with fill color gray (or any other except white) and boundary color as same. Give it some width
(100 in our case). Now drag this clip on vol_bar clip and give it instance name vol_val (it will be used in ActionScript).
Now come to main stage using Scene 1 tab. Drag an instance of vol_val on it and give it instance name vol_val.
Draw a text field close to vol_bar to show numeric value of volume. Give some instance name (say vol_txt) and change
it type to Dynamic text from properties tab. Give it a variable name vol.
To show mute state of the player, we are going to use mute graphic symbol (image). Create a new movie clip and named
as mute_mc and select type movie clip. It will open this clip in editing mode. Import (mute.gif). To import an image
(say mute.gif file), go to File tab, select import and then select import to stage. It will open a file browsing dialog.
Select image by browsing. Now come back to main stage by selecting scene 1 tab. Drag a copy of mute_mc on stage
close to vol_txt text box. Give it instance name mute_mc.
Select first frame in Timeline of actions 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*/
External Call of Multimedia Device API Tutorial
@Samsung Electronics Copyright All Rights Reserved 21
import flash.external.ExternalInterface;
import mx.transitions.Tween;
import mx.transitions.easing.*;
var isPaused:Boolean = false;
var loaded:Boolean = false;
var currTime:Number;
var duration:Number;
var curr:MovieClip = play_mc;
var prev:MovieClip = pause_mc;
play_mc._alpha = 50;
pause_mc._alpha = 50;
stop_mc._alpha = 50;
play_mc.onRelease = externalPlay;
pause_mc.onRelease = externalPause;
stop_mc.onRelease = externalStop;
mute_mc._alpha = 0;
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("audioplay", null, externalPlay);
flash.external.ExternalInterface.addCallback("audiopause", null, externalPause);
flash.external.ExternalInterface.addCallback("audiostop", null, externalStop);
flash.external.ExternalInterface.addCallback("audioVol", null, changeVol);
flash.external.ExternalInterface.addCallback("js_incVol", null, incVol);
flash.external.ExternalInterface.addCallback("js_decVol", null, decVol);
flash.external.ExternalInterface.addCallback("js_changeMute", null, changeMute);
flash.external.ExternalInterface.addCallback("js_return", null, externalReturn);
flash.external.ExternalInterface.addCallback("js_getMute", null, getMute);
External Call of Multimedia Device API Tutorial
@Samsung Electronics Copyright All Rights Reserved 22
}
else
{
warn("onLoad: External Interface is not available - no methods exposed");
}
/* Function to play video */
function externalPlay(vol_val:Number,isMute:Number){
if(!loaded)
{
ExternalInterface.call("Main.plugin.SetDisplayArea(260, 30, 440,330)");
ExternalInterface.call("Main.plugin.Play(\"http://107.109.38.212/Widget/videos/Argentina.mp4\")");
changeVol(vol_val);
loaded = true;
getMute(isMute);
}
if(isPaused)
{ ExternalInterface.call("Main.plugin.Resume()");
isPaused = false;
}
curr = play_mc;
new Tween(prev,"_alpha",Strong.easeOut,100,50,0.1,true);
new Tween(curr,"_alpha",Strong.easeOut,50,100,0.1,true);
prev = play_mc;
}
/* Function to pause video */
function externalPause(){
if(!isPaused)
{ ExternalInterface.call("Main.plugin.Pause()");
isPaused = true;
curr = pause_mc;
External Call of Multimedia Device API Tutorial
@Samsung Electronics Copyright All Rights Reserved 23
new Tween(prev,"_alpha",Strong.easeOut,100,50,0.1,true);
new Tween(curr,"_alpha",Strong.easeOut,50,100,0.1,true);
prev = pause_mc;
}
}
/* Function to stop video */
function externalStop(){
loaded = false;
curr = stop_mc;
new Tween(prev,"_alpha",Strong.easeOut,100,50,0.1,true);
new Tween(curr,"_alpha",Strong.easeOut,50,100,0.1,true);
prev = stop_mc;
ExternalInterface.call("Main.plugin.Stop()");
}
/* Function to change volume in flash interface */
function changeVol(val:Number)
{
vol = val;
vol_bar.vol_val._width = val*(3/2);
}
/* Function to increase volume */
function incVol(){
ExternalInterface.call("Main.pluginAudio.SetVolumeWithKey(0)");
ExternalInterface.call("Main.getVol()");
}
/* Function to decrease volume */
function decVol(){
ExternalInterface.call("Main.pluginAudio.SetVolumeWithKey(1)");
ExternalInterface.call("Main.getVol()");
}
External Call of Multimedia Device API Tutorial
@Samsung Electronics Copyright All Rights Reserved 24
/* Function to change mute status */
function changeMute(isMute:Number){
if(isMute)
{
ExternalInterface.call("Main.pluginAudio.SetUserMute(false)");
getMute(0);
}
else
{
ExternalInterface.call("Main.pluginAudio.SetUserMute(true)");
getMute(1);
}
}
/* Function to display/hide mute icon */
function getMute(isMute:Number)
{
if(isMute)
{
new Tween(mute_mc,"_alpha",Strong.easeOut,0,100,0.1,true);
}
else
{
new Tween(mute_mc,"_alpha",Strong.easeOut,100,0,0.1,true);
}
}
/* Function to return from App */
function externalReturn(){
ExternalInterface.call("Main.plugin.Stop()");
ExternalInterface.call("widgetAPI.sendReturnEvent()");
}
Decription of this actionscript code is give below:
/* Imported Classes*/
import flash.external.ExternalInterface;
External Call of Multimedia Device API Tutorial
@Samsung Electronics Copyright All Rights Reserved 25
import mx.transitions.Tween;
import mx.transitions.easing.*;
var isPaused:Boolean = false;
var loaded:Boolean = false;
var currTime:Number;
var duration:Number;
var curr:MovieClip = play_mc;
var prev:MovieClip = pause_mc;
play_mc._alpha = 50;
pause_mc._alpha = 50;
stop_mc._alpha = 50;
play_mc.onRelease = externalPlay;
pause_mc.onRelease = externalPause;
stop_mc.onRelease = externalStop;
mute_mc._alpha = 0;
Here flash.external.ExternalInterface, mx.transitions.Tween and mx.transitions.easing are imported to use these class’s
functions.
Boolean isPaused is used to check sound state, paused or not. loaded is a boolean variable is used to check sound is
already loaded or not.
Alpha property each for all 3 buttons is set to 50 to make all buttons blur initially.
Variable currTime stores duration of video already played and duration stores total duration of video.
Variables curr is used to hold the current focused movie clip. mute_mc._alpha = 0 makes mute_mc invisible and to
make it visible again set _alpha value to 100.
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("audioplay", null, externalPlay);
External Call of Multimedia Device API Tutorial
@Samsung Electronics Copyright All Rights Reserved 26
flash.external.ExternalInterface.addCallback("audiopause", null, externalPause);
flash.external.ExternalInterface.addCallback("audiostop", null, externalStop);
flash.external.ExternalInterface.addCallback("audioVol", null, changeVol);
flash.external.ExternalInterface.addCallback("js_incVol", null, incVol);
flash.external.ExternalInterface.addCallback("js_decVol", null, decVol);
flash.external.ExternalInterface.addCallback("js_changeMute", null, changeMute);
flash.external.ExternalInterface.addCallback("js_return", null, externalReturn);
flash.external.ExternalInterface.addCallback("js_getMute", null, getMute);
}
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.
Here first we check if External Interface is available or not using available property of ExternalInterface. It returns true
if available, otherwise false. If it is available all the functions defined in ActionScript are registered with some different
names using addCallback function, so that these can be used in Javascript. If interface is not available then it sends a
warning.
In addCallback function arguments are as follows:
First argument is the name (string) of function in JavaScript.
Second argument is an object which is null in our case.
Third argument is the name of function defined in action script.
/* Function to play video */
function externalPlay(vol_val:Number,isMute:Number){
if(!loaded)
{
ExternalInterface.call("Main.plugin.SetDisplayArea(260, 30, 440,330)");
ExternalInterface.call("Main.plugin.Play(\"http://107.109.38.212/Widget/videos/Argentina.mp4\")");
changeVol(vol_val);
loaded = true;
getMute(isMute);
External Call of Multimedia Device API Tutorial
@Samsung Electronics Copyright All Rights Reserved 27
}
if(isPaused)
{ ExternalInterface.call("Main.plugin.Resume()");
isPaused = false;
}
curr = play_mc;
new Tween(prev,"_alpha",Strong.easeOut,100,50,0.1,true);
new Tween(curr,"_alpha",Strong.easeOut,50,100,0.1,true);
prev = play_mc;
}
externalPlay function is used to play video using PLAYER Device API. We get here vol_val as parameter, to show
current volume of TV.
First of all
Then loaded variable checks if video is already loaded or not. If video is not already loaded then starts to load video that
is residing on server (Apache server in this case).
For using video it calls ExternalInterface.call(…) to set display area of player using player API’s SetDisplayArea(left,
top, width, height). Here we are using Main.plugin, that is already set to PLAYER device API in JavaScript. Then we
start playing video using Play method of PLAYER API. It takes url of video
(“http://107.109.38.212/Widget/videos/Argentina.mp4” in this case), which is to be played. Developer should change
the url according to his video position. Video can be anywhere on any server. In this case I have used Apache server for
video. Here (\) is used to ignore quotes (“).
Volume level is changed using changeVol(vol_val) method which takes current volume as parameter. Loaded is set to
true to show that video is loaded. Then mute icon is shown according to mute status (on/off) using getMute() function.
If video is paused, then Resume() function of PLAYER API is used, using call() of ExternalInterface to resume video.
Alpha property of play button is changed to 100 and of pause/stop(prev_mc) button is 50 to show focus on play button
using Tween object.
/* Function to pause video */
function externalPause(){
if(!isPaused)
{ ExternalInterface.call("Main.plugin.Pause()");
isPaused = true;
curr = pause_mc;
External Call of Multimedia Device API Tutorial
@Samsung Electronics Copyright All Rights Reserved 28
new Tween(prev,"_alpha",Strong.easeOut,100,50,0.1,true);
new Tween(curr,"_alpha",Strong.easeOut,50,100,0.1,true);
prev = pause_mc;
}
}
externalPause function is used to pause video play. Here Pause() function of PLAYER API is used, using call() of
ExternalInterface to pause video. Then isPaused is set to true to save video’s pause status.
Alpha property of pause button is changed to 100 and of play/stop button is 50 to show focus on pause button.
/* Function to stop video */
function externalStop(){
loaded = false;
curr = stop_mc;
new Tween(prev,"_alpha",Strong.easeOut,100,50,0.1,true);
new Tween(curr,"_alpha",Strong.easeOut,50,100,0.1,true);
prev = stop_mc;
ExternalInterface.call("Main.plugin.Stop()");
}
externalStop function is used to stop video play. Here width property of seek bar is set to 0 (initial position).Then loaded
is set to false to save video load status to false. Alpha property of stop button is changed to 100 and of play/pause button
to 50 to show focus on stop button.
Then Stop() function of PLAYER API is used, using call() of ExternalInterface to stop video.
The Tween class is used to create smooth animations using ActionScript by providing us with various controls for
changing the value of any object properties over a period of time or frames. Using the Tween class for animation has
many advantages over using traditional timeline motion tweens as it offers great flexibility and tighter control
Tween( Obj, prop, func, begin, finish, duration, useSeconds);
Obj: The movie clip object that the Tween instance targets.
prop: A string name of a property in obj to which the values are to be tweened.
func: The easing method that calculates an easing effect for the tweened object's property values. See About easing
classes and methods
begin: A number indicating the starting value of prop (the target object property to be tweened).
finish: A number indicating the ending value of prop (the target object property to be tweened).
External Call of Multimedia Device API Tutorial
@Samsung Electronics Copyright All Rights Reserved 29
duration: A number indicating the length of time of the tween motion. If omitted, the duration is set to infinity by
default.
useSeconds: A Boolean value indicating to use seconds if true or frames if false in relation to the value specified in the
duration parameter.
To read more about Tween class please refer to “adobe site”.
/* Function to change volume in flash interface */
function changeVol(val:Number)
{
vol = val;
vol_bar.vol_val._width = val*(3/2);
}
Function changeVol() is responsible to show changes in onscreen volume bar and vol_txt text field. First line of above
code assigns new value of volume to variable vol. Variable vol directly changes value of vol_txt text field and display
the new value on the screen. Hope you have remembered that we had set value of variable of text field to vol in its
properties at the beginning of this section. Then position of silder_mc is set to new value. Here new value is (x position
of groove_mc) – (half length of groove) + volm*(3/2). Here volm is multiplied by 3/2 because volume range is 0 – 100
but length of groove is 150.
/* Function to increase volume */
function incVol(){
ExternalInterface.call("Main.pluginAudio.SetVolumeWithKey(0)");
ExternalInterface.call("Main.getVol()");
}
/* Function to decrease volume */
function decVol(){
ExternalInterface.call("Main.pluginAudio.SetVolumeWithKey(1)");
ExternalInterface.call("Main.getVol()");
}
incVol() function is used to increase volume of TV. Here SetVolumeWithKey() function of AUDIO API is used, using
call() method of ExternalInterface class. To increase volume 0 is passed as parameter to SetVolumeWithKey(…). Then
Main.getVol function is used to show volume level on screen.
decVol() function is used to decrease volume of TV. Here SetVolumeWithKey() function of AUDIO API is used, using
call() method of ExternalInterface class. To decrease volume 1 is passed as parameter to SetVolumeWithKey(…).Then
Main.getVol function is used to show volume level on screen.
External Call of Multimedia Device API Tutorial
@Samsung Electronics Copyright All Rights Reserved 30
/* Function to change mute status */
function changeMute(isMute:Number){
if(isMute)
{
ExternalInterface.call("Main.pluginAudio.SetUserMute(false)");
getMute(0);
}
else
{
ExternalInterface.call("Main.pluginAudio.SetUserMute(true)");
getMute(1);
}
}
changeMute(isMute) is used to change mute status of TV, when mute key is pressed. It takes current mute status as
parameter. If it is 1, then it changes mute status of TV to false, otherwise true. Here SetUserMute(…) function of
AUDIO API is used, using call() method of ExternalInterface class. To remove mute from TV, false is passed to
SetUserMute() as parameter. To mute TV, true is passed to SetUserMute() as parameter.
Then getMute(..) is called to remove or display mute icon on screen. When parameter passed is 0 it displays and when 1
it removes mute icon.
/* Function to display/hide mute icon */
function getMute(isMute:Number)
{
if(isMute)
{
new Tween(mute_mc,"_alpha",Strong.easeOut,0,100,0.1,true);
}
else
{
new Tween(mute_mc,"_alpha",Strong.easeOut,100,0,0.1,true);
}
}
Function getMute() makes visible or invisible mute image (mute_mc) according to mute state, according to its
parameter. If it gets 0 as isMute value then mute_mc gets invisible (alpha gets 0). If it gets 1 as isMute value then
mute_mc gets visible (alpha gets 100).
External Call of Multimedia Device API Tutorial
@Samsung Electronics Copyright All Rights Reserved 31
/* Function to return from widget */
function externalReturn(){
ExternalInterface.call("Main.plugin.Stop()");
ExternalInterface.call("widgetAPI.sendReturnEvent()");
}
externalReturn() function is called when return key is pressed. It first stops video using Stop() function of PLAYER
API. Then calls sendReturnEvent() method of Common Widget API.
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.keyDown = function()
{
var keyCode = event.keyCode;
switch(keyCode)
{
case tvKey.KEY_PLAY:
Main.player.audioplay(vol,userMute);
break;
case tvKey.KEY_PAUSE:
Main.player.audiopause();
break;
case tvKey.KEY_STOP:
Main.player.audiostop();
break;
case tvKey.KEY_VOL_UP:
case tvKey.KEY_PANEL_VOL_UP:
External Call of Multimedia Device API Tutorial
@Samsung Electronics Copyright All Rights Reserved 32
Main.volInc();
break;
case tvKey.KEY_VOL_DOWN:
case tvKey.KEY_PANEL_VOL_DOWN:
Main.volDec();
break;
case tvKey.KEY_MUTE:
Main.handleMute();
break;
case tvKey.KEY_RETURN:
Main.player.js_return();
break;
default:
alert("Unhandled key");
break;
}
}
Main.keyDown() function is called when any key down event occurs. 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.
case tvKey.KEY_PLAY:
Main.player.audioplay(vol,userMute);
break;
case tvKey.KEY_PAUSE:
Main.player.audiopause();
break;
case tvKey.KEY_STOP:
External Call of Multimedia Device API Tutorial
@Samsung Electronics Copyright All Rights Reserved 33
Main.player.audiostop();
break;
When play key is pressed, it calls audioplay(vol) function that is registered with externalPlay() function of ActionScript.
Current volume is passed as parameter to this function.
When pause key is pressed, it calls audiopause() function that is registered with externalPause() function of
ActionScript.
When stop key is pressed, it calls audiostop() function that is registered with externalStop() function of ActionScript.
case tvKey.KEY_VOL_UP:
case tvKey.KEY_PANEL_VOL_UP:
Main.volInc();
break;
………………………………………………………………………………………………………………………………
………………………
………………………………………………………………………………………………
/* Function for volume increment*/
Main.volInc = function()
{
Main.player.js_incVol();
if(userMute == 1)
{
Main.pluginAudio.SetUserMute(false);
userMute = Main.pluginAudio.GetUserMute();
Main.player.js_getMute(0);
}
alert("mute: ..." + userMute);
}
When volume up key is pressed it calls volInc() function to increase volume of TV.
In volInc() function it calls js_incVol() function that is registered with incVol() function of ActionScript. Then it checks
userMute variable. If it is 1 (mute is on) then it changes mute status using SetUserMute function. After that is makes
mute icon invisible using js_getMute function from ActionScript (getMute).
case tvKey.KEY_VOL_DOWN:
case tvKey.KEY_PANEL_VOL_DOWN:
Main.volDec();
External Call of Multimedia Device API Tutorial
@Samsung Electronics Copyright All Rights Reserved 34
break;
………………………………………………………………………………………………………………………………
…………………..
…………………………………………………………………………………………………………
/* Function for volume decrement*/
Main.volDec = function()
{
Main.player.js_decVol();
if(userMute == 1)
{
Main.pluginAudio.SetUserMute(false);
userMute = Main.pluginAudio.GetUserMute();
Main.player.js_getMute(0);
}
alert("mute: ..." + userMute);
}
When volume down key is pressed it calls volDec() function to decrease volume of TV.
In volDec() function it calls js_decVol() function that is registered with decVol() function of ActionScript. Then it
checks userMute variable. If it is 1 (mute is on) then it changes mute status using SetUserMute function. After that is
makes mute icon invisible using js_getMute function from ActionScript (getMute).
case tvKey.KEY_MUTE:
Main.handleMute();
break;
………………………………………………………………………………………………………………………………
…………………….
…………………………………………………………………………………………………………………
/* Function to handle mute key*/
Main.handleMute = function()
{
Main.player.js_changeMute(userMute);
userMute = Main.pluginAudio.GetUserMute();
alert("mute: ..." + userMute);
External Call of Multimedia Device API Tutorial
@Samsung Electronics Copyright All Rights Reserved 35
}
When mute key is pressed it calls handleMute() function to decrease volume of TV.
In handleMute() it calls js_changeMute(userMute) function that is registered with changeMute () function of
ActionScript to change mute status of TV. Current mute status of TV (userMute) is passed as parameter to
js_changeMute(…), and userMute gets its new value using GetUserMuteFunction().
case tvKey.KEY_RETURN:
Main.player.js_return();
break;
When return key is pressed, it calls js_return() function that is registered with externalReturn() function of ActionScript.
This is used to return from App Manager.
/*Function to show volume on flash interface */
Main.getVol = function()
{
vol = Main.pluginAudio.GetVolume();
Main.player.audioVol(vol);
}
Main.getVol() function is called in incVol() and decVol() in ActionScript. In this function current volume is stored in vol
variable using GetVolume() function. Then audioVol(vol) is called to show current volume in flash interface.
5. Concluding remarks
This tutorial has explored method for external call of Device API functions for Multimedia and Audio. It is
recommended that you read the full API description for each plugin, which you can find in the Guide.