Howd he do this? Resizing slideshow

i post both ver. on tread #378

good luck!!

Thanks sipher! :smiley:

how do i make the thumnails to show that they have bin visited and show you vher you are???

:party: /M

Sipher, that is a beautiful effect!

Just a beginner so a basic attempt at part of nessie’s question.

To make a button look hit you could try something like this in the onPress function

 
item.onPress= function(){
  this._alpha = 50;
  }

?

snaphappy i tryed this alredy !

but it makes only the last one to reduce the alfa. I might not know wher to put the code and make it work on each thumb separate. It would be nice if some one know how to make it work!

Thanks!

:pleased: /M

How come when i load a swf in to my gallery the next/prev and the thoumbs functions stops ? and som time they work one time and then dont … help !

:azn: /M

Snaphappy

forget whot i just wroth about the fade it works now.But the tricky question is how to make the next/prev button to point out on the thoumbs wher you are.!?

Glad that works and the next part is indeed tricky, I’ve been trying to figure that out for the photo gallery I’m building too. If I come up with anything I’ll let you know.

:azn: i will do the same for you!

ok this is just a basic attempt, but I got it working using some other ideas in the code. Put this in the ‘next’ button onPress function :

 
var fadeit = "button_"+cur;
  _root.dragwindow.scrll[fadeit]._alpha = 50;

As far as I can see there’s no reason why you can’t use the same code in the ‘previous’ button and, indeed, in the slideshow function:)

works for me, hope it works for you too. Be interested in hearing if anyone has any other ideas

I’m new to this forum, but have been browsing a lot on it to get my Flash started! This thread really gave me some great tip’s.
So thanx!!!:smiley:

For anyone who would like to see the result:
http://www.ruim-ontwerpers.nl

(Any comment on how to improve it are welcome!)

I like it:)

Maybe it’s an idea to let the menu scroll only if you move over it (or in that area)?

scotty(-:

I have try and try but without success

What I whant is:

If you push the thumnails i show that they have bin visited (this._alpha = 20;)
but I cant doit with the preview & next button…

On roll over I whant that the thumnails load a lite Pic of the foto
like att http://www.amivitale.com/main.html

I post my .fla

thanks

What a great thread to follow (all 27 pages)…:pleased: Just one comment/question:

If one tries to load quite a few pictures (thus the XML usage) and the pictures are not that small in size (say 400K) there are two big problems:

  1. No caching - if you want to go back to a previous picture it has to be loaded again

  2. A new picture is not loaded while the current picture is displayed (since the loadMovie command would replace the current picture right away).

Any thoughts on these issues? I’ve tried loading two separate movies and showing one while the other is loading but with very limited success (not to mention the complete lack of elegance)…

Cheers!

Sahana…:alien2:

Thanks for the feedback Scotty.

I’ve tried to fix this menu scroll - but didn’t manage. Do you know how I can
restrict the area for the mouse, so it wont keep scrolling like a maniac (kind of disturbing for if you read the description text and watch the large pics.

Moga

I don’t know your setup, but you can try this.
Make the mask of the menu a mc and give it an instancename “mask” [size=1](without quotes)[/size]
In the on(enterFrame) action of your put this code

onClipEvent (enterFrame) {
	if (_root.mask.hitTest(_root._xmouse, _root._ymouse)) {
		var distance = _root._xmouse-xcenter;
		_x += (distance*speed);
		//rest of your code

And in the on(load) give xcenter the value of the xcenter of your mask:)
Now the menu only scrolls when your mouse is over the (invisible) mask.

scotty(-:

Scotty,
Tried your code, but I already use a mask on top of the scrolling_mc to show only a part of the clip. (the same size of one thumb) when I turn this into a movieClip and put your code on it, it works, but the scrolling way is now too small.
I use a frame script:
//scroller is the movieClip with all the tumbnails:
scroller.onLoad = function() {
xcenter = 575;
speed = 1/40;
};
scroller.onEnterFrame = function() {
var distance = _root._xmouse-xcenter;
scroller._x += (distance*speed);
if (scroller._x>522.2) {
scroller._x = -248;
}
if (scroller._x<-248) {
scroller._x = 522.2;
}
};

If I make the mask larger, it’s showing more of the thumbnails, which I don’t want…:slight_smile: Any suggestions?

Off course, LOL.
Make a mc with the size of the area you want your scroll to be active, give it an _alpha 0 and the instancename hitField.
Change your code in this:

var xcenter = 575;
var speed = 1/40;
hitField.onEnterFrame = function() {
	if (this.hitTest(_root._xmouse, _root._ymouse)) {
		var distance = _root._xmouse-xcenter;
		scroller._x += (distance*speed);
		if (scroller._x>522.2) {
			scroller._x = -248;
		}
		if (scroller._x<-248) {
			scroller._x = 522.2;
		}
	}
};

scotty(-:

haha, ofcourse!
Sorry got a bit confused with the “make mask…” :blush:
I changed the code and…GREAT! it WORKS!!!
(i’ve just put the speed a bit up, so the scroller will move a bit a bit faster in the box.)

Thanx a lot a lot a lot! :hugegrin:

Ok, well I just got back from vacation from hell…I mean Arizona. While I was gone, I got a few PM’s asking for the code for the image gallery I posted a few pages back so here’ goes.

Here’s the AS on frame 1: (there is only 1 frame btw).

thumbs = "thumbs1";
pics = "pics1";
spacing = 10;
textButton_MC.setMask(theMask);
textButton_MC._visible = false;
gutter._visible = false;
init_lv = new LoadVars();
init_lv.thumbs = thumbs;
init_lv.pics = pics;
init_lv.onLoad = function(ok) {
 if (ok) {
  trace(unescape(this));
  trace("this.thumbs = "+this.thumbs);
  changeGallery(this.thumbs, this.pics);
 } else {
  trace("Error!!!");
 }
};
init_lv.sendAndLoad("thumbcounter.php", init_lv, "POST");
changeGallery = function (argThumbs, argPics) {
 trace("Function changeGallery : argThumbs = "+argThumbs+"   argPics = "+argPics);
 count_lv = new LoadVars();
 count_lv.thumbs = argThumbs;
 count_lv.pics = argPics;
 count_lv.onLoad = function(ok) {
  if (ok) {
   _root.galleriesUp = 0;
   _root.picNum = 1;
   i = 0;
   numColumns = 2;
   cnt = 1;
   startX = 0;
   startY = 0;
   textButton_MC.ypos = border._y-textButton_MC._height;
   trace(unescape(this));
   _root.attachMovie("thumbhold", "thumbMC", 0);
   thumbMC._visible = false;
   thumbMC._y = border._y;
   for (i=1; i<=parseInt(_root.count_lv.nof); i++) {
    thumbMC.thumbScroller.thumbHolder.attachMovie("box", "box"+i, i, {_x:startX, _y:startY});
    thumbMC.thumbScroller.thumbHolder["box"+i].thumbNumber.text = i;
    thumbMC.thumbScroller.thumbHolder["box"+i].container.loadMovie("Arra/"+argThumbs+"/"+*+".jpg");
    thumbMC.thumbScroller.thumbHolder["box"+i].targNum = i;
    thumbMC.thumbScroller.thumbHolder["box"+i].onRelease = function() {
     textButton_MC.ypos = border._y-textButton_MC._height;
     containerMC.loadPic("Arra/"+argPics+"/pic"+this.targNum+".jpg");
     _root.galleriesUp = 0;
     _root.picNum = this.targNum;
    };
    thumbMC.thumbScroller.thumbHolder["box"+i].onRollOver = function() {
     this.gotoAndPlay("play");
    };
    startX = (cnt%numColumns == 0) ? 0 : startX+thumbMC.thumbScroller.thumbHolder["box"+i]._width+5;
    startY = (cnt%numColumns == 0) ? startY+thumbMC.thumbScroller.thumbHolder["box"+i]._height+5 : startY;
    cnt++;
    thumbsWidth = thumbMC.thumbScroller._width+10;
   }
  }
 };
 count_lv.sendAndLoad("thumbcounter.php", count_lv, "POST");
 containerMC.loadPic("Arra/"+argPics+"/pic1.jpg");
};
count_files = new LoadVars();
count_files.onLoad = function(success) {
 if (success) {
  trace;
  numColumns = 15;
  cnt = 1;
  startX = 0;
  startY = 0;
  for (var i = 1; i<=parseInt(this.shows); i++) {
   _root.textButton_MC.attachMovie("textbutton", "textbutton"+i, i, {_x:startX, _y:startY});
   _root.textButton_MC["textbutton"+i].showText.text = this["gig"+i];
   _root.textButton_MC["textbutton"+i].targNum = i;
   _root.textButton_MC["textbutton"+i].onRelease = function() {
    _root.removeMC();
    this.thumbs = "thumbs"+this.targNum;
    this.pics = "pics"+this.targNum;
    _root.galleryTitle.gigText.text = this.showText.text;
    textButton_MC.ypos = border._y-textButton_MC._height;
    _root.changeGallery(this.thumbs, this.pics);
   };
   _root.textButton_MC["textbutton"+i].onRollOver = function() {
    this.gotoAndPlay("play");
   };
   startY = (cnt%numColumns == 0) ? 0 : startY+_root.textButton_MC["textbutton"+i]._height;
   startX = (cnt%numColumns == 0) ? startX+_root.textButton_MC["textbutton"+i]._width : startX;
   cnt++;
  }
 }
 _root.galleryTitle.gigText.text = _root.textButton_MC.textButton1.showText.text;
};
count_files.sendAndLoad("filecounter.php", count_files, "POST");
MovieClip.prototype.loadPic = function(pic) {
 containerMC._alpha = 0;
 this.loadMovie(pic);
 _root.onEnterFrame = function() {
  var t = containerMC.getBytesTotal(), l = containerMC.getBytesLoaded();
  bar._visible = 1;
  per = Math.round((l/t)*100);
  if (t != 0 && Math.round(l/t) == 1 && containerMC._width != 0) {
   var w = containerMC._width+spacing, h = containerMC._height+spacing;
   border.resizeMe(w, h);
   bar._visible = 0;
   loadText.text = "";
   delete _root.onEnterFrame;
  } else {
   bar._width = per;
   loadText.text = per+" % loaded";
  }
 };
};
MovieClip.prototype.resizeMe = function(w, h) {
 var speed = 3;
 this.onEnterFrame = function() {
  this._width += (w-this._width)/speed;
  this._height += (h-this._height)/speed;
  thumbMC._visible = true;
  thumbMC._x = this._x-(thumbMC.thumbScroller.thumbHolder._width)-5;
  thumbFrame._height = this._height;
  thumbFrame._width = thumbsWidth;
  galleryTitle._x = this._x+this._width/2;
  galleryTitle._y = this._y+this._height;
  theMask._width = this._width;
  theMask._height = this._height;
  gutter._x = thumbFrame._x-thumbFrame._width;
  gutter._height = thumbFrame._height;
  gutter._width = thumbMC.dragger._width+5;
  goldBar._width = this._width+1;
  downloadText._x = this._x+this._width;
  if (_root.thumbMC.dragger._y>=_root.thumbFrame._height) {
   _root.thumbMC.dragger._y = _root.thumbFrame._height/2;
  }
  if (Math.abs(this._width-w)<1 && Math.abs(this._height-h)<1) {
   this._width = w;
   this._height = h;
   containerMC._x = this._x+spacing/2;
   containerMC._y = this._y+spacing/2;
   containerMC._alpha += 9;
   if (containerMC._alpha>96) {
    containerMC._alpha = 100;
    delete this.onEnterFrame;
   }
  }
 };
};
removeMC = function () {
 thumbMC.removeMovieClip();
 gutter._visible = false;
};


Here is the AS on textButton_MC that holds the dynamically created buttons:

onClipEvent (load) {
ypos = border._y-this._height;
speed = 2;
}
onClipEvent (enterFrame) {
this._y = this._y+(ypos-this._y)/speed;
}

Here is the AS on the “more galleries” button:

on (release) {_root.textButton_MC._visible = true;
if (_root.galleriesUp == 0) {
_root.textButton_MC.ypos = _root.border._y;
_root.galleriesUp = 1;
} else if (_root.galleriesUp == 1) {
_root.textButton_MC.ypos = _root.border._y-_root.textButton_MC._height;
_root.galleriesUp = 0;
}
}

Here is the code for the thumbnail scroller. This is a mc in the library with a linkage identifier of “thumbhold” which becomes the instance thumbMC via attachMovie():

targY = 0;
dragger._x = theMask._x-7;
dragger.onPress = function() {
startDrag(this, false, this._x, 0, this._x, (_root.border._height)-this._height-3);
};
dragger.onRelease = dragger.onReleaseOutside=function () {
stopDrag();
};
thumbScroller.onEnterFrame = function() {
if (this._height<_root.border._height) {
dragger._visible = false;
_root.gutter._visible = false;
} else {
dragger._visible = true;
_root.gutter._visible = true;
scrollAmount = (this._height-(_root.thumbFrame._height)/1.07)/(_root.thumbFrame._height-dragger._height);
targY = -dragger._y*scrollAmount;
this._y -= (this._y-targY)/3;
}
};

Here is the AS on the “download image” button:

on (release) {
getURL("javascript:NewWindow=window.open('popup.php?img=Arra/"+_root.count_lv.Pics+"/pic"+_root.picNum+".jpg','newWin','width="+_root.containerMC._width+",height="+_root.containerMC._height+",left=0,top=0,toolbar=0,location=No,scrollbars=No,status=No,resizable=No,fullscreen=No'); NewWindow.focus(); void(0);");
}

Now for the php stuff. Here is the code for thumbcounter.php:


<?php
$count = 0; 
if (!isset($thumbs)) 
{ 
$thumbs = ""; 
} 
$dir = "Arra/$thumbs"; 
if (is_dir($dir)) 
{ 
if ($dh = opendir($dir)) 
{ 
while (($filename = readdir($dh)) !== false) 
{ 
if (($filename != ".") && ($filename != "..")) 
{ 
$count ++; 
} 
} 
closedir($dh); 
} 
} 
print "&nof=".$count; 
?> 
 

Here is filecounter.php:


<?php 
$count = 0; 
$week1 = "Walter Payton's Roundhouse 8/16"; 
$week2 = "Shark City 8/22"; 
$week3 = "Streamwood Fest 9/1"; 
$week4 = "Algonquin Fest 9/8"; 
$week5 = "Durty Nellie's 9/15"; 
$week6 = "The Lodge 9/22"; 
$week7 = "Sean Kaley's 10/1"; 
$week8 = "Pop's Pup 10/8"; 
$week9 = "North Beach Club 10/15"; 
$week10 = "Bourbon Street 10/22"; 
$week11 = "Arlington Height Fest 10/29"; 
$dir = "Arra"; 
if (is_dir($dir)){ 
if ($dh = opendir($dir)){ 
while (($filename = readdir($dh)) !== false) { 
if (($filename != ".") && ($filename != "..")) 
{ 
$count ++; 
} 
} 
closedir($dh); 
} 
} 
print "&shows=".$count; 
print "&gig1=".$week1; 
print "&gig2=".$week2; 
print "&gig3=".$week3;
print "&gig4=".$week4; 
print "&gig5=".$week5; 
print "&gig6=".$week6; 
print "&gig7=".$week7;
print "&gig8=".$week8; 
print "&gig9=".$week9; 
print "&gig10=".$week10; 
print "&gig11=".$week11; 
?>
 

Here is the code for popup.php which was created in dreamweaver to get rid of the ugly top and left margins. lostinbeta was kind enough to lend a hand with this.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 
<html> 
<head> 
<title>Downloadable Image</title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 
<? 
list($width, $height, $type, $attr) = getimagesize($_GET['img']); 
echo '<img src="'.$_GET['img'].'" NAME="galleryImage" $attr>'; 
?> 
</head> 
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> 
</body> 
</html>