Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 28

Thread: Loading Images

  1. #1
    Regular Coder
    Join Date
    Mar 2005
    Posts
    240
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Loading Images

    Hi gang!
    I've got a flash file I built where there are scrolling images that fade in, scroll and fade out and this happens with three images...

    However, I loaded the images inside the FLA and between the images, the tweens and the effects, the flash file gets pretty big and therefore takes a while to load when you first access the site.

    It's not a type of animation that merits a pre-loader as it's more a "decoration" rather than a main feature on the site.

    Just wondering if creating a flash file with some actionscript that calls images in a directory and accomplishes the same effect would render the file smaller in size and therefore load faster?

    Is this possible? Anyone out there can help me with the actionscript?

  • #2
    Senior Coder gnomeontherun's Avatar
    Join Date
    Sep 2007
    Location
    Houston
    Posts
    2,846
    Thanks
    10
    Thanked 238 Times in 229 Posts
    First things first, have you already compressed your images properly?

    You could have the images loaded dynamically, so they wouldn't all load before the scrolling starts, just the first one and then it loads the second.

    There are some tutorials about loading images dynamically, some use XML some don't. Try a Google search, and there are plenty of decent tutorials out there.

    If you have trouble modifying a tutorial for your site, just post more questions here.

  • #3
    Regular Coder
    Join Date
    Mar 2005
    Posts
    240
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I used photoshop for the images...How would I compress with flash or a third party software?

  • #4
    Senior Coder gnomeontherun's Avatar
    Join Date
    Sep 2007
    Location
    Houston
    Posts
    2,846
    Thanks
    10
    Thanked 238 Times in 229 Posts
    Well you should export the images from photoshop, and that is how you can compress them. What are you using now? How large are they? What file type are you importing into Flash?

  • #5
    Regular Coder
    Join Date
    Mar 2005
    Posts
    240
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hi again
    You mean compress in photoshop as in save for "web"?? The images are 72 dpi and 905x600... the width of the website is 900 so that's why they're so big. I'm importing the jpg into flash...

    Let me know if I'm doing something wrong!

  • #6
    Senior Coder gnomeontherun's Avatar
    Join Date
    Sep 2007
    Location
    Houston
    Posts
    2,846
    Thanks
    10
    Thanked 238 Times in 229 Posts
    Ok you said photoshop, and sometimes people import the PSD or oversized images into Flash and wonder why it is slow. You are doing it right. You may be able to export them as JPG and compress them more, depending on how much quality you want to lose.

    Again there are plenty of tutorials on dynamic image loading in Flash out there, so pick one that seems to fit your needs best and if you need help just ask!

  • #7
    Regular Coder
    Join Date
    Mar 2005
    Posts
    240
    Thanks
    1
    Thanked 0 Times in 0 Posts
    thanks again!
    Would dynamic image loading load things faster? If so, I'll need your help... never done anything like that...

  • #8
    Senior Coder gnomeontherun's Avatar
    Join Date
    Sep 2007
    Location
    Houston
    Posts
    2,846
    Thanks
    10
    Thanked 238 Times in 229 Posts
    It will let the Flash document load faster, and then the images will get loaded later. Overall it just changes the fact that you don't have to load all of the images before it starts to play. Search Google for a tutorial.

  • #9
    Regular Coder
    Join Date
    Mar 2005
    Posts
    240
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks I'll look it up... How would I go about achieving the fade in, scroll up effects after dynamically loading the images... I'm used to having things in the library while doing actions to them...

    Thanks

  • #10
    Senior Coder gnomeontherun's Avatar
    Join Date
    Sep 2007
    Location
    Houston
    Posts
    2,846
    Thanks
    10
    Thanked 238 Times in 229 Posts
    I remembered a thread from a while ago, and think it might be a big help.

    adding Fade-in to XML random slideshow flash

  • #11
    Regular Coder
    Join Date
    Mar 2005
    Posts
    240
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Ok
    So we're using this code:

    Code:
    import mx.transitions.Tween;
    import mx.transitions.easing.*;
    
    pauseTime = 2000;
    
    xmlImages = new XML();
    xmlImages.ignoreWhite = true;
    xmlImages.onLoad = loadImages;
    xmlImages.load("images.xml");
    
    function loadImages(loaded) {
    	if (loaded) {
    		xmlFirstChild = this.firstChild;
    		imageFileName = [];
    		totalImages = xmlFirstChild.childNodes[0].childNodes.length;
    		for (i=0; i<totalImages; i++) {
    			imageFileName[i] = xmlFirstChild.childNodes[0].childNodes[i].attributes.title;
    		}
    		randomImage();
    	}
    }
    function randomImage() {
    	if (loaded == filesize) {
    		var ran = Math.round(Math.random() * (totalImages - 1));
    		picture_mc._alpha = 0;  // Start image clip as invisible
    		picture_mc.loadMovie(imageFileName[ran], 1);  //Load random image from xml
    		var pictureTweenIn:Tween = new Tween (picture_mc,"_alpha",Normal.easeIn,0,100,1,true); // Use the Tween class to ease in the alpha from 0 to 100 over 1 seconds
    		pictureTweenIn.onMotionFinished = function () { // When done fading
    			_root.pause();  // Start pause() function
    		}
    	}
    }
    function pause() {
    	myInterval = setInterval(pause_slideshow, pauseTime);
    	function pause_slideshow() {
    		clearInterval(myInterval);
    		var pictureTweenOut:Tween = new Tween (picture_mc,"_alpha",Normal.easeOut,100,0,1,true); // After pause, start fade out
    		pictureTweenOut.onMotionFinished = function () { // Once faded out
    			_root.randomImage();  // Call next randomImage()
    		}
    	}
    }
    I take it I just put this in the main timeline and let it do it's thing?

    By the way... would the images.xml file look exactly like it looks on this tutorial: http://www.webzo.org/tutorials/flash...-slideshow.php... Would I just set up the images like this:

    <xml>
    <images>
    <a title = "pic1.jpg" />
    <b title = "pic2.jpg" />
    <c title = "pic3.jpg" />
    </images>
    </xml>
    Last edited by losse; 06-03-2008 at 06:30 PM.

  • #12
    Regular Coder
    Join Date
    Mar 2005
    Posts
    240
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Update...

    i got it to work... however it's going through all the images I have in the XML file... is it possible to have, say, 10 image in the XML file however the flash file only "play" 3 random images and then stop at the last one?

    And if it's not too much to ask... how would I modify this script so that the images slide in from bottom to top and top to bottom?

  • #13
    Senior Coder gnomeontherun's Avatar
    Join Date
    Sep 2007
    Location
    Houston
    Posts
    2,846
    Thanks
    10
    Thanked 238 Times in 229 Posts
    Sure we can pick 3 random images from a list. And sure we can have them slide in. Check the other thread I linked to for a tutorial on tweens, you should be able to figure that one. You will make minor adjustments to the two lines with :Tween in them. The new part is to just stop the randomImage() after 3 are loaded. Its untested right now, but this should be the basic idea.

    Code:
    function randomImage() {
    	if (loaded == filesize) {
    		for (z=0;z<3;z++) {
    		var ran = Math.round(Math.random() * (totalImages - 1));
    		picture_mc._alpha = 0;  // Start image clip as invisible
    		picture_mc.loadMovie(imageFileName[ran], 1);  //Load random image from xml
    		var pictureTweenIn:Tween = new Tween (picture_mc,"_alpha",Normal.easeIn,0,100,1,true); // Use the Tween class to ease in the alpha from 0 to 100 over 1 seconds
    		pictureTweenIn.onMotionFinished = function () { // When done fading
    			_root.pause();  // Start pause() function
    		}
    		}
    	}
    }

  • #14
    Regular Coder
    Join Date
    Mar 2005
    Posts
    240
    Thanks
    1
    Thanked 0 Times in 0 Posts
    So I replace the section in the previous code "function randomImage" with what you just posted? It didn't seem to change anything?

  • #15
    Senior Coder gnomeontherun's Avatar
    Join Date
    Sep 2007
    Location
    Houston
    Posts
    2,846
    Thanks
    10
    Thanked 238 Times in 229 Posts
    If you read it closely, you will see I added a for loop. It will limit it to 3 images.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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