Page 4 of 4 FirstFirst ... 234
Results 31 to 37 of 37

Thread: Ext Jpgs with loading bars - clean up actionscript + fade up/down

  1. #31
    Join Date
    Mar 2007
    Location
    Currently: New York/Philadelphia
    Posts
    2,735
    Thanks
    3
    Thanked 519 Times in 507 Posts

    Default

    The preloading animation is working fine for the first page but is missing each time you advance to each subsequent page. I've even checked it with your template and the same thing is happening. I'm not sure is it's just because these loose ends will be tied up with the next bit of coding or not.
    Loose ends, as you say. Recalling and dispersing the loading message has more to do with the fading. So, I've left that off as yet. We'll cover it when we go over using MC Tween.

    Also as you'll see from my xml file, the maximum number of images i'll load in will be 2, sometimes 1 if it's in landscape orientation. Is there a way to hide any unused loading movieclips? Something like...if node is empty hide movieclip?
    Sure, it's possible. We're already testing to see if the node is empty (well, we're testing to see if it's NOT empty, but same thing) and running a conditional based off of that. So, you can just add an else statement to it. I'll cover it in my next installment.

    I'm also getting 1 url error each time i advance, "images/" is this because we're using a path? I've tried with different paths and images but it still comes up.
    Yeah, "images" represents the path to the images. If all of your files are in the same folder ("images" in this case), then it's much easier to declare the path once at the top of the XML, then simply add the filename to the rest of the XML. Your XML has path="images/. So, the path to your images (relative to the .fla) should be images/filename.jpg. In your previous examples you posted a path of cms/project1/filename.jpg. If that's still your directory structure, replace images/ with cms/project1/. Remember, the path is FROM the .fla file.

    Let me know when you have this path thing sorted out and we'll move on to the animations.

  2. The Following User Says Thank You to Medyman For This Useful Post:

    GordonBennett (10-10-2008)

  3. #32
    Join Date
    Mar 2007
    Location
    Currently: New York/Philadelphia
    Posts
    2,735
    Thanks
    3
    Thanked 519 Times in 507 Posts

    Default

    I see what you mean now about the path thing. I didn't quite understand you before. I was testing with each node filled, so I didn't notice the mistaken logic. The culprit is in these two lines:
    Code:
    var imagePath:String = path + xml.firstChild.childNodes[page].childNodes[i].childNodes
    if(imagePath!='') {
    We're setting imagePath equal to the value of the node plus the path variable. Then in the conditional, we're testing to see if imagePath is blank. That'll never be true (unless something is wrong with the path variable). So, let's fix that. Change it to:
    Code:
    var imagePath:String = path + xml.firstChild.childNodes[page].childNodes[i].childNodes
    		if(imagePath!=path) {
    Hopefully that fixes your URL errors. Confirm that it does and we'll move on.

  4. The Following User Says Thank You to Medyman For This Useful Post:

    GordonBennett (10-10-2008)

  5. #33
    Join Date
    Jul 2008
    Location
    London, England
    Posts
    25
    Thanks
    29
    Thanked 0 Times in 0 Posts

    Default

    Sweet! Worked a treat. Thanks Medyman.

    Reviewing the MC Tween now and ready to move on.

    Gordon

  6. #34
    Join Date
    Mar 2007
    Location
    Currently: New York/Philadelphia
    Posts
    2,735
    Thanks
    3
    Thanked 519 Times in 507 Posts

    Default

    Hey Gordon...
    Sorry for not posting for a few days. Had some personal things to deal with. Anyway, let's get back with this.

    To refresh: We currently have an XML powered "slideshow" that loads up to 3 images per page and then adds pagination functionality.

    Now we're looking to add some visual interest and tie up some loose ends. As mentioned before, we'll be using MC Tween to perform all the tweening. There are other tweening engines out there -- including Flash's native Tween class -- but I'm most fond of MC Tween for use with AS 2.

    First, we "include" MC Tween so we can access its methods:
    Code:
    // Import MC Tween
    #include "mc_tween2.as"
    Next, let's animate the "loading" message. Currently, we have it being set to be invisible within the onLoadInit() method call. Using MC Tween, let's fade the "loading" message out.
    Code:
    listener.onLoadInit = function(target) {
    	target._parent.loading.alphaTo(0, .75, "easeOutQuad");
    }
    This uses an alpha tween to go from loading's current alpha state to 0% alpha transparency over .75 seconds using an "easeOutQuad" animation type. Go over the MC Tween documentation for more about animation/ease types.

    Ok, so now it fades. Like you mentioned before, this only happens the first time. That is because once it's tweened, it's alpha is at 0. Therefore, there is no need to tween it again. So, we should reset the alpha transparency before we tween it.
    Code:
    // Load Images
    function loadImages(page) {
    	pageNo.text = "PAGE " + (page+1) + " OF " + total;
    	for(i=0;i<3;i++) {
    		positions[i].loading.alphaTo(100, .75, "easeOutQuad");
    		var imagePath:String = path + xml.firstChild.childNodes[page].childNodes[i].childNodes
    		if(imagePath!=path) {
    			var loader:MovieClipLoader = new MovieClipLoader();
    			var listener:Object = new Object();
    			
    			listener.onLoadInit = function(target) {
    				target._parent.loading.alphaTo(0, .75, "easeOutQuad");
    			}
    			
    			loader.addListener(listener);
    			loader.loadClip(imagePath,positions[i].holder);
    		}
    	}
    }
    Alright, great! Now we have the "loading" message showing where there is no image to be loaded. Instead of showing that, let's fade out that particular "frame". We have a conditional that tests to see if an image is to be loaded within a frame. We can utilize that to set an "else" conditional in case the "frame" is empty.
    Code:
    // Load Images
    function loadImages(page) {
    	pageNo.text = "PAGE " + (page+1) + " OF " + total;
    	for(i=0;i<3;i++) {
    		positions[i].loading.alphaTo(100, .75, "easeOutQuad");
    		var imagePath:String = path + xml.firstChild.childNodes[page].childNodes[i].childNodes
    		if(imagePath!=path) {
    			var loader:MovieClipLoader = new MovieClipLoader();
    			var listener:Object = new Object();
    			
    			listener.onLoadInit = function(target) {
    				target._parent.loading.alphaTo(0, .75, "easeOutQuad");
    			}
    			
    			loader.addListener(listener);
    			loader.loadClip(imagePath,positions[i].holder);
    		}
    		else {
    			positions[i].alphaTo(0, .5, "easeOutQuad");
    		}
    	}
    }
    Now test and you'll find that once a "frame" is faded out, it stays that way. Again, we need to reset the alpha of the positions[i] movieclip.
    Code:
    // Load Images
    function loadImages(page) {
    	pageNo.text = "PAGE " + (page+1) + " OF " + total;
    	for(i=0;i<3;i++) {
    		positions[i].loading.alphaTo(100, .75, "easeOutQuad");
    		var imagePath:String = path + xml.firstChild.childNodes[page].childNodes[i].childNodes
    		if(imagePath!=path) {
    			positions[i].alphaTo(100, .5, "easeOutQuad");
    			var loader:MovieClipLoader = new MovieClipLoader();
    			var listener:Object = new Object();
    			
    			listener.onLoadInit = function(target) {
    				target._parent.loading.alphaTo(0, .75, "easeOutQuad");
    			}
    			
    			loader.addListener(listener);
    			loader.loadClip(imagePath,positions[i].holder);
    		}
    		else {
    			positions[i].alphaTo(0, .5, "easeOutQuad");
    		}
    	}
    }
    There you have it. You should now have the fade-in/out that you were looking for. Post back with any questions.

  7. The Following User Says Thank You to Medyman For This Useful Post:

    GordonBennett (10-15-2008)

  8. #35
    Join Date
    Mar 2007
    Location
    Currently: New York/Philadelphia
    Posts
    2,735
    Thanks
    3
    Thanked 519 Times in 507 Posts

    Default

    For reference, below is the AS that I have:
    Code:
    // Import MC Tween
    #include "mc_tween2.as"
    
    // Initiate XML
    var xml:XML = new XML();
    xml.ignoreWhite = true;
    
    // Variables
    var total:Number = new Number();
    var path:String = new String();
    var positions:Array = new Array(left, center, right);
    var current:Number = 0;
    
    // Load XML 
    xml.onLoad = function(success) {
    	if(success) {
    		total = xml.firstChild.childNodes.length // Set total number of pages
    		path = xml.firstChild.attributes.path;
    		loadImages(current);
    	}
    	else {
    		trace("Error: XML Didn't Load");
    	}
    }
    
    // Load Images
    function loadImages(page) {
    	pageNo.text = "PAGE " + (page+1) + " OF " + total;
    	for(i=0;i<3;i++) {
    		positions[i].loading.alphaTo(100, .75, "easeOutQuad");
    		var imagePath:String = path + xml.firstChild.childNodes[page].childNodes[i].childNodes
    		if(imagePath!=path) {
    			positions[i].alphaTo(100, .5, "easeOutQuad");
    			var loader:MovieClipLoader = new MovieClipLoader();
    			var listener:Object = new Object();
    			
    			listener.onLoadInit = function(target) {
    				target._parent.loading.alphaTo(0, .75, "easeOutQuad");
    			}
    			
    			loader.addListener(listener);
    			loader.loadClip(imagePath,positions[i].holder);
    		}
    		else {
    			positions[i].alphaTo(0, .5, "easeOutQuad");
    		}
    	}
    }
    
    // Next Button
    next.onRelease = goForward;
    function goForward() {
    	current++;
    	if(current >= total) { current = 0; }
    	loadImages(current);
    }
    
    // Previous Button
    prev.onRelease = goBackward;
    function goBackward() {
    	current--;
    	if(current <= 0) { current = (total-1); }
    	loadImages(current);
    }
    
    xml.load("test.xml");

  9. The Following User Says Thank You to Medyman For This Useful Post:

    GordonBennett (10-15-2008)

  10. #36
    Join Date
    Jul 2008
    Location
    London, England
    Posts
    25
    Thanks
    29
    Thanked 0 Times in 0 Posts

    Default

    That's absolutely fantastic! Exactly how i imagined it to work. I can't thank you enough Medyman, you've certainly shown me the flexibility and full potential of Flash and actionscript!

    A million thank you's.

    Gordon

  11. #37
    Join Date
    Mar 2007
    Location
    Currently: New York/Philadelphia
    Posts
    2,735
    Thanks
    3
    Thanked 519 Times in 507 Posts

    Default

    You're very welcome. I'm glad I could help.

  12. The Following User Says Thank You to Medyman For This Useful Post:

    GordonBennett (10-16-2008)

Bookmarks

Posting Permissions

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