Trying to build a coverflow image gallery WITHOUT XML?
Hi, this is my first post so I apologize if this is covered in another post...
Does anyone know of a site / tutorial / reference that shows how to do the coverflow image gallery using Flashvars without XML? I want to create something like this:
..but everything I've found uses an XML file to feed in the variable and parameter information. I need to feed this info in using flashvars and javascript from the html file only. I've tried modifying the ones using XML on my own but it gets to be too confusing on how to change everything when so much information--usually all the variables AND animation effect parameters--are being called from the XML.
Look up the ExternalInterface class in Flash. It allows you to call Javascript functions on the outlying page, if you have control of that page.
If you don't have control over it... and you have to pass everything in with flashvars... that's possible too.
The only thing is, if you can load up external images for your coverflow pictures, you can also load up an XML file from the same server hosting them; it's hard to imagine a situation where you could load the images, but not an XML file that indexed them.
You'll have to get pretty creative with flashvars and it's going to be a ***** to make changes to it if you do it that way...
The developer I'm working with wants all the image variables (title, description, image, URL) passed in with flashvars.... this is actually changed from them wanting to do it via query string.
I guess it's a security issue with the XML file and having to pass the data through it. It's a corporate network and supposedly everything is so locked down that it would take more effort on their end to revise their security settings to allow the server to pull and feed data from the XML to wherever the the rest of this is loaded on or whatever the case... I'm not familiar with the back-end of things. I just know they want this thing modified to not use an XML file and want to only have to update the flashvars in script in the html file. Once everything is set up, the only things that may change are # of images and the values it loads corresponding to those images (title, description, URL).
I know this is not easy--none of the projects I get from these guys ever are!--but I'm hoping there's something available/on the 'net that may be of help?
Also, not sure if this would be easier, but I have a working version that I built with everything on the timeline, including the AS3, since I needed something quickly and couldn't figure out how to modify the dynamic version I had. Unfortunately, because everything is hardcoded, if they want to add more images to the gallery, I have to manually add to the timeline more instances of movieclips and tween them to create the transitions (I don't even have the tweens as a class, either). What I have is basic and probably a very hack job but it works. But it's only a temporary solution because I need it to be more dynamic.
Would building on what I have be easier than trying to reroute everything from pulling from the XML to using the flashvars?
Okay, that's a little odd, but not impossible. I'm assuming you know how to pass in flashvars (they show up in root.loaderInfo.parameters["variableName"]) ... and you pass them essentially as key/value pairs in the swf embed tag, like:
something.swf?a=lemon&b=cherry&c=orange
which would yield root.loaderInfo.parameters.a == "lemon" once the flash loads...
So you're going to have to work out a system to serialize the data you're trying to send in. I doubt there's a tutorial for this. One thing that might work, actually, is the serializer class over at http://www.sephiroth.it/test/unserializer/ ...what you could do is load your XML image list into an array in PHP, serialize it, and pop it onto the query string for your flashvars, like
PHP Code:
something.swf?xml=<?php echo serialize($array);?>
...then unserialize it in Flash using the sephiroth class and presto, you've got our XML file.
DO be aware that there is a 64K limit to the size of flashvars you can pass in so this data's got to be compact!
I don't know what you have right now, but if it's timelined, I usually tell clients it makes more sense to recode it dynamically than to try and splice anything in. If you have a link I'm more than happy to check it out and give you MHO on it. As long as you're doing it though, might as well make it as perfect as you can, right? I'd say nuke-and-pave in most cases when dealing with anything hardcoded, unless it's a small part of a much larger piece of work.
I'm almost for certain that what I have is going to have to get 90% recoded, but yes I am currently passing in and loading the flashvars into movieclips instances on the timeline like this:
Code:
var flashvars=this.root.loaderInfo.parameters;
filename.text=flashvars.filename;
description.text=flashvars.description;
mc_main.MovieClip=flashvars.image;
reflection.MovieClip=flashvars.reflection;
var loader1A = new Loader();
mc_main.addChild(loader1A);
loader1A.load(new URLRequest(flashvars.image));
var loader1B = new Loader();
reflection.addChild(loader1B);
loader1B.load(new URLRequest(flashvars.reflection));
However, the key/value pairs are not appended to the swf embed tag, they're in the script like this:
Code:
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
var flashvars = {};
flashvars.filename = "castle";
flashvars.description = "Description to go here.";
flashvars.URL = "http://www.google.com";
flashvars.image = "images/castle.jpg";
flashvars.reflection = "images/castle.jpg";
flashvars.filename2 = "dog";
flashvars.description2 = "Description to go here.";
flashvars.URL2 = "http://www.apple.com";
flashvars.image2 = "images/dog.jpg";
flashvars.reflection2 = "images/dog.jpg";
etc.....(duplicated for 3rd, 4th, and 5th image)...
var params = {};
params.allowscriptaccess = "always";
var attributes = {};
attributes.id = "flashContent";
swfobject.embedSWF("coverflow.swf", "alternateContent", "500", "450", "9.0.0", "expressInstall.swf", flashvars, params, attributes);
</script>
As you can see, I don't even have a loop setup in the AS because everything is assigned to instances, so I have to make vars for every image.
Can your idea of serialization still work by doing it the way I have it above, in the script tag, instead of passing it through via query string?
I don't have a link to the file.... can I attach a ZIP?
If you're adding these things to a known movieclip on the timeline, why do you have to define them in this long crazy inline code without a loop?
Also adding URL1, URL2, etc. as named object parameters to the flashvars is a very long way of going about this.
If you're going to serialize, you can pass all the data as a long string through flashvars and never have to define subproperties, just make a PHP array with all your data and serialize it, then send the string as a single parameter. But just for the sake of argument, if you were going to send it down as a set of objects this way, why not...
Code:
//javascript
var flashvars = Array();
flashvars.push({filename:"castle",description:"Something",URL:"http://whatever"},{etc.});
and then in Flash adopt a loop that goes through...
Code:
var c:int = 0;
var loaders:Array = new Array();
for each (var dat:Object in root.loaderInfo.parameters) {
var newLoader:Loader = new Loader();
newLoader.load(new URLRequest(dat.URL));
if (c==0) {
mc_main.addChild(newLoader);
}
loaders.push(newLoader);
c++;
}
Then you can properly get loaders[0] or loaders[1], etc. ...moreover you can figure out which one's currently loaded up
Code:
for each (var load:Loader in loaders) {
if (main_mc.contains(load)) {
//you know this one's already been added
}
}
I don't see any reason not to use arrays and loops for something like this...
"...why do you have to define them in this long crazy inline code without a loop? "
LOL Because that's the difference between knowing what you're doing (you)....and not (me). The way I have them defined is the best way I knew how. I've been doing this all of 6 months now, and half of that time has been focusing more on CSS. I haven't been able to get the hang of loops and their proper use or using "push". When I'm modifying existing code, I can understand what's happening for the most part to make minor changes or duplicate sections to create additional content...but I swear sometimes I can't write a fundamental app to save my life!
I was putzing with trying to make arrays and loops though, just mistakenly thought the only way I could make it work is if the MCs were dynamic as well.
Ok, although I still feel very overwhelmed, I feel like I have a (little bit) better handle on this mainly because it's nice to know how to use an array and loop for what I've got so thank you very much for that!!
However... this just dawned on me... if take the stuff off the timeline, delete the instances, and make the MCs create dynamically and pull in a class for the tweens, then the loop won't work the way it's written now, right?
Well, as a disclaimer, I'm not saying anything I've written here is final code by any means...lol... I'm just trying to point in the right direction. You seem like a smart guy and I'm sure you'll get the hang of this. I can't actually advise you on what will happen if you delete some part of your file; I'm the guy at the bar who draws this thing on the napkin and hopes you say "eureka."
Just a thing about pushing and arrays, though... all languages work basically the same on this front... an array is a list of information, counted either by number or by name. To push is to add an item to the end of the list; to pop is to take an item off. To shift is to remove an item from the beginning of the list; to unshift is to add an item at the beginning. There are other array operations, like splice, that let you add or remove items from the middle of the list. An item can be anything the language supports, including another array, an object (which is basically a named- rather than numbered-array)...whatever. So the syntax I used in javascript:
var flashvars = Array();
var object1 = Object();
object1.filename="castle";
object1.description="Something";
object1.URL = "http://whatever";
flashvars[0] = object1;
It's just that var obj = {a:"a"} is the shorthand for making a new object called obj, where obj.a equals the string "a". So by reduction you can get to a much shorter and more efficient way of doing things.
My best advice about the timeline is don't take anything off it until you get what you're adding to work... although in the long run, creating your MC's dynamically is definitely the way to go, it sounds like your coverflow app might be locked in with a limited number and you're stuck with adding to the items you have on-screen at the start. Be ready to go into the jungle once you start adding stuff dynamically; it's good to have a firm grasp of how arrays work before you jump into that, because if you add new MC's dynamically, you'll want them to be kept all in a single list that you can scroll through, like an Array...
And the loop that is loading all the image loaders will still load the textfields for filename and description? And I wouldn't need this anymore (or to define the variables--i.e. "filename.text=flashvars.filename;" and so forth):
Code:
var loader1A = new Loader();
mc_main.addChild(loader1A);
loader1A.load(new URLRequest(flashvars.image));
var loader1B = new Loader();
reflection.addChild(loader1B);
loader1B.load(new URLRequest(flashvars.reflection));
because the loop will build that, correct?
However, if I'm not building my MC's dynamically yet, then how do I assign/target what's being pulled in to the MC instances on the timeline?
I'm a "gal" and thanks for saying I seem like I'm smart because I really feel like I'm floundering sometimes... I'm learning as I go along which makes it rough and very slow-going. I find it amusing (and disheartening sometimes) that I'll show someone else what I'm working on--i.e. this coverflow--that doesn't know much about AS or Flash and they look at me like, "It took you HOW long to figure out how to make THAT??" lol
Thank you again for taking the time tonight to help me through this...there isn't anyone I can confer with about this stuff and I'm stuck struggling for hours on end, getting most things to work by trial and error and after surfing several forum boards and tutorials. I feel I really got lucky that this is the first time I've ever posted on here and actually got help almost immediately!
Okay, I think I gave you some bad advice. I haven't used swfobject for awhile and I thought it could do something which on second thought, there are some good reasons it can't. I guess they have this "flashvars" variable which you can pass {name:value} keys in one single object, and that automatically writes in my.swf?name=value ... when it's doing the flash embed. The stuff after the ? is what's actually passed into Flash, and it can only be a string of something=bla&somethingelse=blabla. Right. But swfobject does a little trick and convers your {something:bla} object into that string.
But you can't send it an array of separate objects like I was saying you could. There's no way for it to render that down into a string.
Just for the sake of understanding Arrays though, if you had an array like:
var array = [{label:"hello",data:99},{label:"world",data:88}]
The whole point is not to use label1 in one object and label2 in the other object as the key names. This is an array [square brackets] with two objects in it. The objects have the same format, so you can say
array[0].label //"hello"
array[1].label //"world"
Now again, that's apparently not going to fly with flashvars and swfobject. So in a sense you're stuck with this manual approach in javascript, and naming them different things like you're doing {label1:"hello", label2:"world", etc.} so they can all fit into one string without the names being duplicated; unless you can do some experiments in PHP and serialization...
On the Flash side, even if you have to name them manually in javascript, you can still make a loop like this...
Code:
var numImages = 2;
var loaders:Array = [];
for (var i:int =0;i<numImages;i++) {
var loaderA = new Loader();
mc_main.addChild(loaderA);
loaderA.load(new URLRequest(flashvars.image+i)); //if it was image1:"something.jpg" in javascript
var loaderB = new Loader();
reflection.addChild(loaderB);
loaderB.load(new URLRequest(flashvars.reflection+i)); //loads reflection1
loaders.push({main:loaderA,reflection:loaderB});
}
Then you can go through your images as loaders[0].main, loaders[0].reflection, loaders[1].main, loaders[1].reflection... I hope this post made some sense...
[edit: my flash code up there would actually look for image0 and reflection0 from the flashvars, then image1 and reflection1 ...do you see that?]
Last edited by joshstrike; 01-26-2010 at 04:11 PM.
for arrays in flashvars, you can always use a common delimiter to separate values, and split them in flash. You just need to make sure that you keep the same order for each item...
Code:
?a=hello|world|how|are|you&b=i|am|dandy|thank|you
then if the only thing you're passing into the flash vars is these items, you can do automate the parsing like this...
Code:
var itemArray:Array = new Array();
for(var s in root.loaderInfo.parameters){
itemArray.push(root.loaderInfo.parameters[s].split('|'));
}
so then, myArray[0] is the first item from flashvars, and myArray[0][0] is the first value "hello".
Reply With Quote
The way I have them defined is the best way I knew how. I've been doing this all of 6 months now, and half of that time has been focusing more on CSS. I haven't been able to get the hang of loops and their proper use or using "push". When I'm modifying existing code, I can understand what's happening for the most part to make minor changes or duplicate sections to create additional content...but I swear sometimes I can't write a fundamental app to save my life!
