×
Namespaces

Variants
Actions

Archived:How to create a Flash Lite horoscope application

From Nokia Developer Wiki
Jump to: navigation, search

Archived.pngArchived: This article is archived because it is not considered relevant for third-party developers creating commercial solutions today. If you think this article is still relevant, let us know by adding the template {{ReviewForRemovalFromArchive|user=~~~~|write your reason here}}.

We do not recommend Flash Lite development on current Nokia devices, and all Flash Lite articles on this wiki have been archived. Flash Lite has been removed from all Nokia Asha and recent Series 40 devices and has limited support on Symbian. Specific information for Nokia Belle is available in Flash Lite on Nokia Browser for Symbian. Specific information for OLD Series 40 and Symbian devices is available in the Flash Lite Developers Library.

Article Metadata
Code Example
Source file: Media:Horoscope.zip
Article
Created: raheal_akh (27 May 2008)
Last edited: hamishwillee (14 May 2013)

Contents

Introduction

This article exhibits the power of Flash by demonstrating how easy it is to pull dynamic data from the web and parse it without going into a lot of complexities. Furthermore, cool graphical effects can be created without putting a lot of strain on the flash file itself. I have used SWX-Flash to convert XML into Array object. Doing this saves us the hustle of parsing XML files and use Arrays instead. More info on this can be found here. http://swxformat.org/

Setting up the stage

HoroscopeLoading.jpg

There are two movieclips on the stage initially

  • Progress movieclip
  • timeout message movieclip

Two other movieclips that are primarily used for horizontal selection menu and for displaying horoscope text are in the asset library.

  • fdLst_mc
  • detail_mc

They are called up on the stage when needed.


Initial Code Block

// Author : Raheal Akhtar
stop ();
fscommand("FullScreen", true);
fscommand("SetQuality", "high");
 
 
var Symbols:Array;
var initialized;
var mutex;
var select;
var myImgLoader;
var myKeyListener;
var time = 0;
var loaded = false;
var fdLst_xPos = 122;
var fdLst_yPos = 314;
var details_xPos = 120;
var details_yPos = 90;
 
menuInit();
if (initialized == undefined)
{
initSWX();
} // end if
 
function menuInit()
{
this.myImgLoader = new MovieClipLoader();
myImgLoader.addListener(this);
myKeyListener = new Object();
Key.addListener(myKeyListener);
myKeyListener.onKeyUp = onKeyMainMenu;
 
swxTimeoutMessage._visible = false;
Symbols = ["Aries", "Taurus", "Gemini", "Cancer", "Leo", "Virgo", "Libra", "Scorpio", "Sagittarius", "Capricorn", "Aquarius", "Pisces"];
 
_root.attachMovie("fdLst_mc", "fdLst_mc", this.getNextHighestDepth());
fdLst_mc._x = fdLst_xPos;
fdLst_mc._y = fdLst_yPos;
maxLength = _root.fdLst_mc.scrollBar_mc.track_mc._height - 38;
fdLst_mc.list0.heading = Symbols[2];
fdLst_mc.box2.attachMovie(Symbols[2], Symbols[2], 350);
fdLst_mc.list1.heading = Symbols[0];
fdLst_mc.box0.attachMovie(Symbols[0], Symbols[0], 350);
fdLst_mc.list2.heading = Symbols[1];
fdLst_mc.box1.attachMovie(Symbols[1], Symbols[1], 350);
moveValue = maxLength / Symbols.length;
select = 1;
fdLst_mc.list1.gotoAndStop(2);
} // End of the function

Above lines setup the stage with the first 3 horoscopes icons, define a key listener and begins the data load sequence.


SWX Module

The code below uses the SWX service to pull the data feed from the web and saves XML parsing result in an array object.

function initSWX()
{
var swx = new org.swxformat.SWX();
swx.__set__gateway("http://swxformat.org/php/swx.php");
swx.__set__debug(true);
swx.__set__encoding("GET");
var args = {serviceClass: "SWXml", method: "parseXML", args: ["http://feeds.astrology.com/dailyoverview"], result: [this, resultHandler], timeout: [this, timeoutHandler]};
swx.call(args);
} // End of the function
function resultHandler(event) //if data load successful
{
loading_mc._visible = false;
loaded = true;
myFeed = event.result;
maxItem = myFeed.rss[0].channel[0].item.length;
//Update icon pos on the stage
fdLst_mc.box0._y = fdLst_mc.box0._y - 15;
BringDetailsMcOnTheStage();
initialized = true;
} // End of the function
function timeoutHandler(event)
{
loading._visible = false;
swxTimeoutMessage._visible = true;
} // End of the function

Creating a Key Listener

function onKeyMainMenu()
{
var key = Key.getCode();
if (key == Key.ENTER)
{
} // end if
if (key == Key.RIGHT)
{
if (!mutex)
{
if (select < Symbols.length) //less than 12
{
fdLst_mc["list" + select % 3].gotoAndStop(1);
UpdateOldPositions();
fdLst_mc.rightarrow_mc.gotoAndPlay(2);
select = select + 1;
if (select % 3 == 1)
{
removeClips();
fdLst_mc.box0.attachMovie(Symbols[select - 1], Symbols[select - 1], 350);
fdLst_mc.list1.heading = Symbols[select - 1];
fdLst_mc.box1.attachMovie(Symbols[select], Symbols[select], 350);
fdLst_mc.list2.heading = Symbols[select];
fdLst_mc.box2.attachMovie(Symbols[select + 1], Symbols[select + 1], 350);
fdLst_mc.list0.heading = Symbols[select + 1];
} // end if
fdLst_mc["list" + select % 3].gotoAndStop(2);
mutex = true; //Lock the key strokes
UpdateNewPositions(); //Update the icon positions
time = setInterval(timer, 200); //set a timer for 200 milsecs for graphics to update
BringDetailsMcOnTheStage();
} // end if
} // end if
} // end if
if (key == Key.LEFT)
{
if (!mutex)
{
if (select > 1)
{
fdLst_mc["list" + select % 3].gotoAndStop(1);
UpdateOldPositions();
select = select - 1;
fdLst_mc.leftarrow_mc.gotoAndPlay(2);
if (select % 3 == 0)
{
removeClips();
fdLst_mc.box2.attachMovie(Symbols[select - 1], Symbols[select - 1], 350);
fdLst_mc.list0.heading = Symbols[select - 1];
fdLst_mc.box1.attachMovie(Symbols[select - 2], Symbols[select - 2], 350);
fdLst_mc.list2.heading = Symbols[select - 2];
fdLst_mc.box0.attachMovie(Symbols[select - 3], Symbols[select - 3], 350);
fdLst_mc.list1.heading = Symbols[select - 3];
} // end if
fdLst_mc["list" + select % 3].gotoAndStop(2);
mutex = true;
UpdateNewPositions();
time = setInterval(timer, 200);
BringDetailsMcOnTheStage();
} // end if
} // end if
} // end if
if (key == Key.DOWN)
{
if (detail_mc.myDetailText.maxscroll != detail_mc.myDetailText.scroll)
{
++detail_mc.myDetailText.scroll;
detail_mc.myScrollBar.scrlDown_mc.gotoAndPlay(2);
} // end if
} // end if
if (key == Key.UP)
{
if (detail_mc.myDetailText.scroll > 1)
{
--detail_mc.myDetailText.scroll;
detail_mc.myScrollBar.scrlUp_mc.gotoAndPlay(2);
} // end if
} // end if
} // End of the function


Creating a Mutex Lock and an associated Timer

The mutex lock is used in the code to ignore the arrow keystrokes until the tweening stops. The concept of mutex is to introduce a boolean variable and check against its value each time an event occurs as in this case LEFT or RIGHT key presses. Initially the variable is set to false and immediately set to true before tweening sequence begins in the code. A timer function is called once tweening stops that removes the mutex lock.

function timer()
{
clearInterval(time);
mutex = false;
} // End of the function

Horoscope View

function BringDetailsMcOnTheStage()
{
if (loaded)
{
if (detail_mc)
{
var temp = this.getInstanceAtDepth(9999);
detail_mc.swapDepths(9999);
detail_mc.removeMovieClip();
if (temp != undefined)
{
temp.swapDepths(9999);
} // end if
} // end if
swxTimeoutMessage._visible = false;
_root.attachMovie("detail_mc", "detail_mc", this.getNextHighestDepth());
detail_mc._x = details_xPos;
detail_mc._y = details_yPos;
new mx.transitions.TransitionManager.start(detail_mc, {type: mx.transitions.Zoom, direction: Transition.OUT, duration: 2.500000E-001, easing: mx.transitions.easing.Elastic.easeIn});
loadMovie("Img/horoscope/" + Symbols[select - 1] + ".png", detail_mc.imgHldr_mc);
detail_mc.myDetailTitle.text = myFeed.rss[0].channel[0].item[select - 1].title[0].text;
var horoscope = myFeed.rss[0].channel[0].item[select - 1].description[0].text;
horoscope = horoscope.substr(horoscope.indexOf("\"<p>") + 4, horoscope.indexOf("</p>") - 3);
detail_mc.myDetailText.text = horoscope;
detail_mc.myScrollBar.bar._y = 0;
} // end if
} // End of the function

Updating icons positions on the stage

// --- Update horoscope icons Positions in the menu
function UpdateNewPositions()
{
if (select % 3 == 1)
{
new mx.transitions.Tween(fdLst_mc.box0, "_y", mx.transitions.easing.Regular.easeInOut, fdLst_mc.box0._y, fdLst_mc.box0._y - 15, 0.2, true);
}
else if (select % 3 == 2)
{
new mx.transitions.Tween(fdLst_mc.box1, "_y", mx.transitions.easing.Regular.easeInOut, fdLst_mc.box1._y, fdLst_mc.box1._y - 15, 0.2, true);
}
else if (select % 3 == 0)
{
new mx.transitions.Tween(fdLst_mc.box2, "_y", mx.transitions.easing.Regular.easeInOut, fdLst_mc.box2._y, fdLst_mc.box2._y - 15, 0.2, true);
} // end else if
} // End of the function
function UpdateOldPositions()
{
if (select % 3 == 1)
{
fdLst_mc.box0._y = fdLst_mc.box0._y + 15;
}
else if (select % 3 == 2)
{
fdLst_mc.box1._y = fdLst_mc.box1._y + 15;
}
else if (select % 3 == 0)
{
fdLst_mc.box2._y = fdLst_mc.box2._y + 15;
} // end else if
} // End of the function

HoroscopeMain.jpg

Downloads

Download the source files : media:Horoscope.zip

Author

--raheal_akh 00:11, 28 May 2008 (EEST) RAHEAL AKHTAR

This page was last modified on 14 May 2013, at 09:14.
57 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×