Archived:How to create a Flash Lite horoscope application
Archived: 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.
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
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
Downloads
Download the source files : media:Horoscope.zip
Author
--raheal_akh 00:11, 28 May 2008 (EEST) RAHEAL AKHTAR
(no comments yet)