A Flash Developer Resource Site

Results 1 to 11 of 11

Thread: Picture Sliding

  1. #1
    Junior Member
    Join Date
    Oct 2004
    Posts
    2

    Picture Sliding

    Hello everyone,

    I have visited a site last week that had a very intersting way of sliding pictures in an animation.

    http://www.gallagherdesign.com/

    Since then, I have trided to reproduce the effect of the first page (sliding in, stopping and sliding out) but I can figure it out.

    The way I see it it, if first loads the pictures (via loadmovie) and gets their properties to apply them to the underlying square.

    The whole process has to be applied to a series of animation which are then animated with a detection of the position of the mouse, movement effect and some sort of collision detection (this is probably the hardest bit!!)

    Any of you has the brain to crack this nut?

    Cheers,

    JC.

  2. #2
    Senior Member jbum's Avatar
    Join Date
    Feb 2004
    Location
    Los Angeles
    Posts
    2,920
    I had an idea for how this might work.

    Paste the following script into the first frame of an empty movie, to try it out.

    The basic idea is start with a script which arranges the movies linearly, as if viewing a film strip. The pictures are modelled as being on a spinning wheel or film strip.

    I then use a power function (Math.pow) to stretch the _x position so that as it gets further from the center, the distance increases exponentially.

    code:

    // In this version, colored rectangles stand in for the pictures

    // We use this to keep track of the number of pictures
    // the pictures are modelled as being on a wheel which has this many
    // slots
    kNbrPictures = 10;

    // Image Sizes
    kPictureWidth = 120;
    kPictureHeight = 80;

    // This is the minimum horizontal space used to display a picture
    kCellWidth = kPictureWidth + 20;

    // These numbers affect positioning and mouse
    // sensitivity
    kStretchFactor = 2;
    kStretchSensitivity = 0.8;
    kMouseSensitivity = .001;

    // Center of the stage - used for positioning
    CX = Stage.width/2;

    // Current position on the picture wheel (from 0 to kNbrPictures)
    pixPos = 0;

    // Array to hold pictures
    pix = [];

    // Converts picture pos (0-kNbrPictures) to x coordinate for picture
    ppToX = function(pixPos, i)
    {
    // pixpos is our current position on the wheel
    // i is the slot number of this particular image

    // wrap i around to fall on either side of pixPos
    if (i < pixPos-kNbrPictures/2)
    {
    i += kNbrPictures;
    }
    else if (i > pixPos+kNbrPictures/2)
    {
    i -= kNbrPictures;
    }

    var di = i - pixPos;

    // At this point di represents a linear scaling index for the picture
    // position (-3,-2,-1,0,1,2,3)
    // Here we add an additional amount to get the stretching effect
    // Omit this line for linear positioning
    di *= Math.pow(kStretchFactor,Math.abs(di*kStretchSensit ivity));

    // CX-kCellWidth/2 represents the center position...
    return (CX-kCellWidth/2)+di*kCellWidth;
    }

    // stub function to create colored rectangle
    getColor = function(t)
    {
    r = (t*256) % 256;
    g = ((t+1/3)*256) % 256;
    b = ((t+2/3)*256) % 256;
    return (r << 16) + (g << 8) + b;
    }

    makePicture = function(i)
    {
    var mc = _root.createEmptyMovieClip("pic_" + i, i+1);
    mc.clear();
    mc.beginFill(getColor(i/kNbrPictures),100);
    mc.moveTo(0,0);
    mc.lineTo(kPictureWidth, 0);
    mc.lineTo(kPictureWidth, kPictureHeight);
    mc.lineTo(0, kPictureHeight);
    mc.lineTo(0, 0);
    mc.endFill();
    mc._y = 10;
    return mc;
    }

    // Initialization - setup the pictures
    for (var i = 0; i < kNbrPictures; ++i)
    {
    pix[i] = makePicture(i);
    }


    // Our animation routine
    _root.onEnterFrame = function()
    {
    // Use mouse to effect pixPos (the wheel position)
    pixPos += (_xmouse - CX)*kMouseSensitivity;
    if (pixPos < 0)
    pixPos += kNbrPictures;
    else if (pixPos > kNbrPictures)
    pixPos -= kNbrPictures;

    // Reposition each picture
    for (var i = 0; i < kNbrPictures; ++i) {
    pix[i]._x = ppToX(pixPos, i);
    }
    }



    EDIT: Rewrote the code a bit.
    Last edited by jbum; 10-08-2004 at 02:37 PM.

  3. #3
    Junior Member
    Join Date
    Oct 2004
    Posts
    2


    Thanks, that's the exact help I was hopping for, I think I can delete what I had done and start again based on this code. I still have to do the integration of the pictures (which are of variable width). But thanks a lot for this, I'll post the revised code once I have been able to continue to work on it.

    JC.

  4. #4
    Junior Member
    Join Date
    May 2006
    Posts
    4
    This works awesome with the colored squares and is exactly what I am looking for except I am having trouble modifying it to work with photos.

    Can someone please show me what I need to change or how to create the pix array for use with photos?

  5. #5
    http://www.in3d.eu Kostas Zotos's Avatar
    Join Date
    Jul 2007
    Location
    Athens - Greece
    Posts
    408
    Hi,

    I've modified a bit the original code to include images instead of colored boxes.. (Images attached to stage from library, so you have to import your images insted of the existing). For further details (and instrunctions) please read some comments inside code.

    Here is also a very similar slideshow: http://board.flashkit.com/board/showthread.php?t=765860

    Note: The attached file is for Flash 8 and above..

    Regards!

    Kostas
    Last edited by Kostas Zotos; 06-09-2008 at 09:24 AM.
    K. Zotos online portfolio: http://www.in3d.eu

  6. #6
    http://www.in3d.eu Kostas Zotos's Avatar
    Join Date
    Jul 2007
    Location
    Athens - Greece
    Posts
    408
    Hi,

    I improved the file a bit.. Here is the (new) attachement:

    [As an alternative (the example attaches the images symbols from library), someone may manually add movie clips in the array, like this:
    pix = [Pic1_mc, Pic2_mc, Planet_mc, Sky_mc, myLogo] // The image clips
    (these must exist on stage as movie clip instances -you have to assign your specific names-]
    Attached Files Attached Files
    Last edited by Kostas Zotos; 06-09-2008 at 09:40 AM.
    K. Zotos online portfolio: http://www.in3d.eu

  7. #7
    Junior Member
    Join Date
    May 2006
    Posts
    4
    EXCELLENT! Thank you very much.

  8. #8
    Junior Member
    Join Date
    Oct 2008
    Posts
    1
    hey guys!
    i tried to add different links and tooltips for each image but i am not good at flash and i couldnt manage it. i have an array of 5 links corresponding to each image. what i want is sth like this.

    Clip.onRelease=function()
    {
    getURL(links[a],"_blank")
    }

    but apparently this function is not called until pressing the button and "a" seems to be undefined. how can i get the actual order of the image at this point, any ideas??

  9. #9
    http://www.in3d.eu Kostas Zotos's Avatar
    Join Date
    Jul 2007
    Location
    Athens - Greece
    Posts
    408
    Hi,

    May this helps (locate this part in the script of .fla file and modify in the way shown below):

    Code:
    // Array to hold pictures
    pix = [];
    
    links=[]   // add the links -as comma separated strings-  in the array (must correspond one link per image)
    
    for (a=1;a<=kNbrPictures;a++){
    	var ID:String="img"+a
    
    	// IMPORTANT: The Images have been converted to graphic symbols 
    	// and Linkage IDs have been assigned to them.
    	// (just import an image on stage. Select it and press F8. Give a name and id linkage)
    	// right clik an image symbol on library (eg: img1) , then select: "Linkage..." 
    	var Clip=_root.attachMovie(ID,ID,this.getNextHighestDepth())
    	Clip._y=kPictureY
    	Clip.id=a  // Assign the current value of "a" to a clip property "id"
    	
    	// ------------ If want interaction with images ------------------
    	// If don't want, just comment or delete this part (between ---- lines)
    	Clip.onRollOver=function(){
    		this._alpha=70
    	}
    	Clip.onRollOut=function(){
    		this._alpha=100
    	}
    
    	// Assign an onRelease handler
    	Clip.onRelease=function() {
     		trace(this.id)
    		getURL(links[this.id-1],"_blank")  
    		// links must be an array with URL strings
     		// Since array elements are zero based, we use: "this.id-1"
    
    		// Put any actions here (executed when click on image)
    	}
    	// ------------ If want interaction with images (END)------------------
    	
    	pix.push(Clip)
    }
    The approach is similar for tooltips

    Kostas
    K. Zotos online portfolio: http://www.in3d.eu

  10. #10
    Junior Member
    Join Date
    Nov 2008
    Posts
    2

    Links to open inside the fla doc?

    This is great work!

    I'm curious if it is possible to have the pictures clickable (say acting as buttons) if you can add this property in order to have them clickable to open another section of information in a specified area of the same .fla file?

    Would it be as simple as just converting each image to a button and adding the behavior?

    Any help or insight is much appreciated!

    CR

  11. #11
    Junior Member
    Join Date
    Nov 2008
    Posts
    2

    Slow down the speed of the boxes?

    I've tried everything I can think of to slow down the speed of the boxes.
    Anyone have an insight!?

    Not much hair left!












    Quote Originally Posted by Kostas Zotos
    Hi,

    May this helps (locate this part in the script of .fla file and modify in the way shown below):

    Code:
    // Array to hold pictures
    pix = [];
    
    links=[]   // add the links -as comma separated strings-  in the array (must correspond one link per image)
    
    for (a=1;a<=kNbrPictures;a++){
    	var ID:String="img"+a
    
    	// IMPORTANT: The Images have been converted to graphic symbols 
    	// and Linkage IDs have been assigned to them.
    	// (just import an image on stage. Select it and press F8. Give a name and id linkage)
    	// right clik an image symbol on library (eg: img1) , then select: "Linkage..." 
    	var Clip=_root.attachMovie(ID,ID,this.getNextHighestDepth())
    	Clip._y=kPictureY
    	Clip.id=a  // Assign the current value of "a" to a clip property "id"
    	
    	// ------------ If want interaction with images ------------------
    	// If don't want, just comment or delete this part (between ---- lines)
    	Clip.onRollOver=function(){
    		this._alpha=70
    	}
    	Clip.onRollOut=function(){
    		this._alpha=100
    	}
    
    	// Assign an onRelease handler
    	Clip.onRelease=function() {
     		trace(this.id)
    		getURL(links[this.id-1],"_blank")  
    		// links must be an array with URL strings
     		// Since array elements are zero based, we use: "this.id-1"
    
    		// Put any actions here (executed when click on image)
    	}
    	// ------------ If want interaction with images (END)------------------
    	
    	pix.push(Clip)
    }
    The approach is similar for tooltips

    Kostas

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