Sunday, July 3, 2011

ActionScript Slideshow, from the Ground Up

So the last week or so has had a few ups and downs. Among them, a lost job opportunity I had been treading water for for maybe 5 weeks now, a particularly hostile environment at my dayjob, and dealing with the death of a classmate in a very small and close school. Juxtapose that against the fantastic announcement of my mother being awarded tenure and promotion to Associate Professor of Biology, some really pleasant times with people really close to me, noticeable improvement in terms of my health - which is another post for some later point - and the hinting at the potential for a revamp of a very, very large job indeed. All together makes for a rather emotionally charged programmer.

Damn women programmers.

For the last week, however, my project at hand has been a bit of a slideshow project, which I hope to be able to do all kinds of neat stuff with at some point, and has turned out to be more therapeutic than anything else. Working in ActionScript, I've managed to get the last kinks worked out of the looping and tweening in a way that I'm happy with. I have a Slide class which loads into it my image, and is then added to a sprite in my Main class. This is, by all means, a work in progress. Next key points to tackle:
  • Pulling the image url from an xml file into imagesArray and pushing from that to my slides
    • Working with better loader classes - LoaderMax? - to load in my images
  • Externalizing my slideBox sprite as it's own SlideBox class
  • A dynamic text field associated with each image, pulled in from the xml, and placed into some kind of 50% alpha'd overlay
  • Nav buttons right and left
  • Figure out why my code breaks when I change the Xscale and Yscale params to Height and Width... Which when I'm not using a random file of desktops which are massive, will be essential
  • FINALLY: Exporting for mobile - Android and iOS.
Furthermore, I really need to figure out how to post the swf here on Blogger. I would love to give you a shot of my final product, but it's the external image files that is tricking the packaging up. Anyone with any thoughts on the how-to, I'm all ears. But.... Why do I get the impression I will just have to register a domain name? Unfortunately, I just discovered my required reading for fall semester will be... hefty. We'll see. And without further ado... Code after the jump.




######## SlideShow.as ########

package
{

    import flash.display.Sprite;
    import flash.display.Loader;
    import flash.events.ProgressEvent;
    import flash.events.MouseEvent;
    import flash.net.URLRequest;
    import flash.events.Event;
    import com.greensock.TweenLite;


    public class SlideShow extends Sprite
    {
        public var fileRequest1:URLRequest;
        public var fileRequest2:URLRequest;
        public var fileRequest3:URLRequest;
        public var imageArray:Array;
        private var slidenum:int;
        private var looping:Boolean = false;

        public var thisSlide:ASlide;
        public var newSlide:ASlide;
        public var slideBox:Sprite;

        public function SlideShow()
        {
            slidenum = 0;

            imageArray = new Array(["assets/ud_01.jpg"],["assets/ud_02.jpg"],
               ["assets/ud_03.jpg"],["assets/ud_04.jpg"],
               ["assets/ud_05.jpg"],["assets/ud_06.jpg"],
               ["assets/ud_07.jpg"],["assets/ud_08.jpg"]);

            addEventListener(MouseEvent.CLICK, onClick);

            slideBox = new Sprite();
            addChild(slideBox);

        }

        public function onClick(e:MouseEvent)
        {
            if (! looping)
            {
                fileRequest1 = new URLRequest(imageArray[slidenum]);
                thisSlide = new ASlide(fileRequest1);

                fileRequest2 = new URLRequest(imageArray[slidenum + 1]);
                newSlide = new ASlide(fileRequest2);

                newSlide.addEventListener(Event.ADDED, onLoaded);
                slidenum++;
            }
            else if (looping)
            {
                fileRequest2 = new URLRequest(imageArray[slidenum]);
                newSlide = new ASlide(fileRequest2);

                newSlide.addEventListener(Event.ADDED, onLoaded);
                slidenum++;
            }
        }

        public function onLoaded(e:Event)
        {
            trace(slidenum);

            if (looping)
            {
                slideBox.addChildAt(newSlide, 3);
                newSlide.x = 550;
                newSlide.y = 210;
                newSlide.scaleX = .01;
                newSlide.scaleY = .008;

                TweenLite.to(slideBox.getChildAt(1), .5, {x:-600});
                TweenLite.to(slideBox.getChildAt(2), .5, {x:-225, y:110, scaleX:.1, scaleY:.08});
                TweenLite.to(slideBox.getChildAt(0), .5, {x:50, y:50, scaleX:.15, scaleY:.13});
                TweenLite.to(slideBox.getChildAt(3), .5, {x:475, y:110, scaleX:.1, scaleY:.08, onStart:shuffle});

                if (slidenum == imageArray.length)
                {
                    slidenum = 0;
                }
            }
            else if (!looping)
            {
                if (slidenum == 1)
                {
                    slideBox.addChildAt(newSlide, 0);
                    newSlide.x = 550;
                    newSlide.y = 210;
                    newSlide.scaleX = .01;
                    newSlide.scaleY = .008;
                    TweenLite.to(newSlide, .5, {x:475, y:110, scaleX:.1, scaleY:.08, delay:.2});

                    slideBox.addChildAt(thisSlide, 1);
                    thisSlide.x = 550;
                    thisSlide.y = 110;
                    thisSlide.scaleX = .1;
                    thisSlide.scaleY = .08;
                    TweenLite.to(thisSlide, .5, {x:50, y:50, scaleX:.15, scaleY:.13, delay:.1});
                }

                if (slidenum == 2)
                {

                    slideBox.addChildAt(newSlide, 0);
                    newSlide.x = 550;
                    newSlide.y = 210;
                    newSlide.scaleX = .01;
                    newSlide.scaleY = .008;

                    TweenLite.to(slideBox.getChildAt(2), .5, {x:-225, y:110, scaleX:.1, scaleY:.08});
                    // this to old (1);
                    TweenLite.to(slideBox.getChildAt(1), .5, {x:50, y:50, scaleX:.15, scaleY:.13, onStart:newThisSwitch});
                    // new to this (2);
                    TweenLite.to(slideBox.getChildAt(0), .5, {x:475, y:110, scaleX:.1, scaleY:.08});
                    // new in (0;//newSlide is at index 0, oldSlide is at index 1, thisSlide is at index 2
                }
                else if (slidenum >= 3 && slidenum < imageArray.length - 1)
                {
                    slideBox.addChildAt(newSlide, 3);
                    newSlide.x = 550;
                    newSlide.y = 210;
                    newSlide.scaleX = .01;
                    newSlide.scaleY = .008;

                    TweenLite.to(slideBox.getChildAt(1), .5, {x:-600});
                    TweenLite.to(slideBox.getChildAt(2), .5, {x:-225, y:110, scaleX:.1, scaleY:.08});
                    TweenLite.to(slideBox.getChildAt(0), .5, {x:50, y:50, scaleX:.15, scaleY:.13});
                    TweenLite.to(slideBox.getChildAt(3), .5, {x:475, y:110, scaleX:.1, scaleY:.08, onStart:shuffle});
                }
                else if (slidenum == imageArray.length - 1)
                {
                    slideBox.addChildAt(newSlide, 3);
                    newSlide.x = 550;
                    newSlide.y = 210;
                    newSlide.scaleX = .01;
                    newSlide.scaleY = .008;

                    TweenLite.to(slideBox.getChildAt(1), .5, {x:-600});
                    TweenLite.to(slideBox.getChildAt(2), .5, {x:-225, y:110, scaleX:.1, scaleY:.08});
                    TweenLite.to(slideBox.getChildAt(0), .5, {x:50, y:50, scaleX:.15, scaleY:.13});
                    TweenLite.to(slideBox.getChildAt(3), .5, {x:475, y:110, scaleX:.1, scaleY:.08, onStart:shuffle});

                    slidenum = 0;
                    looping = true;
                }
            }
        }

        private function thisOldSwitch()
        {
            slideBox.swapChildrenAt(2, 1);
        }

        private function newThisSwitch()
        {
            slideBox.swapChildrenAt(2, 1);
        }

        private function shuffle()
        {
            slideBox.swapChildrenAt(3, 0); // added swaps with this for on top
            slideBox.removeChildAt(1); // remove old tweened to left
        }
    }
}


######## ASlide.as ########

package
{

    import flash.display.Sprite;
    import flash.display.Loader;
    import flash.events.ProgressEvent;
    import flash.net.URLRequest;
    import flash.events.Event;
    import flash.display.DisplayObject;

    public class ASlide extends Sprite
    {
        public var myLoader:Loader;
        public var thisWidth:int;
        public var thisHeight:int;
      
        public function ASlide(theURL:URLRequest)
        {
          
            myLoader = new Loader();
            myLoader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, onLoaderProgress);
            myLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoaderComplete);
            myLoader.load(theURL);

        }
        public function onLoaderProgress(e:ProgressEvent)
        {
        }

        public function onLoaderComplete(e:Event)
        {
            addChild(myLoader);  
        }
    }
}


I'm sure, yes, there has to be a better way, but trust me guys, as I said, this is more therapy than anything.

No comments:

Post a Comment