Flash :: The Ultimate Image Gallery. I Am Going To Make It

The Ultimate Image Gallery. I Am Going To Make It
I have just started writing out the basics of my plan and what this gallery needs to do. Its going to be very complicated, and I am sure to run into many problems, so before I begin I want to make sure I have a general idea of how this thing is gonna be set up and coded. If people could read my plan and give me some advice before I embark on this project I would greatly appreciate it. Here's what this gallery needs to do:

[PHOTOGALLERY]

BASIC OUTLINE
- Picture frame on left.
- Thumbnails on right.
- Picture info is displayed under the picture frame.
- Drop down menu above thumbnails that switches between galleries.
- Gallery is fully dynamic and uses an XML file to designate what images/thumbnails are loaded.

PICTURE FRAME

- Frame has set width. The height scales with the picture.
- Frame would be an MC that has 4 Layers.
- Layer 1: Mask (scales according to height of image loaded)
- Layer 2: Top Bar (moves along Y-Axis according to image loaded)
- Layer 3: Bottom Bar(moves along Y-Axis according to image loaded)
- Layer 4: Left & Right Bars (doesn’t move, are very tall)
- Preload Bar/ Percentage displayed in center of Picture Frame.
- When image is loaded, previous image fades out,preloader, then current image fades in.

THUMBNAILS

- Thumbnails are Squares or Rectangular box’s.
- When gallery is opened boxes pop open (maybe elastically maybe a simple ease)
- When thumbnail box has eased to intended dimensions a preloader appears in each box while thumbnail image loads.
- I may want to stagger the popping/easing open of the thumbnail boxes to create a wash effect
- After all Boxes have eased to their dimensions the first image is loaded into Picture frame.
- At this time thumbnail images will still be loading.
- A thumbnail is not clickable until its thumbnail image has loaded.
- Thumbnails reflect weather or not they have been clicked.
- The number of thumbnail box's depends on how many i say in the xml file. And if there are more then 8, then 2 arrows popup that allow me to chagne thumbnail pages.

OK, there's the fairly basic outline of my plan. What do you think. If there are any stumbling blocks that you can think of that I may run into please warn me now.

I should let you know that I'm not extremely experienced with flash, I just this past week learned about the usefullness of functions. I have built a sorta dynamic image viewer, but it was pretty messy and hard to alter. I want to make this one the right way, clean and efficient code, and easy to make changes to.

Any advice, help or ideas would be great!. Thanks!

How Do You Make The Ultimate Dynamic Gallery More Ulitimate?
Hi folks,

I've recently completed the tutorial that can be found at

http://www.lukamaras.com/tutorials/a...e-gallery.html

which creates a pretty good dynamic gallery using actionscript & xml.

I was just wondering if anyone can tell me how (if at all possible) to make the image holder dynamically fit the size of the image.

The problem i have is that not all of my galleries were shot in landscape, but If I load portrait shots into the gallery the holder & dropshadow is totally the wrong shape!!

Cheers folks!

Tim

How To Make Image Gallery
I read the good tutorial here http://www.kirupa.com/developer/mx20...otogallery.htm and i would like to enhance it with gallery.
I think about it how to do it.
I need to load the description and images and movie and than with loop create next, and next.
I do'nt know how duplicate this movies.
I load the XML:

Code:
// fn after loading XML load
function loadXML_gal (loaded)
{
if (loaded)
{
xmlNode_gal = this.firstChild;
image_gal = [];
description_gal = [];
path_gal = [];
total = xmlNode_gal.childNodes.length;
for (i = 0; i < total; i++)
{
image_gal[i] = xmlNode_gal.childNodes[i].childNodes[0].firstChild.nodeValue;
description_gal[i] = xmlNode_gal.childNodes[i].childNodes[1].firstChild.nodeValue;
path_gal[i] = xmlNode_gal.childNodes[i].childNodes[2].firstChild.nodeValue;
trace ("image_gal =" + image_gal[i]);
trace ("description_gal =" + description_gal[i]);
trace ("path_gal =" + path_gal[i]);
}
}
else
{
content = "file not loaded!";
}
}
// create XML object
xmlData_gal = new XML ();
xmlData_gal.ignoreWhite = true;
xmlData_gal.onLoad = loadXML_gal;
xmlData_gal.load ("xml/seznam_gallery.xml");
//
And now i need to put every loaded images in new movie.

XML what is loaded:

Code:
<?xml version="1.0" encoding="windows-1250"?>
<main_node>
<gallery>
<caption>Prvni galerie</caption>
<image>gallery/img_01.jpg</image>
<path>xml/gallery_01.xml</path>
</gallery>
<gallery>
<caption>Druha galerie</caption>
<image>gallery/img_02.jpg</image>
<path>xml/gallery_02.xml</path>
</gallery>
</main_node>
How to do it please?

How To Make A Pop Up In An XML Image Gallery?
Could someone please help me with simple action script/html. I am using Kirupa's XML image gallery with thumbnails:
http://www.kirupa.com/developer/mx2004/thumbnails.htm .
&
The images link to an even larger image:
http://www.kirupa.com/forum/showthread.php?t=81020 .

The only problem is that I need these larger images to come up in a Pop Up window instead of in _blank window.

I have tried numerous java script & flash scripts for pop up windows. None of them work because I have XML in this gallery.

Does anyone know a script html/java/AS that would make these larger images come up in a pop up window?

Thank you,
-Max

edit: I have searched all over this forum and can't find the right code

Ultimate SWF/IMAGE Loader Function
Here is my ultimate swf/image loader, I'm just simplifying everything down to a four variable function (basically). I need help with some of the code, the width and height will not render because the stupid checkProgress function that I don't know how to get around.

If anyone can fix this function it would benefit this forum, me and the web!

ActionScript Code:
MovieClip.prototype.imageMC = function(imageName:String, imageURL:String, imageWidth:Number, imageHeight:Number, maintainAspect:Boolean) {
var imageHolder:String = imageName+"_imageHolder";
this.createEmptyMovieClip(imageName, this.getNextHighestDepth());
this[imageName].createEmptyMovieClip(imageHolder, this[imageName].getNextHighestDepth());
var mcLoader:MovieClipLoader = new MovieClipLoader();
var listener:Object = new Object();
mcLoader.addListener(listener);
mcLoader.loadClip(imageURL, this[imageName][imageHolder]);
var interval:Object = new Object();
interval.id = setInterval(checkProgress, 100, mcLoader, this[imageName][imageHolder], interval);
[b]MovieClip.prototype.checkProgress = function(mcLoader:MovieClipLoader, image:MovieClip, interval:Object):Void {
var progress:Object = mcLoader.getProgress(this[imageName][imageHolder]);
if (progress.bytesLoaded == progress.bytesTotal) {
trace( "hello" );
this[imageName][imageHolder].lineTo(this[imageName][imageHolder]._width, this[imageName][imageHolder]._width);
if (maintainAspect == undefined || maintainAspect == false) {
this[imageName][imageHolder]._width = imageWidth;
this[imageName][imageHolder]._height = imageHeight;
}
clearInterval(interval.id);
}
};[/b]
};
// Example
imageMC("cool2", "Port3.swf", 200, 200);

Cheers Mates
Nick

How To Make This Addition To The XML Image Gallery?
Hi there.

I have searched the forums but obviously didn't find what i was looking for.

I am looking for a way to make a XML gallery like the one on this site, without the thumbnails.

What i need it to be able to do is to scroll/slide/move my pictures the distance of the following picture.

Example:

Lets say i have 5 pictures with identical width and height. Through a mask, 4 of them are visible. When i click my Next button i want the whole list of pictures to move a distance similar to the next picturse (the 5th pictures). That way the pictures 2 3 4 5 are visible and picture 1 is not.

Actually what i'm looking for is kinda like the Kirupa thumbnail scroller, just scrolling/sliding one picture at a time per click on the next button instead of a contionous scroll.

Does anyone know how to do that?

Any help is much appreciated.

I Wanna Make A Dynamic Image Gallery
Hi there,
I need to make a dynamic image gallery. there are about 300 images and creating mc for so many images will be very time consumable work.
Is there anyway i can do it thru action scripting. I am not good with it too, i can load dymanic txt, can i load images dynamically in movie clips and is there anyway to add on movie clips or images in the flash file without actually edditing the flash file, instead just adding files in the image folder.

Please guys help me with this.

Thank you.

How To Make Click-And-Drag Image Gallery Like This?
hi friends...

check these links... i wanna make such image viewer for my touchscreen phone, can some1 help...

http://www.tofmade.com/products/mini/
http://www.tofmade.com/products/touchslider/
http://www.tofmade.com/products/polaroidz/

i tried to decompile those .swf file, but i din get some source files, they are at server i think.. can some1 give me a similar flash code...

i want to make a flashlite app to view picz which can be viewed by dragging to see next pic...

please some1 help me....

i want either tat linkz full flash code or similar apps flash code...

thnx..

How To Make Image In Gallery Load Only When Needed?
I am trying to build a gallery of images in flash with a chooser menu in the first frame of the timeline and the graphics set up on the following frames of the same timeline. This involves buttons using code like:

on (release) {
gotoAndPlay (55);
}

The problem I run into is that when trying to access a graphic stored near the end of the timeline, flash tries to load all the images that are located before it on the timeline. This can really bog things down on slower bandwidths.
I really just want flash to load an image when it is asked for. Is there a way to make flash load only images visible on the screen?

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.

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....

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?

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!!

Using Only 1 Image, How Do You Make A Clear Image Blurry With Just A Script?
If I only had 1 image and 1 frame only. Using script, how would I make the image blurry when I publish it?

How do I make it blurry for any set amount of time I wanted.

How would I make it blur from one image to another.

I have seen this on several sites.

Make External Image Appear In Image Holder
Hi

I used a bit of code from one a link from someones sig a while back (think they had a kitten in their avatar) and you basically created a object which you could then use to load external images (but it worked with movies too) but I cant find it I thought I saved the scene I tried it on.

Any help would be great

Thanks alot

Image Gallery - Image Width
Hi,

I'm putting an image gallery together with all the pictures at the same _y. Here's my AS code:

a = 1;
pushOverX = 0;
var my_lv:LoadVars = new LoadVars();
my_lv.onLoad = function(success:Boolean) {
if (success) {
while (a<100) {
slider_mc.attachMovie("holder", "holder"+a, a, {_xushOverX, _y:0});
set("slider_mc.holder"+a+".load_var", eval("this.data"+a));
a = a+1;
pushOverX = pushOverX+100;
if (eval("this.data"+a) == undefined) {
break;
}
}
}
};
my_lv.load("load_in/image_data.txt");

All that works fine. However, I would like the images to be placed on the _x axis according to the width of each previous image instead of relying on pushOverX = pushOverX+100;

At the moment, an image is placed every 100px, but if an image is 50, I want the following one to be placed 50px after it and not fixed at every 100px.

Has anybody got an idea?

Thanks

Help- How To Load First Image From XML Image Gallery
Hi-
Help- I'd like to making the first image load onto movie. Attached is the code. Any hints would be awesome.

myPhoto = new XML();
myPhoto.ignoreWhite = true;
myPhoto.onLoad = function(success) {
//portfolioTag = this.firstChild;
numimages = this.firstChild.childNodes.length;
spacing = 70;
for (i=0; i<numimages; i++) {
picHolder = this.firstChild.childNodes[i];
thumbHolder = thumbnails.createEmptyMovieClip("thumbnail"+i, i);
thumbHolder._x = i*spacing;
thumbLoader = thumbholder.createEmptyMovieClip("thumbnail_image" , 0);
thumbLoader.loadMovie(picHolder.attributes.appthmb );
thumbHolder.app = picHolder.attributes.app;
thumbHolder.appdesc = picHolder.attributes.appdesc;
thumbHolder.appmain = picHolder.attributes.appmain;
thumbHolder.onRelease = function() {
loader.loadMovie(this.appmain);
app_txt.text = this.app;
appdesc_txt.text = this.appdesc;
};
}
};
myPhoto.load("appphoto.xml");

XML Image Gallery Image Resize
I just got through with the XML image gallery tutorial that Kirupa made. First of all, I would like to thank him for it -- a great tutorial.
I am in the process of modifying the tutorial file to suit my needs, and I have come across a problem:
There is an empty movie clip with the instance name "image" that controls where the images from the XML flie are showed in the SWF. The empty movie clip "node" or placeholder aligns itself to the top left-hand corner of the images file. For my gallery to funciton correctly, I need the node to be aligned to the center of the image files, so I can display pictures of different aspect ratios and alignments. I will try and post a file on the internet some time today to demonstrate this if I am unclear with my explination. Thanks in advance!

XML Image Gallery - Setting X,y Of Image Via XML?
I'm working on version of Kirupa's XML Image Gallery, only I want to be able to set the x,y coordinates individually for each image. How do I do this via the XML.

I'm trying this to no avail:
XML looks like this:

<pic>
<image x="0" y="0">001.jpg</image>
<caption>description line 1</caption>
<caption2>description line 2</caption2>
<caption3>description line 3</caption3>
</pic>

<pic>
<image x="100" y="200">002.jpg</image>
<caption>description line 1</caption>
<caption2>description line 2</caption2>
<caption3>description line 3</caption3>
</pic>

Actionscript looks like this:

function placeImage() {
var image_x:Number = Number(picture.attributes.x);
var image_y:Number = Number(picture.attributes.y);
}

Can anyone let me know what I'm doing wrong, what I'm missing?
Or how better to go about this?

Thanks!

Centering Image In The Xml Image Gallery...
did the tutorial on this site for an xml image gallery - it worked great... My question would be is there a way to accomodate for multiple image sizes that would allow the image displayed to be centered?

Thanks!

Image Sizing In Image Gallery
I have used the Kirupa xml flash photo gallery at this link (code below) http://www.kirupa.com/developer/mx20...togallery9.htm

i was wondering how do i change the code so that the pictures can be different sizes... and where would the new code fit in to what i have already got from the tutorial?

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) {
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;
}

thanks

cazwalks

Ultimate Scroller
Hi. I am looking for something exactly like theultimateScroller, but if it's free. This neat little widget goes for like $30 dollars and I just can't get myself to buy it. Anyone know where to get one for free?

Thanks

Ultimate Strangeness
ive got a strange problem.

there are 2 moveiclips, a spaceship, which stays in the middle of the screen, and a map, which moves about, so itsa form of sidescrolling game.
the movement is done using xeef's coding he sent me a while ago, which is below.
i have a shooting script too, but my intresting problem is, how do i make the bullets spawn INSIDE the map movieclip, so as to simulate realistic physics on them.
in other words, at the moment, bullets spawn, outside the map, and move regardless of anything else at a steady speed towards the edge of the screen, which isnt what they would realisticially do, what i need them to do, is when they spawn, spawn inside the map moveiclip, thus inheriting its movement.
there are likely to be a LOT of bullets flying around, i suppose it needs to be fairly non-processor-draining

my shooting script:

Code:
depth = 0;
speed = 5;
nose = 7;
blast = function () {
angle = _root.ship._rotation;
angle = angle*Math.PI/180;
++depth;
name = "pea"+depth;
this.attachMovie("pea", name, depth);
this[name]._x = ship._x+nose*Math.cos(angle);
this[name]._y = ship._y+nose*Math.sin(angle);
this[name].xmov = 0
this[name].ymov = 0
_root.es.sendMessage("public", "bang");
this[name].onEnterFrame = function() {
this._x += this.xmov;
this._y += this.ymov;
if (this._y>=660) {
this.removeMovieClip();
}
if (this._y<=0) {
this.removeMovieClip();
}
if (this._x<=0) {
this.removeMovieClip();
}
if (this._x>=800) {
this.removeMovieClip();
}
};
};
and the movement script

Code:

onClipEvent (load) {
TS = 0;
TV = 0;
MS = 0;
MV = 0;
}
onClipEvent (enterFrame) {
count++;
mcount++;
if (Key.isDown(88) && count>=delay && energy>=energycost) {
_parent.blast();
count = 0;
energy -= energycost;
}
if (Key.isDown(37)) {
this.TV -= rotspeed;
_parent.pausevar = 100;
} else {
_parent.pausevar = 10000;
_parent.moveupdate();
}
if (Key.isDown(39)) {
this.TV += rotspeed;
_parent.pausevar = 100;
if (_parent.stuff == "0") {
unloadMovie("_parent.map.base");
}
} else {
_parent.pausevar = 10000;
_parent.moveupdate();
}
if (Key.isDown(38)) {
this.TS += speed;
_parent.pausevar = 100;
} else {
_parent.pausevar = 10000;
_parent.moveupdate();
}
this._rotation = this.TV;
TX = Math.cos(this.TV*Math.PI/180);
TY = Math.sin(this.TV*Math.PI/180);
MX = Math.cos(this.MV*Math.PI/180);
MY = Math.sin(this.MV*Math.PI/180);
ResultX = this.TS*TX+this.MS*MX;
ResultY = this.TS*TY+this.MS*MY;
Result = Math.sqrt(ResultX*ResultX+ResultY*ResultY);
ResultA = Math.atan2(ResultY, ResultX)*180/Math.PI;
this.MS = Result;
this.MV = ResultA;
if (this.MS<-maxspeed) {
this.MS = -maxspeed;
}
if (this.MS>maxspeed) {
this.MS = maxspeed;
}
this.TS += -this.TS/5;
_parent.map._x -= this.MS*MX;
_parent.map._y -= this.MS*MY;
_parent.stars._x -= this.MS*MX/7;
_parent.stars._y -= this.MS*MY/7;
dx = this._parent.ship._x-this._parent.spaceShip._x;
dy = this._parent.ship._y-this._parent.spaceShip._y;
d = Math.sqrt(Math.pow(dx, 2)+Math.pow(dy, 2));
if (d<this._parent.ship.r+this._parent.spaceShip.r) {
this._parent.ship.MV = 0;
}

}
help would be nice, and ill probbaly stick you on the credits, alonmg with xeef, of course, cos im sick and tired oftrying to solve this, ive been at it for 3 days -.-

Is There An Ultimate Preloader?
I have a site I am designing, that uses frame labels for each button

throught out the frames there is XML text being loaded in and various instances of the loader component.

Is ther a way to load everything in all at once from the preload scene????

Hmmmmm
anyone know

The Ultimate Scaler
I suddenly need to create a second version of a almost finished site,
that is very bitmap heavy, which will be scaled down to 75% approx of orginal flash site 8 size.
Experements with publishing at this size from flash have been of poor quality. Is there a miracle program or extention or anything anyone is aware of. The client would like to have a version for older 800x600 rez computers.

thanks

If Ever There Was An Ultimate Noob Question...
Okay totally noob question, does MC stand for Movie Clip???? ;D lol

Ultimate Dumb Question
Hey! I just figured out how to create movies on FLASH. OK.. Now, what I'm trying to do is simply create a page that says coming soon........(simple) I chose black as my background color, and when I typed in my text, It types it on a white BG. ??? How the hell can I get the just the letters to show up on top of the black BG color???

Ultimate Inertia Math....
Well That idea probably grabs your attention as much as the idea does for me. I am making a menu system and am wanting to have my MC's ease in and out with the movement and transparency. Below is the code I have now that is working a treat but it is very linear in motion. Can any of you Math/AS guru's out there give me an indication of what you would consider the ultimate ease in and ease out math function for it. I know what I have got below works quite well but if ou have any better ideas to write it I am all ears.

// sets the initial state of ButtonOver and ButtonClicked to false

var ButtonOver = false;

var ButtonClicked = false;

//

// Sets the bounds for the fade and the slide

var SlideHome = buttonText._y;

var SlideMax = 25;

var SlideSpeedDown = 10;

var SlideSpeedUp = SlideSpeedDown/2;

var FadeMin = 0;

var FadeMax = 100;

var FadeSpeedIn = 5;

var FadeSpeedOut = FadeSpeedIn*2;

//

// Sets the initial visability of the TextMaroon and the buttonHit area

setProperty("TextMaroon", _alpha, FadeMin);

setProperty("buttonHit", _alpha, FadeMin);

//
onClipEvent (enterFrame) {

//

// This is where all the fading and sliding is going on.

if (ButtonOver == true) {

if (TextMaroon._alpha < FadeMax) {

TextMaroon._alpha += FadeSpeedIn;

}

if (buttonText._y < SlideMax) {

buttonText._y += SlideSpeedDown;

}

}

if (ButtonOver == false) {

if (TextMaroon._alpha > FadeMin) {

TextMaroon._alpha -= FadeSpeedOut;

}

if (buttonText._y > SlideHome) {

buttonText._y -= SlideSpeedUp;

}

}

if (ButtonClicked == true) {

_parent._parent.Button.gotoAndStop(Clicked);

;

}

}