Flash :: Xml Gallery "go To Specific Image"

XML And Flash Gallery From K - Specific Image
Hello,

i´m using the Flash and XML-Gallery Script here from Kirupa - ist a really great thing and i love it...

But there is one problem - i want to insert a extra button, he should call image number 15 (or other number) from the xml file... does anybody know, how to do that ? I try to figured out, but i´m an as-newbie... for somebody who don´t know the script, here the main function...

PHP Code:

function loadXML(loaded) { if (loaded) { xmlNode = this.firstChild; image = []; description = []; total = xmlNode.childNodes.length; for (i=0; i<total; i++) { image[i] = xmlNode.childNodes[i].childNodes[0].firstChild.nodeValue; description[i] = xmlNode.childNodes[i].childNodes[1].firstChild.nodeValue; } firstImage(); } else { content = "file not loaded!"; }}xmlData = new XML();xmlData.ignoreWhite = true;xmlData.onLoad = loadXML;xmlData.load("images.xml");/////////////////////////////////////listen = new Object();listen.onKeyDown = function() { if (Key.getCode() == Key.LEFT) { prevImage(); } else if (Key.getCode() == Key.RIGHT) { nextImage(); }};Key.addListener(listen);previous_btn.onRelease = function() { prevImage();};next_btn.onRelease = function() { nextImage();};/////////////////////////////////////p = 0;this.onEnterFrame = function() { filesize = picture.getBytesTotal(); loaded = picture.getBytesLoaded(); preloader._visible = true; if (loaded != filesize) { preloader.preload_bar._xscale = 100*loaded/filesize; } else { preloader._visible = false; if (picture._alpha<100) { picture._alpha += 40; //fade in - Wert (emanuel) } }};function nextImage() { if (p<(total-1)) { p++; if (loaded == filesize) { picture._alpha = 0; picture.loadMovie(image[p], 1); desc_txt.text = description[p]; picture_num(); } }}function prevImage() { if (p>0) { p--; picture._alpha = 0; picture.loadMovie(image[p], 1); desc_txt.text = description[p]; picture_num(); }}function firstImage() { if (loaded == filesize) { picture._alpha = 0; picture.loadMovie(image[0], 1); desc_txt.text = description[0]; picture_num(); }}function picture_num() { current_pos = p+1; pos_txt.text = current_pos+" / "+total;}

on the buttons there is follw. name:
'next_btn' and 'previous_btn'

if somebody has an idea it would be great !
Best greetings to all - reloop !

Image Gallery - Select Specific Picture
Hey,

first of all thanks to Kirupa !
I used the script from section "Flash MX" - Tutorial "Create a Photo Gallery".

I love it, cause it´s simple, easy to use and for my targets perfect. But - i have one question... to navigate there are two buttons. One "next", other "previous" - if you click "next" the it will rise [+1] and on previous [-1].

This is clear for me and i have a (little) idea, how it works and function. But i´m a beginner. So my question: is it possible to create a button, which call a specific number ?

I have pictures from 1-76 and i need some buttons to call special pictures.
ex. 34 or 56,.... How can i make this button ?

My AS-Skills are really, really bad. My idea in my little head was, that i need a button, which change the actual .rootphoto to "0" and then "+34" or "+56".
So i can jump there, and then navigate as usual (next, previous). Cause if i make a button only with

Code:
on (release) {
_root.changePhoto(34);
}
he makes 0+34 (is ok) but also +34 when i at picture 31 (=65)...

I hope anybody understand my strange text and problem.... hope, somebody can help... greetings from austria ! Reloop

PS edit: i have seen now the "new" gallery with XML in Flash MX 2004 - this script will also perfect for my site - but there is the same problem ! I need only a few buutons to jump (or "call") also to specific numbers.....

Select Specific Image In Photo Gallery
How can I change the sbeener photo gallery (or any other) to jump to a specific image? I will have a separate button for each image in the gallery. I know very little about actionScript. Any help would be greatly appreciated.

Thanks,
Joshua

How To Do Specific Image Output With Print Button In Fast Gallery
Please disregard.

Specific Image Appear On Specific Date
I am building a calendar for a client. Off to the side of the calendar is a box where I want a different, specific, image to appear each day.

I think I know how to start, but not how to finish. I assume I start by building an MC with all the images placed on the specific x y coordinates, giving each a unique instance name.

Along the time line, I can have each image display only on one specific frame, with a stop action and a label unique to it.

From there is where I get lost. I don't know what AS to put on the MC so that it reads the users computer, knowing what the date is and sending it to the appropriate labeled frame.

Am I on the right track? If so, what code do I use. If I'm not on the right track, please offer suggestions on what direction to head.

I need it to work when saved as FLASH 5.

Thanks!

Looking For Specific Style Of Photo Gallery
I made a website for a photographer last year using gnu-'s xml gallery (Thanks a ton!) and it turned out looking great. Now I have another job creating another photographers website and she wants something a little different, I just can't find anything good to use, and I certainly don't have the knowledge to just create it myself. Idealy, I would love to have something very similar to this one (especially the way the pictures load):

http://www.karenfederphotography.com...idbrittani.htm

However, the new job needs to have thumbnails on the right of where the pictures load in a grid of 4 wide x 5 tall. And in the case where there are more than 20 pictures in a particular gallery, have the ability to click a next button and 20 new thumbnails slide into place.

Does anyone know of an easy way to do this, or a good free source I could use?

Thanks,
Josh

This Is A Fix To The Image Gallery Tutorial - Makes It A Fully Dynamic Gallery
After searching and reading a couple of hundred post on the truly GREAT Kirupa image gallery tutorial - and wondering why nobody has written a new tutorial or at least updated the "old" one to avoid overloading the net with flash image gallery questions.

Im trying to create a new thread that will serve as a basic startingpoint for all Kirupa gallery questions. Im no überscripter nor do I know a lot about flash, but with a little common sense and perhaps some help from all of you... oh well - here goes:

Quick Checklist:

If your JPG's wont load - Make sure you don't save them as progressive JPG's, as they wont load in Flash.
If your images dont align to the photo container movieclip it is probably because your registration point of the photo MC is set to center instead of topleft.
Below is the code I have pieced together from different posts on the subject (I would like to credit all the authors, but that would require me reading all the posts again, as I have forgotten where I got them.

It produces a gallery that loads files dynamicaly thru a phpscript and checks for maximum image height/width and scales the images to fit within the photo MC. It also sets the center of the displayed images to a given coordinate (x,y).

All in all this is a install and forget image gallery, where the only maintaining required is uploading new pictures to the image folder.

On the server the file/directory structure is:
gallery swf
filearray.php
images/file_x.jpg
file_y.jpg
etc...

This is the filearray.php - modify this to check for files in the path set in the actionscript line: this.pathToPics = "images/";

PHP Code:

<?php if ($dir = opendir("images")) { while (($file = readdir($dir)) !== false) { $cont++; if ($file == "." || $file == "..") { } else { $string.= ($file); $string.= "&"; } } closedir($dir); } print($string); ?>

This is the modified actionscript from the original Kirupa gallery script:

ActionScript Code:
// This loads the array created by filearray.php and puts it into pArray lv = new LoadVars(); lv.load("filearray.php"); lv.onData = function(text){ pArray = text.split("&"); for (i=0; i<pArray.length-1; i++) { trace(pArray[i]); } } // variables ------------------------------------------ // put the path to your pics here, include the slashes (ie. "pics/") // leave it blank if they're in the same directory this.pathToPics = "images/"; // fill this array with your pics (set from filearray.php) this.pArray = pArray; this.fadeSpeed = 20; this.pIndex = 0; // MovieClip methods ---------------------------------- // d=direction; should 1 or -1 but can be any number //loads an image automatically when you run animation loadMovie(this.pathToPics+this.pArray[0], _root.photo); // Center the photo at (x,y) the coordinates are set in line 69 MovieClip.prototype.centered = function(x, y) { this._x = x-this._width/2; this._y = y-this._height/2; }; // Makes sure that the image fits within (wMax, hMax) MovieClip.prototype.resize = function(wMax, hMax) { while (this._width>wMax || this._height>hMax) { this._xscale = this._yscale -= 1; } }; // This line sets max width and max height (wMax, hMax) photo.resize(397, 297); MovieClip.prototype.changePhoto = function(d) { // make sure pIndex falls within pArray.length this.pIndex = (this.pIndex+d)%this.pArray.length; if (this.pIndex<0) { this.pIndex += this.pArray.length; } this.onEnterFrame = fadeOut; }; MovieClip.prototype.fadeOut = function() { if (this.photo._alpha>this.fadeSpeed) { this.photo._alpha -= this.fadeSpeed; } else { this.loadPhoto(); } }; MovieClip.prototype.loadPhoto = function() { // specify the movieclip to load images into var p = _root.photo; //------------------------------------------ p._alpha = 0; p.loadMovie(this.pathToPics+this.pArray[this.pIndex]); this.onEnterFrame = loadMeter; }; MovieClip.prototype.loadMeter = function() { var i, l, t; l = this.photo.getBytesLoaded(); t = this.photo.getBytesTotal(); if (t>0 && t == l) { this.onEnterFrame = fadeIn; // This line sets the (x,y) center of the image on the stage this.photo.centered(249, 213); } else { trace(l/t); } }; MovieClip.prototype.fadeIn = function() { if (this.photo._alpha<100-this.fadeSpeed) { this.photo._alpha += this.fadeSpeed; } else { this.photo._alpha = 100; this.onEnterFrame = null; } };

This should do it - the only thing I (think) I need some help with is changing the script to actually load the FIRST image, when the gallery loads. For some reason beyond my knowledge you have to click the next button for a image to load... What part of the script needs to be changed to make sure that a image is loaded on startup???

I hope someone will take the time to help develope this gallery tutorial / help file... It would be great if you added som more steps to the quick checklist... and of course fixed the load image on start problem....

How To Link A Button To An Specific Picture In Photo Gallery
Hi there. I'm a beginner with flash and web design. I tried to create a photo gallery following the tutorial that uses XML in flash but I couldn't. The partial downloaded fla files that explain the process didn't open at all (unexpected format, was displayed). Download Partial FLA for 2004
Download Partial FLA for MX
FLA for MX (for those who can't get the above version to work)
I went instead for the more simple version tutorial "creating a photo gallery" with sbeener's code, which is enough good for my requirements. I made my photo gallery and then I thought It'd be a good idea to link a button from a different page to an specific picture within the gallery and from there use the back and forward buttons to move along. Is this possible without following the complex XML in flash procedure? How could I do it?

I'd really appreciate any help you could give me.
Thanks in advance.

Autoscroll XML Gallery And Path Specific Integration Problem
Hi,

I have a XML gallery SWF movie that reads the XML thumbs and information. It works quite flawless as a standalone SWF but when I try to integrate it into my main movie, all the functions just stop working.

Code:

_root.container.loadeds.contcon,

is the path in which XML gallery movie resides. Which means my XML gallery is loaded into "contcon MC".

There is a horizontal thumbnail slider panel with onRollOver, in which thumbs are loaded(its width is calculated automatically according to the # of thumbs times width of one thumb) and there is a holder MC for the full size images that is called into the stage after clicking thumbs.

THE PROBLEM IS,

Nothing works when I embed this SWF into the path that I've mentioned above.

I know I should modify it with _parent , _root or so... but after trying many things, I finally got lost. Paths and hierarchy... always tricky. and also functions and "this" thing makes it even more complex.

Loaded movie has only one frame of actions which is consisted of 129 lines.

I'm giving the whole code here. So can you give me an idea or manipulate it for me so that it works when loaded into the path I have written above?

Code:

panel.onRollOver = panelOver;

function panelOver() {
this.onEnterFrame = scrollPanel;
delete this.onRollOver;
}

var b = stroke.getBounds(_root);

function scrollPanel() {
if(_xmouse<b.xMin || _xmouse>b.xMax || _ymouse<b.yMin || _ymouse>b.yMax) {
   this.onRollOver = panelOver;
   delete this.onEnterFrame;
} else {
   var xdist = _xmouse - 200;

   panel._x += -xdist / 14;
   //trace(panel._x);
}
if(panel._x >= 123) {
   panel._x = 123;
}

if(panel._x <= panelRightStop) {
   panel._x = panelRightStop;
}

}

//galleryCode

space = 0;
photo_mc._alpha = 0;

MovieClip.prototype.loadPhoto = function(photo){
photo_mc._alpha = 0;
this.loadMovie(photo);
_level0.onEnterFrame = function(){
   // modified the total and loaded so as to round it up
   // to smaller number.
   var total = Math.round(photo_mc.getBytesTotal()/1024);
   var loaded = Math.round(photo_mc.getBytesLoaded()/1024);
   if (total != 0 && loaded>=total){
      var w = photo_mc._width + space;
      var h = photo_mc._height + space;
      border.resize(w, h);
      delete this.onEnterFrame;
   }
}
};
MovieClip.prototype.resize = function(w, h){
//the higher the slower the resize of the border
var speed = 4;
this.onEnterFrame = function(){
   this._width += (w - this._width)/speed;
   this._height += (h - this._height)/speed;
   if( Math.abs(this._width-w)<1 && Math.abs(this._height-h)<1){
      this._width = w;
      this._height = h;
      photo_mc._x = this._x - this._width/2 + space/2;
      photo_mc._y = this._y - this._height/2 + space/2;
      photo_mc._alpha = 100;
      delete this.onEnterFrame;
   }
}
};

var images:Array = new Array();
var thumbPrefix:String;
var fullPrefix:String;
var suffix:String;

var xml:XML = new XML();
xml.ignoreWhite = true;
xml.load("xml/gallery.xml");
xml.onLoad = function(success:Boolean):Void {
if (success) {
   // Set up some references.
   var rootNode = this.firstChild;
   var rootAtts = rootNode.attributes;
   var imageNodes = rootNode.childNodes;
   // Store prefic and suffix data.
   thumbPrefix = rootAtts.thumbpath;
   fullPrefix = rootAtts.fullpath;
   suffix = rootAtts.format;
   // Loop through the image nodes and extract the data to store in images.
   for (var i:Number = 0; i < imageNodes.length; i++) {
      images.push(imageNodes[i].attributes.src);
   }
   buildThumbs();
} else {
   trace("There was an error loading the XML.");
}
}

var panelRightStop:Number;
function buildThumbs():Void {
var len:Number = images.length;
var spacing:Number = 150; // spacing after the previous thumbnail
panelRightStop = -(len*spacing - stroke._width);
trace(panelRightStop);
for (var i:Number = 0; i < len; i++) {
   var button:MovieClip = panel.attachMovie("thumbnail", "btn"+i, i);
   button._x = i * spacing;
   button.img_mc.loadMovie(thumbPrefix + images[i] + suffix);
   button.image = fullPrefix + images[i] + suffix;
   button.onRollOver = function():Void {
      this.gotoAndStop(2);
      this._alpha = 100;
   }
   button.onRollOut = function():Void {
      this.gotoAndStop(1);
      this._alpha = 50;
   }
   button.onRelease = function():Void {
      photo_mc.loadPhoto(this.image);
      trace(this.image);
   }
}
panel._x = -(panel._width - Stage.width)/2;
}

function zeroPad(num:Number, places:Number):String {
var numAsString = String(num);
while (numAsString.length < places) {
   numAsString = "0" + numAsString;
}
return numAsString;
}

This is the original code without my changes (I got this piece of code from some thread in this forum, i can't remember the exact address line).

I'm near to the end. So please let me accomplish this task successfuly. Any help is appreciated.

THANK YOU.

Movie/anim Gallery? (not Image Gallery)
Ive come across this gallery and preloader

http://www.flashkit.com/movies/Scrip...7797/index.php

I love the way I can just dump my images in a folder and with a few tweaks it will put these images in the gallery.

What I am looking at is a way to do this with seperate .swf animations.

What I want to be able to do is dump a number of linear animation swf files into a folder, then when I launch the gallery, the first animation plays, and when it reaches the end it automatically plays the next animation in the folder. Then I want the whole thing to loop.

Any ideas?

XML Gallery - Generate XML Path For Image Gallery
I learned from great tutorial of kirupa .
I tried to create own image gallery, now I stay in front of problem.
How can I generate path for my images and thumbnails for XML file.
E.g. I have 110 images paths and 110 thumbnails path.
Manually takes it lot of time , how can I make this code for XML file?

<pic>
<image>images/img/ref/img/img_001.jpg</image>
<thumbnail>images/img/ref/thm/img_001.jpg</thumbnail>
</pic>

next node, next node,
...
last node:

<pic>
<image>images/img/ref/img/img_110.jpg</image>
<thumbnail>images/img/ref/thm/img_110.jpg</thumbnail>
</pic>

Product Gallery, Image Gallery Or Portfolio..
Hi! This is probably insanely much to ask for but I do it anyway This is for us designers that want to learn some action script to help us show some xml driven data in our flash projects.

I’ve been searching the web for tutorials that can help me with a specific project that I want to develop. I’ve found a bounce of things that is close to what I’m looking for but not right on the spot. And I think that there are many out there that are looking for the same tutorial as I am. For me the best way to learn is to deconstruct example files with code hints. So if any of you flash gurus out there could help us with an example .Fla for this project I think many would be very happy!

The project:
I want to create a gallery of “what ever”. It could be a product gallery, image gallery or a portfolio. This can be used for many things. I’ve attached an image (template.jpg) that pretty much explains what I’m looking for. I also included an example of how the xml file could look like.

I think this could be an excellent example for many designers/developers that are new to dealing with xml, images and flash.

Kirupa Picture Gallery / Keeping The Image On Stage As New Image Loads
Hi, I have the Kirupa Image Gallery implemented and it works great. But I was wondering how I can go about having the image stay on screen as it is loading the next image, so it's not such an abrupt transition. Currently the image container goes blank as it loads the next image. I assume I will need another image movieclip that sits underneath the first one... but then what?

Thanks!

Simple Gallery Example Flash With PHP Serving Image List And Image Sizes
this is simple gallery example for AS2
gallery is nothing special ease to use and implement

interesting thing about this example is that you pass a folder, and PHP side gathers images list from folder and returns it to Flash in XML form together with images widths and height which makes it more easier to implement this sort of galleries like I've made

example : http://www.hagane.us/as/gallery/
ZIP : http://www.hagane.us/as/gallery/gallery.zip

blogpost : http://mrsteel.wordpress.com/2008/01...s-from-folder/

Seeking Flash Image Gallery That Resizes Movie To Fit Image Dimensions
I am looking for a flash gallery that resizes the movie dimensions to fit the width and height of the image in real-time. Alternatively, the movie does not display a background color or border. I've used slideshowpro and it's feasible ...just looking for another suggestion. Prefer xml-based.

Image Streching For Unknown Reason In Dynamic Image Gallery
Hi everyone, this is my first time using flash.

I followed a tutorial at http://www.lukamaras.com/tutorials/a...e-gallery.html and everything is working okay, except when I view the big images they are 4x wider than they should be, stretching to the right. I think its a problem with action script maybe because I'm using cs3, and saving the file as flash 8? I'm not sure. I've included the file and the xml/photos it references in case anyone is nice enough to check out my problem.

http://www.mediafire.com/?euw1wywgnvg

Thanks! -mike

Actionscript Image Gallery > Updating Thumbnail And Main Image
Hi all,

I'm helping a friend produce a small Flash website. For some artwork/photos.

Basically a strip of thumbnail images at the bottom, clicking a thumbnail will load the (fullsize) image above.

Currently ten thumbnails scroll across.

**The problem**

.. is he wants to be able to drop a thumbnail image and the corresponding fullsize image into a folder on the server. The Movie should then display the latest additions. I can produce a simple slideshow where extra images are loaded at run-time (MX introduced this). But am trying to figure out how to update both the thumbnail strip and the main image.

Any help/pointers greatly appreciated.

Robert

XML Gallery: Preload On Current Image/cross-fade Image
Hello,
I am new to action script but I am learning quickly.

I took the following tutorials and made a hybrid:
Photo Gallery Using XML and Flash
Photo Slideshow Using XML and Flash

I redesigned the interface and created this:
http://www.onarresdesign.com/greg/work2.html

Everything works great, but now I want to take it further than the tutorial.
I am trying to make the images cross-fade. I am open to any suggestions and I have tried many techniques with little success.

Here is the closest solution steps I have come up with:

Code:
1) First image preloads (grey background showing)
2) First image loaded into top level MC 1
3) First image fades in
4) First image in top level MC 1 remains visible
5) First image gets loaded into bottom level MC 2 behind current movie clip.
6) Top level MC 1 clears because its preloading next image
Bottom level MC 2 remains visible
7) Preloader shows on top of bottom level MC 2
8) Next image is loaded into top level MC 1
9) Next image fades in (cross-fade effect achieved because previous image is behind it)
10) Next image gets loaded into bottom level MC 2
Repeat process
I can't get the action script to do what I want. I have off set the moveclips to show that the images are loading into both movieclips. I currently have the 'nextImage()' function controlling this so it is understandable the both images are cleared because the function is loading new images into the movie clips at the same time. How do I get one movie clip to remain constant while the other is loading? It seems to be a matter of where the function is placed. Or so I think.

I would appreciate any help I can get on this. If would also appreciate any suggestions for making the code for the control buttons cleaner.

Thank you,
</asla>

Rollover Image Gallery With Swap Image Effect?
I'm trying to do a flash banner like the one from:

http://www.eyeblaster.com/

when you rollover the buttons that say: eyeblaster ACM v2.0, advanced analytics, etc. the nice artistic banner appears. when you are no longer over it, it still stays to that same banner until you rollover the other buttons. so it's like a swap image effect, only in flash.

how would i go about this?

Photo Gallery Rollover Image Image Swap
I am using the XML Photo Gallery with thumbnails, and i have managed to modify it to suit my needs for the most part. However, some of the work i want to use it to display is photo restoration and i would like to be able to rollover the image and have a different image show on rollover. Something like you see here...http://homepage.mac.com/gapodaca/digital/bikini/ only using the XML Photo Gallery.

Any ideas?

How Do I Add A Image Into Specific Frame Using AS3?
How do I add a image into specific frame using AS3?
so that I can dynamically load images into frame, and play a movie ...
thank in advance.

[CS3] PANNING IMAGE, Specific Position
Hello,

I have a movie clip that pans with your mouse movement and it's working now.

I'm using it to display images, so it pans from 1 image to another. The thing is, I want to display information for each image, and I want the information to change as the image changes, BUT how can it detect that the image is different, being that the whole reel is just 1 long image with different images on it, that you pan around in.

here's a link to the file....
http://www.muellerdesign.com/aftp/te...dateBV1.0.html

see white box with text "hello testing box" Thats the box I want the info to change as a different photo moves in.

so...
1. is this even possible to execute?
2. is there a way to assign different points in the panning movie clip that when it passes a specific point on the stage it will trigger the "white info box" to change information in it?

PLS HELP!

Cut The Image Inside A Specific Area
Hi,

I am trying to create a project similar to facethemonkey.com. People can upload their image and copy their head and paste into somewhere else. I know how to copy the area in square shape but unlike the facethemonkey, you can cut only the head out. Is there anyone know how to do that or can point me to the right direction?

Thank you.

FMX - PLEASE HELP ME - Loading An Image To Fit A Specific Size Using XML
Ive been searching high and low to find out how i can dynamically load an image into a container [i.e. im using the xml_photogallery tut. template] and setting it so that it scales to fit specific dimensions.

At the moment Im having to resize images in photoshop so that it fits with in the container/webcontents dimensions. Otherwise different images with different sizes will bleed on main body of the site.

Any help would be much appreciated and im sure the answer is out there somewhere...

Load Image Into Specific Dimensions?
How do I enable an image to be loaded from a server into specific dimensions at runtime?

This is what I've got, but it's just loading it in the top right corner.

ActionScript Code:
uploadDisplay.load(new URLRequest(newURLString)); uploadDisplay.contentLoaderInfo.addEventListener(Event.COMPLETE, contentComplete);}function contentComplete(event:Event):void{ trace (uploadDisplay.content); test_txt.appendText(" in contentComplete: " + uploadDisplay.width); var w:Number = uploadDisplay.width; var h:Number = uploadDisplay.height; var bitmapDataA:BitmapData = new BitmapData(w/1, w/1); bitmapDataA.draw(uploadDisplay, new Matrix(), null, null, new Rectangle(0,0,w/1,w/1)); var bitmapA:Bitmap = new Bitmap(bitmapDataA); addChild(bitmapA);}

Loading Image From A Specific Folder
Hi everybody,

Is it possible to load an image dynamically from a specific folder? I would like flash to read which image is uploaded in that folder (there is always one, but name can be different) and display it in my movie. Is this possible?
Can somebody get me on the right track with this one?

Tnx,

d2c

Image Gallery... Save Image To Computer?
Hey all,
I just wondered if there was a way to save image files in a dynamic gallery? For example... when an image is displayed, a little save icon appears that allows the user to save the jpeg file to their computer. Thanks!

XML Image Gallery: Replacing Xml To Load New Image Set?
Hi Kirupa crew!

First, big thanks for this great site!

Second, I'm struggling a bit on xml and hoping for a hand. Your xml image gallery is a sweet piece of work, and I would like to be able to add the functionality of being able to load different galleries from a menu without loading a new mc with gallery inside it. I managed to botch the file up pretty good on my own, and was wondering if there is a ready answer nearby.

So I'm thinking have but1, but2 and but3, with a seperate xml file for each. What would you recommend for a smooth way to swap the the xml files to the gallery, and load the first image of the new xml file? Also, can it be done with one big ol' xml file while keeping the galleries seperate? It's not necessary, but could be handy, and save some loading.

It would also be interesting to apply the same principle to the resizing script that Scotty has in that big Resizing thread, just a thought.

Many many thanks!
John

Gallery Image Loading - Getting Image Width..help
Ladies and gents:

having a problem with my code somewhere; I'm stumped. Here's what i'm trying to do:

-When you click on a thumbnail in my gallery a load bar appears that is the width of the loading image
-While the image loads the load bar scales from full width to zero
-Once it finishes loading the image fades in
-Click on a new thumbnail, and the old image fades out, then the scrollbar is supposed to take the width of the NEW image and do the same thing

What is happening is that the scrollbar width does not set itself to the new image size until i click the thumbnail a second time...try this link to see what i mean. it's on the "portfolio" page.

http://www.lewisweb.ws/staging

here's the code:

Code:
//CONSTANTS
frame_x = 387; //the exact x coordinate where the box originates
frame_y = 184; //the exact y coordinate where the box originates
alphaSpeed = 5; //spped at which the pics fade in

//INITIAL SETTINGS
containerMC._alpha = 0;
containerMC._x = frame_x;
containerMC._y = frame_y;

//Fades in a picture loaded externally
MovieClip.prototype.loadPic = function(pic){
containerMC.fadeOldPic(); //fade out old picture
containerMC._alpha = 0;
this.loadMovie(pic); //load new pic
var loadIsComplete = false; //reset load checker
var w = containerMC._width;
loadBar._width = w; //set loadbar to new movieclip width
loadBar._alpha = 100; //make loadbar opaque
_root.onEnterFrame = function(){
var t = containerMC.getBytesTotal(), l = containerMC.getBytesLoaded();
loadIsComplete = (Math.round(l/t) == 1); //check to see if load completed
loadBar._width = w - ((l/t) * w); //sets width of loadbar dynamically
if (loadIsComplete){
containerMC._alpha += alphaSpeed; //if load is complete, fade pic in
}
//if the load is complete and the picture is fully faded in...
if (t != 0 && loadIsComplete && _root.containerMC._alpha == 100){
loadBar._alpha = 0; //make the load bar disappear
delete _root.onEnterFrame;
}
}
};

//Fades out an old picture...pretty self explanatory
MovieClip.prototype.fadeOldPic = function(){
_root.onEnterFrame = function(){
_root.containerMC._alpha -= alphaSpeed;
if (_root.containerMC._alpha == 0){
delete _root.onEnterFrame;
}
}
};

containerMC.loadPic("portfolio/westin.jpg");
stop();
ANY help will be appreciated!

Kirupa XML Image Gallery - Skip To Image
So I'm having some trouble modifying this script. I have a text box so a user can go to a certain image (In my case page). So if the user type 5 it should go to image 5.

I've tried numerous methods, none of which are working (they work but then my next and previous buttons aren't working properly). I know I need to just get go to the number image in the array but the way the script is set up it seems I would have to change the current position value but that doesn't seem to be the case.

Am I over complicating this?

ActionScript Code:
function loadXML(loaded) {
if (loaded) {
xmlNode = this.firstChild;
image = [];
total = xmlNode.childNodes.length;
for (i=0; i<total; i++) {
image[i] = xmlNode.childNodes[i].childNodes[0].firstChild.nodeValue;
}
firstImage();
} else {
content = "file not loaded!";
}
}
xmlData = new XML();
xmlData.ignoreWhite = true;
xmlData.onLoad = loadXML;
xmlData.load("xml/config.xml");
listen = new Object();
listen.onKeyDown = function() {
if (Key.getCode() == Key.LEFT) {
prevImage();
} else if (Key.getCode() == Key.RIGHT) {
nextImage();
}
};

Key.addListener(listen);

previous_btn.onRelease = function() {
prevImage();
};

next_btn.onRelease = function() {
nextImage();
};

p = 0;

this.onEnterFrame = function() {
filesize = picture.getBytesTotal();
loaded = picture.getBytesLoaded();
preloader._visible = true;
if (loaded != filesize) {
preloader.preload_bar._xscale = 100*loaded/filesize;
} else {
preloader._visible = false;
if (picture._alpha<100) {
picture._alpha += 10;
}
}
};

function nextImage() {
if (p<(total-1)) {
p++;
picture._alpha = 0;
picture.loadMovie("images/"+image[current_pos]+".jpg", 1);
picture_num();
}
}

function prevImage() {
if (p>0) {
p--;
picture._alpha = 0;
picture.loadMovie("images/"+image[p]+".jpg", 1);
picture_num();
}
}

function firstImage() {
if (loaded == filesize) {
picture._alpha = 0;
picture.loadMovie("images/"+image[0]+".jpg", 1);
picture_num();
}
}

function picture_num() {
current_pos = p+1;
_root.currPageNum.text = "Page " + current_pos;
}

_root.goButton.onPress = function(){
// load the image typed into the text area.
}

Flash 8 - Help W Xml Image Gallery, Thumbnails For Each Image
Hey.

New here and have found some really good tutorials! Thanks.
I desperately need a bit of help with some Actionscripting if anyone has any ideas how to do this?
I have created a photo gallery using the kirupa tutorial. That works fine. Now for each main image that the code cycles through my client wants 1-3 thumbnails to display on the side of the image and they should all be clickable and display full size in place of the main image when clicked. The previous and next buttons should still only go through the main images. Here is the xml code (as I imagine it should look like):

[code]

Code:
<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<images>
<pic>
<image>images/bowandkey_main.jpg</image>
<caption>Bow and Key Necklace: £225.00</caption>
<description>Mother of pearl (or onyx) necklace with silver-plated bow and key, cast from vintage originals </description>
<thumbnail>
<thumb1>thumbnails/bowandkey_main.jpg</thumb1>
<thumb2>thumbnails/bowandkey_portrait.jpg</thumb2>
<thumb3>thumbnails/bowandkey_closeup.jpg</thumb2>
</thumbnail>
</pic>
<pic>
<image>images/bowandkey2_main.jpg</image>
<caption>Bow and Key Necklace: £230.00</caption>
<description>Onyx necklace with silver-plated bow and key, cast from vintage originals </description>
<thumbnail>
<thumb1>thumbnails/bowandkey2_main.jpg</thumb1>
<thumb2>thumbnails/bowandkey2_portrait.jpg</thumb2>
</thumbnail>
</pic>
<pic>
<image>images/crossedfingers.jpg</image>
<caption>Crossed Fingers Necklace: £150.00</caption>
<description>Solid silver crossed fingers good luck charm, cast from 1940s celluloid gumball toy, strung on mother of pearl or onyx beads.</description>
<thumbnail>
<thumb1>thumbnails/crossedfingers_main.jpg</thumb1>
<thumb2>thumbnails/crossedfingers_closeup.jpg</thumb1>
</thumbnail>
</pic>
</images>
The thumb 1,2 and 3 are childNodes of thumbnail.

I have created a MovieClip holder to hold the thumbnails. Could someone please show me how to add to the Actionscript so that it loops through (displays) the thumb1 - thumb 3 for each main image? I suppose I would have to store the thumbnails for each image in separate folders so the flash can determine the length of the array of thumbnails for each image? And then make them clickable.

I am pulling my hair out here not getting this working... Any hinters on what to do would be greatly appreciated!

Here is the actionscript code for the image gallery:

Code:

function loadXML(loaded) {
if (loaded) {
xmlNode = this.firstChild;
image = [];
caption = [];
description = [];
total = xmlNode.childNodes.length;
for (i=0; i<total; i++) {
image[i] = xmlNode.childNodes[i].childNodes[0].firstChild.nodeValue;
caption[i] = xmlNode.childNodes[i].childNodes[1].firstChild.nodeValue;
description[i] = xmlNode.childNodes[i].childNodes[2].firstChild.nodeValue;
}
firstImage();
} else {
content = "file not loaded!";
}
}
xmlData = new XML();
xmlData.ignoreWhite = true;
xmlData.onLoad = loadXML;
xmlData.load("images.xml");
/////////////////////////////////////
listen = new Object();
listen.onKeyDown = function() {
if (Key.getCode() == Key.LEFT) {
prevImage();
} else if (Key.getCode() == Key.RIGHT) {
nextImage();
}
};
Key.addListener(listen);
previous_btn.onRelease = function() {
prevImage();
};
next_btn.onRelease = function() {
nextImage();
};
/////////////////////////////////////
p = 0;
this.onEnterFrame = function() {
filesize = picture.getBytesTotal();
loaded = picture.getBytesLoaded();
preloader._visible = true;
if (loaded != filesize) {
preloader.preload_bar._xscale = 100*loaded/filesize;
} else {
preloader._visible = false;
if (picture._alpha<100) {
picture._alpha += 10;
}
}
};
function nextImage() {
if (p<(total-1)) {
p++;
if (loaded == filesize) {
picture._alpha = 0;
picture.loadMovie(image[p], 1);
cap_txt.text = caption[p];
desc_txt.text = description[p];
picture_num();
}
}
}
function prevImage() {
if (p>0) {
p--;
picture._alpha = 0;
picture.loadMovie(image[p], 1);
cap_txt.text = caption[p];
desc_txt.text = description[p];
picture_num();
}
}
function firstImage() {
if (loaded == filesize) {
picture._alpha = 0;
picture.loadMovie(image[0], 1);
cap_txt.text = caption[0];
desc_txt.text = description[0];
picture_num();
}
}
function picture_num() {
current_pos = p+1;
pos_txt.text = current_pos+" / "+total;
}
Thanks!!

How Can I Load An Image To This Specific Place In My Movie.
How can I load an image to this specific place in my movie.

Code:
_root.navigation.main.map.mapPicture
Here is some extra information about the image:

Code:
name = mahio005.jpg
path = /content/images/maps/mahio/mahio005.jpg

Width = 1674.0
Height = 450.0

X = -480.4
Y = -224.9

AttachMovie On Specific Image Load From Array?
I am loading a series of images using a sequential image loading, MovieClipObject and Listeners etc. I am loading the images from an array,
ie Var SwfArray = new Array ("image.jpeg",etc, etc)

I currently have all my buttons on the main timeline. The buttons are 1,2,3,4,5,etc

Would I would ideally like is to attach movieClip button 1 from the library when image 1 has been loaded, attachMovieClip 2 when image 2 has been loaded etc. So that it would work as a form of progress bar.

Secondly, if that is too tricky is there a way I could have all buttons on timeline but set visibility to false and on each image load set that corresponding button number to true. Again, although I thought of this I not know how to apply it.

Currently I have faked this effect by having the buttons appear sequentially on the timeline but I think this will look bad on slower connections. I know to assign the linkage properties etc but have not been able to figure out how to wite this code.

Thanks in advance

L