Click to See Complete Forum and Search --> : XML gallery with AS1.0/2.0


djeurvaisse
10-12-2009, 07:56 AM
Hi to all of you,
First of I'm a newcomer in the world of coding for only a month or so...
These days I've been working on an "auto-scroll" vertical gallery where I'm calling a XML file into Flash using AS 1/2. This XML contains my gallery and images info.
What I want to do is that people will click on an image and this will open a new URL that is stored in the image infos in my XML.
I can't figure what I should type to open that link stored in my XML.

Here I provide you with my XML:

<gallery thumb_width="125" thumb_height="125" gallery_width="125" gallery_height="400" gallery_x="50" gallery_y="50">
<image thumb_url="thumb1.jpg" link="http://connexionjeux.ca/eps1-1.html" target="_self" />
<image thumb_url="thumb2.jpg" link="http://connexionjeux.ca/eps2-1.html" target="_self" />
<image thumb_url="thumb3.jpg" link="http://connexionjeux.ca/eps3-1.html" target="_self" />
<image thumb_url="thumb4.jpg" link="http://connexionjeux.ca/eps4-1.html" target="_self" />
<image thumb_url="thumb5.jpg" link="http://connexionjeux.ca/eps5-1.html" target="_self" />
<image thumb_url="thumb6.jpg" link="http://connexionjeux.ca/personnages.html" target="_self" />
<image thumb_url="thumb7.jpg" link="http://connexionjeux.ca/personnages.html" target="_self" />
</gallery>

and here is my ActionScript:

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

var myGalleryXML = new XML();
myGalleryXML.ignoreWhite = true;
myGalleryXML.load("gallery.xml");

myGalleryXML.onLoad = function() {
_root.gallery_x = myGalleryXML.firstChild.attributes.gallery_x;
_root.gallery_y = myGalleryXML.firstChild.attributes.gallery_y;
_root.gallery_width = myGalleryXML.firstChild.attributes.gallery_width;
_root.gallery_height = myGalleryXML.firstChild.attributes.gallery_height;

_root.myImages = myGalleryXML.firstChild.childNodes;
_root.myImagesTotal = myImages.length;

_root.thumb_height = myGalleryXML.firstChild.attributes.thumb_height;
_root.thumb_width = myGalleryXML.firstChild.attributes.thumb_width;

callThumbs();
createMask();
scrolling();

};

function callThumbs() {
_root.createEmptyMovieClip("container_mc",_root.getNextHighestDepth());
container_mc._x = _root.gallery_x;
container_mc._y = _root.gallery_y;

var clipLoader = new MovieClipLoader();
var preloader = new Object();
clipLoader.addListener(preloader);

for (i=0; i<myImagesTotal; i++) {
thumbURL = myImages[i].attributes.thumb_url;
myThumb_mc = container_mc.createEmptyMovieClip(i, container_mc.getNextHighestDepth());
myThumb_mc._y = _root.thumb_height*i;
clipLoader.loadClip("thumbs/"+thumbURL,myThumb_mc);

preloader.onLoadStart = function(target) {
target.createTextField("my_txt",target.getNextHighestDepth(),0,0,100,20);
target.my_txt.selectable = false;
};


preloader.onLoadProgress = function(target, loadedBytes, totalBytes) {
target.my_txt.text = Math.floor((loadedBytes/totalBytes)*100);
};

preloader.onLoadComplete = function(target) {
new Tween(target, "_alpha", Strong.easeOut, 0, 100, .5, true);
target.my_txt.removeTextField();
target.onRelease = function() {
callFullImage(this._name);
};

target.onRollOver = function() {
this._alpha = 50;
};

target.onRollOut = function() {
this._alpha = 100;
};


};
}
}

function createMask() {

_root.createEmptyMovieClip("mask_mc",_root.getNextHighestDepth());

mask_mc._x = _root.gallery_x;
mask_mc._y = _root.gallery_y;

mask_mc.beginFill(0x000000,100);
mask_mc.lineTo(_root.gallery_width,0);
mask_mc.lineTo(_root.gallery_width,_root.gallery_height);
mask_mc.lineTo(0,_root.gallery_height);
mask_mc.lineTo(0,0);

container_mc.setMask(mask_mc);

}

function scrolling() {
_root.onEnterFrame = function() {

container_mc._y += Math.cos(((mask_mc._ymouse)/mask_mc._height)*Math.PI)*15;

if (container_mc._y>mask_mc._y) {
container_mc._y = mask_mc._y;
}

if (container_mc._y<(mask_mc._y-(container_mc._height-mask_mc._height))) {
container_mc._y = mask_mc._y-(container_mc._height-mask_mc._height);
}

};
}

All I need is a clue on how I can call that URL stored in my XML, no need to give me the answer. (and I'm open to any ideas you can have)
Thanks to all of you.
Djeurvaisse
http://connexionjeux.ca

Eye for Video
10-12-2009, 10:30 AM
So do the thumbs display correctly? and the problem is that the thumbs are not "clickable"? that is they do not link to anything?
If that's the case it's because there is no onRelease or other clickable action set on the thumbs. You'll need to add actionscript and instance names to all the buttons and the getURL actions associated with each.
You might try turning each thumb (jpg) into a swf that has an action like this:
link1.onRelease = function(){
getURL("http://connexionjeux.ca/eps1-1.html");
}
Be sure that after placing the jpg on the stage, convert it to a movie clip symbol and give it an instance name (link1) down in the properties panel. Repeat for each thumb, link2, etc.
Then instead of calling
thumb_url="thumb1.jpg"
your xml would be
thumb_url="thumb1.swf"
I created a quick swf with the action above, called into a slide show via xml and the now clickable button (link1) opened the page show above. So something like that should work for you.
Best wishes,
Eye for Video
www.cidigitalmedia.com

djeurvaisse
10-12-2009, 06:11 PM
Thanks you very much for reading my distress call and helping me.
The way I tried to do this gallery is for 2 major reasons:
1- The file has to be at it's smaller size ( the smaller it is, the best it is ).
2- The file need to be easy to update since it will be changed almost every week.

These are the reasons why I chosed to use a XML. I can't work with "physical images" (if you know what I mean), I can't assign them an instance or turn them into a MovieClip.

Right now the setup that I'm using is a bit to heavy and it looks like that
( http://connexionjeux.ca/image.html )

What I want to do is this ---**> ( http://connexionjeux.ca/test/scroll_gal_test.html )

The SWF is calling all the information in my XML, I don't have nothing but ActionScript in my SWF, no images, no instance nor MovieClip or buttons.
I absolutely need the SWF to fetch the link in my XML.

Thanks again for helping me I really appreciate that you gaved me some of your time.

Eye for Video
10-12-2009, 07:07 PM
Well as you can see, it doesn't work the way it is. That's because your scrolling gallery has no clickable linking actions associated with it and just specifing a link in the .xml has no ability to do anything since it's not a clickable link.
I understand that your scrolling gallery has not content, only AS. That's just fine, don't change that at all.
But at least try the suggestion above on one thumb, then if it doesn't work... go on to something else.
Create a new Flash document with dimensions the same as the thumb. Import to stage the thumb bitmap. Convert that to a movie clip symbol, giving an instance name and actions as suggested above. Then test this new .swf (control/enter). You may be prompted to allow connections from that location, follow the instructions to allow.
Once you get a working, clickable .swf that looks exactly like your original thumb (but now it's clickable), use your xml to load that into your main gallery .swf. The thumb .swf is separate and does not replace the main gallery swf but instead replaces the thumb, the gallery loads a clickable swf instead of a non-clickable jpg.
Should at least be worth a try.
EfV

djeurvaisse
10-14-2009, 12:39 PM
Wow, now that's brilliant!!
Everything works fine, I never tought that a SWF could be lighter than the original JPG. It's an easy and fast solution.
Thank you EfV for everything you did!!!