XML Categories And An Infinite Gallery Problems: Source Files And KITTENS
Hi all, I'm new, obviously, and unfortunately I need to make my entrance by asking a question since I am quite stumped. I saw the resizing image gallery thread, and found it amazingly helpful. Here is the thing: I am trying to make a gallery that loads from an XML file that has 5 categories of pictures (much like the 'V3 with thumbs scrolled' version that was posted). However, I am trying to make the menu an infinite instead of a scroll. Obviously, since each category of images has a different length, the infinite menu needs to reload each time and be of a different length. I thought I had done this correctly, but apparently not. Because it just sits there. Oh, and I've switched out all the pictures for pictures of kittens. Just because. Any help would be highly appreciated! Here is the link to the zip file
KirupaForum > Flash > Flash 8 (and earlier) > Flash MX 2004
Posted on: 11-06-2005, 07:01 PM
View Complete Forum Thread with Replies
See Related Forum Messages: Follow the Links Below to View Complete Thread
XML-gallery With Categories...
Hello!
I'm trying to create an xml/flash video gallery...
this is what my XML-code looks like:
Code:
<?xml version="1.0" encoding="UTF-8"?>
<images>
<category name="Humor">
<pic>
<title>HAHA</title>
<desc>Fun...</desc>
<URL></URL>
<thumb>thumbs 04.jpg</thumb>
</pic>
<pic>
<title>HIHIHOHO</title>
<desc>lalala...</desc>
<URL></URL>
<thumb>thumbs 03.jpg</thumb>
</pic>
</category>
<category name="Music videos">
<pic>
<title>Jack Johnson</title>
<desc>Times like theese</desc>
<URL></URL>
<thumb>thumbs 02.jpg</thumb>
</pic>
<pic>
<title>Jack Johnson</title>
<desc>Times like that other time...</desc>
<URL></URL>
<thumb>thumbs 01.jpg</thumb>
</pic>
</category>
</images>
Now, here's my question...How do I trace the different values, such as category, title and so on....
Thanks
AS3 XML Gallery With Categories?
Hey,
Ok, so I know there are a ton of AS 3.0/XML Gallery tuts out there, but what I just can't find is one that has multiple categories/galleries. I wrote a PHP script that writes an XML file from the the directory of images, in which the XML looks like this:
Code:
<Galleries>
<gallery id=GraphicDesign>
<image>
<largeImg>Images/GraphicDesign/sample1.jpg</largeImg>
<thumbImg>Images/GraphicDesign/thumbImgs/sample1.jpg</thumbImg>
</image>
</gallery>
<gallery id=3Dimages>
<image>
<largeImg>Images/3Dimages/sample1.jpg</largeImg>
<thumbImg>Images/3Dimages/thumbImgs/sample1.jpg</thumbImg>
</image>
</gallery>
<gallery id=WebImages>
<image>
<largeImg>Images/WebImages/sample1.jpg</largeImg>
<thumbImg>Images/WebImages/thumbImgs/sample1.jpg</thumbImg>
</image>
</gallery>
</Galleries>
So basically each gallery node is a folder in the images directory and they will each be a category in the flash gallery. I can't find a flash tut anywhere to teach me how to do that. Only ones that have only one gallery with all the images in. And most of those are coded in the timeline. I've been trying to get it right for weeks, but I'm pretty new to AS (and coding in general) so I'm really bumping my head. Any help or a link to a tutorial would be awesome.
I can't figure out how to use the XML to make a Gallery object that will load all the relevant images and thumbs in that gallery when it is clicked. I can pull off the single gallery vibe, but this multiple gallery stuff is really stumping me.
This is where I am at the moment (it's written in the timeline at the moment, but I will be using classes):
Code:
var loader:URLLoader = new URLLoader();
var fileReq:URLRequest = new URLRequest("galleries.xml");
loader.addEventListener(Event.COMPLETE, xmlLoaded);
loader.load(fileReq);
var xml:XML;
var galleriesXML:XMLList;
var galleries:Array;
function xmlLoaded(event:Event):void
{
galleries = [];
var loader:URLLoader = event.target as URLLoader;
xml = new XML(loader.data);
galleriesXML = new XMLList(xml.child("gallery"))
var numGalleries:uint = galleriesXML.length();
var image:XML;
for (var i:uint = 0; i < numGalleries; i++)
{
image = galleriesXML[i] as XML;
galleries.push( image.@id + image.child("image").child("large") + image.child("image").child("thumb").toString());
}
trace(galleries);
}
The trace outputs:
Code:
Wedding
<large>Wedding/1.jpg</large>
<large>Wedding/2.jpg</large>
<large>Wedding/3.jpg</large>
<large>Wedding/4.jpg</large><thumb>Wedding/thumbs/1.jpg</thumb>
<thumb>Wedding/thumbs/2.jpg</thumb>
<thumb>Wedding/thumbs/3.jpg</thumb>
<thumb>Wedding/thumbs/4.jpg</thumb>,design
<large>design/1.jpg</large>
<large>design/2.jpg</large>
<large>design/3.jpg</large>
<large>design/4.jpg</large><thumb>design/thumbs/1.jpg</thumb>
<thumb>design/thumbs/2.jpg</thumb>
<thumb>design/thumbs/3.jpg</thumb>
<thumb>design/thumbs/4.jpg</thumb>,3D
<large>3D/1.jpg</large><thumb>3D/thumbs/1.jpg</thumb>,FOUR
<large>FOUR/1.jpg</large><thumb>FOUR/thumbs/1.jpg</thumb>
So each 'Gallery' is a string in the galleries array, but I don't really know what to do with that now. I think I'm actually way off base here so some pointers will really be appreciated.
Thanks and enjoy your Christmas tomorrow.
Shane
AS3 XML Gallery With Categories?
Hey,
Ok, so I know there are a ton of AS 3.0/XML Gallery tuts out there, but what I just can't find is one that has multiple categories/galleries. I wrote a PHP script that writes an XML file from the the directory of images, in which the XML looks like this:
Code:
<Galleries>
<gallery id=GraphicDesign>
<image>
<largeImg>Images/GraphicDesign/sample1.jpg</largeImg>
<thumbImg>Images/GraphicDesign/thumbImgs/sample1.jpg</thumbImg>
</image>
</gallery>
<gallery id=3Dimages>
<image>
<largeImg>Images/3Dimages/sample1.jpg</largeImg>
<thumbImg>Images/3Dimages/thumbImgs/sample1.jpg</thumbImg>
</image>
</gallery>
<gallery id=WebImages>
<image>
<largeImg>Images/WebImages/sample1.jpg</largeImg>
<thumbImg>Images/WebImages/thumbImgs/sample1.jpg</thumbImg>
</image>
</gallery>
</Galleries>
So basically each gallery node is a folder in the images directory and they will each be a category in the flash gallery. I can't find a flash tut anywhere to teach me how to do that. Only ones that have only one gallery with all the images in. And most of those are coded in the timeline. I've been trying to get it right for weeks, but I'm pretty new to AS (and coding in general) so I'm really bumping my head. Any help or a link to a tutorial would be awesome.
I can't figure out how to use the XML to make a Gallery object that will load all the relevant images and thumbs in that gallery when it is clicked. I can pull off the single gallery vibe, but this multiple gallery stuff is really stumping me.
This is where I am at the moment (it's written in the timeline at the moment, but I will be using classes):
Code:
var loader:URLLoader = new URLLoader();
var fileReq:URLRequest = new URLRequest("galleries.xml");
loader.addEventListener(Event.COMPLETE, xmlLoaded);
loader.load(fileReq);
var xml:XML;
var galleriesXML:XMLList;
var galleries:Array;
function xmlLoaded(event:Event):void
{
galleries = [];
var loader:URLLoader = event.target as URLLoader;
xml = new XML(loader.data);
galleriesXML = new XMLList(xml.child("gallery"))
var numGalleries:uint = galleriesXML.length();
var image:XML;
for (var i:uint = 0; i < numGalleries; i++)
{
image = galleriesXML[i] as XML;
galleries.push( image.@id + image.child("image").child("large") + image.child("image").child("thumb").toString());
}
trace(galleries);
}
The trace outputs:
Code:
Wedding
<large>Wedding/1.jpg</large>
<large>Wedding/2.jpg</large>
<large>Wedding/3.jpg</large>
<large>Wedding/4.jpg</large><thumb>Wedding/thumbs/1.jpg</thumb>
<thumb>Wedding/thumbs/2.jpg</thumb>
<thumb>Wedding/thumbs/3.jpg</thumb>
<thumb>Wedding/thumbs/4.jpg</thumb>,design
<large>design/1.jpg</large>
<large>design/2.jpg</large>
<large>design/3.jpg</large>
<large>design/4.jpg</large><thumb>design/thumbs/1.jpg</thumb>
<thumb>design/thumbs/2.jpg</thumb>
<thumb>design/thumbs/3.jpg</thumb>
<thumb>design/thumbs/4.jpg</thumb>,3D
<large>3D/1.jpg</large>3D/thumbs/1.jpg,FOUR
<large>FOUR/1.jpg</large>FOUR/thumbs/1.jpg
So each 'Gallery' is a string in the galleries array, but I don't really know what to do with that now. I think I'm actually way off base here so some pointers will really be appreciated.
Thanks and enjoy your Christmas tomorrow.
Shane
Categories Ina Photo Gallery? Is It Possible?
What I mean is by having my photo gallery and beneath it my arrows and also arrows. Arrows which tell the photo gallery to load a certain category of photos.
any ideas?
Thanx SpitwolF
Categories Ina Photo Gallery? Is It Possible?
What I mean is by having my photo gallery and beneath it my arrows and also arrows. Arrows which tell the photo gallery to load a certain category of photos.
any ideas?
Thanx SpitwolF
Flash/XML Photo Gallery > Categories
(x-posted in Flash Actionscript)
Hello everyone,
First of all, thank goodness for this website and all the helpful tutorials. I never expected to get this far!
I'm using a combination of the Photo Gallery using XML and Flash (with thumbnails and a simple PHP gallery script called Gallery Thingie. So far, I've got the XML file's image data working with the Flash movie. However, Gallery Thingie also has a feature allowing the creation (and deletion) of image categories. How can I use this feature with the flash gallery?
So far I've added some buttons that would switch between categories, but they don't do much yet since I'm not sure how to say "when this category variable is present, display only thumbnails with that variable." Download the flash file (and others) from the link below.
Code:
ActionScript Code:
/*Code for loading XML file. */
function loadXML(loaded) {
if (loaded) {
/* "xmlNode" is just a faster way of saying "this.firstChild". */
xmlNode = this.firstChild;
image = [];
head = [];
description = [];
thumbnails = [];
category = [];
cat = xmlNode.childNodes[0].firstChild.attributes.cid
/* Finds total number of child nodes (images w/captions to be displayed, in this case). */
total = xmlNode.childNodes[1].childNodes.length;
/* Extracts data from each child node, stopping when the total (defined above) is reached. */
for (i=0; i<total; i++) {
image[i] = "images/"+xmlNode.childNodes[1].childNodes[i].childNodes[0].firstChild.nodeValue;
head[i] = xmlNode.childNodes[1].childNodes[i].childNodes[1].firstChild.nodeValue;
description[i] = xmlNode.childNodes[1].childNodes[i].childNodes[2].firstChild.nodeValue;
category[i] = xmlNode.childNodes[1].childNodes[i].childNodes[3].firstChild.nodeValue;
thumbnails[i] = "images/th_"+xmlNode.childNodes[1].childNodes[i].childNodes[0].firstChild.nodeValue;
thumbnails_fn(i);
}
firstImage();
cat = 0;
} else {
content = "file not loaded!";
}
}
xmlData = new XML();
xmlData.ignoreWhite = true;
xmlData.onLoad = loadXML;
xmlData.load("gt-data.xml");
/////////////////////////////////////
/* Lets the user scroll through with left and right arrow keys. */
listen = new Object();
listen.onKeyDown = function() {
if (Key.getCode() == Key.LEFT) {
prevImage();
} else if (Key.getCode() == Key.RIGHT) {
nextImage();
}
};
Key.addListener(listen);
/* Note the references to button instances previous_btn and next_btn here.*/
previous_btn.onRelease = function() {
prevImage();
};
next_btn.onRelease = function() {
nextImage();
};
/////////////////////////////////////
/* The movie begins, naturally, at the beginning--in XML, that's zero! */
p = 0;
/* Preloader for images. */
this.onEnterFrame = function() {
filesize = picture.getBytesTotal();
loaded = picture.getBytesLoaded();
preloader._visible = true;
if (loaded != filesize) {
preloader._visible = true;
} else {
/* Makes preloader invisible once the image starts to fade in. */
preloader._visible = false;
/* Fade in the image. (If the alpha is under 100, add 10.) */
if (picture._alpha<100) {
picture._alpha += 10;
}
}
};
/* Load & display the next image. It cleverly calculates whether you are at the end of the
images or not. If you are, the script doesn't run.*/
function nextImage() {
/* If it's less than the total (the last image), let's go ahead and load the next image. */
if (p<(total-1)) {
p++;
if (loaded == filesize) {
/* If it is loaded, set alpha to zero, so that the preloader can fade it in! */
picture._alpha = 0;
/* Put the image where it is supposed to go. */
picture.loadMovie(image[p], 1);
/* Load description into text box "desc_txt" */
desc_txt.text = description[p];
head_txt.text = head[p];
/* Activates the function down below, telling you what number picture you're viewing. */
picture_num();
}
}
}
/* Basically the same as nextImage(), but backwards. Fading and image/text insertion is the same. */
function prevImage() {
if (p>0) {
p--;
picture._alpha = 0;
picture.loadMovie(image[p], 1);
desc_txt.text = description[p];
head_txt.text = head[p];
picture_num();
}
}
/* Automatically show the first image when the movie is loaded, fade-in and all. */
function firstImage() {
if (loaded == filesize) {
picture._alpha = 0;
/* Use image[0] instead of image[p] since this only applies to the first image. */
picture.loadMovie(image[0], 1);
desc_txt.text = description[0];
head_txt.text = head[0];
picture_num();
}
}
/* Thumbnail list. */
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+(target_mc._width+5)*k;
target_mc.pictureValue = k;
target_mc.onRelease = function() {
p = this.pictureValue-1;
nextImage();
};
target_mc._alpha = 50;
target_mc.onRollOver = function() {
this._alpha = 100;
thumbNailScroller();
};
target_mc.onRollOut = function() {
this._alpha = 50;
};
};
image_mcl = new MovieClipLoader();
image_mcl.addListener(tlistener);
image_mcl.loadClip(thumbnails[k], "thumbnail_mc.t"+k);
}
function thumbNailScroller() {
// thumbnail code!
this.createEmptyMovieClip("tscroller", 1000);
scroll_speed = 10;
tscroller.onEnterFrame = function() {
if ((_root._ymouse>=thumbnail_mc._y) && (_root._ymouse<=thumbnail_mc._y+thumbnail_mc._height)) {
if ((_root._xmouse>=(hit_right._x-40)) && (thumbnail_mc.hitTest(hit_right))) {
thumbnail_mc._x -= scroll_speed;
} else if ((_root._xmouse<=40) && (thumbnail_mc.hitTest(hit_left))) {
thumbnail_mc._x += scroll_speed;
}
} else {
delete tscroller.onEnterFrame;
}
};
}
/* Displays current position and total number of pictures. */
function picture_num() {
current_pos = p+1;
pos_txt.text = current_pos+" / "+total;
}
Code for XML:
Code:
<?xml version="1.0" encoding="ISO-8859-1"?>
<gallery>
<categories>
<category cid="0">Monkeys</category>
<category cid="1">Sample</category>
</categories>
<images>
<image id="0">
<file>image1.jpg</file>
<title>Pig Tailed Something</title>
<description>This is really easy.</description>
<imgcategory>0</imgcategory>
</image>
<image id="1">
<file>image2.jpg</file>
<title>Wooly Monkey</title>
<description>Here's another!</description>
<imgcategory>0</imgcategory>
</image>
<image id="2">
<file>image3.jpg</file>
<title>Photo</title>
<description>Something by Peter Laytin.</description>
<imgcategory>1</imgcategory>
</image>
</images>
</gallery>
I'd appreciate any help I can get!
XML Photo Gallery With Thumbnails (Now Need Categories)
First post all.
Just wanted to say these are some really great tutorials. I'm in the midst of making a personal website and have really hit the grindstone designing a photo gallery. With the help of the tutorials I was able to create the gallery with thumbnails drawing from an XML file.
Now, before I go any further I would really like to know how to add onto this by giving it some categories. SO when a person selects the text (or button), the pictures switch to the appropriate category.
It doesn't help that Actionscript and me go together like Oil and water...so any help would be greatly appreciated!
Thanks!
Photo Gallery With Thumbs And Categories
Hello everyone, Im new to gotoAndLearn and I must say this site is awsome for new flash users. Well...Ive been using flash for some time but havent fully learned actionscript, and am still somewhat "green" to the whole thing. In the process now of building a site and looking towards a photo gallery. During my search on google I came across this very sleek xml gallery on a template site. You can have a look here.....
Ive also come across some others on here and Kirupa and Flashkit but all I find are slide shows, which is great but I cant seem to find any tutorial or direction on building one like I have posted. So basically Im looking for any tutorial or some direction on a gallery with thumbnails and categories a user can select from. Perhaps someone may know of an example I can look at?
Any help is greatly appreciated and I look forward to learning alot about actionscript and Flash on here and hopefully help out as much as I can.
Kirupa's Flash/XML Photo Gallery > Categories?
Hello everyone,
I'm using a combination of the Photo Gallery using XML and Flash (with thumbnails and a simple PHP gallery script called Gallery Thingie. So far, I've got the XML file's image data working with the Flash movie. However, Gallery Thingie also has a feature allowing the creation (and deletion) of image categories. How can I use this feature with the flash gallery?
So far I've added some buttons that would switch between categories, but they don't do much yet since I'm not sure how to say "when this category variable is present, display only thumbnails with that variable." Download the flash file (and others) from the link below.
ActionScript Code:
/*Code for loading XML file. */
function loadXML(loaded) {
if (loaded) {
/* "xmlNode" is just a faster way of saying "this.firstChild". */
xmlNode = this.firstChild;
image = [];
head = [];
description = [];
thumbnails = [];
category = [];
cat = xmlNode.childNodes[0].firstChild.attributes.cid
/* Finds total number of child nodes (images w/captions to be displayed, in this case). */
total = xmlNode.childNodes[1].childNodes.length;
/* Extracts data from each child node, stopping when the total (defined above) is reached. */
for (i=0; i<total; i++) {
image[i] = "images/"+xmlNode.childNodes[1].childNodes[i].childNodes[0].firstChild.nodeValue;
head[i] = xmlNode.childNodes[1].childNodes[i].childNodes[1].firstChild.nodeValue;
description[i] = xmlNode.childNodes[1].childNodes[i].childNodes[2].firstChild.nodeValue;
category[i] = xmlNode.childNodes[1].childNodes[i].childNodes[3].firstChild.nodeValue;
thumbnails[i] = "images/th_"+xmlNode.childNodes[1].childNodes[i].childNodes[0].firstChild.nodeValue;
thumbnails_fn(i);
}
firstImage();
cat = 0;
} else {
content = "file not loaded!";
}
}
xmlData = new XML();
xmlData.ignoreWhite = true;
xmlData.onLoad = loadXML;
xmlData.load("gt-data.xml");
/////////////////////////////////////
/* Lets the user scroll through with left and right arrow keys. */
listen = new Object();
listen.onKeyDown = function() {
if (Key.getCode() == Key.LEFT) {
prevImage();
} else if (Key.getCode() == Key.RIGHT) {
nextImage();
}
};
Key.addListener(listen);
/* Note the references to button instances previous_btn and next_btn here.*/
previous_btn.onRelease = function() {
prevImage();
};
next_btn.onRelease = function() {
nextImage();
};
/////////////////////////////////////
/* The movie begins, naturally, at the beginning--in XML, that's zero! */
p = 0;
/* Preloader for images. */
this.onEnterFrame = function() {
filesize = picture.getBytesTotal();
loaded = picture.getBytesLoaded();
preloader._visible = true;
if (loaded != filesize) {
preloader._visible = true;
} else {
/* Makes preloader invisible once the image starts to fade in. */
preloader._visible = false;
/* Fade in the image. (If the alpha is under 100, add 10.) */
if (picture._alpha<100) {
picture._alpha += 10;
}
}
};
/* Load & display the next image. It cleverly calculates whether you are at the end of the
images or not. If you are, the script doesn't run.*/
function nextImage() {
/* If it's less than the total (the last image), let's go ahead and load the next image. */
if (p<(total-1)) {
p++;
if (loaded == filesize) {
/* If it is loaded, set alpha to zero, so that the preloader can fade it in! */
picture._alpha = 0;
/* Put the image where it is supposed to go. */
picture.loadMovie(image[p], 1);
/* Load description into text box "desc_txt" */
desc_txt.text = description[p];
head_txt.text = head[p];
/* Activates the function down below, telling you what number picture you're viewing. */
picture_num();
}
}
}
/* Basically the same as nextImage(), but backwards. Fading and image/text insertion is the same. */
function prevImage() {
if (p>0) {
p--;
picture._alpha = 0;
picture.loadMovie(image[p], 1);
desc_txt.text = description[p];
head_txt.text = head[p];
picture_num();
}
}
/* Automatically show the first image when the movie is loaded, fade-in and all. */
function firstImage() {
if (loaded == filesize) {
picture._alpha = 0;
/* Use image[0] instead of image[p] since this only applies to the first image. */
picture.loadMovie(image[0], 1);
desc_txt.text = description[0];
head_txt.text = head[0];
picture_num();
}
}
/* Thumbnail list. */
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+(target_mc._width+5)*k;
target_mc.pictureValue = k;
target_mc.onRelease = function() {
p = this.pictureValue-1;
nextImage();
};
target_mc._alpha = 50;
target_mc.onRollOver = function() {
this._alpha = 100;
thumbNailScroller();
};
target_mc.onRollOut = function() {
this._alpha = 50;
};
};
image_mcl = new MovieClipLoader();
image_mcl.addListener(tlistener);
image_mcl.loadClip(thumbnails[k], "thumbnail_mc.t"+k);
}
function thumbNailScroller() {
// thumbnail code!
this.createEmptyMovieClip("tscroller", 1000);
scroll_speed = 10;
tscroller.onEnterFrame = function() {
if ((_root._ymouse>=thumbnail_mc._y) && (_root._ymouse<=thumbnail_mc._y+thumbnail_mc._height)) {
if ((_root._xmouse>=(hit_right._x-40)) && (thumbnail_mc.hitTest(hit_right))) {
thumbnail_mc._x -= scroll_speed;
} else if ((_root._xmouse<=40) && (thumbnail_mc.hitTest(hit_left))) {
thumbnail_mc._x += scroll_speed;
}
} else {
delete tscroller.onEnterFrame;
}
};
}
/* Displays current position and total number of pictures. */
function picture_num() {
current_pos = p+1;
pos_txt.text = current_pos+" / "+total;
}
Code for XML:
Code:
<?xml version="1.0" encoding="ISO-8859-1"?>
<gallery>
<categories>
<category cid="0">Monkeys</category>
<category cid="1">Sample</category>
</categories>
<images>
<image id="0">
<file>image1.jpg</file>
<title>Pig Tailed Something</title>
<description>This is really easy.</description>
<imgcategory>0</imgcategory>
</image>
<image id="1">
<file>image2.jpg</file>
<title>Wooly Monkey</title>
<description>Here's another!</description>
<imgcategory>0</imgcategory>
</image>
<image id="2">
<file>image3.jpg</file>
<title>Photo</title>
<description>Something by Peter Laytin.</description>
<imgcategory>1</imgcategory>
</image>
</images>
</gallery>
I'd appreciate any help I can get!
Add Pages To Categories In V3 Muliti Dynamic Gallery
Hi,
I think I have seen this question answered but I can't find the thread.
If someone can give me a link to this or a tut on how I can get this done that would be great.
In the meantime what I am trying to do is:
I have 5 categories.
Each category holds 10 images
If the category has 15 images how do I add a page to that category
Thanks,
ponyack
Help Needed Getting XML Photo Gallery Categories Working
Hi, I searched through the forum and haven't really found a clear cut answer as to how to get categories working with the kirupa xml photo gallery. I read on one of the posts that I should make a "multi-dimensional array" that sorts through the XML file when certain buttons are clicked. I just don't really understand how to go about doing this. I "get" how to setup the XML file for this type of thing, but when it comes to working with the array and possibly removing the thumbnails and larger image off the stage and then reinitializing the loadXML function, I can't seem to figure out how to go about doing it. I've been searching the web to no avail for this same answer. I'd greatly appreciate any help I could get on this issue. Thank you.
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.
Xml-Gallery 'multi Categories', Cant Remove-reload Thumbs
Hi, im desperated, its 4 days im in troumble
Basicly im tempting to modify a xml gallery with just 1 category in a "2 or more" (multi) Category the same xml gallery
First thing i've added at the Xml a node (splitted in 2 categories)
At frame 9 is the Xml loading, where i let load the first category (0) :
//******************* frame "load xml" (9) *******************************
var imgArray:Array = new Array();
var myImages:XML = new XML();
myImages.ignoreWhite = true;
//
function loadGallery(whichGallery) {
rootNode = myImages.firstChild.childNodes[whichGallery].childNodes;
var totalMenu:Number = rootNode.length;
// Informazioni da nodo "set"
s_thumbWidth = int(rootNode[0].attributes.thumbWidth);
s_thumbHeight = int(rootNode[0].attributes.thumbHeight);
s_pausecountdown = int(rootNode[0].attributes.pauseCountdown);
s_slideSpeed = rootNode[0].attributes.slideSpeed;
s_autoStart = rootNode[0].attributes.autoStart;
s_imageScale = rootNode[0].attributes.scaleImageToFit;
// Le immagini
imgArray = new Array();
for (i=1; i<totalMenu; i++) {
m_big = rootNode[i].childNodes[1].firstChild.nodeValue;
m_small = rootNode[i].childNodes[2].firstChild.nodeValue;
m_title = rootNode[i].childNodes[0].firstChild.nodeValue;
m_desc = rootNode[i].childNodes[3].firstChild.nodeValue;
imgArray.push([m_big, m_small, m_title, m_desc]);
}
gotoAndStop("done");
}
//
myImages.onLoad = function(success) {
loadGallery(0); // first category
};
myImages.load("_xml/gal1.xml");
//************************************************** *****************
After, at frame "done" (17) the restant function to create thumbs, navigation etc. and 2 test buttons to "switch" the 2 categories
Here the actionscript with (i think) more important parts (all should be too long)
//******************* frame "done" (17) *******************************
// start
.............. cont .................
//
var root:MovieClip = this;
var totalItems:Number = imgArray.length;
var autoStart:String = s_autoStart;
var imageScale:String = s_imageScale;
var mvSec:Number = s_slideSpeed;
var mvEase:Object = mx.transitions.easing.Regular.easeOut;
var totalRounds:Number = 5*1000/50;
var timerInc:Number = 100/totalRounds;
var leftrightgap:Number = 100;
var gapinmyCP:Number = 6;
var curImage:Number = 0;
//
.............. cont .................
//
var image:MovieClip = root.createEmptyMovieClip("image", root.getNextHighestDepth());
var imageHolder:MovieClip = image.createEmptyMovieClip("imageHolder", image.getNextHighestDepth());
var imageHolderDone:MovieClip = image.createEmptyMovieClip("imageHolderDone", image.getNextHighestDepth());
var mainpre:MovieClip = root.attachMovie("pre", "mainpre", root.getNextHighestDepth());
trace("mainpre: "+mainpre);
var buttons:MovieClip = root.myCP.t_hol.createEmptyMovieClip("buttons", root.myCP.t_hol.getNextHighestDepth());
var mask:MovieClip = root.myCP.t_hol.attachMovie("mask", "t_mask", root.myCP.t_hol.getNextHighestDepth());
mask.cacheAsBitmap = true;
buttons.cacheAsBitmap = true;
buttons.setMask(mask);
root.myCP.swapDepths(root.getNextHighestDepth());
root.myInfo.swapDepths(root.getNextHighestDepth()) ;
root.lil_img.swapDepths(root.getNextHighestDepth() );
root.imageHolder._alpha = 0;
root.imageHolderDone._alpha = 0;
//
root.lil_img.t_img._x = root.lil_img.t_msk._x=5;
root.lil_img.t_img._y = root.lil_img.t_msk._y=5;
root.lil_img.t_msk._width = root.s_thumbWidth;
root.lil_img.t_msk._height = root.s_thumbHeight;
root.lil_img.t_bg._width = root.s_thumbWidth+9;
root.lil_img.t_bg._height = root.s_thumbHeight+10;
root.lil_img.t_pointer._y = root.lil_img.t_bg._y+root.lil_img.t_bg._height;
root.lil_img.t_pointer._x = root.s_thumbWidth/2;
root.lil_img._alpha = 0;
//
for (i=0; i<totalItems; i++) {
var th:MovieClip = root.lil_img.t_img.createEmptyMovieClip("t"+i, root.lil_img.t_img.getNextHighestDepth());
var img:MovieClip = th.createEmptyMovieClip("img", th.getNextHighestDepth());
var pre:MovieClip = th.attachMovie("pre", "pre", th.getNextHighestDepth());
//img.loadMovie(root.imgArray[i][1]);
//trace(img);
myLoader.loadClip(root.imgArray[i][1], img);
th._x = (root.s_thumbWidth+5)*i;
pre._x = (root.s_thumbWidth+5)/2;
pre._y = (th._y+root.s_thumbHeight)/2;
pre._alpha = 0;
//
var b:MovieClip = buttons.attachMovie("button", "b"+i, buttons.getNextHighestDepth());
if (i<9) {
b.txt.text = "0"+(i+1);
} else {
b.txt.text = i+1;
}
b._x = (b._width+gapinmyCP)*i;
b.no = i;
b.onRollOver = rollIn;
b.onRollOut = b.onReleaseOutside=rollOt;
b.onRelease = showImage;
}
root.totalbtnwidth = b._x+b._width;
root.myCP.t_hol.attachMovie("inv", "buttonsbg", buttons.getNextHighestDepth());
root.myCP.t_hol.buttonsbg.onRollOver = moveLilImg;
root.myCP.t_hol.buttonsbg._y -= root.myCP.t_hol._y-root.myCP.t_bg11._height;
root.myCP.t_hol.buttonsbg._height = root.myCP.t_bg._height;
root.myCP.t_hol.buttonsbg._width = root.totalbtnwidth;
root.myCP.t_hol.buttonsbg._alpha = 0;
//
showImage(root.curImage);
listner.onResize();
// end
//************************************************** *****************
"switching" with 2 buttons
//************************************************** *****************
root.bottone_cat_1.onRelease = function() {
loadGallery(0);
showImage(0);
};
root.bottone_cat_2.onRelease = function() {
loadGallery(1);
showImage(0);
};
//************************************************** *****************
The problem is that the "switching" by categories from the xml data works, but the thumbnails still the first loaded at the start
I tryied to make some function with delete, unloadMovie(), removeMovieClip() .. to, when there is the categories-change , remove the old thumbs and recreate the news one, but...nothing ... its 4 days im trying ...
Xml-Gallery 'multi Categories', Cant Remove-reload Thumbs
Hi, im desperated, its 4 days im in troumble
Basicly im tempting to modify a xml gallery with just 1 category in a "2 or more" (multi) Category the same xml gallery
First thing i've added at the Xml a node (splitted in 2 categories)
At frame 9 is the Xml loading, where i let load the first category (0) :
//******************* frame "load xml" (9) *******************************
var imgArray:Array = new Array();
var myImages:XML = new XML();
myImages.ignoreWhite = true;
//
function loadGallery(whichGallery) {
rootNode = myImages.firstChild.childNodes[whichGallery].childNodes;
var totalMenu:Number = rootNode.length;
// Informazioni da nodo "set"
s_thumbWidth = int(rootNode[0].attributes.thumbWidth);
s_thumbHeight = int(rootNode[0].attributes.thumbHeight);
s_pausecountdown = int(rootNode[0].attributes.pauseCountdown);
s_slideSpeed = rootNode[0].attributes.slideSpeed;
s_autoStart = rootNode[0].attributes.autoStart;
s_imageScale = rootNode[0].attributes.scaleImageToFit;
// Le immagini
imgArray = new Array();
for (i=1; i<totalMenu; i++) {
m_big = rootNode[i].childNodes[1].firstChild.nodeValue;
m_small = rootNode[i].childNodes[2].firstChild.nodeValue;
m_title = rootNode[i].childNodes[0].firstChild.nodeValue;
m_desc = rootNode[i].childNodes[3].firstChild.nodeValue;
imgArray.push([m_big, m_small, m_title, m_desc]);
}
gotoAndStop("done");
}
//
myImages.onLoad = function(success) {
loadGallery(0); // first category
};
myImages.load("_xml/gal1.xml");
//************************************************** *****************
After, at frame "done" (17) the restant function to create thumbs, navigation etc. and 2 test buttons to "switch" the 2 categories
Here the actionscript with (i think) more important parts (all should be too long)
//******************* frame "done" (17) *******************************
// start
.............. cont .................
//
var root:MovieClip = this;
var totalItems:Number = imgArray.length;
var autoStart:String = s_autoStart;
var imageScale:String = s_imageScale;
var mvSec:Number = s_slideSpeed;
var mvEase:Object = mx.transitions.easing.Regular.easeOut;
var totalRounds:Number = 5*1000/50;
var timerInc:Number = 100/totalRounds;
var leftrightgap:Number = 100;
var gapinmyCP:Number = 6;
var curImage:Number = 0;
//
.............. cont .................
//
var image:MovieClip = root.createEmptyMovieClip("image", root.getNextHighestDepth());
var imageHolder:MovieClip = image.createEmptyMovieClip("imageHolder", image.getNextHighestDepth());
var imageHolderDone:MovieClip = image.createEmptyMovieClip("imageHolderDone", image.getNextHighestDepth());
var mainpre:MovieClip = root.attachMovie("pre", "mainpre", root.getNextHighestDepth());
trace("mainpre: "+mainpre);
var buttons:MovieClip = root.myCP.t_hol.createEmptyMovieClip("buttons", root.myCP.t_hol.getNextHighestDepth());
var mask:MovieClip = root.myCP.t_hol.attachMovie("mask", "t_mask", root.myCP.t_hol.getNextHighestDepth());
mask.cacheAsBitmap = true;
buttons.cacheAsBitmap = true;
buttons.setMask(mask);
root.myCP.swapDepths(root.getNextHighestDepth());
root.myInfo.swapDepths(root.getNextHighestDepth()) ;
root.lil_img.swapDepths(root.getNextHighestDepth() );
root.imageHolder._alpha = 0;
root.imageHolderDone._alpha = 0;
//
root.lil_img.t_img._x = root.lil_img.t_msk._x=5;
root.lil_img.t_img._y = root.lil_img.t_msk._y=5;
root.lil_img.t_msk._width = root.s_thumbWidth;
root.lil_img.t_msk._height = root.s_thumbHeight;
root.lil_img.t_bg._width = root.s_thumbWidth+9;
root.lil_img.t_bg._height = root.s_thumbHeight+10;
root.lil_img.t_pointer._y = root.lil_img.t_bg._y+root.lil_img.t_bg._height;
root.lil_img.t_pointer._x = root.s_thumbWidth/2;
root.lil_img._alpha = 0;
//
for (i=0; i<totalItems; i++) {
var th:MovieClip = root.lil_img.t_img.createEmptyMovieClip("t"+i, root.lil_img.t_img.getNextHighestDepth());
var img:MovieClip = th.createEmptyMovieClip("img", th.getNextHighestDepth());
var pre:MovieClip = th.attachMovie("pre", "pre", th.getNextHighestDepth());
//img.loadMovie(root.imgArray[i][1]);
//trace(img);
myLoader.loadClip(root.imgArray[i][1], img);
th._x = (root.s_thumbWidth+5)*i;
pre._x = (root.s_thumbWidth+5)/2;
pre._y = (th._y+root.s_thumbHeight)/2;
pre._alpha = 0;
//
var b:MovieClip = buttons.attachMovie("button", "b"+i, buttons.getNextHighestDepth());
if (i<9) {
b.txt.text = "0"+(i+1);
} else {
b.txt.text = i+1;
}
b._x = (b._width+gapinmyCP)*i;
b.no = i;
b.onRollOver = rollIn;
b.onRollOut = b.onReleaseOutside=rollOt;
b.onRelease = showImage;
}
root.totalbtnwidth = b._x+b._width;
root.myCP.t_hol.attachMovie("inv", "buttonsbg", buttons.getNextHighestDepth());
root.myCP.t_hol.buttonsbg.onRollOver = moveLilImg;
root.myCP.t_hol.buttonsbg._y -= root.myCP.t_hol._y-root.myCP.t_bg11._height;
root.myCP.t_hol.buttonsbg._height = root.myCP.t_bg._height;
root.myCP.t_hol.buttonsbg._width = root.totalbtnwidth;
root.myCP.t_hol.buttonsbg._alpha = 0;
//
showImage(root.curImage);
listner.onResize();
// end
//************************************************** *****************
"switching" with 2 buttons
//************************************************** *****************
root.bottone_cat_1.onRelease = function() {
loadGallery(0);
showImage(0);
};
root.bottone_cat_2.onRelease = function() {
loadGallery(1);
showImage(0);
};
//************************************************** *****************
The problem is that the "switching" by categories from the xml data works, but the thumbnails still the first loaded at the start
I tryied to make some function with delete, unloadMovie(), removeMovieClip() .. to, when there is the categories-change , remove the old thumbs and recreate the news one, but...nothing ... its 4 days im trying ...
Xml Multi-categories Gallery W/t Masked Images Sequence
I'm trying to do somenthing similar at this site with some adding :
http://www.shiroganeya.co.jp/main_en.html
, but lately i decided to release free full source (I dont know if will be usefull to someone..), a sort of 'open-source', because my AS skillfull has limits ... the collettive can help.
Just, ... if someone can optimize or improve it, or find some bugs, just the correctness to release it at attention of the forum.
Its a gallery generated from xml, use Caurina Tweener , As2 Player 8, (naturally to test it better see it online or with the test Movie).
Basically i didnt improved yet the moving part (passage from a gallery to another), that its not my main goal, but im trying to optimize all the other functionality.
Some parts i trying to improve are:
1 - Some problems with stopping and restarting the automatic-slideshow (with the buttons Stop/Play Slideshow or/and clicking on thumbs) (the clock react strange ... to check better)
2 - Clicking on thumbs when the mask over the image still moving, reacts not so smootly, should be better that after click, the mask over the image finish to slide, and at the end load the new image? or other solutions? ...
Example : Link
All file are here: Link
About Caurina Tweener : Link
- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
I see also sometime a little bug ... at the start or when theres a gallery change, at the first image opening, the mask open in strange way ... open for 15 - 20 %, then return at 0 %, then re-open normally to 100 % (or 50 + 50 if doble is 1..)
Just a question ... someone can help me to optimize this applications ? ... also if i have to pay a fee for that, please contact me ... im getting crazy to make it stable ...
Training From Source: Source Files..
Thought I'd try here.. I have the FlashMX2004 actionscript training from the source book and my cd cracked.
I have't been able to find a location yet where I can download all the code.
It's more a lazy thing I guess, but I also like to have the 'correct' stuff before I mess with it.
Does anybody know where I can download the code from? Or, is there anyway a nice fat zip could be sent to me? (kelly@thumbslinger.com)
I can prove ownership by any means necessary (other than a receipt as the book is old but still viable)
Thanks
Suicide Kittens Game
h there!
I'm new here but i wanted to show you this game and ask what you think!
It was made by the company i'm working for to promote www.4mations.tv (a new animation site), and i just helped with ideas for the different stages. I am only now learning how to use flash (i can do simple animation etc, but i'm not great at it yet) so was really excited to get involved with this
http://www.4mations.tv/clipgame.aspx...ist&type=image
Flash MX 2004 > Flash/XML Photo Gallery > Categories
Hello everyone,
First of all, thank goodness for this website and all the helpful tutorials. I never expected to get this far!
I'm using a combination of the Photo Gallery using XML and Flash (with thumbnails and a simple PHP gallery script called Gallery Thingie. So far, I've got the XML file's image data working with the Flash movie. However, Gallery Thingie also has a feature allowing the creation (and deletion) of image categories. How can I use this feature with the flash gallery?
So far I've added some buttons that would switch between categories, but they don't do much yet since I'm not sure how to say "when this category variable is present, display only thumbnails with that variable." Download the flash file (and others) from the link below.
ActionScript Code:
/*Code for loading XML file. */
function loadXML(loaded) {
if (loaded) {
/* "xmlNode" is just a faster way of saying "this.firstChild". */
xmlNode = this.firstChild;
image = [];
head = [];
description = [];
thumbnails = [];
category = [];
cat = xmlNode.childNodes[0].firstChild.attributes.cid
/* Finds total number of child nodes (images w/captions to be displayed, in this case). */
total = xmlNode.childNodes[1].childNodes.length;
/* Extracts data from each child node, stopping when the total (defined above) is reached. */
for (i=0; i<total; i++) {
image[i] = "images/"+xmlNode.childNodes[1].childNodes[i].childNodes[0].firstChild.nodeValue;
head[i] = xmlNode.childNodes[1].childNodes[i].childNodes[1].firstChild.nodeValue;
description[i] = xmlNode.childNodes[1].childNodes[i].childNodes[2].firstChild.nodeValue;
category[i] = xmlNode.childNodes[1].childNodes[i].childNodes[3].firstChild.nodeValue;
thumbnails[i] = "images/th_"+xmlNode.childNodes[1].childNodes[i].childNodes[0].firstChild.nodeValue;
thumbnails_fn(i);
}
firstImage();
cat = 0;
} else {
content = "file not loaded!";
}
}
xmlData = new XML();
xmlData.ignoreWhite = true;
xmlData.onLoad = loadXML;
xmlData.load("gt-data.xml");
/////////////////////////////////////
/* Lets the user scroll through with left and right arrow keys. */
listen = new Object();
listen.onKeyDown = function() {
if (Key.getCode() == Key.LEFT) {
prevImage();
} else if (Key.getCode() == Key.RIGHT) {
nextImage();
}
};
Key.addListener(listen);
/* Note the references to button instances previous_btn and next_btn here.*/
previous_btn.onRelease = function() {
prevImage();
};
next_btn.onRelease = function() {
nextImage();
};
/////////////////////////////////////
/* The movie begins, naturally, at the beginning--in XML, that's zero! */
p = 0;
/* Preloader for images. */
this.onEnterFrame = function() {
filesize = picture.getBytesTotal();
loaded = picture.getBytesLoaded();
preloader._visible = true;
if (loaded != filesize) {
preloader._visible = true;
} else {
/* Makes preloader invisible once the image starts to fade in. */
preloader._visible = false;
/* Fade in the image. (If the alpha is under 100, add 10.) */
if (picture._alpha<100) {
picture._alpha += 10;
}
}
};
/* Load & display the next image. It cleverly calculates whether you are at the end of the
images or not. If you are, the script doesn't run.*/
function nextImage() {
/* If it's less than the total (the last image), let's go ahead and load the next image. */
if (p<(total-1)) {
p++;
if (loaded == filesize) {
/* If it is loaded, set alpha to zero, so that the preloader can fade it in! */
picture._alpha = 0;
/* Put the image where it is supposed to go. */
picture.loadMovie(image[p], 1);
/* Load description into text box "desc_txt" */
desc_txt.text = description[p];
head_txt.text = head[p];
/* Activates the function down below, telling you what number picture you're viewing. */
picture_num();
}
}
}
/* Basically the same as nextImage(), but backwards. Fading and image/text insertion is the same. */
function prevImage() {
if (p>0) {
p--;
picture._alpha = 0;
picture.loadMovie(image[p], 1);
desc_txt.text = description[p];
head_txt.text = head[p];
picture_num();
}
}
/* Automatically show the first image when the movie is loaded, fade-in and all. */
function firstImage() {
if (loaded == filesize) {
picture._alpha = 0;
/* Use image[0] instead of image[p] since this only applies to the first image. */
picture.loadMovie(image[0], 1);
desc_txt.text = description[0];
head_txt.text = head[0];
picture_num();
}
}
/* Thumbnail list. */
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+(target_mc._width+5)*k;
target_mc.pictureValue = k;
target_mc.onRelease = function() {
p = this.pictureValue-1;
nextImage();
};
target_mc._alpha = 50;
target_mc.onRollOver = function() {
this._alpha = 100;
thumbNailScroller();
};
target_mc.onRollOut = function() {
this._alpha = 50;
};
};
image_mcl = new MovieClipLoader();
image_mcl.addListener(tlistener);
image_mcl.loadClip(thumbnails[k], "thumbnail_mc.t"+k);
}
function thumbNailScroller() {
// thumbnail code!
this.createEmptyMovieClip("tscroller", 1000);
scroll_speed = 10;
tscroller.onEnterFrame = function() {
if ((_root._ymouse>=thumbnail_mc._y) && (_root._ymouse<=thumbnail_mc._y+thumbnail_mc._height)) {
if ((_root._xmouse>=(hit_right._x-40)) && (thumbnail_mc.hitTest(hit_right))) {
thumbnail_mc._x -= scroll_speed;
} else if ((_root._xmouse<=40) && (thumbnail_mc.hitTest(hit_left))) {
thumbnail_mc._x += scroll_speed;
}
} else {
delete tscroller.onEnterFrame;
}
};
}
/* Displays current position and total number of pictures. */
function picture_num() {
current_pos = p+1;
pos_txt.text = current_pos+" / "+total;
}
Code for XML:
Code:
<?xml version="1.0" encoding="ISO-8859-1"?>
<gallery>
<categories>
<category cid="0">Monkeys</category>
<category cid="1">Sample</category>
</categories>
<images>
<image id="0">
<file>image1.jpg</file>
<title>Pig Tailed Something</title>
<description>This is really easy.</description>
<imgcategory>0</imgcategory>
</image>
<image id="1">
<file>image2.jpg</file>
<title>Wooly Monkey</title>
<description>Here's another!</description>
<imgcategory>0</imgcategory>
</image>
<image id="2">
<file>image3.jpg</file>
<title>Photo</title>
<description>Something by Peter Laytin.</description>
<imgcategory>1</imgcategory>
</image>
</images>
</gallery>
I'd appreciate any help I can get!
Please Help Once Again With Infinite Mx Gallery
Hello, I've done a search through the forums, but haven't found an answer to this one.
I needed to make left and right scroll buttons to Scotty's infinite mx gallery. What I need is for the thumbs to only scroll when the buttons are pressed.
My gallery is slightly modified due to the nature of my flash project -
Reference post here: http://www.kirupa.com/forum/showthread.php?t=228307
I guess what I'm asking for is a hybrid of Scotty's gallery and the tutorial gallery
Thanks for your help - Oh I have one other question - I have a png that I use for a graphic, but it's blurry - is there a way to make the graphic crisp without sacrificing the transparency?
Infinite Gallery Xml
check my sketch. probably seen it done everywhere..
thumbnails horizontally pan across with the movement of the mouse, the thumbs scale as it goes towards the middle. the thumbs are loaded dynamically.
how would i do this.
maybe a rundown of the code that would need.
Infinite Photo Gallery?
hey!
i was taking a look at the infinite menu tutorial here at kirupa, and i got an idea for my webpage.. i was thinking about making a line of photos beside each other , and they would keep moving towards the left of the page from the far right.., and when the last photo comes, then the first photo shows up again from the right, but the difference is that the mouse does not control the movement to the left and right.. this might sound confusing but it makes normal sense
so i was wondering if ne1 could help me out with some actionscripting to make my idea work thnx alot for reading this! i appreciate it
thnx
Infinite Gallery Scroller? How Did They?
http://www.cassbird.com
It's really cool, I know it's a variation of the infinite menu -- but how did they get the spacing to work between the different images? I can't figure that out -- very cool.
Thanks for any help!
-md
Infinite Scroller W/ Photo Gallery
Hey Guys -
I incorporated the Infinite Scroller w/ Photo Gallery in my flash site and have a few quirks that need to be worked out. For example the scroller only goes in one direction and is a little to fast to use. I'm trying to get it more user friendly. Also I changed the infinite scroller to be thumbnails instead of numbers and there are too many and they don't fit on the workable space. Please advise, I posted the fla files. Open main.swf, then click on photo albums. I didn't include any of the other swf's.
Thank you in advance.
http://www.marrymemary.com/files.zip
Infinite Gallery Code Problem
Hi I am trying to do my photo gallery and i am using an infinite resize mx code , my problems is that when i go to the scrolling thumbs and click on an images while is still loading the external jpg the thumb moves.
So is it possible to stop the thumb when i click on it so the jpeg will load and as soon as i move my cursor the infinite menu will start again?
Also is it possible to call the jpgs in withing the movie , basically instead of loading it externally just put it all into a one movie...i won't need the XML gallery anymore..
Thanks a lot and sorry for the confusion , my english is so so and my flash skills are even worse.
Massimo
Code:
spacing = 10;
containerMC._alpha = 0;
pArray = new Array();
pictArray = new Array();
MovieClip.prototype.loadPic = function(pic) {
this._alpha = 0;
this.loadMovie(pArray[pic]);
this._parent.onEnterFrame = function() {
var t = containerMC.getBytesTotal(), l = containerMC.getBytesLoaded();
bar._visible = 1;
per = Math.round((l/t)*100);
if (t != 0 && Math.round(l/t) == 1 && containerMC._width != 0) {
var w = containerMC._width+spacing, h = containerMC._height+spacing;
border.resizeMe(w, h);
bar._visible = 0;
delete this.onEnterFrame;
} else {
bar._width = per;
}
};
};
MovieClip.prototype.resizeMe = function(w, h, pic) {
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 && Math.abs(this._height-h)<1) {
this._width = w;
this._height = h;
containerMC._x = this._x-this._width/2+spacing/2;
containerMC._y = this._y-this._height/2+spacing/2;
containerMC._alpha = 100;
delete this.onEnterFrame;
}
};
};
my_xml = new XML();
my_xml.ignoreWhite = true;
my_xml.onLoad = function(success) {
if (success) {
for (var i = 0; i<this.firstChild.childNodes.length; i++) {
pictArray.push(this.firstChild.childNodes[i].attributes.thumb);
pArray.push(this.firstChild.childNodes[i].attributes.image);
}
}
delay = setInterval(makeMenu, 100);
};
my_xml.load("gallery.xml");
var menu = this.createEmptyMovieClip("menu_tot", 99);
menu.setMask(mask);
var sub_menu = menu.createEmptyMovieClip("menu", 100);
var p = 0;
var q = 0;
var loadper = 0;
function makeMenu() {
clearInterval(delay);
var item = sub_menu.createEmptyMovieClip("pic"+q, q);
item.loadMovie(pictArray[p]);
var temp = _parent.createEmptyMovieClip("tmp", 9999+q);
temp.onEnterFrame = function() {
var tot = item.getBytesTotal();
var loa = item.getBytesLoaded();
var per = Math.round(((loa/tot)*100)/(pictArray.length*2));
loadBar._xscale = loadper+per;
if (tot == loa && tot>4) {
item.id = p;
loadper += per;
if (q>0) {
item._x = sub_menu["pic"+(q-1)]._x+sub_menu["pic"+(q-1)]._width;
} else {
item._x = 0;
}
item.onRelease = function() {
containerMC.loadPic(this.id);
};
nextItem();
delete this.onEnterFrame;
}
};
}
var amount = pictArray.length-1;
function nextItem() {
if (q<((pictArray.length*2)-1)) {
q++;
if (p<(pictArray.length-1)) {
p++;
makeMenu();
} else {
p = 0;
makeMenu();
}
} else {
activateMenu();
}
}
var center = Stage.width/2;
var speed = .05;
function activateMenu() {
menu.onEnterFrame = function() {
var distance = _root._xmouse-center;
if (mask.hitTest(_root._xmouse, _root._ymouse)) {
this._x += (distance*speed);
if (this._x<-sub_menu._width/2) {
this._x = 0;
}
if (this._x>0) {
this._x = -sub_menu._width/2;
}
}
};
}
Infinite Gallery ...how To Add Prev And Next Button
Hi I've been working on this photogallery for my site and i am a beginner level flash lover and i can't really figure it out how to do it.
I am trying to add to the flash movie a prev and next button and the gallery is made out of an xml gallery code that load externally the pics and the thumbs are loaded into a strip and the pics are loaded with the dinamic resize effetct...i can't figure it out..here is the code:
spacing = 10;
containerMC._alpha = 0;
pArray = new Array();
pictArray = new Array();
MovieClip.prototype.loadPic = function(pic) {
this._alpha = 0;
this.loadMovie(pArray[pic]);
this._parent.onEnterFrame = function() {
var t = containerMC.getBytesTotal(), l = containerMC.getBytesLoaded();
bar._visible = 1;
per = Math.round((l/t)*100);
if (t != 0 && Math.round(l/t) == 1 && containerMC._width != 0) {
var w = containerMC._width+spacing, h = containerMC._height+spacing;
border.resizeMe(w, h);
bar._visible = 0;
delete this.onEnterFrame;
} else {
bar._width = per;
}
};
};
MovieClip.prototype.resizeMe = function(w, h, pic) {
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 && Math.abs(this._height-h)<1) {
this._width = w;
this._height = h;
containerMC._x = this._x-this._width/2+spacing/2;
containerMC._y = this._y-this._height/2+spacing/2;
containerMC._alpha = 100;
delete this.onEnterFrame;
}
};
};
my_xml = new XML();
my_xml.ignoreWhite = true;
my_xml.onLoad = function(success) {
if (success) {
for (var i = 0; i<this.firstChild.childNodes.length; i++) {
pictArray.push(this.firstChild.childNodes[i].attributes.thumb);
pArray.push(this.firstChild.childNodes[i].attributes.image);
}
}
delay = setInterval(makeMenu, 100);
};
my_xml.load("gallery2.xml");
var menu = this.createEmptyMovieClip("menu_tot", 99);
menu.setMask(mask);
var sub_menu = menu.createEmptyMovieClip("menu", 100);
var p = 0;
var q = 0;
var loadper = 0;
function makeMenu() {
clearInterval(delay);
var item = sub_menu.createEmptyMovieClip("pic"+q, q);
item.loadMovie(pictArray[p]);
var temp = _parent.createEmptyMovieClip("tmp", 9999+q);
temp.onEnterFrame = function() {
var tot = item.getBytesTotal();
var loa = item.getBytesLoaded();
var per = Math.round(((loa/tot)*100)/(pictArray.length*2));
loadBar._xscale = loadper+per;
if (tot == loa && tot>4) {
item.id = p;
loadper += per;
if (q>0) {
item._x = sub_menu["pic"+(q-1)]._x+sub_menu["pic"+(q-1)]._width;
} else {
item._x = 0;
}
item.onRelease = function() {
containerMC.loadPic(this.id);
};
nextItem();
delete this.onEnterFrame;
}
};
}
var amount = pictArray.length-1;
function nextItem() {
if (q<((pictArray.length*2)-1)) {
q++;
if (p<(pictArray.length-1)) {
p++;
makeMenu();
} else {
p = 0;
makeMenu();
}
} else {
activateMenu();
}
}
var center = Stage.width/2;
var speed = .05;
function activateMenu() {
menu.onEnterFrame = function() {
var distance = _root._xmouse-center;
if (mask.hitTest(_root._xmouse, _root._ymouse)) {
this._x += (distance*speed);
if (this._x<-sub_menu._width/2) {
this._x = 0;
}
if (this._x>0) {
this._x = -sub_menu._width/2;
}
}
};
}
Thanks anybody that can help me and explain to me where to put the code and how should i call these functions.
Also ,if anybody knows, i wanna know if is possible to make a gallery that is made out of an infinite thumb strip and everytime i click on one it will load the resized effetct pic right into the infinite strip gallery ..with the easing effect.
I don't know if is possible.
Another question about the code i posted is that i wanna stop the infinite thumb action everytime i click on a thum pic , and when i roll over another thumb i'd love for the infinite menu to start his action again.
I know is not easy and for me is very hard to do this stuff because i usually do it once a year (or when i feel like changing my site ) so my knowledge of flash is just basic and this is just a passion that i have and if is possible and anyone can explain to me why doing certain moves it would help a lot more than just the answer.
Anyway sorry 4 the long email and the bad english(not my main language) if anyone could help i would really appreciate.
Thanks a lot
Massimo
Infinite Gallery Loaded Externally
G'day guys,
I've used Scotty's wonderful resizing gallery/infinite combination, and the only drama I'm running into is this:
If you open the swf normally, it works perfectly, but if you load it into another swf the behaviour of the mouse changes.
Can anyone think why this would be?
Cheers!
Boog
Questoin About Scotty's Infinite Photo Gallery
Hi, I downloaded one of Scotty's great things (file name : Infinite_dynamic_mx) and tried to understand how to do it. Here is my first question which is about the preloader. Correct me from wrong, the green bar is to show the loading progress of the thumbnails, then how comes the thumbnails showed before the green bar finished loading.
Infinite Scrolling For Kirupa Image Gallery
Hello guys,
I had fun following the "Adding thumbnails for the Photo Gallery using XML and Flash" http://www.kirupa.com/developer/mx2004/thumbnails.htm which works perfect, the only problem is I would like for the thumbnails to have the infinite scrolling effect menu style, where the thumbnails keep scrolling at a min speed and when it stop on mouse over and make the user able to click on the desired thumbnail image.
I tried looking at the code for the infinite menu and try to add it to the photo gallery but it doesn't seem to work.
Hope someone could help me out I been searching for answers in vain.
Thank you everyone.
Display Order In Actionscript Infinite Gallery
so close yet so far -
ive been putting together a gallery which uses Scotty's image resize gallery
ive used the infinite scroll bar version
i would like the loaded image to appear infront of the infinite thumbnail gallery
any idea on how i would do this
been playing around with layers and so on but am having no luck.
Photo Gallery With Thumbnail Source Fla
Hello..
I am new here and would like to have a complete source fla for the photo gallery with thumbnails. I am not to good in flash yet, so a zip download would really help.
Thanx
Infinite Menu With Preloader And Transition For Dynamic Files?
Hi Guys,
I have tried to combine the use of 2 tutorials on this site.
Basically, to use the infinite menu as the menu for loading external .swf (as the 2nd tutorial listed below allows).
1. Infinite Menu:
http://www.kirupa.com/developer/mx/infinite.htm
2. Preloader and Transition for Dynamic Files
http://www.kirupa.com/developer/mx/p...transition.htm
My site is so close to completion, but now I am stuck.
Basically the infinite menu (in order to work) has buttons inside 2 movieclips.
Yep! When I press CTRL + ENTER to test, the _root external .swf loads, but if I click the buttons (which react) they do not load external .swf.
Can anyone help please? Please please please lol. I will be most grateful.
CreamClouds
Help On This Source Files
This is a very good e-commerce source files but i try to follow the step to install but is nothing happen! Can someone try it and let me know how to do it??
http://www.flash-db.com/Tutorials/newstore/index.php
THANKS!!
Fla Source Files
Hi all, new to the board, lovin it already though. I downloaded some of the fla souce files to try and get a hang of this flash. The spiral menus interest me the most... is there a way to edit these though, so they don't only say "option" where the buttons are, or are they unchangable for copyright reasons? Thanks much, this should be a quick answer for the right person.
How To Use The FLA Source Files....
I downloaded it and opened it up in Flash and in the timeline it says Cannot reproduce etc.... How do I bypass this so I can see the source?
.as Source Files
I opened my .as file to read the content and now my computer views all .as files ad word pad files. It's now difficult to initialize any code from these .as.
How could I convert my .as file back to the original format?
Flash Source Files
Is it possible to download the source file of flash movies on other sites? I don't want to copy the developers work I just want to view the source so I can learn from it.
Clients And Source Files
Hi all!
Here's a question: am I in any way obligated to supply the source files to my client or can I send him the final results only?
Thank you for your help!
Where Are The Component V2 Source Files?
I was wondering if anyone knew where the component source files are kept for Flash MX 2004? Specifically the menuBar class - as I want to see how it was coded.
Cheers.
.swf Files Clutter My Source
when i input a flash file it clutters the source of my page so much. way too much clutter. can anybody tell me ways to put flash files in my pages without too much clutter in the source?
Parsing Fla Source Files
Hello,
I checked other forums to see which one was appropriate for this kind of question. If this is not the correct forum, sorry.
I have several hundred fla files. I currently open them one at a time to check the accuracy of the url file paths in each file.
Question,
Is there a program that can parse the open source fla's and read the flash actionscript code wihtout opening the flash file?
Any help would be greatly appreciated.
iaustin
AMFPHP Source Files?
Can someone post links to AMFPHP sources that have the .php class, as well as .fla.
I don't see any of that at the amfphp site, and would REALLY appreciate it. I learn best doing reverse-engineering.
Posting Source Files...
If post some source files can anyone take a look and see if you can figure out why this playlist wont auto play on load. You can to click the artist name, and then click the play button to get the audio to play.. I need it to play as soon as the site is loaded. And just play down the list.
If anyone is will to help or take a look please let me know.
http://ezekieldesign.com/clientprevi.../wowhmyns.html
there is a sample of what I'm working on.. There isn't a preloader so it takes a while to pull up.
http://www.kirupa.com/web/xml/examples/MP3playlist.htm - this is the tutorial I used.
thanks for any help!
Pong Source Files?
Hello all,
I want to implement a quick game into my web site. Does anyone have some good ol' source code I can look at or links?
TIA!!
Organizing Source Files
What is the best way to go about organizing your files for any particular project? Should you create separate folders for your .swf's, images, .fla's etc? Or for ease of referencing them when you add actions to buttons for example, should they all be in one main folder.
In theory I can see how it's easier to just have all your files in one main folder, but when you would go to look at the folder to find a particular file it could get very busy, very quickly without the organization that using folders could bring.
Comments/Suggestions?
Gotoandlearn.com Source Files
Ok I went here http://theflashblog.com/?p=46 to get the source files that Lee has so kindly put up.
However I cant seem to get them to work.
Now I know on the link above various people could get it to work however I cant and have read this post many times.
Can someone explain what is I am required to do to get it to work.
I downloaded all files correctly
Thanks in advance
jmcall10
---Philter Design III Source Files---
I know this isn't the forum for site check, but just wanted to let anyone who's interested know that the updated site has source files for a lot of the Flash Playground files that were not available before.
Thanks.
|