3 The Flash side
3.1. Setting up the globals variables
The first Flash frame will contains the preloader, the TextFormats we will use later and two global var s where we store the soapClient.php path and the number of max result we want back from php:
stop();
// path to your soap client
_global.soap = "soapClient.php";
// number of max rersults to display
// set to '0' to display all results
_global.results = 10;
// ----------------------
// format text result
// ----------------------
format = new TextFormat();
format.font = "Arial";
format.size = 16
format.bold = true;
format.color = 0x000066
format2 = new TextFormat();
format2.font = "Tahoma";
format2.size = 11
format2.bold = false;
format2.color = 0x000000
// ok, preload contents
_root.onEnterFrame = function(){
if(this.getBytesLoaded() >= this.getBytesTotal()){
nextFrame();
delete this.onEnterFrame;
}
}
3.2 Flash 2nd frame
The ScrollPane Component will contains the "container_result" movie clip, which i prepared before in this way:
Here the tree representation of the container_result movie clip:
- cont0 (movieClip)
- cont (empty MC)
- img (empty MC)
- res (dynamic text field)
- cont (empty MC)
In this way when I will receive the results from php i duplicate the cont movie clip based on the number of results, populating in this way the scroll pane component
3.3 doAmazonSearch function
The search button component will make a call to the doAmazonSearch function, placed in the 2nd frame too:
function doAmazonSearch(){
if(keyword.text == "" || keyword.text == undefined){
keyword.text = "You must insert keywords";
keyword.onSetFocus();
Selection.setFocus('keyword');
return;
}
// delete all old results
deleteAll(_sp.getScrollContent())
// disable buttons
searchBTN.setEnabled(false);
keyword.selectable = false;
// create the loadVars obj
myVars = new LoadVars();
myVars.keyword = escape(keyword.text);
myVars.results = results
myVars.onLoad = doAmazonResult;
myVars.sendAndLoad(soap,myVars,'GET');
// get the time of search
timer1 = getTimer();
}
What this function do? At first check if the keyword textfield is not empty, otherwise break the function execution.
If the keyword text is not empty it first delete all the duplicates moviclip inside the scrollPane (through a call to the deleteAll function):
function deleteAll(obj){
for(var a in obj){
if(obj[a]._name != "cont0"){
obj[a].removeMovieClip();
}
}
obj.cont0._visible = 0;
}
then disables both the search button and the keyword text field selection
Then creates the LoadVars Object which will send (through the sendAndLoad method) the informations to the soap client page and will store inside itself the returned variables. When the loadVars object will receive the results from php it will call automatically the doAmazonResult function
3.4 doAmazonSearchResult function
The doAmazonResult it's the main function which populates the scrollPane contents with the returned data:
function doAmazonResult(success){
searchBTN.setEnabled(true);
keyword.selectable = true;
timer2 = getTimer();
var a = 0;
if(success){
// -----------------------------
// GET the movie clip controlled
// by the scrollPane
// -----------------------------
var ref = _sp.getScrollContent()
while(myVars['asin'+a] != undefined){
if(a>0){
ref.cont0.duplicateMovieClip("cont"+a,a);
}
var cont = ref['cont'+a];
cont._visible = 1;
// adjust the _y of the duplicates
cont._y = (ref['cont'+(a-1)]._y + ref['cont'+(a-1)]._height)
cont.cont.img.loadMovie(soap+"?image="+myVars['image'+a]);
// set the text to autoSize
cont.res.autoSize = true;
// title
cont.res.text = myVars['title'+a] + "\n";
// get length of the title
var i = cont.res.text.length;
// populate the TEXT object
cont.res.text += "ISBN: " + myVars['asin'+a];
cont.res.text += "Author(s): " + myVars['authors'+a] + "\n";
cont.res.text += "Editor: " + myVars['editor'+a] + "\n";
cont.res.text += "Release Date: " + myVars['avail'+a] + "\n";
cont.res.text += "Sales Rank: " + myVars['salesRank'+a] + "\n";
cont.res.text += "Media: " + myVars['media'+a] + "\n";
cont.res.text += "our price: " + myVars['outprice'+a] + "\r\n";
// get length of the rest of contents
var _i = cont.res.text.length;
// --------------------------------
// apply the URL to the text format
// --------------------------------
format.url = "asfunction:getThatURL," + a;
// --------------------------------
// ovewrride tha flash limit
// of 127 chars in a html text link
// --------------------------------
cont.getThatURL = function(a){
getURL(myVars['url'+a],"_blank");
}
// -------------------------------
// apply the different text format
// -------------------------------
cont.res.setNewTextFormat(0, i, format);
cont.res.setTextFormat(i, _i, format2);
a++;
}
} else {
// just for test
trace(success);
}
// Refresh the contents of the ScrollPane
_sp.refreshPane();
// writing number of results, and search time
sTimer.text = "[" + a + " results] in " +
int(((timer2 - timer1)/1000)*1000)/1000 + " secs";
}
This function will pass through all the variables passed from PHP (they are something like this: url0=bla&asin0=blabla&url1=bla bla bla...) and duplicate the movie clip "cont" inside the container_result movieClip
Then with this call we load the associated image to the clip cont.img:
cont.cont.img.loadMovie(soap+"?image="+myVars['image'+a]);
then We populate the textField with the rest of variables such as Asin, Title, Editor.. and we will apply to the Book Title and the others informations two different textFormat styles (the ones we created in the 1st frame).
To do that we need to know the lenght of the title text and the length of the rest of the text, then we can apply the textformat style to it:
cont.res.setNewTextFormat(0, i, format);
cont.res.setTextFormat(i, _i, format2);
Note: In a "standard" scenario I could placed the url directly in the f.url variable, but due to a limitation in the number of chars which that variable can support i need here to use the asfunction method:
format.url = "asfunction:getThatURL," + a;
cont.getThatURL = function(a){
getURL(myVars['url'+a],"_blank");
}
Ok, now we have finished it! From this simple search example you can now build your own store using the amazon web services in Flash and much more..
P.S. You can find a nice tutorial on nusoap and Flash using the google API at www.flash-db.com site.
4 Files preview & download
download .zip file with files used in this tutorial
view the example
