A Flash Developer Resource Site

Results 1 to 7 of 7

Thread: seasoned newb ready to jump off a short pier sp

  1. #1
    Junior Member
    Join Date
    Feb 2002
    Posts
    17

    seasoned newb ready to jump off a short pier sp

    Im trying in my project here to make sliding thumbnails, in other words move your mouse left or right and the bar with the thumbnails rolls left or right and the farther it moves to each side the faster it goes. Perfect example is here:
    http://flash-creations.com/notes/dyn...dingviewer.php

    As, much as I try i only understand very little of the script. I took a flash class last semester and i need to implement this in a packaged piece. Can anybody help me how to do this? I'm a visual learner unfortunately, If you know of a smipler way to do this with less code? Could you possibly post a FLA file that i could look at while some kind hearted professional could help me understand this? I could desperately need the help.

    Thanks so much! This board has saved my hiney multiple times. I value all your help as I am a young grasshopper on a long and treacherous (sp) journey. TY

  2. #2
    FK's Geezer Mod Ask The Geezer's Avatar
    Join Date
    Jul 2002
    Location
    Out In The Pasture
    Posts
    20,488
    Look through the Movies link above. There are free to download fla files you can get to see how they are made. I've seen those in there before.

  3. #3
    Junior Member
    Join Date
    Feb 2002
    Posts
    17
    hey geezer, I checked the donwloads section above the page. I did not see the FLA for it. It only links to to the source code page i have linked. And the files on the bottom of the donwloads page they charge 20 bucks for me to look at. Am I missing something?

  4. #4
    FK's Geezer Mod Ask The Geezer's Avatar
    Join Date
    Jul 2002
    Location
    Out In The Pasture
    Posts
    20,488
    The Movies link, in the blue bar above. It's on evey page of the forums. There are some of these scroller things in the Scripting section. I found one right off in the Scrolling sub-category here.

  5. #5
    Busy doing nothing Boris the Frog's Avatar
    Join Date
    Jan 2001
    Location
    Derby, UK
    Posts
    305
    I just added more comments to the code on that page for you:
    /********* DECLARE AND INITIALIZE VARIABLES **************************/
    // names of folder and pictures, in the order to put them into the slider
    var picnames:Array = [
    //change these names to be names of your photos in a folder called "flowers"
    //they don't need ".jpg" extensions written here
    "flower_orange",
    "flower_blue",
    "flower_pink",
    "flower_red",
    "flower_purple"
    ];

    // constants
    var PICPATH:String = "flowers/"; // folder with jpgs
    var NPICS:Number = picnames.length; // number of pictures to load
    var PICX:Number = 10; // x loc of big picture
    var PICY:Number = 10; // y loc
    var THUMBHOLDERX:Number = 0; // x location of thumbnail holder movieclip
    var THUMBHOLDERY:Number = 240; // y location
    var THUMBW:Number = 72; // width of each thumbnail
    var THUMBH:Number = 40; // height
    var MARGIN:Number = 10; // margin between thumbnails
    var TOTALBYTES:Number = 212000; // approx sum of bytes in all jpgs (x 2)
    var MAXPIXELS:Number = 12; // max number of pixels to move slider per frame

    // mask definition; mask is assumed to cover some part of the thumbnail slider (here the numbers
    // were chosen so that there are margins between the mask and the right and left edges of the movie
    // (which is 420 x 290), and enough space above and below the thumbs to show them when they 'grow'
    // on mouseover
    var MASKX:Number = 10; // start x location of mask
    var MASKW:Number = 400; // mask width
    var MASKY:Number = 230; // start y location of mask
    var MASKH:Number = 60; // mask height

    var totalloaded:Number = 0; // running tally of bytes loaded from all pics

    // index into pictures array, used for loading
    var ipic:Number;

    // set up loader, an instance of MovieClipLoader
    var loader:MovieClipLoader = new MovieClipLoader();

    // use the main timeline to listen to and respond to loader's broadcast events
    loader.addListener(this);

    /********* DEFINE FUNCTIONS, INCLUDING INIT FOR MOVIE SETUP **********/
    // thumbnail rollover handler

    function grow() {
    //"this" refers to the movieClip inside thumbs_mc that was rolled over
    this.onEnterFrame = function() {
    if (this._width < THUMBW * 1.2) {
    this._x -= this._width * .025;
    this._y -= this._height * .025;
    this._width *= 1.05;
    this._height *= 1.05;
    } else delete this.onEnterFrame;
    };
    }

    // thumbnail rollout handler

    function shrink() {
    //"this" refers to the movieClip inside thumbs_mc that was rolledOut
    this.onEnterFrame = function() {
    if (this._width > THUMBW) {
    this._width /= 1.05;
    this._height /= 1.05;
    this._x += this._width * .025;
    this._y += this._height * .025;
    } else delete this.onEnterFrame;
    };
    }

    // function to move thumbnail slider ("this" = thumbs_mc)

    function sliderControl() {
    //"this" refers to thumbs_mc
    var w:Number = this._width/2;
    var hw:Number = mask_mc._width/2;
    var npixels:Number;
    // only do when mouse over slider mask
    if (_ymouse > mask_mc._y && _ymouse < mask_mc._y + mask_mc._height) {
    // mouse over left half of slider:
    if (_xmouse > mask_mc._x && _xmouse < mask_mc._x + hw) {
    npixels = (hw - _xmouse) / hw * MAXPIXELS;
    this._x += npixels;
    if (this._x >= 0) this._x = this._x - w;
    // mouse over right half of slider:
    } else if (_xmouse > mask_mc._x + hw && _xmouse < mask_mc._x + mask_mc._width) {
    npixels = (_xmouse - hw) / hw * MAXPIXELS;
    this._x -= npixels;
    if (this._x <= -w) this._x = this._x + w;
    }
    }
    }

    // thumbnail click (onrelease) handler

    function openPic() {
    //loads the image file into the large picture movieclip
    pic_mc.loadMovie(PICPATH + picnames[this.i] + ".jpg");
    }

    // assign event handlers (called when all jpgs are loaded)

    function setupHandlers() {
    pct_txt.removeTextField(); // don't need loading indicator any more
    thumbs_mc.onEnterFrame = sliderControl; //set the sliderControl function to happen when thumb_mc enters a frame
    for (var i:Number = 0; i < NPICS*2; i++) {
    //set functions to result when the movieclip inside thumbs_mc is rolledover, out, pressed
    thumbs_mc["mc"+i].onRollOver = grow;
    thumbs_mc["mc"+i].onRollOut = shrink;
    thumbs_mc["mc"+i].onRelease = openPic;
    }
    }

    // listener function for broadcast 'done' message (for each pic)
    // onLoadInit gets executed when the movieclip has been loaded into _mc AND
    // its width and height data are available.
    // (_mc = the movieclip being loaded into)
    // this routine sets the size and position of each thumbnail clip as its jpg
    // is loaded and starts the next one loading. When all have been loaded,
    // a random picture is loaded into pic_mc and setupHandlers is called to
    // assign handlers to each thumbnail movieclip

    function onLoadInit(_mc:MovieClip) {
    //this function is called for each movieclip made inside thumbs_mc
    //after a picture has been loaded into it
    //see last line of function init()
    //_mc now refers to thumbs_mc.mcXXX
    //as ipic increments the next picture will be loaded
    // this gets done when the jpg is completely loaded:
    _mc._width = THUMBW;
    _mc._height = THUMBH;
    _mc._alpha = 99; // for image clarity
    // give the movieclip a property to remind it who it is
    // (used by openPic to know which big picture to open)
    _mc.i = (ipic >= NPICS ? ipic-NPICS : ipic);
    /*if currentpic num (ipic) is less than or equal to numofpics (NPICS) then
    property i = ipic-Npics
    if not (ipic is greater than npics) property i = ipic
    */

    // add picture size to totalloaded variable
    totalloaded += loader.getProgress(_mc).bytesTotal;

    // now load the next one (if there are more) or set up handlers if done
    ipic++; //increment ipic
    if (ipic == NPICS * 2) {
    // start with a random photo displayed when all thumbs loaded
    pic_mc.loadMovie(PICPATH + picnames[Math.floor(Math.random()*NPICS)] + ".jpg");
    setupHandlers();
    } else if (ipic >= NPICS) {
    // load jpg into duplicate thumbnail (will already be cached)
    loader.loadClip(PICPATH + picnames[ipic-NPICS] + ".jpg", thumbs_mc["mc"+ipic]);
    } else {
    // load jpg into thumbnail
    loader.loadClip(PICPATH + picnames[ipic] + ".jpg", thumbs_mc["mc"+ipic]);
    }
    }

    // listener function to handle broadcast progress messages
    // make pct_txt show cumulative loading progress

    function onLoadProgress(_mc:MovieClip, loaded:Number) {
    var loadedsofar:Number = totalloaded + loaded;
    pct_txt.text = Math.floor(loadedsofar / TOTALBYTES * 100) + "%";
    }

    function init() {
    // create holder for pictures
    createEmptyMovieClip("pic_mc", 1); //makes an empty movie clip instance name "pic_mc"
    pic_mc._x = PICX; //sets the x position
    pic_mc._y = PICY; // sets the y position

    // create (and draw) holder for thumbnails
    createEmptyMovieClip("thumbs_mc", 2); //makes an empty movie clip instance name "thumbs_mc"
    //draws a rectangle filled with black
    thumbs_mc.beginFill(0, 100); // black
    thumbs_mc.moveTo(0, 0);
    thumbs_mc.lineTo(2 * (MARGIN + THUMBW) * NPICS, 0);
    thumbs_mc.lineTo(2 * (MARGIN + THUMBW) * NPICS, THUMBH);
    thumbs_mc.lineTo(0, THUMBH);
    thumbs_mc.endFill();
    // drawing the thumb holder at 0, 0 and then moving it makes its reg point = upper left
    thumbs_mc._x = THUMBHOLDERX; //repositions the movieclip
    thumbs_mc._y = THUMBHOLDERY;

    // create, draw and enable mask over thumbs (could use different variables to define mask
    // if desired)
    createEmptyMovieClip("mask_mc", 3); //makes an empty movieClip instance name "mask_mc"
    //draws a rectangle filled
    mask_mc.beginFill(0x0000cc, 100);
    mask_mc.moveTo(0, 0);
    mask_mc.lineTo(MASKW, 0);
    mask_mc.lineTo(MASKW, MASKH);
    mask_mc.lineTo(0, MASKH);
    mask_mc.endFill();
    mask_mc._x = MASKX; //reposition the clip
    mask_mc._y = MASKY;
    thumbs_mc.setMask(mask_mc); //set the clip mask_mc to be the mask of clip thumbs_mc

    // create loading textfield indicator
    createTextField("pct_txt", 4, 200, 100, 40, 100); //makes a text field instance name "pct_txt", sets its x, y pos and width and height
    var tf:TextFormat = new TextFormat(); //create a new text format
    //add settings to the text format (align center, font size 12, font verdana)
    tf.align = "center";
    tf.size = 12;
    tf.font = "Verdana";
    tf.color = 0xFFFF00;
    pct_txt.setNewTextFormat(tf); //apply the text format to the text field

    // make empty movieclips in thumbs_mc for each pic to go into
    // make double the number so the slider can move continuously and show content
    for (var i:Number = 0; i < NPICS * 2; i++) {
    //loop for 0 till number of pics to load x2
    var mc:MovieClip = thumbs_mc.createEmptyMovieClip("mc"+i, i+1);
    //make an empty movieclip instance name mcX (where x is a number)
    //inside the thumbs_mc clip
    mc._x = i*(MARGIN + THUMBW); //set clip position
    mc._y = 0;
    }

    // set the pointer to the first jpg in the array picnames
    ipic = 0;
    // start loading jpgs (ipic is initialized to 0)
    loader.loadClip(PICPATH + picnames[ipic] + ".jpg", thumbs_mc["mc"+ipic]);
    }

    /********* CALL THE INIT FUNCTION TO START THE MOVIE *****************/
    init();
    --------------------------------------------------
    ‘There is no emoticon to express how I am feeling’ - Comic Book Guy
    There's an effective, simple solution to carbon sequestration... it's called 'coal', so leave it alone!
    There's an effective, simple solution to carbon capture....it's called 'trees', so plant some!

  6. #6
    Busy doing nothing Boris the Frog's Avatar
    Join Date
    Jan 2001
    Location
    Derby, UK
    Posts
    305
    Just chuck the code into frame one of an empty movie and publish
    Oh and put some images into a folder called "flowers" next to the swf and change the names of the image files in the array "picnames" at the top of the code, otherwise you'll get an error!
    --------------------------------------------------
    ‘There is no emoticon to express how I am feeling’ - Comic Book Guy
    There's an effective, simple solution to carbon sequestration... it's called 'coal', so leave it alone!
    There's an effective, simple solution to carbon capture....it's called 'trees', so plant some!

  7. #7
    Junior Member
    Join Date
    Feb 2002
    Posts
    17
    Quote Originally Posted by Ask The Geezer
    The Movies link, in the blue bar above. It's on evey page of the forums. There are some of these scroller things in the Scripting section. I found one right off in the Scrolling sub-category here.


    ahhh, i thought you were refering to the link i had provided lol. I will try all the methods here and let everybody know what happens. If I get stuck ill continue to post.


    Thanks

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