External Call of Multimedia Device API...

@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


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



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.



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.



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



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



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.



<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>



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

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


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


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



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



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



<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>



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

NNAVI'></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();">



<div id="video_top"></div>

<div id="video_left"></div>

<div id="video_right"></div>

<div id="video_bottom"></div>



<div id="seekBar_BG"> </div>

<div id="seekBar"></div>



<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



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;



top: 0 px;

left: 0px;

width: 960px;

height: 30px;

background-color:#ffffff;

}

#video_left{

position: absolute;

top: 30px;

left: 0px;

width: 260px;

height: 360px;


}

#video_right{

position: absolute;

top: 30px;

left: 701px;

width: 260px;

height: 360px;


}

#video_bottom{

position: absolute;

top: 360px;

left: 260px;

width: 441px;

height: 22px;


}

#seekBar_BG{

position: absolute;

top: 382px;

left: 260px;



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.



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");



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();



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();



break;

case tvKey.KEY_STOP:


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)

{



Main.pluginAudio.SetUserMute(false);


Main.player.js_getMute(0);

}

alert("mute: ..." + userMute);

}

/* Function for volume decrement*/

Main.volDec = function()

{

Main.player.js_decVol();

if(userMute == 1)

{




}


}

/* /* Function to handle mute key*/

Main.handleMute = function()

{

Main.player.js_changeMute(userMute);



}

/*Function to show volume on flash interface */

Main.getVol = function()

{


Main.player.audioVol(vol);

}

window.onkeydown = Main.keyDown;



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).



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.



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*/



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);



}

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;





prev = pause_mc;

}

}

/* Function to stop video */

function externalStop(){

loaded = false;

curr = stop_mc;



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(){



}



/* 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

{


}

}

/* Function to return from App */

function externalReturn(){


ExternalInterface.call("widgetAPI.sendReturnEvent()");

}

Decription of this actionscript code is give below:

/* Imported Classes*/

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;

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);



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);



}

if(isPaused)

{ ExternalInterface.call("Main.plugin.Resume()");

isPaused = false;

}

curr = play_mc;



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;





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;



prev = stop_mc;


}

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).

http://help.adobe.com/en_US/AS2LCR/Flash_10.0/00002996.html#3682195

http://help.adobe.com/en_US/AS2LCR/Flash_10.0/00002996.html#3682195



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(){



}

/* Function to decrease volume */

function decVol(){



}

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.



/* 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)

{


}

else

{


}

}

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).



/* Function to return from widget */

function externalReturn(){


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)

{



break;



break;



break;





Main.volInc();

break;



Main.volDec();

break;


Main.handleMute();

break;



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.



break;



break;





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.



Main.volInc();

break;

………………………………………………………………………………………………………………………………

………………………

………………………………………………………………………………………………

/* Function for volume increment*/

Main.volInc = function()

{

Main.player.js_incVol();

if(userMute == 1)

{




}


}

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).



Main.volDec();



break;

………………………………………………………………………………………………………………………………

…………………..

…………………………………………………………………………………………………………

/* Function for volume decrement*/

Main.volDec = function()

{

Main.player.js_decVol();

if(userMute == 1)

{




}


}

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).


Main.handleMute();

break;

………………………………………………………………………………………………………………………………

…………………….

…………………………………………………………………………………………………………………

/* Function to handle mute key*/

Main.handleMute = function()

{

Main.player.js_changeMute(userMute);





}

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().



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()

{


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.

Date post:	27-Mar-2019
Category:	Documents
Upload:	truongcong
View:	229 times
Download:	0 times

External Call of Multimedia Device API...

Documents