Post on 11-May-2018
@Samsung Electronics Copyright All Rights Reserved 1
Embedded JPEG Slide Show Tutorial
Version 1.00
Samsung Smart TV
Embedded JPEG Slide Show Tutorial
@Samsung Electronics Copyright All Rights Reserved 2
1. OVERVIEW .............................................................................................................................................................. 4
2. INTRODUCTION .................................................................................................................................................... 5
2.1. DEVELOPMENT ENVIRONMENT ............................................................................................................................ 5
2.2. FILES NEEDED FOR A FLASH PLAYER APP ............................................................................................................ 5
3. OVERALL STRUCTURE ....................................................................................................................................... 6
3.1. THE APP’S DESIGN ............................................................................................................................................... 6
3.2. APP PROJECT DIRECTORY STRUCTURE .................................................................................................................. 6
4. APP CREATION....................................................................................................................................................... 7
4.1. STAGE 1 - CREATING THE XML FILE .................................................................................................................... 7
4.2. STAGE 2 - CREATING THE BASIC APP ................................................................................................................... 8
4.3. STAGE 3 - CREATING THE FLASH PLAYER APPLET.............................................................................................. 14
4.3.1. Processing the XML file: .......................................................................................................................... 20
4.3.2. Creating the slideshow container for movieclip:....................................................................................... 21
4.3.3. Load external images: ............................................................................................................................... 22
4.3.4. Creating slideshow controller: .................................................................................................................. 23
4.3.5. Creating the textfield and image titles: ..................................................................................................... 24
4.3.6. Creating and display text content .............................................................................................................. 25
5. CONCLUDING REMARKS ................................................................................................................................. 27
Embedded JPEG Slide Show 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. This tutorial will guide the user to
embed JPEG (JPG) images slide show with the content (text). It is recommended that you read “Development Guide for
Samsung Smart TV” (hereinafter referred to as "the Guide") first. This document provides references to the Guide
tutorial for your understanding. Other recommendations are “Flash App Creation Tutorial” and “Samsung Smart TV
SDKUX Guideline”.
Target Readers
This document is aimed at programmers who have used web development languages such as HTML, CSS, JavaScript
and ActionScript, and will be even more helpful for those who have web development experience. This document has
been written on the assumption that readers have already read the Guide tutorial and have basic knowledge of HTML,
CSS, JavaScript and ActionScript.
Embedded JPEG Slide Show Tutorial
@Samsung Electronics Copyright All Rights Reserved 4
1. Overview
This tutorial will go step by step through the development of a App and will guide user to embed JPEG (JPG) files with
text content as well as provide slide show to images. It focuses on providing basic code that needs to take place in any
App that uses Adobe Flash Player. At the time of writing the Samsung Smart TV engine is supporting version 8 of the
Adobe Flash Player.
This tutorial uses XML file to load App contents (text and images url) externally and dynamically. Images will be
displayed in slide show manner and a caption will be displayed at bottom for each image. Additionally auto change of
color of text has been used for the large text content.
Fig 1: View of the App.
Embedded JPEG Slide Show Tutorial
@Samsung Electronics Copyright All Rights Reserved 5
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 deep 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 and “Flash App
Creation Tutorial”.
2.1. Development environment
You should use the Samsung Smart TV SDK Ver.1.5 or higher made 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. 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". Please note that the performance of the App may be better
when using the TV than when using the emulator. Therefore uploading to a TV is recommended as a test method.
2.2. Files needed for a Flash Player App
You will be provided with sample modules code and images.
Please note that this tutorial does not supply image files for playback for copyright reasons.
Sample
EmbeddedJPEGSlideShow.rar
Embedded JPEG Slide Show Tutorial
@Samsung Electronics Copyright All Rights Reserved 6
3. Overall Structure
In this section, we’re 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. JavaScript based application:
Main module with the basic players functionality
2. ActionScript based application:
EmbeddedJPEGSlideShow.swf file - generated by the Flash application and played by Flash Player.
EmbeddedJPEGSlideShow.fla file – contains ActionScript code to control the playback and use to generate
swf file.
3.2. App project directory structure
The following picture presents the App project directory structure:
Fig 2: File/Directory structure
Embedded JPEG Slide Show Tutorial
@Samsung Electronics Copyright All Rights Reserved 7
Files/Directory Description
Embedded JPEG SlideShow The main folder of the App. It contains the index.html, config.xml,
gallery.xml and EmbeddedJPEGSlideShow fla and swf files and
other files.
Resources Directory contains all resource images used by App.
images Directory contains all jpeg images used in App.
icons Includes the icon image files used in Samsung TV Apps.
The path for icon image files is specified in config.xml file.
navigation Directory contains images used for navigation.
BG.jpg Background image.
config.xml Contains the information for executing App.
index.html The main html documents, which is opened when executing App
Main.js Main javascript file used in App.
Main.css Main style file used by browser.
gallery.xml Xml file to provide external data information.
EmbeddedJPEGSlideShow.fla Source file for EmbeddedJPEGSlideShow flash file
(EmbeddedJPEGSlideShow.swf)
EmbeddedJPEGSlideShow.swf EmbeddedJPEGSlideShow Flash file embedded in index.html
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 XML file
Below code is the code of the file “gallery.xml”. This file provides all the necessary information about the JPEG images
and text content. Edit this file to add your own images.
Attributes width and height are width and height of the images that we are using and attribute speed is used as the
transition speed in the flash.
Attribute url in image tag is used to provide url of the image and title to provide text for the caption in flash. Content tag
is used for the text content. You can add as many as tags you want. As this is not the tutorial for XML, let’s keep it away
from this tutorial.
Embedded JPEG Slide Show Tutorial
@Samsung Electronics Copyright All Rights Reserved 8
The term CDATA is used about text data that should not be parsed by the XML parser that is everything inside a
CDATA section is ignored by the parser.
Note: A CDATA section cannot contain the string "]]>". Nested CDATA sections are not allowed. The "]]>" that marks
the end of the CDATA section cannot contain spaces or line breaks.
<?xml version="1.0" encoding="utf-8"?>
< gallery width="400" height="400" speed="2">
<images>
<image url="Resources/images/image1.jpg" title="Gautam Buddha" />
<image url="Resources/images/image2.jpg" title="History" />
<image url="Resources/images/image3.jpg" title="Ying Yang" />
<image url="Resources/images/image4.jpg" title="Kid Youth" />
<image url="Resources/images/image5.jpg" title="Heart of Spice" />
<image url="Resources/images/image6.jpg" title="Elissa" />
<image url="Resources/images/image7.jpg" title="Silver Secret" />
<image url="Resources/images/image8.jpg" title="Endless Mountains" />
<image url="Resources/images/image9.jpg" title="Light of Hope" />
<image url="Resources/images/image10.jpg" title="Bored?" />
<image url="Resources/images/image11.jpg" title="Market Walk" />
</images>
<content>
<![CDATA[ ADD YOUR TEXT CONTENT HERE]]>
</content>
</ gallery>
4.2. Stage 2 - 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>Embed JPEG SlideShow</widgetname>
<type>user</type>
<fullwidget>y</fullwidget>
Embedded JPEG Slide Show Tutorial
@Samsung Electronics Copyright All Rights Reserved 9
<srcctl>y</srcctl>
<flashplayer>y</flashplayer>
<category>others</category>
<ver>1.0</ver>
<ThumbIcon>Resources/icons/tut_106.png</ThumbIcon>
<BigThumbIcon>Resources/icons/tut_115.png</BigThumbIcon>
<ListIcon>Resources/icons/tut_85.png</ListIcon>
<BigListIcon>Resources/icons/tut_95.png</BigListIcon>
<description>Embedded JPEG images slide show with text</description>
<width>960</width>
<height>540</height>
<author>
<name>SISC</name>
<email>vineet.a@samsung.com</email>
<link>http://www.samsung.com/in</link>
<organization>Samsung India Software Centre</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>Resources/icons/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:
Embedded JPEG Slide Show Tutorial
@Samsung Electronics Copyright All Rights Reserved 10
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Drawing Embedded JPEG Image Inside Contents</title>
<!-- 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>
<!-- Scripts -->
<script language="javascript" type="text/javascript" src="Main.js"></script>
<!--Style-->
<link rel="stylesheet" href="Main.css" type="text/css"/>
<!-- Plugins -->
<object id="pluginTVMW" border=0 classid="clsid:SAMSUNG-INFOLINK-TVMW"></object>
<object type="application/x-shockwave-flash" id="flvplayer" class="fullscreen">
<param name="movie" value="EmbeddedJPEGSlideShow.swf"/>
<param name="quality" value="high"/>
<param name="bgcolor" value="violet"/>
</object>
</head>
<body id="fplayerBody">
<div id="nav" class="widget">
<img src=" Resources/navigation/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.
Embedded JPEG Slide Show Tutorial
@Samsung Electronics Copyright All Rights Reserved 11
HTML file can include this code on body tag:
<body id="fplayerBody" onload="Main.onLoad()">
Or Javascript file can include this code.
window.onload = Main.onLoad;
For detail information please refers to the Guide.
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.
Then add Main.js, with contents as follows:
var Main =
{
pluginAPI : null,
player : null
}
var widgetAPI = new Common.API.Widget();
var tvKey = new Common.API.TVKeyValue();
Main.onLoad = function()
{
// called by <body>'s onload event
alert("Main.onLoad()");
widgetAPI.sendReadyEvent();
Main.pluginAPI = document.getElementById("pluginTVMW");
if (!Main.pluginAPI){
alert("Error: Main.pluginAPI Failed");
widgetAPI.sendReturnEvent();
}
else
Embedded JPEG Slide Show Tutorial
@Samsung Electronics Copyright All Rights Reserved 12
{
Main.player = window["flvplayer"];
alert("Main.pluginAPI Succeed");
}
}
Main.keyDown = function()
{
var keyCode = event.keyCode;
switch (keyCode)
{
case tvKey.KEY_RETURN:
alert("RETURN");
widgetAPI.sendReturnEvent();
break;
case tvKey.KEY_EXIT:
alert("EXIT");
widgetAPI.sendExitEvent ();
break;
}
}
window.onload = Main.onLoad;
window.onkeydown = Main.keyDown;
The Main.onLoad() function is called when the DOM window.onload event appears. First of all, the Main.onLoad
event handler sends information to the Samsung Smart TV that the App is about to start. This feature will be discussed
later in another section of this document. Now, start the SDK emulator. If you see the message of “alert() :
Main.onLoad(),” in the log manager, that means you have successfully created the App. The Main.onkeyDown()
function is called when the DOM window.onkeydown event appears. We need only two key events, RETURN and
EXIT key events on our App. These events forced return and exit keys to have their actual expected behavior.
var widgetAPI = new Common.API.Widget();
var tvKey = new Common.API.TVKeyValue();
Embedded JPEG Slide Show Tutorial
@Samsung Electronics Copyright All Rights Reserved 13
Declare the common module as global variables for Main.js so that these can be use later in code. Call the
sendReadyEvent() function make the Application Manager display an application on the screen.
For detailed information on common modules and key code list, see Chapter 5. Common Modules in “Development
Guide for Samsung Smart TV”.
Add Main.css style file.
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: #FFF;
font-size: 20px;
}
.fullscreen {
position: absolute;
top: 0px;
left: 0px;
width:960px;
height: 510px;
}
#nav {
Embedded JPEG Slide Show Tutorial
@Samsung Electronics Copyright All Rights Reserved 14
position: absolute;
top: 511px;
left: 0px;
width: 960px;
height: 29px;
text-align: right;
background: url(./Resources/bg.jpg);
}
Style sheets in CSS are made up of rules. Each rule has three parts:
Selector: - which tells the browser which part of the document is affected by the rule. It’s also known as class.
Property: - which specifies what aspect of the layout is being set
Value: - which gives the value for the style property.
body is a selector which tells the browser which part of the document is affected by the rule. In body selector, there are
3 properties-padding, margins and border which specifies what aspect of the layout is being set. Here zero is the values
for all properties.
widget is a selector (or class) in which position, top, left, color, font-size are all its properties and remains are its values.
fullscreen is also a selector (or class) and it is used for screen position, screen height and width.
container is used for background. Width and height are its properties. 960 and 540 are values that are assigned to it.
The navigation menu still looks like a list, instead of a menu. nav container is used for navigation positioning and use
widget class.
For detailed information see Flash App Creation Tutorial document.
4.3. Stage 3 - Creating the Flash Player Applet
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 (5)
development environments is here mandatory. Below is the complete code for the actionscript that has been used in the
flash file “EmbeddedJPEGSlideShow.fla”. Later in this section we have discussed about the individual component of
actionscript code.
Embedded JPEG Slide Show Tutorial
@Samsung Electronics Copyright All Rights Reserved 15
Note: Method to create a fla and swf 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 ActionScript 2.0, and Content Type Application. At the bottom check
use customized Size and enter width and height for the flash and press create button. A blank document will get
opened on Adobe Flash Professional CS5. Change the name of layer Layer 1 to actions as this layer refers to
actionscript layer. Changing layer name is not necessary; you can work with your desire name. Now right click on the
first frame of the actions layer and select Actions, a widow will get pop-up; you can put your actionscript code here.
Save the flash file (fla file). Press “Ctrl+Enter” (window) to run the created fla file and a swf will get generated. You
can save fla file at your desired place but provided correct path to swf file in the index.html file.
Fig 3: Layer actions: select Actions to add actionscript
// Import libs
import mx.transitions.Tween;
import mx.transitions.easing.*;
var TextBox_Width:Number = 400;
var TextBox_Height:Number = 400;
// Create a new instance of XML class
var galleryXML = new XML();
galleryXML.ignoreWhite = true;
galleryXML.load("gallery.xml");
Embedded JPEG Slide Show Tutorial
@Samsung Electronics Copyright All Rights Reserved 16
// Call when gallery.xml loaded.
galleryXML.onLoad = function() {
_root.Width = galleryXML.firstChild.attributes.width;
_root.Height = galleryXML.firstChild.attributes.height;
_root.Speed = galleryXML.firstChild.attributes.speed;
_root.Images = galleryXML.firstChild.firstChild.childNodes;
_root.totalImages = Images.length;
_root.TextContent = galleryXML.firstChild.childNodes[1].childNodes;
// Call createImageContainer()
createImageContainer();
// Call Images
callImages();
CreateContentTextBox();
};
function createImageContainer() {
_root.createEmptyMovieClip("ImageContainer_mc",_root.getNextHighestDepth());
// Drawing a border around Container
ImageContainer_mc.lineStyle(5,0x000000,100);
ImageContainer_mc.lineTo(_root.Width,0);
ImageContainer_mc.lineTo(_root.Width,_root.Height);
ImageContainer_mc.lineTo(0,_root.Height);
ImageContainer_mc.lineTo(0,0);
// Position the Container
ImageContainer_mc._x = 70;
ImageContainer_mc._y = (Stage.height-ImageContainer_mc._height)/2;
}
// Create an instance of the MovieClipLoader Class
function callImages() {
Embedded JPEG Slide Show Tutorial
@Samsung Electronics Copyright All Rights Reserved 17
// Create a Movie clip Loader and Listener
_root.movieClip = new MovieClipLoader();
_root.mcListener = new Object();
_root.movieClip.addListener(_root.mcListener);
// Declare an array to store image url
_root.ClipVector = [];
// Event onLoadStart: Create a text field and position it.
_root.mcListener.onLoadStart = function(mc) {
_root.createTextField("imageTitle",_root.getNextHighestDepth(),0,0,100,20);
_root.imageTitle._x = (490-_root.imageTitle._width)/2;
_root.imageTitle._y = (Stage.height-_root.imageTitle._height)/2;
_root.imageTitle.autoSize = "center";
};
// Event onLoadProgress: Display Loading information during Load Progress
_root.mcListener.onLoadProgress = function(mc){
_root.imageTitle.text = "Loading.. "+_root.ClipVector.length+"/"+_root.totalImages+"
Completed";
}
// Event onLoadComplete: Put image into array "ClipVector"
_root.mcListener.onLoadComplete = function(mc) {
_root.ClipVector.push(mc);
mc._alpha=0;
if (_root.ClipVector.length == _root.totalImages) {
// Reposition text field in y direction
_root.imageTitle._y = ImageContainer_mc._y + ImageContainer_mc._height;
SlideShowController();
dummyInt = setInterval(SlideShowController, (_root.Speed*1000)+1000);
}
}
for (i=0; i<_root.totalImages; i++) {
imageUrl = _root.Images[i].attributes.url;
newMovieClip = ImageContainer_mc.createEmptyMovieClip(i,
Embedded JPEG Slide Show Tutorial
@Samsung Electronics Copyright All Rights Reserved 18
ImageContainer_mc.getNextHighestDepth());
_root.movieClip.loadClip(imageUrl, newMovieClip);
}
}
var color:Number = 0;
var TotalAvailableColor:Number = 5;
// Control slideshow
function SlideShowController (){
currentClip = _root.ClipVector[_root.mc];
new Tween(currentClip, "_alpha", Strong.easeOut, 100, 0, 1, true);
_root.mc++;
if (_root.mc >= _root.totalImages){
_root.mc = 0;
}
color++;
if(color >= TotalAvailableColor) color = 0;
_root.ContentTextBox.textColor = getTextColor(color);
_root.imageTitle.text = _root.Images[mc].attributes.title;
nextClip = _root.ClipVector[_root.mc];
new Tween(nextClip, "_alpha", Strong.easeOut, 0, 100, 1, true);
}
function CreateContentTextBox(){
_root.createTextField("ContentTextBox",_root.getNextHighestDepth(),0,0,TextBox_Width,TextBox_He
ight);
_root.ContentTextBox._x = 490;
_root.ContentTextBox._y = (Stage.height-_root.ContentTextBox._height)/2;
_root.ContentTextBox.text = _root.TextContent;
_root.ContentTextBox.multiline = true;
Embedded JPEG Slide Show Tutorial
@Samsung Electronics Copyright All Rights Reserved 19
_root.ContentTextBox.wordWrap = true;
_root.ContentTextBox.autoSize = "center";
_root.ContentTextBox.textColor = getTextColor(color);
var font_fmt:TextFormat = new TextFormat();
font_fmt.font = "Times";
font_fmt.size = 15;
_root.ContentTextBox.setTextFormat(font_fmt);
}
function getTextColor(colorID)
{
switch(colorID){
default:
case 0: return 0x000000;
break;
case 1: return 0xFF0000;
break;
case 2: return 0x00FF00;
break;
case 3: return 0x0000FF;
break;
case 4: return 0xCC00FF;
break;
}
}
The above as code is written in actionscript 2.0 using flash lite 3.1.
The code can be divided into the following sections:
Processing the XML file
Creating the slideshow container for movieclip
Load external images
Creating slideshow controller
Creating the textfield and image titles.
Creating and display text content.
Embedded JPEG Slide Show Tutorial
@Samsung Electronics Copyright All Rights Reserved 20
_root is Property; specifies or returns a reference to the root movie Timeline. If a movie has multiple levels, the root
movie Timeline is on the level containing the currently executing script. For example, if a script in level 1 evaluates
_root, _level1 is returned.
All of our variables were created with the _root prefix so that they are attached to the _root of our movie clip in order to
make referring to them easy regardless of the scope from which the movie clip is attempting to retrieve them from. You
can use other levels for movie clip.
4.3.1. Processing the XML file:
The first line of the code will create an instance of the XML class. Second line set .ignoreWhite property to true so that
flash can understand XML file properly and .load is used to load XML file.
ignoreWhite property has default false value but when it set to true, text nodes that contain only white space are
discarded during the parsing process. Text nodes with leading or trailing white space are unaffected.
var galleryXML = new XML();
galleryXML.ignoreWhite = true;
galleryXML.load("gallery.xml");
When XML file get loaded an event onLoad get called. Using this event one can read information form XML file and
store the information to the variables, so that we can use them later in the code. .firstChild.attributes.XXX property of
XML can be used to read attributes where XXX is the name of attribute. First child node (<image>) can be read
using .firstChild.childNodes property. Using .length property one can determine the total number of child nodes.
galleryXML.onLoad = function() {
_root.Width = galleryXML.firstChild.attributes.width;
_root.Height = galleryXML.firstChild.attributes.height;
_root.Speed = galleryXML.firstChild.attributes.speed;
_root.Images = galleryXML.firstChild.firstChild.childNodes;
_root.totalImages = Images.length;
_root.TextContent = galleryXML.firstChild.childNodes[1].childNodes;
};
Embedded JPEG Slide Show Tutorial
@Samsung Electronics Copyright All Rights Reserved 21
The onLoad event (function) can be used to call the other functions. Add below lines to onLoad function.
createImageContainer();
callImages();
CreateContentTextBox();
4.3.2. Creating the slideshow container for movieclip:
All the code relating to our container movie clip will be placed within a function to be defined at the bottom of our
existing code. We will name this function createImageContainer. We are using function to organize our code into
logical segments that can be easily debugged and updated.
Function createImageContainer uses createEmptyMovieClip to create an empty movie clip and draw border around
the container using line properties. createEmptyMovieClip will create an empty movie clip at the root scope. The first
argument is the instance name of the created empty movie clip which will be used to display jpeg images and the
second argument set the movie clip to the next higher available depth.
function createImageContainer() {
_root.createEmptyMovieClip("ImageContainer_mc",_root.getNextHighestDepth());
// Drawing a border around Container
ImageContainer_mc.lineStyle(5,0x000000,100);
ImageContainer_mc.lineTo(_root.Width,0);
ImageContainer_mc.lineTo(_root.Width,_root.Height);
ImageContainer_mc.lineTo(0,_root.Height);
ImageContainer_mc.lineTo(0,0);
// Position the Container
ImageContainer_mc._x = 70;
ImageContainer_mc._y = (Stage.height-ImageContainer_mc._height)/2;
}
We will use the Drawing API to draw a border around our container using the width and height properties of our
slideshow, both of which are details we extracted from our XML file. We do not have a tutorial on using the
Drawing API yet on Oman3D, but the basic idea is that you select your .lineStyle and then draw a line from one
Embedded JPEG Slide Show Tutorial
@Samsung Electronics Copyright All Rights Reserved 22
point to another. Our _root.myWidth and _root.myHeight variables will be used as the targets of our lines; we are
going to draw a border around the container using the .lineTo this way:
Fig 4: Drawing a border around a movie clip
4.3.3. Load external images:
Our code here will be placed within a function called callImages, we are doing this to keep everything organized. The
first task for this function is to create an instance movieClipLoader class and add a listener to it; a listener is an object
that tracks what happens to the object it is attached to, which in this case is the Movie Clip Loader. We will use this
listener to tell us how the loading process goes.
_root.movieClip = new MovieClipLoader();
_root.mcListener = new Object();
_root.movieClip.addListener(_root.mcListener);
movieClipLoader class lets you implement listener callbacks that provide status information while JPEG files are
being loaded into movie clips. For detailed information on movieClipLoader, see actionscript 2.0 documents on adobe
site.
Declare an array to store image url.
_root.ClipVector = [];
onLoadComplete event invokes whenever a file completely loaded using loadClip().
In onLoadComplete event movie clip is pushed to the array clipVector. When all the clips will be loaded then a
setInterval function is used to call SlideShowController function at a regular time interval. dummyInt is the instance
returned by the setInterval function, and can be used to stop setInterval call using clearInterval(dummyInt). We are
Embedded JPEG Slide Show Tutorial
@Samsung Electronics Copyright All Rights Reserved 23
not going use clearInterval function as we need continuous transitions in images.
_root.ClipVector.push(mc);
mc._alpha=0;
if (_root.ClipVector.length == _root.totalImages) {
// Reposition text field in y direction
_root.imageTitle._y = ImageContainer_mc._y + ImageContainer_mc._height;
SlideShowController();
dummyInt = setInterval(SlideShowController, (_root.Speed*1000)+1000);
}
This line of code, written in onLoadComplete event is used to place the text box beneath image.
_root.imageTitle._y = ImageContainer_mc._y + ImageContainer_mc._height;
4.3.4. Creating slideshow controller:
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, makes it
possible to set the animation duration in seconds instead of frames, allows us to create non-linear animations, and
makes the updating process of animations easier.
In order to use the Tween Class you must import the following classes at the beginning of your code.
import mx.transitions.Tween;
import mx.transitions.easing.*;
Below code will have following task:
Fading out the current image on stage.
Fade in the next image to be shown on the stage.
This will give a smooth transition between images. To read more about tween class please refer to adobe site.
new Tween(currentClip, "_alpha", Strong.easeOut, 100, 0, 1, true);
new Tween(nextClip, "_alpha", Strong.easeOut, 0, 100, 1, true);
Embedded JPEG Slide Show Tutorial
@Samsung Electronics Copyright All Rights Reserved 24
In SlideShowController function previous image will be fade in and next image retrieve by increasing counter will be
fade out. A condition (_root.mc >= _root.totalImages) is used to keep counter within the limits. _root.mc is initialized to
value zero with global scope. We will make it increase in value by 1 to indicate that our slideshow moved to the next
image before we retrieve the next image.
function SlideShowController (){
currentClip = _root.ClipVector[_root.mc];
new Tween(currentClip, "_alpha", Strong.easeOut, 100, 0, 1, true);
_root.mc++;
if (_root.mc >= _root.totalImages){
_root.mc = 0;
}
_root.imageTitle.text = _root.Images[mc].attributes.title;
nextClip = _root.ClipVector[_root.mc];
new Tween(nextClip, "_alpha", Strong.easeOut, 0, 100, 1, true);
}
4.3.5. Creating the textfield and image titles:
onLoadStart event invoked when a call to MovieClipLoader.loadClip() has begun to download a file.
In .onLoadStart event we will create the text field box by using createTextField function. This textfield is used to
display image titles or captions. First argument is the instance name and second argument set the next available depth
Embedded JPEG Slide Show Tutorial
@Samsung Electronics Copyright All Rights Reserved 25
and left arguments defines the rect of text box. _x and _y properties are used to positioned text box and autoSize
property is used to align the text.
_root.mcListener.onLoadStart = function(mc) {
_root.createTextField("imageTitle",_root.getNextHighestDepth(),0,0,100,20);
_root.imageTitle._x = (Stage.width-_root.imageTitle._width)/2;
_root.imageTitle._y = (Stage.height-_root.imageTitle._height)/2;
_root.imageTitle.autoSize = "center";
};
During onLoadProgress event loading process information will be displayed. onLoadProgress event invokes every
time the loading content is written to the hard disk during the loading process (that is, between onLoadStart event and
onLoadComplete event).
_root.mcListener.onLoadProgress = function(mc){
_root.imageTitle.text = "Loading.. "+_root.ClipVector.length+"/"+_root.totalImages+"
Completed";
}
4.3.6. Creating and display text content
This section is similar to last section, but here we will add large text content and some text property will be enlightened.
function CreateContentTextBox(){
_root.createTextField("ContentTextBox",_root.getNextHighestDepth(),0,0,
TextBox_Width,TextBox_Height);
_root.ContentTextBox._x = 490;
_root.ContentTextBox._y = (Stage.height-_root.ContentTextBox._height)/2;
_root.ContentTextBox.text = _root.TextContent;
_root.ContentTextBox.multiline = true;
_root.ContentTextBox.wordWrap = true;
_root.ContentTextBox.autoSize = "center";
}
In CreateContentTextBox function uses API createTextField function create a text field of specified width and height
with instance name ContentTextBox.
Embedded JPEG Slide Show Tutorial
@Samsung Electronics Copyright All Rights Reserved 26
var TextBox_Width:Number = 400;
var TextBox_Height:Number = 400;
ContentTextBox can be position by using ._x and ._y properties. .text property is is used to assign the text read from
xml file and stored in TextContent variable at XML onLoad.
Set .multiline property to true to indicate text field is a multiline text field and .wordWrap property indicates if the text
field has word wrap. .autoSize property controls automatic sizing and alignment of text fields. This is all we need to
display text content.
Now let’s have a fun with text field and text format properties.
Add getTextColor function to the actionscript file. This function is used to get the color code for the text field. You can
add your own colors to this function.
function getTextColor(colorID)
{
switch(colorID){
default:
case 0: return 0x000000; //Black
break;
case 1: return 0xFF0000; //Red
break;
case 2: return 0x00FF00; //Green
break;
case 3: return 0x0000FF; //Blue
break;
case 4: return 0xCC00FF; //purple
break;
}
}
And add following lines to SlideShowController function.
color++;
if(color >= TotalAvailableColor) color = 0;
_root.ContentTextBox.textColor = getTextColor(color);
Embedded JPEG Slide Show Tutorial
@Samsung Electronics Copyright All Rights Reserved 27
A variable color is used as the index for current color and condition (color >= TotalAvailableColor) is used to put
color within limits. .textColor property can be used to set desire color. Variable color get increment and set a new color
to .textColor property whenever SlideShowController function get called.
Add the following lines at the end of CreateContentTextBox function.
_root.ContentTextBox.textColor = getTextColor(color);
var font_fmt:TextFormat = new TextFormat();
font_fmt.font = "Times";
font_fmt.size = 15;
_root.ContentTextBox.setTextFormat(font_fmt);
In above code, first line of the code sets .textColor property for the first time. In second line, a font_fmt variable is
created. “Times New Roman” font and size “15” is set using .font and .size properties respectively to font_fmt variable.
In the last line, .setTextFormat function sets text format font_fmt to the text field.
5. Concluding remarks
This tutorial has explored the use of dynamically loaded external data through the use of XML file (named as
gallery.xml). This is how to use text and images (JPEG files) together. In order to make it more interesting slide show
feature to the images with the names at the bottom have been added and auto change of the text color has been also
included.