Embedded JPEG Slide Show Tutorialdjsiw1wjy8vi7.cloudfront.net/[SDK2.5]Documents_Tutorials/Tutorial...Embedded JPEG Slide Show Tutorial ... Resources/icons/tut_106.png

@Samsung Electronics Copyright All Rights Reserved 1

Embedded JPEG Slide Show Tutorial

Version 1.00

Samsung Smart TV



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



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.



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.



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



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



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.



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>



<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>[email protected]</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:



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



<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="Main.js"></script>



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



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



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



{

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



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 {

http://en.wikipedia.org/wiki/Style_sheet_language

http://en.wikipedia.org/wiki/Presentation_semantics

http://en.wikipedia.org/wiki/Markup_language



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.



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



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



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



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;



_root.ContentTextBox.wordWrap = true;

_root.ContentTextBox.autoSize = "center";


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.



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

};



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

http://www.republicofcode.com/tutorials/flash/intro_func_bc/



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

http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/2/help.html?content=Part2_AS2_LangRef_1.html

http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/2/help.html?content=Part2_AS2_LangRef_1.html



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


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.


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.



http://www.republicofcode.com/tutorials/flash/motion_tweening/

http://www.republicofcode.com/tutorials/flash/tweenclasseasing/

http://help.adobe.com/en_US/AS2LCR/Flash_10.0/help.html?content=00002995.html

http://help.adobe.com/en_US/AS2LCR/Flash_10.0/help.html?content=00002995.html



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


_root.mc++;

if (_root.mc >= _root.totalImages){

_root.mc = 0;

}

_root.imageTitle.text = _root.Images[mc].attributes.title;

nextClip = _root.ClipVector[_root.mc];


}

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



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.



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;




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.


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.