Howd he do this? Resizing slideshow

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> 

Hmm, wouldn’t let me post everything in one shot. This is ultimately going to be used for my friend’s band’s web site so the pictures don’t really match the titles. I just used what I had laying around for now. Also, I just created some empty folders to test the dynamic button creation so anly 4 buttons load anything for now

Anyways, I think that’s about it. The unfortunate thing is that, since everything is created dynamically, it may be hard to understand what’s going on since there are no thumbs or pics. The .fla might not help much either 'cause there is nothing really to look at since all of the movement is based on the content.

The file structure on my server is as follows: The .swf and all of the php files are in the root directory. Inside that, I have a directory called “Arra”. Inside that, I have directories “thumbs1”, “thumbs2”, “thumbs3”, etc. and “pics1”, “pics2”, “pics3”, etc. For it to work the naming convention has to stay like this. Also, the actual .jpgs in the pics folders have to be named pic1.jpg, pic2.jpg, pic3.jpg, etc. and the thumbnails in the thumbs folders are named 1.jpg, 2.jpg, 3.jpg, etc.

The thumbnail mc’s that are dynamically created are a movieclip in the library with an identifier name of “box” with a dimension of 60 x 45. The thumbs I create have the same dimensions so they fit nicely. I’m not scaling them at all within Flash.

For some clarification: “thumbMC” is the mc that holds the thumbnails and scrolls. “thumbFrame” is the yellow frame around the thumbnails. “galleryTitle” is the textbox at the bottom of the border. “gutter” is the frame around the dragger for scrolling. “goldBar” is the (you guessed it) the gold bar at the top. “gigText” is the text box within the textbutton movieclip(s) that are dynamically created via attachMovie and loaded into a container movie clip called “textButton_MC” that drops down when you click on “moreGalleries”. “downloadText” is the instance name of the Download Image" button.

Hope this helps!:slight_smile:

All of the code above is based on tutorials from either here or AS.org and was created with the help of a few different members of each so thanks everyone! It was a great learning experience. What got me started on it was this great thread so thanks again Scotty and the rest for all of the help. It still has a lot of room for improvement so any suggestions would be great.

I’m not the best at explaining things so if anyone has any questions, ask and I’ll try to answer. Here’s the link again. www.thezplane.com/test/new.htm

Hey vman that is awesome!! :thumb: Thanks so much for posting the code and the great explanation - we all really appreciate it!

:love:

Lovely, Vman… Where is my present from the AZ??? =)

Any time lunatic, hope you get something out of it. Cyan Blue here was an enormous help!

Lovely, Vman… Where is my present from the AZ??? =)

Your refrigerator magnet is in the mail! Just kidding. I wouldn’t insult you with something like that. Your being kept in mind for Christmas time!:smiley:

BTW, I am going to have a couple of questions for you later Cyan Blue. Now that I’ve gone and cleaned this thing up as best I can, there are a couple things in there I’m not getting. If someone asks, I’d like to be able to answer.=)

A little bit of advise for everyone: If you go on vacation with your in-laws, RENT YOUR OWN CAR!!! MONEY IS NO OBJECT!!!

I wouldn’t insult you with something like that. Your being kept in mind for Christmas time!

What’s wrong with the refrigerator magnet??? Besides that, I might not alive by the Christmas… Thunder might strike my forehead any second… :smiley:

there are a couple things in there I’m not getting

Yeah… Shoot the question… Maybe me or somebody else knows the answer… :slight_smile:

If you go on vacation with your in-laws, RENT YOUR OWN CAR!!! MONEY IS NO OBJECT!!!

Uh… That’s YOUR fault that you were on vacation with your in-laws… You should do your best to avoid that…
Oh, yeah, BTW… I am going to call your wife to see this thread… :krazy: