A Flash Developer Resource Site

Results 1 to 4 of 4

Thread: Help Help Help Again

  1. #1
    Junior Member
    Join Date
    Sep 2010
    Posts
    3

    Help Help Help Again

    Help i posted this today but forgot how attach the adress i want to learn how to make a picture slider similary to this on the lefthand site on this site anybody knows if there are any tutorial to do this.... Thanks and have a good weekend

    to access press formel B in english
    http://www.formel-b.dk/

  2. #2
    Junior Member
    Join Date
    Sep 2010
    Location
    Singapore
    Posts
    12

    Thumbs up

    yo dude kafkat, i dont know any tutorial but i will make one for you:

    prerequisites needed to understand this tutorial:
    as3/as2 basics, (for loop, array, events);
    xml;
    class;
    Timer;
    loading external images to flash;
    arranging movieclips;
    tweener;


    step 1: prepare your workfiles:
    -create a folder mySlideshow
    -create a new .fla file, name it main.fla, save it to the folder mySlideshow
    -create a new .as file, name it theSlideShow.as, save it to the folder mySlideshow
    -create a new .xml file, name it photosXml.xml save it to the folder mySlideshow
    -create a new folder, name it photos save it to the folder mySlideshow
    -download the tweener file, search from google (you will need the folder "caurina"): this is for transition effects

    now you have all the files needed, so we start!

    step 2: prepare photos and xml
    -add the desired photos to the photos folder
    -open the xml file and add the photos filename in it:
    for example:
    <photos>
    <img location="img1.jpg" \>
    <img location="img2.jpg" \>
    <img location="img3.jpg" \>
    </photos>

    step 3:
    -open main.fla
    -open actions panel in layer 1 frame 1
    -copy and paste this:
    Actionscript Code:
    var slideShow:MovieClip = new photoSlideshow();
    addChild(slideShow);

    step 4:
    -open photoSlideshow.as
    - copy and paste this

    Actionscript Code:
    package{
        import flash.display.*;
        import flash.events.*;
        import flash.utils.Timer;
        import flash.net.URLLoader;
        import flash.net.URLRequest;
        import caurina.transitions.Tweener;
        import caurina.transitions.properties.ColorShortcuts;

       
        public class photoSlideshow extends MovieClip{
            var delay:Timer = new Timer(2000,1);
            var smallButtonIcon:MovieClip;
            var previousImage:Object;
            var myXML:XML;
            var imgList:XMLList;
            var buttonsContainer:MovieClip;
            var picturesContainer:MovieClip;
            var pictureWidth:Number = 300;
            var pictureHeight:Number = 300;
            var currentImage:Number = 0;
           
            public function photoSlideshow(){
                ColorShortcuts.init();
                this.addEventListener(Event.ADDED_TO_STAGE, beenAdded);
            }  
            private function beenAdded(e:Event):void{
                delay.addEventListener(TimerEvent.TIMER, delayDone);
               
                var urlRequest:URLRequest = new URLRequest("photosXml.xml");
                var loader:URLLoader = new URLLoader(urlRequest);
                loader.addEventListener(Event.COMPLETE, xmlLoaded);
                loader.load(urlRequest);
            }
            private function xmlLoaded(e:Event):void{
                picturesContainer = new MovieClip();
                addChild(picturesContainer);
               
                buttonsContainer = new MovieClip();
                buttonsContainer.y = 310;
                addChild(buttonsContainer);
               
                myXML = new XML(e.target.data);
                imgList = myXML.img.attribute("location");         
               
                createbuttons();
                loadImage(0);
            }
            private function createbuttons():void{
                var spacing:Number = 10;
                var btnWidth:Number = (pictureWidth/imgList.length()) - spacing;
                for(var i:int=0; i<imgList.length(); i++){
                    var btn:MovieClip = new MovieClip();
                    btn.name = "btn"+i;
                    btn.graphics.lineStyle(1,0x000000,0);
                    btn.graphics.beginFill(0xcccccc,1);
                    btn.graphics.drawRect(0,0,btnWidth,30);
                    btn.x = (btnWidth + spacing)*i;
                    buttonsContainer.addChild(btn);
                   
                    btn.addEventListener(MouseEvent.MOUSE_DOWN, btnMouseDown);
                }
            }
            private function btnMouseDown(e:MouseEvent):void{
                trace(e.target.name);
                currentImage = parseInt(e.target.name.substring(3,e.target.name.length));
                loadImage(currentImage);
            }
           
            private function loadImage(imgNum:Number):void{
                delay.stop();
                var urlRequest:URLRequest = new URLRequest("photos/"+imgList[imgNum]);
                var imgLoader:Loader = new Loader();
                imgLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, imgLoaded);
                imgLoader.load(urlRequest);
            }
            private function imgLoaded(e:Event):void{
                e.target.content.alpha = 0;
                e.target.content.width = 300;
                e.target.content.height = 300;
                picturesContainer.addChild(e.target.content);          
                Tweener.addTween(e.target.content, {alpha:1, time:0.5, transition:"linear", onComplete:imageHasAppeared});         
            }
            private function imageHasAppeared():void{
                btnLightUp();
                if(picturesContainer.numChildren > 1){
                    picturesContainer.removeChild(picturesContainer.getChildAt(0));
                }
                delay.start();
               
            }
            private function delayDone(e:TimerEvent):void{
                if(currentImage < (imgList.length()-1)){
                    currentImage++;
                }else{
                    currentImage = 0;
                }
                loadImage(currentImage);
            }
            private function btnLightUp():void{
                trace(currentImage);
                for(var i:int=0; i<imgList.length(); i++){
                    if(i==currentImage){
                        Tweener.addTween(MovieClip(buttonsContainer.getChildByName("btn"+i)),{_color:0xff0000, time:0.5,transition:"linear"});
                    }else{
                        Tweener.addTween(MovieClip(buttonsContainer.getChildByName("btn"+i)),{_color:0xcccccc, time:0.5,transition:"linear"});
                    }
                   
                }
            }
        }
    }


    summary:
    heres a list of all your files:
    main.fla
    photoSlideshow.as
    photosXml.xml
    /photos
    /caurina

  3. #3
    Junior Member
    Join Date
    Sep 2010
    Posts
    3

    Help again

    I know the array of loops and so many thanks for the tutorial i have done it the way you told but it do not seem to work when i test main.fla it does only show a white empty box???

  4. #4
    Junior Member
    Join Date
    Sep 2010
    Location
    Singapore
    Posts
    12
    Hi there,

    im not sure, whats the problem in your script,
    anyway, heres the zip file of the sample file, see attachment
    enjoy!
    Attached Files Attached Files

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