Thursday, March 30, 2006

New Portfolio App!

Future IT Services - New Portfolio Application

Just finished developing a new portfolio gallery application for Future IT Services, using Flash Actionscript v2.0 and XML. The idea came from a tutorial on DMXZone written by Flash guru Sas Jacobs. It involves creating an external XML document to describe elements such as photos, captions, titles etc for the XML Photo Gallery, creating a schema, linking that schema with the XML document and then loading that XML document from within Flash in order to add the content to the gallery. Here are the steps taken to implement our application.
1. Create the XML object.
2. Set the ignoreWhite property to true
3. Specify the name of the function that will deal with the loaded XML document.
4. Load the XML document.
5. Within the load function, test whether the file has loaded successfully.
6. Display the document tree with a trace action to check contents load correctly.
7. Set a variable referring to the RootNode of the XML document.
8. Work through the document tree, adding content to the Flash movie.

As i said before I used Actionscript version 2.0 and version 2.0 components in Flash MX 2004 for this project.

Rather than run through the whole design process I will instead give a quick explanation of what needs to be addressed.
Firstly set up the enivironment in Flash - ie. create an interface for the gallery. I used a static field to contain the text heading "Photo Gallery" and two dynamic text fields, one on the left for the caption and one on the right for the comments about the image. Give them both instance names. Create an empty movie clip called empty_mc below the caption to display the photos. Create a ComboBox component, gallery_cb, with two named buttons, back and forward for navigation.
Now create the XML document. I used an app called Microsoft XML Notepad to create my XML document but you can just as well use Notepad or similar - just ensure to save as UTF-8 and as .xml file extension. The advantage of using the application above is that you can check to see if your document is well-formed on-the-fly. If you need help with creating XML documents visit here for more information or buy a decent book.

The nodes (which should be in between <>) that i used in hierarchical order were:
1. photoGallery - being the RootNode,
2. location locationname="galleryName" - being the child element of the RootNode(locationName is an attribute),
3. photo filename="filename.jpg" caption="caption content" - as the final child element with attributes (or grandchild element depending on how you want to look at it)

Next you will need to in this order:

  1. Load the XML document into the Flash movie.
  2. Load the ComboBox component.
  3. Add and event listener to the ComboBox.
  4. Load the photos.
  5. Conifigure the buttons.

To do all this create a new layer in the gallery.fla file and name it actions. Add the following code to the actions layer by copying and pasting (Ctrl+C followed by Ctrl+V):


// Global (timeline) Variables
var RootNode:XMLNode;
var
selectedGallery:String;
var photoPosition:Number;
var
GalleryNode:XMLNode;
var PhotoNode:XMLNode;
// disable buttons to stop
navigation till after
// we've selected an image gallery
back_btn.enabled
= false;
forward_btn.enabled = false;
//Load XML document into
Flash
var photoXML:XML = new XML();
photoXML.ignoreWhite =
true;
photoXML.onLoad=loadPhotos;
photoXML.load("photoGallery.xml");
stop();
//
Add event listener to ComboBox
var CBOListener:Object = new
Object();
CBOListener.change =
loadGallery;
gallery_cb.addEventListener("change", CBOListener);
// Make
the back and forward buttons work.
back_btn.onRelease = function():Void
{
if(PhotoNode.previousSibling.nodeName != undefined)
{
photoPosition--;
loadPhoto(photoPosition);
}
}
forward_btn.onRelease
= function():Void {
if(PhotoNode.nextSibling.nodeName != undefined)
{
photoPosition++;
loadPhoto(photoPosition);
}
}
// Function for
loading XML object and calling the loadCombo
// function after successfully
doing so.
function loadPhotos(success:Boolean):Void{
if(success)
{
RootNode = this.firstChild;
loadCombo();
}
else {
trace("Error
in loading XML file");
}
}
// function to load ComboBox
component.
function loadCombo():Void {
var
galleryName:String;
gallery_cb.addItem("-- Select --");
for (var
i:Number=0; i< RootNode.childNodes.length; i++) {
galleryName =
RootNode.childNodes[i].attributes.locationName;
gallery_cb.addItem(galleryName);
}
}
//
Function to find if gallery is selected and sets the variable
//
selectedGallery. It then finds the correct gallery and sets
// the position
in the document tree within the variable
// GalleryNode. Finally it calls
the loadPhoto function, passing
// a value of 0 to indicate that the first
image should display.
function loadGallery(evtObj:Object):Void {
var
galleryName:String;
if (evtObj.target.selectedItem.label !="-- Select --")
{
selectedGallery = evtObj.target.selectedItem.label;
for (var i:Number=0;
i< RootNode.childNodes.length; i++) {
galleryName =
RootNode.childNodes[i].attributes.locationName;
if (galleryName ==
selectedGallery) {
GalleryNode =
RootNode.childNodes[i];
photoPosition=0;
loadPhoto(photoPosition);
back_btn.enabled
= true;
forward_btn.enabled = true;
break;
}
}
}
else
{
empty_mc.unloadMovie();
caption_txt.text = "";
comment_txt.htmlText =
"";
selectedGallery = "";
back_btn.enabled = false;
forward_btn.enabled
= false;
}
}
// function to set the PhotoNode variable and find the
file name,
// caption , and comments from the document tree. The loadMovie
// action laods the image from the photos folder into empty_mc.
// The
text and htmlText properties display the caption and
// comments. Notice
that we set the html property of the
// comment_txt field to true so that it
can render the HTML tags
// from the CDATA section of the XML document.
function loadPhoto(nodePos:Number):Void {
PhotoNode =
GalleryNode.childNodes[nodePos];
var filename:String =
PhotoNode.attributes.filename;
var caption:String =
PhotoNode.attributes.caption;
var comments:String =
PhotoNode.firstChild.nodeValue;
empty_mc.loadMovie("photos/"
+filename);
caption_txt.text = caption;
comment_txt.html =
true;
comment_txt.htmlText = comments;
}

Remember to save and test as you go along. For more detailed explanations onwhat is going on here I would advise buying Sas Jacob's book, XML for Flash,ISBN: 1-59059-543-2 as it explains everything you will need to know about XMLand Flash and in particular this PhotoGallery Application.

I am now going off to implement a dynamic Photo Gallery using server side technology, and will tell you all about it once I have it completed!


Good Luck and see you next time.


Lee Pearman - Future IT Services - email

Thursday, March 02, 2006

Webmaster Tools and SEO Software Resources :: Webmaster Toolkit

Webmaster Tools and SEO Software Resources :: Webmaster Toolkit

This website is an excellent research and learning tool for budding professionals within the Web Industry. I found this site by accident but was so impressed that I had to comment on it. It provides a comprehensive list of important SEO tools and all for free!.

I use it personally as my one stop library, when dealing with Search Engine Optimisation on my various sites. It not only includes most current and up to date tools for all aspects of Web marketing but it also provides links to other resources such as Link Machine. This is a link exchange software which specifically promotes natural organic link building (which by the way has recently been endorsed by Google) in an attempt to pry peoples habits away from opting for unnatural and illegitimate link building practices such as using Link Farms.

The site provides everything you need at a click of a mouse button. If you dont believe me - then just check it out for yourself and make your decision!

Lee Pearman
Future IT Services