A Flash Developer Resource Site

Results 1 to 14 of 14

Thread: Gallery

  1. #1
    Junior Member
    Join Date
    Apr 2002
    Posts
    16

    Gallery

    Alright Guys,
    I know this is probably been asked loadsa times but i've never been able to find an answer. Basically im creating a web site for contracting (buildings) firm and they want to show photos of their work so im thinking a gallery should do the trick. The only difference is that if they wanted to add more photos after the site has been created i would have to open the original .fla file and edit and re-compile so im thinking flash could load the images dynamically. Well i got this working fine on my computer but since the images were on the same computer which was running the flash file in the first place there next to no loading time of the jpegs and so latency was noticed. When i uploaded them to a website and tested it...big problems and the gallery would have to loop a couple of times in order for all the images to be loaded into flash's/browser's cache. So i've had to come up with a preloader. The simplist thing i came up with is simply on frame run, it loads the jpegs into flash and then unloads them (since the jpegs are stored in flash's cache or the browsers cache the next time i call them to be loaded they take no time). No so simple as i'd thought...take a gander at what i've got:
    Code:
    stop();
    var gallerylistingXML:XML = new XML();
    gallerylistingXML.ignoreWhite = true;
    gallerylistingXML.onLoad = function() {
    	for (var i = 0; i<gallerylistingXML.firstChild.childNodes.length; ++i) {
    		var loaded:Boolean = false;
    		var tempurl:String;
    		temparray = new Array();
    		temparray[i] = new Object();
    		temparray[i].data = gallerylistingXML.firstChild.childNodes[i].attributes.URL;
    		tempurl = temparray[i].data;
    		trace(tempurl);
    		loadMovie(tempurl, "placeholder_mc");
    		unloadMovie("placeholder_mc");
    		trace(gallerylistingXML.firstChild.childNodes.length);
    		while (loaded == false) {
    			trace("complete");
    			var loadedbytes:Number = placeholder_mc.getBytesLoaded();
    			var totalbytes:Number = placeholder_mc.getBytesTotal();
    			if (loadedbytes == totalbytes) {
    				loaded = true;
    				preloader_tb.text = tempurl+" loaded";
    			}
    		}
    	}
    };
    gallerylistingXML.load("gallerylisting.xml");
    -the gallery gets the list of pictures from an XML file and loads it into an array where each location in the array is accessed in turn to load the URL of the photo.

  2. #2
    Senior Member
    Join Date
    Jun 2005
    Location
    Chicago
    Posts
    174
    yummig,

    I'm glad to hear that you are using XML to add extended functionality to your client's web site. XML allows projects become so dynamic... it's a shame more designers to not use it.

    I understand your problem as it is a common one with flash developers. Essentially your code is failing to work because of a little known rule that is hardly stressed enough by the gentile folks at Macromedia. Because of the nature of the Flash runtime, you need to use something called a time-based iterator. All this does is send instructions to the Flash runtime intevarls at a time. You can do this by using the onEnterFrame function or the setInterval function. If you replace your while loop with one of this iterators you should be ok.

    On the flip side though, My company has decided to release some of our actionscript code that powers our enterprise flash applications to the community. One of these programs is a media loader that takes care of all of the details of the down and dirty details. For example if you wanted to load 3 images this is all you would have to code

    var e = new Object();
    e.onLoadComplete = function() : Void
    {
    trace( "I finished Loading!!!" );
    }

    a = new HaloLoader();
    a.addObject( "1.jpg", this.image1 );
    a.addObject( "2.jpg", this.image2 );
    a.addObject( "3.jpg", this.image3 );
    a.load();
    a.addListener( e );

    This is all you have to do!!! The program also has the ability to track the progress of each image in realtime. If this is something you are interested in let me know. I will be posted in the class and documentation shortly on my blog!



    sam
    http://www.levelofindustry.com

  3. #3
    The CROW!!!
    Join Date
    Mar 2003
    Location
    somewhere. i think. not sure.
    Posts
    90
    hmm...i know this thread is kind of old, but i was being a good boy, and searching the forums before posting, and what you have here seems to be exactly what iw as looking for... so, anyway 2 things: 1)Would you mind if i used it, and 2)If no, can you tell me how to set it up?
    I Haunt the Shadows...I stalk the blackness of night... I am...
    THE CROW!!!

  4. #4
    Junior Member
    Join Date
    Apr 2002
    Posts
    16
    yeah sure you can use it,
    I did encounter some problems implimenting it but using some parts of the code i wrote i created a simpliar version of what i wanted. An example of this can be seen at www.hwfisherandson.co.uk, click on the "flash version" button and then once the flash web site has been loaded up click on the "gallery" button at the top and you can see the final product...the gallery is quite limited at the moment and is missing some aesthetic qualities and theres stuff that i can easily put right but since i am doing this as a favour for a family member who isnt giving me alot of input with the site i've got better things to spend my time doing. Flash has a bit of a problem with loading external assets and doesn't cater for all eventuallities. I initially wanted a slide show that ran through a series photos which were dynamically loaded from an xml file. The main issue with the idea is that i wanted each photo to show for a certain length of time including an alpha fade in/out...it is possible to accomplish this with various interval() commands....but i suggest you dont, personally i dont like using interval() commands because they are inaccurate and unpredictale and when you start using multiple interval() commands, before long your in a mess and the movie starts misbehaving plus it is also hard to trace the problem since it is not explicitly written anywhere how the interval() command behaves in different circumstances. If you still need a hand just give us a shout and i'll give you as much input as i can.

    Regards
    Last edited by yummig; 08-22-2005 at 05:54 PM.

  5. #5
    Senior Member
    Join Date
    Jun 2005
    Posts
    189
    samuel_agesilas i was wondering...(you seem to know what yer talking about...)
    i have a main MC witch is 24 frames long. on each frame there is an empty MC named a - x. I am using XML to load images into these MC's but i cant get any to load from frame 2 - 24 only frame one, and that one dissapears after i move off of it. I have it all working right now with the 24 MC's all in different layers and lasting the full 24 frame lenght of the main MC. Using visible = fasle/true i was wondering if there was a better way to achieve this.


    Another problem related to this, is i did the same thing as above but for just one image in an MC that is 24 frame long. the empty MC in this one is the only one there but i want it visible on only frame 20, but when it loads up its visible on frame one even though MC._visible = false;. If i move off of frame 1 snd then back to it again it is not visible, and it all works fine. Is there a some reason flash has to make it visible at first?...(all images load via xml)......sorry for going on so long

  6. #6
    Junior Member
    Join Date
    Apr 2002
    Posts
    16
    even though im not the person you wanted, i might be able to offer a little insight into your problem. To deal with your first paragraph you might want to consider the following:
    a) That there is no code on the 1st frame which contains Stop() which would cause the movie to stay on frame 1.
    b) That the movie is allowing for extra time to load the image since it is an external asset
    c)Are the movieclips a-x present on each frame or one movieclip per frame?
    d)A better solution is to use only one or two movieclips and just load pictures in and out of the movie and basically use a loop system(after the second time of loading a image which has already been loaded in the past, flash will load it from explorer's cache cutting loading times).

    As for your second paragraph, as long as the visibility is set to false on the first frame it will remain invisible until you tell flash otherwise. Check for code which may alter this and you will normally find some code which contradicts yourself and causes the image to remain visible after all you are not altering the visibility of the image its self but the visibility of the movie clip which the image is loaded into. You might want to check for the unloading of the movieclip because when you unload the movieclip and then re-load the movie clip back into flash, the properties will be set back to default and the movieclip will appear visible

    Hope this helps

    Regards

  7. #7
    The CROW!!!
    Join Date
    Mar 2003
    Location
    somewhere. i think. not sure.
    Posts
    90
    hmmm. I'm having a little trouble figuring out the layout of the gallery itself, aswell as the format to put the data into the xml. could you give an example of the layout, preferably leaving details to the minimum, as a) i like to try and figure stuff out, and b)i need to tailor the gallery to fit my website. so, really, the bare bones structure is what i'm looking for.
    TIA,
    THe_lone1.
    I Haunt the Shadows...I stalk the blackness of night... I am...
    THE CROW!!!

  8. #8
    Junior Member
    Join Date
    Apr 2002
    Posts
    16
    yeah sure,
    personally im not fully aware of the full workings of the xml language but i know the layout for purposes that me and you need.
    Code:
    <Gallerylisting>
    	<Photo URL="photo2.jpg" Description="a church steeple added to existing structure">Church Steeple</Photo>
    	<Photo URL="photo3.jpg" Description="inside view of the cricket club built from scratch">Cricket Club Inside</Photo>
    	<Photo URL="photo4.jpg" Description="outside view of the cricket club built from scratch">Cricket Club Outside</Photo>
    	<Photo URL="photo5.jpg" Description="view of an large extension placed on a house">Private Extension</Photo>
    	<Photo URL="photo6.jpg" Description="second view of a large extension placed on a house">Private Extension2</Photo>
    	<Photo URL="photo7.jpg" Description="view of a private house built from scratch">Private House</Photo>
    	<Photo URL="photo8.jpg" Description="view of a second floor built ontop of existing structure">Surgery Vert. Extension</Photo>
    	<Photo URL="photo9.jpg" Description="view of another private house">Private House2</Photo>
    	<Photo URL="photo10.jpg" Description="another random house">Random House</Photo>
    	<Photo URL="photo11.jpg" Description="another private house">Private House3</Photo>
    </Gallerylisting>
    //FDDL Developed by Sam Delaney
    the first and the last tags - <Gallerylisting> & </Gallerylisting> just declare the start and finish of the xml code. It is not crucial of what its called in this context, just a user friendly title will do.
    The following lines sandwiched between the start and finish tags are the assets which you want to load into flash. It doesn't matter how many of them that there are just aslong as they follow the same layout:
    <Photo URL="photo1.jpg" Description="a random picture">photo1</Photo>

    The only things you really need to change is values contained in the quotation marks and where photo1 is sandwiched between ><.
    URL="" is the target address of the file which needs to be loaded into flash
    Description="" is basically a description of the photo but it is optional
    >photo1< is basically a label value i use

    aslong as you have the URL value declared the others dont matter aslong as you maintain layout i.e. <Photo URL="photo1.jpg"></Photo>
    notice the "/" to close the tags

    You can enter as many attributes in it as you want i.e:
    <Photo URL="photo1.jpg" Date="12/03/05" Author="Me"></Photo>
    as long as you maintain the opening and closing of the tags

    to address the values in flash you use the following code:
    array1.description[i] = galleryXML.firstChild.childNodes[i].attributes.Description
    array1.date[i] = galleryXML.firstChil.childNodes[i].attributes.Date

    etc.

    the above code adds description and date values to the array from the current entity or "child" that its on. This code should be implimented in a for loop where you can alter a variable's number each pass you make i.e "i" so you can address each entity in the xml file and store its values accordingly.

    You can see basic examples of its implimentation in my first post but just give us a shout if you need any more help.

    Regards

  9. #9
    Senior Member
    Join Date
    Jun 2005
    Location
    Chicago
    Posts
    174
    Paingod,

    Sorry I didn't get back sooner. I haven't been monitoring my flashkit threads lately. But anyway, let's see...

    It's seems that the best course of action in your case would be to use actionscript on the first frame to load all of you images into empty movieclips. I would prefer this method over using the timeline. When you use actionscript for these kind of situations you have better control of the end result.

    In order to this you will need a copy of the loader class I wrote. You can download it here:

    http://www.levelofindustry.com/show.php?content_id=36

    Ok, so lets go over some step to get this working

    1. Download the sLoader class and place the sLoader.as file in the same directory were your source fla is located.
    2. Open your fla and go to where you have your image loading and xml loading functions.
    3. Remove all the keyframes from your timeline( you will not need them anymore )
    4. Make sure that Flash is set to understand Actionscript 2.0 syntax
    5. Insert the following actionscript code

    PHP Code:
    //Import the class
    import sLoader.as

    //Create a listener object
    var listener_object:Object = new Object();
    listener_object.onObjectLoad = function() : Void
    {
        
    //This function is called every time an images has finished loading.
    }
    listener_object.onLoadComplete = function() : Void
    {
        
    //This function is called when ALL of the images have finished loading.
    }

    //Instantiate an instance of the sLoader Class
    loader = new sLoader();                       

    //Create the MovieClip place holders and add images to the queue

    for ( var i:Number 024i++ )
    {
        
    loader.addObject/*the image location*/this.createEmptyMovieClip"i" i) );
    }

    //Registers the listener object with the loader class instance
    loader.addListenerlistener_object );

    //Tell the loader class to load all of the images in the queue one by one
    loader.load(); 
    6. Compile

    You should be all good. If all goes well you should the images loading on your screen one by one. Let me know if you need any help.



    Samuel Agesilas
    http://www.levelofindustry.com

  10. #10
    The CROW!!!
    Join Date
    Mar 2003
    Location
    somewhere. i think. not sure.
    Posts
    90
    samuel_agesilas...
    is it possible to do this in as1? or would it require a very hacky solution? i only have flash mx, and therefore am unable to use as2...
    I Haunt the Shadows...I stalk the blackness of night... I am...
    THE CROW!!!

  11. #11
    Senior Member
    Join Date
    Jun 2005
    Location
    Chicago
    Posts
    174
    The_lone1,

    hmm... I guess you could. However the sLoader class is written in as2, however I think I can port it to as1 ( probably as a smart MovieClip ). What do you think? Will that work for you?

    let me know

    Samuel Agesilas
    http://www.levelofindustry.com

  12. #12
    The CROW!!!
    Join Date
    Mar 2003
    Location
    somewhere. i think. not sure.
    Posts
    90
    well, if the code will work, hopefully it should work for what i need.
    I Haunt the Shadows...I stalk the blackness of night... I am...
    THE CROW!!!

  13. #13
    Senior Member
    Join Date
    Jun 2005
    Location
    Chicago
    Posts
    174
    The_lone1,

    Ok. I'll port it to AS1 and post it on my blog as soon as it's ready I'll post the link here.



    Samuel Agesilas
    http://www.levelofindustry.com

  14. #14
    The CROW!!!
    Join Date
    Mar 2003
    Location
    somewhere. i think. not sure.
    Posts
    90
    cool. cheers, samuel_agesilas.
    I Haunt the Shadows...I stalk the blackness of night... I am...
    THE CROW!!!

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  




Click Here to Expand Forum to Full Width

HTML5 Development Center