Flash :: Thumbnail + Larger Image Gallery

[F8] [FCS3] Photo Album-ish Thumbnail Popping Up Larger Image Problem.
I'm using Flash CS3, but this project began in 8 and uses AS 1 and 2, so I figured this was the more appropriate section.

So I have a basic photo album for prototyping that is populated by values from an XML file. There are 9 maximum thumbnails (3 x 3) in each album. This all works.

Upon onRelease of each thumbnail a pop up larger-view movie clip appears to display the respective larger image. The viewer movie clip appears fine and in the correct position. The problem is the larger image does not get loaded into the holder clip within the viewer. Output is telling me that the value that I'm pulling from the XML file is undefined.

Both the thumbs and the larger images are using the same XML file and the same array. All of the pertinent code is within a class. All the correct files are in the folder they should be in. It is not a file not found error. Typos have been accounted for. The code for populating the thumbs is almost identical to the code for the larger image. It's just that one works, and the other doesn't.

Code:
class Photos extends MovieClip {
//
public var a:Number;
public var i:Number;
//
public function Photos() {
//load in XML
_root.photoXML = new XML();
_root.photoXML.ignoreWhite = true;
_root.photoXML.load("xmlData/photos.xml");
_root.photoXML.onLoad = function(success){
if(success) {
this.XmlConnect();
}
}
}
public function goPhotos() {
//
//First build arrays:
_root.photosArray = new Array();
_root.totalPhotos = _root.photoXML.childNodes[0].childNodes.length;
// fill arrays ::
for (a=0; a<_root.totalPhotos; a++) {
if(_root.photoXML.childNodes[0].childNodes[a].attributes.blockNum == _root.blockNum and _root.photoXML.childNodes[0].childNodes[a].attributes.locNum == _root.locNum+1) {
_root.photosArray.push({photoName:_root.photoXML.childNodes[0].childNodes[a].attributes.title, photoFile:_root.photoXML.childNodes[0].childNodes[a].attributes.filename});
}
}
trace("photosArray length = "+_root.photosArray.length);
//
for(a=0;a<10;a++) {
_root.detail.photoSec.photosHolder["img"+a].img._alpha = 0;
_root.detail.photoSec.photosHolder["img"+a].img._visible = false;
}
//
for(a=0;a<_root.photosArray.length;a++) {
_root.detail.photoSec.photosHolder["img"+a].img.loadMovie("images/sm_"+_root.photosArray[a].photoFile+".jpg",a);
_root.detail.photoSec.photosHolder["img"+a].img._visible = true;
_root.detail.photoSec.photosHolder["img"+a].img._alpha = 100;
}
//
//
//
_root.detail.audioSec.vLoader.vHolder.unloadMovie();
_root.detail.audioSec.audioControlsHolder.vStat.grabBar._x = 0;
_root.detail.audioSec.vLoader.gotoAndStop(1);
//
//
//
}
public function hidePhotos() {
for(i=0;i<_root.photosArray.length;i++) {
_root.detail.photoSec.photosHolder["img"+i].enabled = false;
}
}
public function showPhotos() {
for(i=0;i<_root.photosArray.length;i++) {
_root.detail.photoSec.photosHolder["img"+i].enabled = true;
}
}
public function launchLargePhotoViewer(photoNum) {
/*_root.detail.photoSec.photosHolder["img"+_root.locNum].onRelease=function():Void {
_root.detail.largeViewerHolder.removeMovieClip();
_root.detail.createEmptyMovieClip("largeViewerHolder", _root.detail.getNextHighestDepth());
_root.detail.largeViewerHolder.attachMovie("largeViewer", "largeViewer"+i, _root.detail.largeViewerHolder.getNextHighestDepth(), {_x: 251.1, _y:-27.9});
_root.detail.largeViewerHolder["largeViewer"+i].createEmptyMovieClip("img", _root.detail.largeViewerHolder["largeViewer"+i].getNextHighestDepth());
_root.detail.largeViewerHolder["largeViewer"+i].img.loadMovie("images/md_"+_root.photosArray[i].photoFile+".jpg", i);
_root.detail.largeViewerHolder["largeViewer"+i].img._x = _root.detail.largeViewerHolder["largeViewer"+i]._x + (_root.detail.largeViewerHolder._width - _root.detail.largeViewerHolder["largeViewer"+i].pic._width)*.5;
_root.detail.largeViewerHolder["largeViewer"+i].img._y = _root.detail.largeViewerHolder["largeViewer"+i]._y + (_root.detail.largeViewerHolder._height - _root.detail.largeViewerHolder["largeViewer"+i].pic._height)*.5;
}*/
for (i=0;i<_root.photosArray.length;i++) {
_root.detail.photoSec.photosHolder["img"+i].onRelease=function():Void {
_root.detail.largeViewerHolder.removeMovieClip();
_root.detail.createEmptyMovieClip("largeViewerHolder", _root.detail.getNextHighestDepth());
_root.detail.largeViewerHolder.attachMovie("largeViewer", "largeViewer"+i, _root.detail.largeViewerHolder.getNextHighestDepth(), {_x: 251.1, _y:-27.9});
_root.detail.largeViewerHolder["largeViewer"+i].createEmptyMovieClip("img", _root.detail.largeViewerHolder["largeViewer"+i].getNextHighestDepth());
_root.detail.largeViewerHolder["largeViewer"+i].img.loadMovie("images/md_"+_root.photoXML.childNodes[0].childNodes[i].attributes.filename+".jpg", i);
_root.detail.largeViewerHolder["largeViewer"+i].img._x = _root.detail.largeViewerHolder["largeViewer"+i]._x + (_root.detail.largeViewerHolder._width - _root.detail.largeViewerHolder["largeViewer"+i].pic._width)*.5;
_root.detail.largeViewerHolder["largeViewer"+i].img._y = _root.detail.largeViewerHolder["largeViewer"+i]._y + (_root.detail.largeViewerHolder._height - _root.detail.largeViewerHolder["largeViewer"+i].pic._height)*.5;
}
}
}
}

I appreciate any insight into this conundrum.

ETA: photoFile is the culprit of 'undefined'

View Replies ! View Related

Linking To Larger Image In The Photo Gallery Using XML And Flash
I've been tooling around with the photo gallery, trying to get it so the larger image, when clicked, loads an even larger version of the selected thumbnail. I have the XML that looks like this:

Quote:

<pic>
<image>http://heisei.he.funpic.org/html2/la...s/psorange.jpg
<caption>PS Orange
<thumbnail>http://heisei.he.funpic.org/html2/la...mbpsorange.jpg
<link>http://heisei.he.funpic.org/html/lay...s/psorange.gif
</pic>

and I've noticed that the actionscript in the .fla doesn't mention the link variable at all... If someone could give me a hand getting this to do what I want, I'd really appreciate it... I'm not all that adept at using flash/xml, so I've really just been frankenstein-ing mine together from cool bits I've found here and there.

View Replies ! View Related

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

View Replies ! View Related

Thumbnail Image Gallery MX
Hey guys, can anyone point me in the direction of a nice, simple tutorial for an image gallery? My needs are simple...

I need:
- Thumbnails at the bottom
- images to fade in/out
- load external images

There is a sample in the MX folder (comes with MX) which would have been ace, but only uses two buttons (a back and a forward) I'm not too clued up on how to change the code to make more buttons etc.

Any help appreciated.

Cheers, Ron

View Replies ! View Related

Thumbnail Image Gallery Swapimage Help.
I'm trying to make a thumbnail image gallery where a mouseover will display a large image of the mouseover in a separate area... also I want that image to remain 'sticky' on a mouseout of the thumbnail, so it can be clicked on to get a url...

I put some code in the third image from the left that I thought would work, ... got the cool horizontal scroller from gotoandlearn.com

Calvin.

(.fla attatched)

View Replies ! View Related

[F8] Image Gallery Thumbnail Conumdrum
Hi,

I am creating a photo-gallery that is XML driven. I have it almost entirely working but have a few snags that I am not sure how to fix.

In my gallery, I have a previous and next button and also thumbnail blocks that the user can click on to take them to any picture in the gallery.

My problem is that I don't know how to keep track of where in the array the user is when they click on the thumbnail and then either the next or the previous button. Now, I can click on the thumbnail of the 4th image and when I hit the next button, it should take me to the 5th but it doesn't, it takes me to the 2nd etc.

I know that I can manually add the information into the XML file as a hard-coded index and every line in the XML file will have a number that increments by one but I am sure that there's a way to do it using actionScript.

Here's the code:

Code:
var galleryXML = new XML();
galleryXML.ignoreWhite = true;
galleryXML.load("gallery.xml");
var currentIndex:Number = 0;
var data:XML;
galleryXML.onLoad = function(success) {
if (success) {
total = galleryXML.firstChild.firstChild.childNodes.length;
var galleryXML:Array = galleryXML.firstChild.firstChild.childNodes;
trace("xmlLoaded");
data = this.firstChild;
total_txt.text = total;
image_holder1_mc.loadMovie("images/"+galleryXML[currentIndex].attributes.filename1);
image_holder2_mc.loadMovie("images/"+galleryXML[currentIndex].attributes.filename2);
caption1 = galleryXML[currentIndex].attributes.caption1;
caption2 = galleryXML[currentIndex].attributes.caption2;
template = galleryXML[currentIndex].attributes.template;
caption1_txt.text = galleryXML[currentIndex].attributes.caption1;
caption2_txt.text = galleryXML[currentIndex].attributes.caption2;
template_txt.text = galleryXML[currentIndex].attributes.template;
_root.caption1_txt._visible = false;
_root.MouseOverFade_mc._visible = false;
template2();
setUpViews();
}
};
listen = new Object();
listen.onKeyDown = function() {
if (Key.getCode() == Key.LEFT) {
prevImage();
} else if (Key.getCode() == Key.RIGHT) {
nextImage();
}
};
function template2() {
if (template_txt.text == 2) {
_root.Template2._visible = false;
} else {
_root.Template2._visible = true;
}
}
Key.addListener(listen);
previous_btn.onRelease = function() {
prevImage();
};
next_btn.onRelease = function() {
nextImage();
};
function nextImage() {
if (currentIndex<(total-1)) {
currentIndex++;
var currentNode = galleryXML.firstChild.firstChild.childNodes[currentIndex];
trace(currentNode);
current_pos = currentIndex+1;
image_holder1_mc.loadMovie("images/"+currentNode.attributes.filename1);
image_holder2_mc.loadMovie("images/"+currentNode.attributes.filename2);
caption1_txt.text = currentNode.attributes.caption1;
caption2_txt.text = currentNode.attributes.caption2;
template_txt.text = currentNode.attributes.template;
next_imageNumber();
template2();
currentIndex_txt.text = current_pos;
}
}
function prevImage() {
if (currentIndex>0) {
currentIndex--;
var currentNode = galleryXML.firstChild.firstChild.childNodes[currentIndex];
trace(currentNode);
image_holder1_mc.loadMovie("images/"+currentNode.attributes.filename1);
image_holder2_mc.loadMovie("images/"+currentNode.attributes.filename2);
caption1_txt.text = currentNode.attributes.caption1;
caption2_txt.text = currentNode.attributes.caption2;
template_txt.text = currentNode.attributes.template;
currentIndex_txt.text = currentIndex+1;
//current_pos = currentIndex+1;
previous_imageNumber();
template2();
}
}
function next_imageNumber() {
current_pos = currentIndex+1;
nextImageOfX.text = current_pos+" / "+total;

}
function previous_imageNumber() {
current_pos = currentIndex+1;
nextImageOfX.text = current_pos+" / "+total;

}

//here's where I create the thumbnail blocks and the links to the images and captions
function setUpViews():Void {
for (var i:Number = 0; i<total; ++i) {
var item = thumbnailHolder.attachMovie("genericThumb", "genericThumb"+total, thumbnailHolder.getNextHighestDepth());
var ref = this;
var currentNode = galleryXML.firstChild.firstChild.childNodes[i];
trace(currentNode);
item.image1 = "images/"+currentNode.attributes.filename1;
item.image2 = "images/"+currentNode.attributes.filename2;
item.template = currentNode.attributes.template;
item.caption1 = currentNode.attributes.caption1;
item.caption2 = currentNode.attributes.caption2;
item.currentThumb = "currentThumb";
item.onRelease = function() {
ref.image_holder1_mc.loadMovie(this.image1);
ref.image_holder2_mc.loadMovie(this.image2);
ref.genericThumb.loadMovie(this.currentThumb);
caption1_txt.text = (this.caption1);
caption2_txt.text = (this.caption2);
template_txt.text = (this.template);
currentIndex_txt.text = currentIndex;
template2();
};
item._x = (item._width+5)*currentIndex;
currentIndex++;
trace("hi im "+item);
}
}
stop();

Also, how do I make the generic grey thumbnail that the user is currently viewing have another appearance so it indicates which one they are viewing? Right now, all the thumbnails are grey and you can't tell which one you are on. I know that it should be located in the following block of code (I have tried ref.genericThumb.loadMovie(this.currentThumb); and it didn't work):

Code:
item.onRelease = function() {
ref.image_holder1_mc.loadMovie(this.image1);
ref.image_holder2_mc.loadMovie(this.image2);
ref.genericThumb.loadMovie(this.currentThumb);
caption1_txt.text = (this.caption1);
caption2_txt.text = (this.caption2);
template_txt.text = (this.template);
currentIndex_txt.text = currentIndex;
template2();
};

Thank you anyone and everyone that can help.....
Brent

View Replies ! View Related

Thumbnail Trouble, Image Gallery, Xml.
Hi, I'm making an image gallery and are having some issues with the thumbnails.

What I want is to be able to have thumbnails with the same height but different width.

Attached the fla.

View Replies ! View Related

Image Gallery Thumbnail Actionscript Help
Hi,

Iâ€™m building an image gallery using thumbnails, which each have an up and over state movieclip, to trigger loading the main image. I want the relevant thumbnail to remain highlighted or in the over state whilst the image is viewed and until the next image loads. As this is quite a common technique is there an actionscript available?

This is my first project of this type so please keep in mind.

Thanks

View Replies ! View Related

Xml/thumbnail Image Gallery Problem
i'm using a modified version of the xml thumbnail tutorial on this site and am having a weird problem. sometime on some machines the thumbnails are desplayed in reverse order but when the page is refreshed they're dispalyed in the correct order. on other machines they load in in the correct order fine. anyone have any ideas why this would happen? the image names are loaded into an array

in the onload of the xml the thumb images are put into an array:

for (z=0; z<videototal; z++) {
thumbnails[z] = xmlNode.childNodes[z].childNodes[0].firstChild.nodeValue;

moviefile[z] = xmlNode.childNodes[z].childNodes[1].firstChild.nodeValue;
}

then later they are are looped through:

for (e=0; e<videototal; e++) {
//variables for grid spacing
thumbnails_fn(e);
}

and this is the function that loads in the images from the array. here is where i think the problem is. i'm not so clear on the MovieClipLoader class but is it possibel the tlistener.onLoadInit is getting called out of order for some reason?:

function thumbnails_fn(k) {
//thumbnail_mc._alpha = 0;
thumbnail_mc.createEmptyMovieClip("t"+k, thumbnail_mc.getNextHighestDepth());
tlistener = new Object();
tlistener.onLoadInit = function(target_mc) {
_root.clipcount = (_root.clipcount)+1;
trace(_root.clipcount);
if ((_root.clipcount>0) && (_root.clipcount<4)) {
target_mc._x = ((_root.slot)*77)+(_root.xstart);
_root.slot = (_root.slot)+1;
target_mc._y = 0;
if (_root.okfornewpage == 1) {
_root.pagecount = _root.pagecount+1;
_root.okfornewpage = 0;
nextvideo_btn._visible = true;
}
}
if ((_root.clipcount>3) && (_root.clipcount<7)) {
target_mc._x = ((_root.slot)*77)+(_root.xstart);
_root.slot = (_root.slot)+1;
target_mc._y = 92;
}
if ((_root.clipcount>6) && (_root.clipcount<10)) {
target_mc._x = ((_root.slot)*77)+(_root.xstart);
_root.slot = (_root.slot)+1;
target_mc._y = 184;
}
if (_root.slot == 3) {
_root.slot = 0;
}
if (_root.clipcount == 9) {
_root.xstart = _root.xstart+240;
_root.clipcount = 0;
_root.okfornewpage = 1;
//make it so page count goes up in other section
}
target_mc.linkValue = k;
target_mc.onRelease = function() {
p_link = this.linkValue;
tweenThumbAlpha();
//setLinks();
nextvideo_btn._visible = false;
backvideo_btn._visible = false;
};
target_mc.onRollOver = function() {
this._alpha = 50;
};
target_mc.onRollOut = function() {
this._alpha = 100;
};
};
image_mcl = new MovieClipLoader();
image_mcl.addListener(tlistener);
image_mcl.loadClip(thumbnails[k], "thumbnail_mc.t"+k);
}

View Replies ! View Related

Thumbnail Gallery Image Select
I have a thumbnail gallery which only loads pictures from folder "pics" an they have to be example : pic1.jpg, thumbnails have to be th1.jpg. Where do I change the name of "loading folder" and possibility to change names of pictures and thumbnails ?

Code:

var tnNr;
spacing = 10;
container._alpha = 0;
var curLength;
MovieClip.prototype.loadPic = function(pic, id) {
info.text = "";
this._alpha = 0;
this.loadMovie(pic);
temp = this._parent.createEmptyMovieClip("temp2", 998);
temp.onEnterFrame = function() {
var t = container.getBytesTotal(), l = container.getBytesLoaded();
if (Math.round(l/t) == 1 && container._width != 0 && container._height != 0) {
var w = container._width+spacing, h = container._height+spacing;
border.resizeMe(w, h, id);
delete this.onEnterFrame;
}
};
};
MovieClip.prototype.resizeMe = function(w, h, id) {
var speed = 3;
container._alpha = 0;
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;
container._x = this._x-this._width/2+spacing/2;
container._y = this._y-this._height/2+spacing/2;
info._y = Math.round(this._y+this._height/2+spacing/2);
container._alpha += 5;
if (container._alpha>90) {
info.text = id;
container._alpha = 100;
delete this.onEnterFrame;
}
}
};
};
function galleryChoice(q) {
pArray = new Array();
tArray = new Array();
iArray = new Array();
my_xml = new XML();
for (var j = 0; j<curLength; j++) {
this.th_nav["thmb"+j].removeMovieClip();
}
my_xml.ignoreWhite = true;
my_xml.onLoad = function(loaded) {
if (loaded) {
gallery = this.firstChild.childNodes[q];
curLength = gallery.childNodes.length;
for (var i = 0; i<gallery.childNodes.length; i++) {
pArray.push(gallery.childNodes[i].attributes.source);
tArray.push(gallery.childNodes[i].attributes.thumb);
iArray.push(gallery.childNodes[i].attributes.title);
}
}
delay = setInterval(makeButtons, 50);
};
my_xml.load("gallery.xml");
}
function makeButtons() {
tnNr = 0;
clearInterval(delay);
for (var i = 0; i<tArray.length; i++) {
var thb = th_nav.thmb.duplicateMovieClip("thmb"+i, 1000+i);
thb.id = i;
thb._x = i%3*50;
thb._y = Math.floor(i/3)*50;
}
loadButtons();
}
function loadButtons() {
var tbox = th_nav["thmb"+tnNr].box;
tbox.loadMovie(tArray[tnNr]);
temp = this.createEmptyMovieClip("tmp"+tnNr, 999);
temp.onEnterFrame = function() {
bt = tbox.getBytesTotal();
bl = tbox.getBytesLoaded();
if (bt == bl && bt>4) {
nextButton();
delete this.onEnterFrame;
}
};
}
function nextButton() {
if (tnNr<tArray.length-1) {
tnNr++;
loadButtons();
} else {
activateButtons();
}
}
function activateButtons() {
mainButtons();
for (var i = 0; i<pArray.length; i++) {
var but = th_nav["thmb"+i];
but.id = i;
but.onRelease = function() {
container.loadPic(pArray[this.id], iArray[this.id]);
disButtons2(this.id);
};
}
container.loadPic(pArray[0], iArray[0]);
disButtons2(0);
}
butArray = new Array();
butArray = ["gal1_btn", "gal2_btn", "gal3_btn", "gal4_btn"];
function mainButtons() {
for (var i = 0; i<butArray.length; i++) {
this[butArray[i]].id = i;
this[butArray[i]].onRelease = function() {
galleryChoice(this.id);
disButtons(this.id);
};
}
}
function disButtons2(d) {
for (var i = 0; i<tArray.length; i++) {
if (i != d) {
this.th_nav["thmb"+i].enabled = 1;
this.th_nav["thmb"+i].box._alpha = 100;
} else {
this.th_nav["thmb"+i].enabled = 0;
this.th_nav["thmb"+i].box._alpha = 50;
}
}
}
function disButtons(d) {
for (var i = 0; i<butArray.length; i++) {
if (i != d) {
this[butArray[i]].enabled = 1;
this[butArray[i]].gotoAndStop(1);
} else {
this[butArray[i]].enabled = 0;
this[butArray[i]].gotoAndStop(2);
}
}
}
disButtons(0);
galleryChoice(0);

View Replies ! View Related

Thumbnail Image Gallery Driving Me Mad, PLEASE HELP
Hi there, I really need some help here, I have'nt used flash for a while and I'm trying to make a photo portfolio site, clicking on the thumbnails to open larger images above, the images are contained within the same movie so they can all be loaded together at the start of the movie, I am trying to get the thumbnails to open each image along the timeline using on release goto and play frame XXXX. this worked to start with until i clicked on the same thumbnail twice and it jumped to the next image??? and every time I added another thumbnail and image the image opened but on a second click it opened the next image again. I deleted a coupl of thumbnails to start again but now every time I click on a thumbnail the movie skips straight past the first image and loops back to the start of the movie, even though there is a stop action on each image.
I have been working on this now for 6 hours straight and I am close to sending the computer out the window, I know the answer i probably obvious but I can't see it. BTW I don't want to load images from externanal folders as I don't want them to load individually.

View Replies ! View Related

Photo Gallery With Thumbnail Image Buttons
Hey there. I'm using Flash MX, and I want to make a photo gallery so that when you click on the thumbnail image, the same image appears enlarged in a frame (a GIF picture frame). Right now, there are 11 images, but I want them each to appear in the same frame, and obviously, the previous one should go away when a new one is clicked. Can anyone tell me how to do this? (I've been trying to search the boards, but I keep getting a "page cannot be displayed" error.)

Thanks in advance,
Summarah

View Replies ! View Related

Image Gallery Thumbnail Grid Tutorial
Hi All,

I apologize in advance for not posting an ActionScript 2.0 specific question; however, does anyone know of a good tutorial (or AS code) that shows how to create an XML-driven image gallery thumbnail grid without using any components?

I have a very tight deadline so any help would be greatly appreciated!

Thanks.

View Replies ! View Related

Simple Xml Image Gallery - Thumbnail Rollovers
Here's my code: http://flash.pastebin.com/d21602c21

I've been relentlessly trying to get this to work and am happy with it so far.

Right now it works. It loads the thumbnails along with a full size image and then lets you click on the various thumbnails to display the full size image that goes with it.

I'd like to add rollover and active states to the thumbnails. I think I need to isolate the thumbnails from the full size images because I'd like to add ROLL_OVER and ROLL_OUT states to them without effecting the full size images..

I'm thinking I may need to rework a bit of the code. Anyways, it would really help me out to receive some direction.

View Replies ! View Related

Flash 8 Image/Thumbnail Gallery Problem
Howdy,

I'm currently constructing an image gallery interface that incorporates a maximum of 20 thumbnails for each menu category. All images are extracted from an XML file.

Basically all is working the way intended, however, there's a problem with the thumbnail section.

When the user clicks on the category in the menu, clickable thumbnails (movie clips) load in a 4x5 grid formation, together with the first large image. When you rollover the thumbnails, the alpha changes, and upon rollout they return to the up state. Also, when a thumbnail is clicked, it too changes shade until another thumbnail is clicked. THIS is all working fine!

It's when I decide that I ALSO want the first thumbnail to be shaded upon loading (to correspond with the large image), that things go wrong. With my current code, everything works as before, except that the first thumbnail keeps this shade throughout - so its rollover become twice as dark, and it's initial shading isn't removed by clicking other thumbnail buttons.

If anyone has any suggestions, I'd appreciate them. Here's the relevant sections of code...

function loadThumbnail() {
currentThumbnail = thumbsDisplayer.attachMovie("thumbnail holder", "thumbnail"+(tracker+1), thumbsDisplayer.getNextHighestDepth());
target = currentThumbnail.thumbImage_mc;
if ((tracker%4) == 0 && tracker != 0) {
currentRow += 1;
}
if (currentColumn>2) {
currentColumn = 0;
} else if (tracker == 0) {
currentColumn = 0;
} else {
currentColumn += 1;
}
currentThumbnail._x = currentColumn*thumbMarginX;
currentThumbnail._y = currentRow*thumbMarginY;
currentThumbnail.percent_txt._visible = true;
thumbNumber = currentThumbnail._name.substr(9);
thumbPath = "gallery/"+whichGallery+"/thumbs/"+thumbNumber+".jpg";
whatIsLoading = "thumb";
if (thumbNumber == 1) {
// create a variable to track the currently selected button
var activethumb:MovieClip;
currentThumbnail.attachMovie("Darken_mc","Darken_m c",this.getNextHighestDepth());
activethumb = this;
}

loader.loadClip(thumbPath, target);

}

function loadAutoBigImage() {
removeMovieClip(displayBigImage);
displayBigImage = imagesHolder.attachMovie("big image holder", "bigImage_mc", imagesHolder.getNextHighestDepth());
target = displayBigImage.imageHolder_mc;
bigImagePath = "gallery/"+whichGallery+"/"+1+".jpg";
whatIsLoading = "big";
loader.loadClip(bigImagePath, target);
}

function thumbClickable():Void {
currentThumbnail.onPress = function() {
if (this != activethumb) {
activethumb.Darken_mc.removeMovieClip();
this.Darken_mc.removeMovieClip();
this.attachMovie("Darken_mc","Darken_mc",this.getN extHighestDepth());
activethumb = this;
removeMovieClip(displayBigImage);
descText.text = galleryIntros[clickedGallery];
bigNumber = this._name.substr(9);
displayBigImage = imagesHolder.attachMovie("big image holder", "bigImage_mc", imagesHolder.getNextHighestDepth());
target = displayBigImage.imageHolder_mc;
bigImagePath = "gallery/"+whichGallery+"/"+bigNumber+".jpg";
whatIsLoading = "big";

loader.loadClip(bigImagePath, target);
if (clickedGallery>0) {
var descPosition:Number = 0;
for (i=0; i<clickedGallery; i++) {
descPosition += imagesInGallery[i];
}
descPosition = descPosition+Number(bigNumber)-1;
imageDesc = descriptions[descPosition];
} else {
imageDesc = descriptions[Number(bigNumber)-1];
}
descText.text = imageDesc;

}
};

currentThumbnail.onRollOver = function() {
if (this != activethumb) {
this.attachMovie("Darken_mc","Darken_mc",this.getN extHighestDepth());
}
}
currentThumbnail.onRollOut = function() {
if (this != activethumb) {
this.Darken_mc.removeMovieClip();
}
}

};

View Replies ! View Related

Image Gallery / Thumbnail Scroller AND SetInterval Help?
Hi All,

I'm trying to combine a couple different dynamic image galleries. I've got a thumbnail scroller but I'd like it to rotate 8 every eight seconds until a thumbnail is clicked.

I'm clueless here. I could probably come up with a jacked up workaround if this wasn't dynamic, but it is.

Can anyone offer some help? THANKS!

Code:

import mx.transitions.Tween;
import mx.transitions.easing.*;

myPhoto = new XML();
myPhoto.ignoreWhite = true;
myPhoto.onLoad = function(success) {
numimages = this.firstChild.childNodes.length;
spacing = 61;
for (i=0; i<numimages; i++) {

this.picHolder = this.firstChild.childNodes[i];
this.thumbHolder = thumbnails.createEmptyMovieClip("thumbnail"+i, i);
this.thumbHolder._y = i*spacing;
this.thumbLoader = this.thumbHolder.createEmptyMovieClip("thumbnail_image", 0);
this.thumbLoader.loadMovie(this.picHolder.attributes.thmb);
this.thumbHolder.title = this.picHolder.attributes.title;
this.thumbHolder.paragraph = this.picHolder.attributes.paragraph;
this.thumbHolder.link_one = this.picHolder.attributes.link_one;
this.thumbHolder.link_one_name = this.picHolder.attributes.link_one_name;
this.thumbHolder.main_image = this.picHolder.attributes.main_image;
this.thumbHolder._alpha = 50;

//TEXT FORMAT******************************
myformat1 = new TextFormat();
myformat1.underline = true;
myformat1.bullet = false;
myformat1.size = 11;
myformat1.bold = true;
myformat1.font = "Times New Roman";
myformat1.url = this.picHolder.attributes.link_one;
//END TEXT FORMATS*************************

//INITIAL VARIABLE*************************
var picHolder:XMLNode = this.firstChild.childNodes[0];
mainimages.loadMovie(picHolder.attributes.main_image);
paragraph_txt.text = picHolder.attributes.paragraph;
link1_txt.html = true;
link1_txt.text = picHolder.attributes.link_one_name;
title_txt.text = picHolder.attributes.title;
link1_txt.setTextFormat(myformat1);

//END INITIAL VARIABLES********************

this.thumbHolder.onRollOver = function() {
var rollOver1:Tween = new Tween(this, "_alpha", None.easeOut, 50, 100, .2, true);
};

this.thumbHolder.onRelease = function() {
mainimages.loadMovie(this.main_image);
paragraph_txt.text = this.paragraph;
link1_txt.html = true;
link1_txt.target = "_blank";
link1_txt.text = this.link_one_name;
title_txt.text = this.title;
link1_txt.setTextFormat(myformat1);
};

this.thumbHolder.onRollOut = function() {
var rollOver1:Tween = new Tween(this, "_alpha", None.easeOut, 100, 50, .2, true);
};

}
};

myPhoto.load("gallery2.xml");
createMask();
scrolling();

function createMask() {
mask_mc._x = 410;
mask_mc._y = 1;
thumbnails.setMask(mask_mc);
}

function scrolling() {
_root.onEnterFrame = function() {
thumbnails._y += Math.cos(((mask_mc._ymouse)/mask_mc._height)*Math.PI)*20;
if (thumbnails._y>mask_mc._y) {
thumbnails._y = mask_mc._y;
}
if (thumbnails._y<(mask_mc._y-(thumbnails._height-mask_mc._height))) {
thumbnails._y = mask_mc._y-(thumbnails._height-mask_mc._height);
}
};

View Replies ! View Related

AS3 - Simple Xml Image Gallery - Thumbnail Rollovers
Here's my code: http://flash.pastebin.com/d21602c21

I've been relentlessly trying to get this to work and am happy with it so far.

Right now it works. It loads the thumbnails along with a full size image and then lets you click on the various thumbnails to display the full size image that goes with it.

I'd like to add rollover and active states to the thumbnails. I think I need to isolate the thumbnails from the full size images because I'd like to add ROLL_OVER and ROLL_OUT states to them without effecting the full size images..

I'm thinking I may need to rework a bit of the code. Anyways, it would really help me out to receive some direction.

View Replies ! View Related

Flash Image Gallery Thumbnail Scroll Sometimes Works...
this is probably an easy fix but i am at odds... I built my gallery and import it a parent page (foo)... Sometimes the scroll of thumbnail scroll works... it is choppy.... Sometimes does not work at all.... When i view the movie outside of foo - it works beautifully... Any ideas how to troubleshoot this - i took it word for word from the tutorial...

Thanks!

View Replies ! View Related

Image Gallery Thumbnail OnRelease Array Or XML Loading Problem
I'm using Flash CS3, but this project began in 8 and uses AS 1 and 2, so I figured this was the more appropriate section.

So I have a basic photo album for prototyping that is populated by values from an XML file. There are 9 maximum thumbnails (3 x 3) in each album. This all works.

Upon onRelease of each thumbnail a pop up larger-view movie clip appears to display the respective larger image. The viewer movie clip appears fine and in the correct position. The problem is the larger image does not get loaded into the holder clip within the viewer. Output is telling me that the value that I'm pulling from the XML file is undefined.

Both the thumbs and the larger images are using the same XML file and the same array. All of the pertinent code is within a class. All the correct files are in the folder they should be in. It is not a file not found error. Typos have been accounted for. The code for populating the thumbs is almost identical to the code for the larger image. It's just that one works, and the other doesn't.

Code:
class Photos extends MovieClip {
//
public var a:Number;
public var i:Number;
//
public function Photos() {
//load in XML
_root.photoXML = new XML();
_root.photoXML.ignoreWhite = true;
_root.photoXML.load("xmlData/photos.xml");
_root.photoXML.onLoad = function(success){
if(success) {
this.XmlConnect();
}
}
}
public function goPhotos() {
//
//First build arrays:
_root.photosArray = new Array();
_root.totalPhotos = _root.photoXML.childNodes[0].childNodes.length;
// fill arrays ::
for (a=0; a<_root.totalPhotos; a++) {
if(_root.photoXML.childNodes[0].childNodes[a].attributes.blockNum == _root.blockNum and _root.photoXML.childNodes[0].childNodes[a].attributes.locNum == _root.locNum+1) {
_root.photosArray.push({photoName:_root.photoXML.c hildNodes[0].childNodes[a].attributes.title, photoFile:_root.photoXML.childNodes[0].childNodes[a].attributes.filename});
}
}
trace("photosArray length = "+_root.photosArray.length);
//
for(a=0;a<10;a++) {
_root.detail.photoSec.photosHolder["img"+a].img._alpha = 0;
_root.detail.photoSec.photosHolder["img"+a].img._visible = false;
}
//
for(a=0;a<_root.photosArray.length;a++) {
_root.detail.photoSec.photosHolder["img"+a].img.loadMovie("images/sm_"+_root.photosArray[a].photoFile+".jpg",a);
_root.detail.photoSec.photosHolder["img"+a].img._visible = true;
_root.detail.photoSec.photosHolder["img"+a].img._alpha = 100;
}
//
//
//
_root.detail.audioSec.vLoader.vHolder.unloadMovie( );
_root.detail.audioSec.audioControlsHolder.vStat.gr abBar._x = 0;
_root.detail.audioSec.vLoader.gotoAndStop(1);
//
//
//
}
public function hidePhotos() {
for(i=0;i<_root.photosArray.length;i++) {
_root.detail.photoSec.photosHolder["img"+i].enabled = false;
}
}
public function showPhotos() {
for(i=0;i<_root.photosArray.length;i++) {
_root.detail.photoSec.photosHolder["img"+i].enabled = true;
}
}
public function launchLargePhotoViewer(photoNum) {
/*_root.detail.photoSec.photosHolder["img"+_root.locNum].onRelease=function():Void {
_root.detail.largeViewerHolder.removeMovieClip();
_root.detail.createEmptyMovieClip("largeViewerHolder", _root.detail.getNextHighestDepth());
_root.detail.largeViewerHolder.attachMovie("largeViewer", "largeViewer"+i, _root.detail.largeViewerHolder.getNextHighestDepth (), {_x: 251.1, _y:-27.9});
_root.detail.largeViewerHolder["largeViewer"+i].createEmptyMovieClip("img", _root.detail.largeViewerHolder["largeViewer"+i].getNextHighestDepth());
_root.detail.largeViewerHolder["largeViewer"+i].img.loadMovie("images/md_"+_root.photosArray[i].photoFile+".jpg", i);
_root.detail.largeViewerHolder["largeViewer"+i].img._x = _root.detail.largeViewerHolder["largeViewer"+i]._x + (_root.detail.largeViewerHolder._width - _root.detail.largeViewerHolder["largeViewer"+i].pic._width)*.5;
_root.detail.largeViewerHolder["largeViewer"+i].img._y = _root.detail.largeViewerHolder["largeViewer"+i]._y + (_root.detail.largeViewerHolder._height - _root.detail.largeViewerHolder["largeViewer"+i].pic._height)*.5;
}*/
for (i=0;i<_root.photosArray.length;i++) {
_root.detail.photoSec.photosHolder["img"+i].onRelease=function():Void {
_root.detail.largeViewerHolder.removeMovieClip();
_root.detail.createEmptyMovieClip("largeViewerHolder", _root.detail.getNextHighestDepth());
_root.detail.largeViewerHolder.attachMovie("largeViewer", "largeViewer"+i, _root.detail.largeViewerHolder.getNextHighestDepth (), {_x: 251.1, _y:-27.9});
_root.detail.largeViewerHolder["largeViewer"+i].createEmptyMovieClip("img", _root.detail.largeViewerHolder["largeViewer"+i].getNextHighestDepth());
_root.detail.largeViewerHolder["largeViewer"+i].img.loadMovie("images/md_"+_root.photoXML.childNodes[0].childNodes[i].attributes.filename+".jpg", i);
_root.detail.largeViewerHolder["largeViewer"+i].img._x = _root.detail.largeViewerHolder["largeViewer"+i]._x + (_root.detail.largeViewerHolder._width - _root.detail.largeViewerHolder["largeViewer"+i].pic._width)*.5;
_root.detail.largeViewerHolder["largeViewer"+i].img._y = _root.detail.largeViewerHolder["largeViewer"+i]._y + (_root.detail.largeViewerHolder._height - _root.detail.largeViewerHolder["largeViewer"+i].pic._height)*.5;
}
}
}
}
I appreciate any insight into this conundrum.

ETA: photoFile is the culprit of 'undefined'

View Replies ! View Related

Trying To Make The XML Gallery Resize The Main Image But Keep The Thumbnail Scroller
I've looked at the resize files but haven't had any success implementing them in the kirupa XML gallery with scrollable thumbnails. If anyone has any input
on how to do this I would greatly appreciate it.

View Replies ! View Related

How To Make Thumbnail Larger On Mouse Over
I was wondering if there was a tutorial on how to make a thumbnail become larger when mouseover. And also display some text?

does anyone know how this could be done?

thanks for any help.

View Replies ! View Related

Xml Thumbnail Gallery - How To Leave Thumbnail Blank?
There was a thread a few days ago on how to leave the caption or description blank. If anyone knows could you explain how to leave the thumbnail and/or url blank for some and to show for others? Where if there is no information that flash can read a field that is undefined as ""?

View Replies ! View Related

FLV Video Thumbnail + Thumbnail Gallery With LinkIDs From XML
Let's say for instance, our XML file:
<videos>
<video linkid="AK0001" thumb="http://www.site.com/pathtofile/filename.flv">
<link>http://www.site.com/pathtofile/filename.flv</link>
</video>
</videos>

Is it possible to use the source flv file as the thumbnail? Or, is it better to create a thumbnail of all the content?

With this said, how would I create the event handler to satisfy when each thumbnail is clicked, it stores it's linkid in the $_GET variable?

Thank You,
b0gui

View Replies ! View Related

Displaying A Larger/fuller Image By Hovering Over Small Image.
Hello guys n galls.

Ok its been a bit since I started learning the ins and outs of Flash. I haven't done much in terms of interactive stuff.

I co-run a site which you can find the link below, and in the past, if you check the home page, there were large 555 x 300 ish borders displayed one above the other. Now if you check the page, a mate altered it so that everything is more compact and theres only a little square containing a snippet of the original banners. Now I like this idea of compacting it all, but I was trying to think of ways to jazz it up a bit by incorporating flash into the whole thing.

I just had an idea of some how allowing the full banner images to appear in a larger screen when the cursor was to hover over the small squares which contain a little image. Would this be practical? Im thinking about the fact that there would be like 7 or so seperate topics at one time each with a small image that you could hover over. I was also thinking about possibly making it a bit more jazzy so that as the curser hovers over each topic, the outer edge glows or something like that with a sound effect.

COuld anyone help me with how i'd go about this?

SITE IS HERE BY THE WAY - www.aftershockpromotions.com

View Replies ! View Related

::photo Gallery Need Actionscript For Larger Images? ::
Hi All,

Im in the process of creating a picture gallery and I initially used a rollover for the images to present the bigger version of the image on the left-hand side of the page. however, ive encountered an issue with this method and would like the larger version of the image to appear when the image is clicked not rolled over (ive saved these as buttons), my query is, do I need Actionscript for this, if so, how could i solve the problem.

thanks

E.V.E

View Replies ! View Related

XML Help With Adding Categories To Gallery With Thumbnails And Larger Pictures
Hi, I was looking at http://www.kirupa.com/developer/mx2004/thumbnails.htm tutorial, This tutorial Almost has exactly what I want.

But being new to XML and the action script associated with it, I'm a bit lost when it comes to adding new things. Basically i want to have Album categories the same way the thumbnails work so their is a mask limiting 4 categories on screen and when you click < or > arrows next to the categories it shows the next 4 categories that you would be able to choose from.

Then I would want it to load whatever category you selected into the thumbnails and the larger pic.

Does anyone know how to do this ? Or if their is another tutorial that would show me how to add categories into something like a gallery with thumbnails?

Apologies for being stupid and the poor grammar
I've been searching everywhere to find out how i can add in some categories and still have it linked to the thumbnail scroller and larger images, but i haven't found any luck at all I just want it so you could add in as many thumbs and categories as you wanted and have those masked and scrollable rather then a dropdown.

I paid for some silly pdfs to explain it better to me but they did it in a way that I didn't like and turned out just to be a waste of money. Learnt my lesson and signed up here to ask the pros! Hope you can help me out. I want to create something that can be updated from just an xml file.

I also Added a quick jpg to kind of illustrate what i want to have happen :/

Any information or direction you can provide is highly appreciated.

View Replies ! View Related

[F8] Image Larger Than Swf It's On.
Hi, I haven't got a clue about Flash so I hope you can answer my question as simply as possible. I'm employing someone to update the portfolio page of my site www.brightsparkcreative.com/portfolio. You'll notice that at the moment the click thru's (ie large portfolio image) from the portfolio thumbnails only cover the top, white part of page. I would like these new click thru's to be larger and cover the white and some of the orange below. The people putting it together say this is impossible and must be shrunk to fit into white space.

This may well be the case but I just wondered if there was a way around it? For example is it possible to attach javascript to the thumbnail Flash object? I think they use javascript in this example to achieve the kind of effect I'm looking for http://www.graphicdesignblog.co.uk/portfolio/ but then again I have pretty much no idea about these things.

Any help would be massively appreciated!

View Replies ! View Related

Panning Over A Larger Image?
does anyone have a piece of script which can enable the mouse to pan over an image larger than the stage?

View Replies ! View Related

Making An Image Larger Via AS
I have an image I want to increase in size. I dont want to do it via animation. I want to wrie actionscript that will enlarge over a specified time or frame. I can enlarge alreay but I want it done where I can maniluplate how fast it grows. Do I need to use loops?
I have several images I want like that. Can I have one MC(button) do this for all the images individually?

THX

View Replies ! View Related

Larger Image View
Hi - Before I go ahead and jump straight into this I was wondering if I could get some guidance as to the best method to use...

What I am trying to achieve is have a selection of buttons that open larger image versions. Then include the ability to 'close' the larger image version at the users conveniece. So basically, click on a thumbnail to open a new window that shows a larger image with a close button.

Should I use scenes and/or actionscript? If someone could walk me through this or point me to a tutorial that would be great!

View Replies ! View Related

Viewing Larger Image
Hi all,
I wonder if some of you good folk could help a complete novice with a Flex problem!

Basically i found a small gallery tutorial on the web and added some small changes to suit my needs.

What happens is I have a combobox populated with categories collected from a mysql database. When you click on a category it shows a list of thumbnails inside a Tile container.
Now what i desperately want to do is when a user clicks on one of the thumbnails it shows a larger image.
I have got the change state so that when the thumbnail is clicked it removes the thumbnails and should replace with the larger image, but i have bi idea how to create an event that first of all selects the thumbnail clicked, then calls the larger image.

You can see from the code below that i tried to create a function to do this, but afraid i am in very deep water.

PHP Code:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="http_getAlbumList.send();">
<mx:Metadata>
    [Event(name="photoSelected", type="events.PhotoEvent")]
</mx:Metadata>
    <mx:Script>
<![CDATA[
    import mx.rpc.events.ResultEvent;
    import mx.controls.Image;
    import mx.collections.ArrayCollection;
    import events.PhotoEvent;
    [Bindable]
            public var photoData:ArrayCollection;
    // used to load the pictures retrieved from the selected album to the Tile control.
    private function loadPictures( event:Event ):void {

        try {
            // define an array of picture url's
          var arr_pictures:ArrayCollection = http_getPicturesByAlbumId.lastResult.photos.all.thumb;

        }
        catch( errObject:Error ) {
            // clean up the Tile control, notify user, exit.
   albumPictures.removeAllChildren();
            mx.controls.Alert.show( "There are no pictures to display.", "DSA Pictures" );
            return;
        }

        // initialize the Tile control
  albumPictures.removeAllChildren();

        // load the new pictures to the Tile control
        for( var i:int = 0; i < arr_pictures.length; i++ ) {

            // create a new temporary image
            var tmpImage:Image = new Image();
            tmpImage.load('http://www.raynerfamily.org.uk/various/gallery/images/tn/' +arr_pictures[i]);

            // tack the image on to the Tile
           albumPictures.addChild( tmpImage );
        }

        return;
    }
    [Bindable]
               public var selectedPhoto:Object;
    private function displayDetails(event:Event):void
    {
        currentState='details';
        selectedPhoto=new Object();
        selectedPhoto=event.currentTarget.selectedItem;
        largePic.load('http://www.raynerfamily.org.uk/various/gallery/images/'+selectedPhoto.filename);
    }
]]>
</mx:Script>


<mx:HTTPService id="http_getAlbumList"
                url="http://www.raynerfamily.org.uk/various/gallery/photos.php" useProxy="false" />


<mx:HTTPService id="http_getPicturesByAlbumId"
                url="http://www.raynerfamily.org.uk/various/gallery/photos.php?sel={ albumList.selectedItem.cat_id }"
                result="loadPictures( event );" useProxy="false">
    
    <mx:request>
        <albumId>
            { albumList.selectedItem.cat_id }
        </albumId>
    </mx:request>
</mx:HTTPService>

<mx:states>
        <mx:State name="details">
            <mx:RemoveChild
                target="{ggg}" />
            <mx:AddChild
                relativeTo="{albumPictures}"
                position="lastChild">
                <mx:Canvas>
                    <mx:Image id="largePic"
                        x="1" y="15"
                        width="490" />
                    <mx:Text id="photographerText"
                        x="65" y="330"
                        width="367" height="18"
                        fontWeight="bold"
                        color="#F8E5BB" />
                    <mx:Text id="descText"
                        x="65" y="350"
                        width="367" height="36"
                        color="#F8E5BB" />
                    <mx:Button
                        x="105" y="380"
                        fillAlphas="[1,.8]"
                        fillColors="[#F8E5BB, #F8E5BB]"
                        label="Return to Gallery" click="currentState=''" />
                </mx:Canvas>
            </mx:AddChild>
        </mx:State>
    </mx:states>

    <mx:Panel title="Dorset Submariners Pictures" width="100%" height="100%" paddingLeft="20" paddingTop="20">
        <mx:VBox width="100%">
            <mx:HBox id="ggg">
                <mx:Label text="Album List:" />
                <mx:ComboBox id="albumList"
                             dataProvider="{ http_getAlbumList.lastResult.photos.all }"
                             labelField="category"
                             close="http_getPicturesByAlbumId.send();" />

            </mx:HBox>
            <mx:TextArea id="desc" htmlText="{http_getPicturesByAlbumId.lastResult.photos.all.desc}" width="100%"  fontWeight="bold"/>

            <mx:Tile id="albumPictures" click="displayDetails(event)" >

         </mx:Tile>

        </mx:VBox>
    </mx:Panel>

</mx:Application>

So this is the part that displays the thumbs:

PHP Code:

<mx:Tile id="albumPictures" click="displayDetails(event)" >

and my function for this is :
[Bindable]

PHP Code:

public var selectedPhoto:Object;
    private function displayDetails(event:Event):void
    {
        currentState='details';
        selectedPhoto=new Object();
        selectedPhoto=event.currentTarget.selectedItem;
        largePic.load('http://www.raynerfamily.org.uk/various/gallery/images/'+selectedPhoto.filename);
    }

I know i have got it all wrong and tried for 2 days now to find out how to do it, but i am just going round in circles.

Any help what so ever would be very much appreciated.

Kind regards
Jon

View Replies !    View Related

Thumbnail Gallery Tutorial - Gallery Within Movieclip
I've taken the Adding Thumbnail tutorial http://www.kirupa.com/developer/mx2004/thumbnails.htm and it works perfect. However when I play the photogallery swf file within a movie clip (playing as externail swf from main timeline) and the gallery pulls up. The links work and all is good. All until I try and scroll to more thumbnail files. It's now scrolling. Scrolls fine when swf played indendently.

This couldn't have come a worse time as my finals are due in hours.

Please help if you can.

Thanks

View Replies ! View Related

[CS3] PopUp For Larger Image Javascript In IE6 From Within Flash
Basically we have a kind of one column image gallery essentially. It's like a scrollable list of a thumb on the left and description on the right. When the user clicks on a thumb/descrip "button", the intent is for the the larger and higher res image to popup in a new window via javascript. This works fine EVERYWHERE except IE6. IE6 results are inconsistent. Sometimes it works, sometimes it doesn't. We've been racking our brains trying to find some workaround.

Here's the code as is within the onRelease

Code:

var jscommand:String = "window.open('"+largeImgPath+"','"+titleText+"','height=800,width=610,toolbar=no,scrollbars=yes');";
getURL("javascript:" + jscommand + " void(0);");

View Replies ! View Related

Image Resizes Perfectly With Larger Monitor?
On this site http://www.hookedonwalls.com/ the images are full screen at 1024x768 and even when you have a larger monitor, they still pretty much maintain their quality. How do you code this in Flash CS3?

thx

View Replies ! View Related

I Did It. I Made A Larger Than Monitor Size Image Dragable.
My image on my web page is larger than my monitor. I want my entire web page to consist of this very large image. I want to click on this image and pull (drag) and see contents of this image appear into view at the edge of my monitor. I succeeded in doing this. The code to make it drag able is simple (see below). But when I keep dragging it across my monitor I begin to see the edge of the image come into view and what appears to be the white background of the stage area. I would like the dragging to stop when the edge of the image reaches the edge of my monitor.

Can anyone help. Thanks.

map_mc.addEventListener(MouseEvent.MOUSE_DOWN, startDragging);
map_mc.addEventListener(MouseEvent.MOUSE_UP, stopDragging);
map_mc.buttonMode = true;

import flash.events.MouseEvent;

function startDragging(event:MouseEvent):void
{
map_mc.startDrag();
}
function stopDragging(event:MouseEvent):void
{
map_mc.stopDrag();

View Replies ! View Related

Image Resizing/fixed Position For Larger Images
Hello all.

I have decided to play around with Flash and try and teach myself something. Now I have done http://www.kirupa.com/developer/mx20...otogallery.htm this tutorial, as well as the other tutorial to add a scrolling thumbnails element to it with no problems at all.

I have (using the code provided by Cello in his resize.zip found here http://www.kirupa.com/forum/showthre...resize+picture) made it so images of any size can be used. From this, how would i make it so rather then eh top left of each image being loaded, the center of each image is loaded. This way all pictures will have their position in the same location?

I have changed the layout and everything to accommodate the larger sizes, and right now i have started from scratch so i do not have the scrolling thumbnail element included.

here is the code.

Quote:

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 += 10;

}

}

};
function nextImage() {

if (p<(total-1)) {

p++;
if (loaded == filesize) {
spacing = 10;
picture._alpha = 0;

MovieClip.prototype.loadPic = function(pic){
_root.picture._alpha = 0;
this.loadMovie(pic);
_root.onEnterFrame = function(){
var t = picture.getBytesTotal(), l = picture.getBytesLoaded();
if (t != 0 && Math.round(l/t) == 1){
var w = picture._width + spacing, h = picture._height + spacing;
border.resizeMe(w, h);
delete _root.onEnterFrame;
}
}
};
MovieClip.prototype.resizeMe = function(w, h){
var speed = 3;
this.onEnterFrame = function(){
this._width += (w - this._width)/speed;
this._height += (h - this._height)/speed;
if( Math.abs(this._width-w)<1){
this._width = w;
this._height = h;
_root.picture._x = this._x - this._width/2 + spacing/2;
_root.picture._y = this._y - this._height/2 + spacing/2;
_root.picture._alpha = 100;
delete this.onEnterFrame;
}
}
};
picture._alpha = 0;
picture.loadMovie(image[p], 1);
desc_txt.text = description[p];
picture_num();

}

}

}
function prevImage() {

if (p>0) {
spacing = 10;
picture._alpha = 0;

MovieClip.prototype.loadPic = function(pic){
_root.picture._alpha = 0;
this.loadMovie(pic);
_root.onEnterFrame = function(){
var t = picture.getBytesTotal(), l = picture.getBytesLoaded();
if (t != 0 && Math.round(l/t) == 1){
var w = picture._width + spacing, h = picture._height + spacing;
border.resizeMe(w, h);
delete _root.onEnterFrame;
}
}
};
MovieClip.prototype.resizeMe = function(w, h){
var speed = 3;
this.onEnterFrame = function(){
this._width += (w - this._width)/speed;
this._height += (h - this._height)/speed;
if( Math.abs(this._width-w)<1){
this._width = w;
this._height = h;
_root.picture._x = this._x - this._width/2 + spacing/2;
_root.picture._y = this._y - this._height/2 + spacing/2;
_root.picture._alpha = 100;
delete this.onEnterFrame;
}
}
};
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;

}

If my logic is wrong it would be great if you guys could let me know seeing as this is my first time with flash. Thanks.

Any help would be great.

I have tired looking at examples here http://www.kirupa.com/forum/showthread.php?t=87388 but all links seem to be expired.

and here
http://www.kirupa.com/forum/showthre...resize+picture

Thank you all

View Replies ! View Related

Thumbnail Gallery
Hi,

I'm following the manual given below here:
http://www.mr10.net/components/gallery/manual/#thesetup
which sets up a thumbnail gallery by calling an xml file.

the gallery is working fine. It's just that i want the bigger images to be clickable and should open in a pop up window. Also i want some description to be added below the bigger images.

Any AS gurus pls help!!!!!

View Replies ! View Related

MX - Xml Thumbnail Gallery
Hello, I hope someone can spare a little time to help me. I am building a xml photogallery which displays thumbnails which you click on to display a larger pic. The code below displays the the pics for <section name="fashion" id="1"> i need to make a button which when clicked displays the pics for <section name="advertising" id="2">

Code:
<?xml version="1.0" encoding="UTF-8"?>
<xml>
<gallery>
<section name="fashion" id="1">
<pictures>
<PICTURE NAME="1" THUMB="tn/tn_fashion_01.jpg" IMAGE="pics/fashion_1_p.jpg" TEXT="test1" />
<PICTURE NAME="2" THUMB="tn/tn_fashion_02.jpg" IMAGE="pics/fashion_2_p.jpg" TEXT="test2" />
<PICTURE NAME="3" THUMB="tn/tn_fashion_03.jpg" IMAGE="pics/fashion_3_p.jpg" TEXT="test3" />
</pictures>
</section>
<section name="advertising" id="2">
<pictures>
<PICTURE NAME="1" THUMB="tn/tn_advertising_01.jpg" IMAGE="pics/advertising_1_p.jpg" TEXT="test1" />
<PICTURE NAME="2" THUMB="tn/tn_advertising_02.jpg" IMAGE="pics/advertising_2_p.jpg" TEXT="test2" />
<PICTURE NAME="3" THUMB="tn/tn_advertising_03.jpg" IMAGE="pics/advertising_3_p.jpg" TEXT="test3" />
</pictures>
</section>
</gallery>
</xml>
and here is the AS

Code:
portfolioInfo = new XML();
portfolioInfo.ignoreWhite = true;
timeline = this;
portfolioInfo.onLoad = function() {
portfolioTag = this.firstChild.firstChild.firstChild.firstChild;
trace(count=portfolioTag.childNodes.length);
for (child=0; child<count; child++) {
currentPicture = portfolioTag.childNodes[child];
currentThumb = menu_mc.createEmptyMovieClip("thumbnail"+child, child);
currentThumb._y = child*75;
image = currentThumb.createEmptyMovieClip("thumbnail_image", 0);
image.loadMovie(currentPicture.attributes.THUMB);
currentThumb.NAME = currentPicture.attributes.NAME;
currentThumb.IMAGE = currentPicture.attributes.IMAGE;
//currentThumb.TEXT = currentPicture.attributes.TEXT;
currentThumb.onRollOver = currentThumb.onDragOver=function () { showName_txt.text = this.NAME;};
currentThumb.onRollOut = currentThumb.onDragOut=function () { showName_txt.text = "";};
currentThumb.onPress = currentThumb.onDragOver=function () { image_mc.loadMovie(this.IMAGE);info_txt.text = "Loading...";};
}
};
portfolioInfo.load("xml_slide.xml");
any help much appreciated
cheers

View Replies ! View Related

I Need A Thumbnail Gallery Please Help?
Ok, I know how to build gallerys (to a point) but i need one that can load the 25 x 25px thumbnail gifs from the server. And I need an area to view the larger pix to the side.

If anyone could help me asap that would be amazing!!

Thank you!

View Replies ! View Related

Thumbnail Gallery
Does anyone know where I could possibly find a good thumbnail gallery tutorial? I am looking for one that has a scrollable thumbnail box with a meduim size image to be viewed when u rollover the thumbnail!

Thanks,
Andy

_

View Replies ! View Related

[F8] Xml Thumbnail Gallery
Hi, I'm making a scrollable thumbnail gallery but I want to load the images into from an XML file. I'm having trouble setting up with emptyMovieClip's in the right position.

Code:
import mx.managers.DepthManager;

var xml:XML = new XML();
xml.ignoreWhite = true;

xml.onLoad = function() {
var numOfItems:Number = this.firstChild.childNodes[0].childNodes.length;

for (i=0; i<numOfItems; i++){
var xPosition:Number = 11+(i*80);
createEmptyMovieClip("image"+i, this.setDepthTo(i+1), {_x:xPosition, _y:4});

var thisItem:String = this.firstChild.childNodes[0].childNodes[i].attributes.image;
var nameOfItem:String = load +i;
nameOfItem:MovieClipLoader = new MovieClipLoader();
nameOfItem.loadClip(thisItem, "image"+i);

}

}

xml.load("menu.xml");
This is the code I am using. It opens up an xml file called 'menu.xml' and is supposed to add a certain amount of emptyMovieClips to the stage. Then the correct image is loaded into this movieclip.

At the moment I just get the last image from the xml doc showing up. That proves the images are loading but it's not positioned correctly. So either it is above the previously created movieclips or they have all loaded into the same one!

Can you please advise on how to correct this?

View Replies ! View Related

XML Thumbnail Gallery
Hi Actionscripters,

I am encountering a few uncertainties with an xml thumbnail gallery that I have adapted from a few tutorials. I have two questions about this piece of actionscript:

Code:
var thumb_spacing = 30;

// load variables object to handle loading of text
var description_lv = new LoadVars();
description_lv.onData = function(raw_text){
description_txt.text = raw_text;
}
function GeneratePortfolio(portfolio_xml){
var portfolioPictures = portfolio_xml.firstChild.childNodes;
for (var i = 0; i < portfolioPictures.length; i++){
var currentPicture = portfolioPictures[i];

var currentThumb_mc = menu_mc.createEmptyMovieClip("thumbnail_mc"+i,i);
currentThumb_mc._x = i * thumb_spacing;
currentThumb_mc._y = i * thumb_spacing;

currentThumb_mc.createEmptyMovieClip("thumb_container",0);
currentThumb_mc.thumb_container.loadMovie(currentPicture.attributes.thumb);

currentThumb_mc.title = currentPicture.attributes.title;
currentThumb_mc.image = currentPicture.attributes.image;
currentThumb_mc.description = currentPicture.attributes.description;

currentThumb_mc.onRollOver = function(){
currentThumb_mc.thumb_container._alpha = 50;
}
currentThumb_mc.onRollOut = function(){
currentThumb_mc.thumb_container._alpha = 100;
}
currentThumb_mc.onRelease = function(){
image_mc.loadPhoto(this.image);
description_lv.load(this.description);
title_lv.load(this.title);
}
}
}
Firstly, I would like to create a box of thumbnails which is 5 thumbs wide and 6 thumbs deep, my current code is generating thumbs downwards in a diagonal line from the top left of the movie clip. I understand this is because of the coordinates that I have specified in my variable are:

Code:
currentThumb_mc._x = i * thumb_spacing;
currentThumb_mc._y = i * thumb_spacing;
Q1: How do I get the thumbs to wrap from the end of one row to the beginning of the row below?

Secondly, I would like the thumbs to have an alpha value of 50% on rollover. My current script does this, but only on the last thumb - no matter which thumb the pointer is 'over'.

Q2: I am not sure how to target the dynamicly created movie clips acturately. How do I solve this problem?

Many thanks for any help on this. It is my first attempt at dynamically loading data in to flash

View Replies ! View Related

Thumbnail Gallery
Hi,

I want to create a thumbnail gallery with images loaded in at run-time. Can an flash actionscript be passed variables at run-time. I want the actionscript to recieve filename(s) as a variable so it knows what to display.

View Replies ! View Related

Xml Thumbnail Gallery Help
Hi I am building an online gallery for my artist friend, after much trouble it is working in the basic way but there are 2 refinements i would like to make. any help with either or both would be useful.

here's where i am at at the mo...http://www.bru-ha.com/roza-flash/art_7.swf

the gallery loads images text and thumbs from an XML file as you can see, at present the thumbs have very simple scripting that sets the alpha to 50% on load, on mouse over this then jumps to 100%. I would like to make this a gradual transition from 50 to 100 on mouseover and mouseout, but i cannot figure what code to use. i thought it would be a simple if statement but my programming knowledge is very basic.. any ideas anyone?

here is the actionscript:

Code:
target_mc.onRelease = function() {
p = this.pictureValue-1;
nextImage();
};
target_mc._alpha = 50;
target_mc.onRollOver = function() {
target_mc._alpha = 100;
};
target_mc.onRollOut = function() {
this._alpha = 50;
};
the other matter i would love help in is positioning the thumbnails, there will be 14 different pages like this for 14 bits of work, each having different numbers of thumbnails, is it possible in actioscript to center the thumbnails to the middle of the page instead of them being justified left?

here is the code which i think would need to be aaltered to do this.

Code:
function thumbnails_fn(k) {
thumbnail_mc.createEmptyMovieClip("t"+k, thumbnail_mc.getNextHighestDepth());
tlistener = new Object();
tlistener.onLoadInit = function(target_mc) {
target_mc._x = hit_left._x+(eval("thumbnail_mc.t"+k)._width+10)*k;
target_mc.pictureValue = k;

View Replies ! View Related

Help With Thumbnail Gallery
I did a gallery tutorial and I added some extras but me being a total newbie to AS. I didn't know how to make this easier for me .

Code:
import mx.transitions.Tween;
import mx.transitions.easing.*;
// For the XML to load.
var xml:XML = new XML();
xml.ignoreWhite = true;
var urls:Array = new Array();
var captions:Array = new Array();
var whoIsOn:Number;
xml.onLoad = function() {
var photo:Array = this.firstChild.childNodes;
for (i = 0; i < photo.length; i++) {
urls.push(photo[i].attributes.url);
captions.push(photo[i].attributes.caption);
}
holder.loadMovie(urls[0]);
caption.text = captions[0];
whoIsOn = 0;
};
xml.load("image.xml");
// This is for the PANEL .
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;
}
if (panel._x >= 50) {
panel._x = 50;
}
if (panel._x <= -2529) {
panel._x = -2529;
}
var xdist = _xmouse - 400;
panel._x += Math.round(-xdist / 20);
}
prev.onRelease = function() {
if (whoIsOn > 0) {
whoIsOn--;
holder.loadMovie(urls[whoIsOn]);
caption.text = captions[whoIsOn];
}
};
next.onRelease = function() {
if (whoIsOn < urls.length - 1) {
whoIsOn++;
holder.loadMovie(urls[whoIsOn]);
caption.text = captions[whoIsOn];
}
};
I have 66+ images(movieClips) I used the code below for each movieClip.

Code:
panel.s1.onRollOver = function() {
panel.s1.swapDepths(this.getNextHighestDepth());
new Tween(panel.s1, '_xscale', Elastic.easeOut, panel.s1._xscale, 100, 1, true);
new Tween(panel.s1, '_yscale', Elastic.easeOut, panel.s1._yscale, 100, 1, true);
};
panel.s1.onRollOut = function() {
new Tween(panel.s1, '_xscale', Elastic.easeOut, panel.s1._xscale, 50, 1, true);
new Tween(panel.s1, '_yscale', Elastic.easeOut, panel.s1._yscale, 50, 1, true);
};
panel.s1.onRelease = function() {
holder.loadMovie('images/l1.jpg');
};
panel.s2.onRollOver = function() {
panel.s2.swapDepths(this.getNextHighestDepth());
new Tween(panel.s2, '_xscale', Elastic.easeOut, panel.s2._xscale, 100, 1, true);
new Tween(panel.s2, '_yscale', Elastic.easeOut, panel.s2._yscale, 100, 1, true);
};
panel.s2.onRollOut = function() {
new Tween(panel.s2, '_xscale', Elastic.easeOut, panel.s2._xscale, 50, 1, true);
new Tween(panel.s2, '_yscale', Elastic.easeOut, panel.s2._yscale, 50, 1, true);
};
panel.s2.onRelease = function() {
holder.loadMovie('images/l2.jpg');
};
my .fla can be found here.
to view what I'm working on is here.

View Replies ! View Related

Thumbnail Gallery Help
Hi,

Being trying to figure this out, but i'm obviously missing something ... my brain is way too worn out after a whole day of coding ...

I'm trying to dynamically create a serious of thumbnails on author time.

I know basically what I need to do, but it's not quite working. First I'd like to create a container movieclip, then attach a button i have in the library, and finally load the thumbnail image inside the button.

So far, I have this:

total = 8 // total num images to load

smallposx = 165;
smallposy = 20.95;
this.createEmptyMovieClip("large", 0);
large._x = 7;
large._y = 10.45;
large.loadMovie("../img/products/image1_l.jpg");

for (i=1; i<total+1; i++) {
this.createEmptyMovieClip("small"+i, this.getNextHighestDepth());
path = this["small"+i];
path.attachMovie("button", "button"+i, this.getNextHighestDepth());
button= this["button"+i];
path.button.thumb.loadMovie("../img/products/image+i+"_s.jpg");
path._x = smallposx;
path._y = smallposy;

_root.smallposx += 50;
}

Note: "thumb" is a mc inside the dynamically attached button instance which has an instance name of "thumb".

Anyone can suggest a solution or an optimized new approach?

Thanks a mill!

View Replies ! View Related