I’m looking to create a dynamic scrolling photostrip using XML and AS3. I’m looking for any kind of pointers on how I can accomplish this and whether or not anyone knows some good tutorials as I’m just learning AS3 now.
To give you an idea of what I’m talking about, head on over too www.paramore.net and take a look at their mobile stream across the top of the page.
I’ll be creating this photostrip for a top of a myspace profile. And like in paramores, I want to have the pictures get bigger on mouse over, have a description under each one, and a box around then in the back ground. I only want a few pictures to display and then be able to hit a button to slide to the right to more pictures. And also a button to scroll to the left if you have already scrolled to the right. Each picture I want to be a button also that when I click on them, it will open the full size picture in a new window.
I have started from a Tutorial that crates a column of thumbnails to the left, that when clicked on loads a image to the right with a caption under it. So far I have been able to edit it and make the pictures run from left to right. However, they run on forever and don’t load only a few at a time in the sequence. So this is my first area that I need help. Next is getting the caption beneath the pictures. I took the code that shows the caption under the one big picture, and modified it and placed it under each of the thumbs that load. The text gets the correct position, however it will only show under the last picture to load. I have a similar problem with the function for resizing the picture on mouse over and opening the picture in a new window, it only works on the last image loaded.
Lastly, I’m looking for help on how to get the box around the picture and the text, and link them together so that when the picture gets bigger the text moves down rather than the picture resizing over the text.
Here is the code I have so far minus the resize and opne picture in new window code. If anyone could give me any pointers to any of these issues or point me in the right direction it would be greatly appreciated, thank you=)
var imageText:TextField = new TextField();
var imageLoader:Loader;
var xml:XML;
var xmlList:XMLList;
var xmlLoader:URLLoader = new URLLoader();
xmlLoader.load(new URLRequest("\photostrip.xml"));
xmlLoader.addEventListener(Event.COMPLETE, xmlLoaded);
function xmlLoaded(event:Event):void {
xml = XML(event.target.data);
xmlList = xml.children();
for (var i:int = 0; i < xmlList.length(); i++) {
imageLoader = new Loader();
imageLoader.load(new URLRequest(xmlList*.attribute("thumb")));
imageLoader.x = i * 175 + 25;
imageLoader.y = 25;
imageText.x = i * 175 + 25;
imageText.y = 200;
imageText.text = xmlList*;
imageLoader.name = xmlList*.attribute("source");
addChild(imageLoader);
//imageLoader.addEventListener(MouseEvent.CLICK, showPicture);
}
}
/*function showPicture(event:MouseEvent):void {
imageLoader = new Loader();
imageLoader.load(new URLRequest(event.target.name));
imageLoader.x = 100;
imageLoader.y = 200;
imageLoader.scaleY *= .6;
imageLoader.scaleX *= .6;
addChild(imageLoader);
imageText.x = imageLoader.x;
imageText.y = 500;
for (var j:int = 0; j < xmlList.length(); j++) {
if (xmlList[j].attribute("source") == event.target.name) {
imageText.text = xmlList[j];
}
}
}*/
imageText.autoSize = TextFieldAutoSize.LEFT;
addChild(imageText);
And the xml code with only 4 images for now
<?xml version="1.0" encoding="utf-8"?>
<images>
<image source="images/Fusion_Fest_01.jpg" thumb="images/Small/Fusion_Fest_01.jpg">Fusion Fest July 2008</image>
<image source="images/Fun_Pictures_063.jpg" thumb="images/Small/Fun_Pictures_063.jpg">Canada Day July 1, 2008</image>
<image source="images/Fun_Pictures_019.jpg" thumb="images/Small/Fun_Pictures_019.jpg">Canada Day July 1, 2008</image>
<image source="images/n656275270_3510921_7179.jpg" thumb="images/Small/n656275270_3510921_7179.jpg">Canada Day July 1, 2008</image>
</images>
