Photo Gallery and Thumbnails: Flash Tutorial!

[rockwe25]

thank you!:)



[ramir332]

I really need this in Action Script 3.0. It gonna be too late so if anyone see this before monday night you'll save me lol. if not well at least i'll like to know.. this stuff is really neat but the version of 2.0 and 3.0 differences is really killing me.. i wish both worked out :(

[CintsationalGraphix]

Thank-you SO much! I got this to work straight away! Very well explained and extremely helpful. Once again thanks! :D Cint

[moviefreak382]

I did this tutorial already and it worked well...but I did a second one and for some reason my buttons and main images do not mesh up. I checked and rechecked the code. Also, when I press the same button it will show up different main images.

[ScremoSam1]

I'm not kidding...this just took me an entire day to figure! I was just about to give up, feeling pretty pissed off with an entire day wasted, but just on the offchance I decided to change the "Photosmc" labels i had been using to "photosMC", and everything miraculously started working... I've done it now..but still..WTF!

[12TabulaRasa12]

I will be trying this out though it sounds a bit complicated. Thanks for the instructions :)

[bilutza]

Nice tutorial... tried it but it too complicated for me. I found lots of free already made galleries. I found the best here: flashxml.net . Cheers

[rajaashu]

thankz...........



[pmasoumi]

Thank you so much, It was clear

[jrs0347]

I tried to connect the thumb1 button to the frameLabel1 but when I play the movie the button doesnt play img1... Any ideas???

[gamesinfoworld]

Would i be able to do this with swf / flash games, i think it would be pretty neat to have on my site :)

[plasticio]

Hello, everybody! I made the galley and it works perfectly. I added it to my website but since then I have been trying to add links to each photo and use it as a hipertextual part of the website. As you can probably tell, I have failed. Please, if you know how to add links to flash photo galleries, do tell!

[mancheluke]

Great work! managed both this and the scrolling thumbnails w/Mouse control tutorials. Success!! Alas, can't seem to combine the two? any ideas?

[lillkutty007]

It worked beautifully(:...Its explained so well and patiently and the AC is really simple.... This is an excellent tutorial(:

[lillkutty007]

nice tutorial....Always admire the patience of experts explaining things to a level much lower then them....

I got a lot of useful tips from here(:

[mineb]

i loooove you

[mbwinther]

WTF IS THIS..

Seriously, I'm doing exactly what the says and it's not working.

I've made it to 17.41 where he's about to add the Motion Tween.

And sure, I can do exactly what he does..

Only, after I've added the alpha 0 and clicks "Motion Tween"

It does not fade, not one bit.

Rather, it doesn't show at all, until I actually get to the frame where my picture is solid.

Please help me, this is driving me nutz.

[ScremoSam1]

@mbwinther I'm using cs5 and I use the 'classic tween' instead. Haven't quite managed to make the rest work, but that bit looks ok from the preview... Good luck!

[gaia1689]

<3



[gaia1689]

<3

[rokocolero21]

cool. I got my working Thanks

[overtkill7]

Thanks a lot for this tutorial! Great stuff you just earned yourself another sub :D

[GardEngebretsen]

Thank you! Fabolous tutorial!

[wrayman89]

Brilliant! Big thank you for this!

[daljeovoslobodna]

Hi, thanks for posting this, a great tutorial. I just have one problem. I have followed the tutorial step by step, but when i am to drag the photos that i converted to movie clips to the Photos layer, instead of picuters i get circles. How do you fix this. Thanks

[tvalsan]

this tutorial in very helpfull, bur if you'd have mentioned that in fact is in AS2.....some of us can't tell de diference between AS2 and AS3...anyway, great tutorial...thanks

[moistchoice]

HELP my rollovers wont work

[erhmee]

I wanna make a grid gallery. And I want it this way editing this tutorial

1. When I press the picture then it disappears

2. When it loads full image then thumbs disappears and only image shows

It would be a big help if u helped me out. Tnx

[vallenteen]

tnx..great tutorial;)

[TheDBjg]

i'm really stuck beacause i've followed the code and i'm on cs3 i change it to action script 2 but i cannot display the big image yet on action script 3 i can display the big image but my thumbnails dont work so i wodering if someone can help. The code is followed exactly???

[mbwinther]

@TheDBjg I did the same, and had the same result.. I dont get why everyone is saying this is such a great tutorial when (unless I've done something completely wrong) it isn't even working.

[mineb]

check the debug errors patiently ;)

[space197]

could someone help me with this problem i had used this tutorial several times for my ict course work and it has to be completed next week. if some one could help with the problem i am occuring u will be a life saver

[space197]

hi,

i have followed through ur tutorial very carefully and to the point with every code and etc. however i am havin a problem with the main (large image) appearing when it comes to selecting the thumbnail (btw the thumbnail works). i am using macromedia flash 8 proffessional.

[8ghazale8]

Hi,

Do you know with which program I can make a photo gallery with categories like this layout?

w w w(dot)entheosweb(dot)com /Flash/Photo_Gallery14/default­(dot)asp

Or could you plz tell me if u know any free template like that?

Tnx in advance :)

[sale666]

you are too fast for a tutorial why this why that click click this that cannot follow without making a bunch of errors and dont understand why half of the things are happening you should explain in more detail why is something happenin that way! Thanks for the tutorial!

[iafeka]

Hey there Im trying to put the slide gallery in to my web that I have already made in ac3 would I still able to use the as2 to get it to work in my gallery page?

[computech1000]

Im in CS5 Using AS2 And i have my thumbnails wont work i copied your code word for word but it wont work any idears

[JoshToTheSink]

AS2 if you are having problems with roll over action, use this code inside of each thumbnail's AS: (make sure to change thumb1 to each thumb#)

on(rollOver){

thumb1._alpha = 100;

}

on(rollOut){

thumb1._alpha = 60;

}

[mbwinther]

@JoshToTheSink this didn't fix it for me.

[babyseraphina]

he sounds like charlie sheen lol

[Elly3438]

Fantastic tutorial! Great explanations and attention to detail/clarity really made this a comfortable learning experience. Thanks a ton!

[ponchopeth]

13:20 i thought he was going to say DUMBASS because he had messed up hahahaha

[davtheman777777]

I managed to solve the error: 1119: Access of possibly undefined property onRollOver through a reference with static type flash.display:SimpleButton.

It was caused by ActionScript 3. So i went to Publish settings(Ctrl+Shift+F12) -> Flash and selected ActionScript version 2.0

Hope it helpes!

[iafeka]

@davtheman777777 whats the shortcut for mac do you know? thanks

[Ktunicata]

thanks! needed that..

[KoSACentre]

HI! K...so I followed this great tutorial as best as I could since I am working in CS5 and AS3. Now, I've gotten to the point where I am ready to gotoAndPlay with my thumbnails, but I keep getting a compilation error that says "Access of Undefined property Photos_MC" (your photosMC). I've followed the AS code almost to the letter. If my name scheme is the problem, then I will change it, but if not, could you (someone) please tell me what I'm doing wrong.

[otsme]

I am working with CS5 and AS2, and everything works great for this tutorial but when I go and test it, the thumbnails don't play the images. I used the code in the tutorial letter for letter so I'm not sure what I did wrong... can anybody help? I can post screen shots if that would help.

[bruce5476]

I'm running Dreamweaver CS5 and when I try to get the script to run the roller I get an error:

Symbol 'masterclipMC', Layer 'thumbs', Frame 1, Line 1 1119: Access of possibly undefined property onRollOver through a reference with static type flash.display:SimpleButton.

Symbol 'masterclipMC', Layer 'thumbs', Frame 1, Line 4 1119: Access of possibly undefined property onRollOut through a reference with static type flash.display:SimpleButton.

I'm sure I followed it pretty closely, help?

[rulastkdo]

Hi there... this is just great It has been realy heplfull... I got a Question... Can I use this on the Scrolling Thumnail Gallery????

[Gevreet45]

Thank you, excellent tutorial - it's a bit long but I understand why....I'm an intermediate with Flash and got this tutorial to work the very first time....Thank You!

[St3ph3n31]

please help! I'm using flash cs4 & AS 3 ..

when i put in the code for rollover i get the errors that are shown at the bottom

thumb1.onRollOver=function(){ this._alpha=100;} thumb1.onRollOut=function(){ this._alpha=50; }

1119: Access of possibly undefined property onRollOver through a reference with static type flash.display:SimpleButton.

Warning: 1090: Migration issue: The onRollOver event handler is not triggered automatically by Flash Player at run time in ActionScript 3.0.

[cd15turb3d]

@St3ph3n31 I had the same problem

[St3ph3n31]

@cd15turb3d thumb1.addEventListener(MouseE­vent.CLICK, fl_ClickToGoToAndPlayAtImg1); thumb1.addEventListener(MouseE­vent.MOUSE_OUT, rollOutEffect); thumb1.addEventListener(MouseE­vent.MOUSE_OVER, rollOverEffect); function fl_ClickToGoToAndPlayAtImg1(ev­ent:MouseEvent):void { photos_mc.gotoAndPlay("img1"); } function rollOverEffect(event:MouseEven­t) { event.currentTarget.alpha=1; } function rollOutEffect(event:MouseEvent­) { event.currentTarget.alpha=.5; }

[St3ph3n31]

@cd15turb3d thumb1.addEventListener(MouseE­vent.CLICK, fl_ClickToGoToAndPlayAtImg1); thumb1.addEventListener(MouseE­vent.MOUSE_OUT, rollOutEffect); thumb1.addEventListener(MouseE­vent.MOUSE_OVER, rollOverEffect); function fl_ClickToGoToAndPlayAtImg1(ev­ent:MouseEvent):void { photos_mc.gotoAndPlay("img1"); } function rollOverEffect(event:MouseEven­t) { event.currentTarget.alpha=1; } function rollOutEffect(event:MouseEvent­) { event.currentTarget.alpha=.5; }

[thedoginthebog]

I have followed this tutorial exactly and it's great. At the start you say it's easy to add new photos.

Please please please can you do a tutorial on how to do this?

[rorofufe]

How do i stop a TIMER? i want to stop it on click a I want to a add a button to start again

ActionScript Code:

var nextImagen:Timer = new Timer (5000);

nextImagen.addEventListener (TimerEvent.TIMER, playNext);

nextImagen.start();

function playNext(event:TimerEvent):voi­d

{

 nextFrame();

}

[JakseUksar34]

Asian girls marriage busizz4me.info

[Nosajnosliw]

I can seem to attach the on mouseover go to and play command to the individual buttons.  Everytme i clock on the button the actionscript window says that there cannot be any actions applied. How do I work around this?

[hardyzawodnik]

BRILLIANT

[fearsveil]

i wish my teacher explained it this good!

[mariarosa86]

how is the code for the rollover thing on cs5?

[katteAslaug1]

Thankyou! This is so simple (after struggling for half an hour because I wrote aphla instead of alpha xD ) and it comes out so nice! <3

[kurtblake]

Great job on the tutorial! I need there to be an image on the gallery when it loads (instead of being blank with just thumbnails). How do you get image 1 to show right away? Thanks!

[kurtblake]

@kurtblake Does anybody know how to have a picture show up right away?

[kurtblake]

@kurtblake Does anybody know how to have a picture show up right away? Or where could I find the answer... Thanks!

[siavashaus]

CS5 / Action-script 3.0 users also need to use the following code (minute 23) at thumbsAS layer :

thumb1.addEventListener(MouseE­vent.CLICK, fl_ClickToGoToAndPlayAtImg1);

function fl_ClickToGoToAndPlayAtImg1(ev­ent:MouseEvent):void

{ photosMC.gotoAndPlay("img1");

}

[irregularbell]

@siavashaus dude thank you i was struggling there!!!!

[focusonthefocus]

@siavashaus does the "fl_ClickToGoToAndPlayAtImg1" need to change for each thumb? e.i.;fl_ClickToGoToAndPlayAtIm­g2, for image two?

[St3ph3n31]

@siavashaus

hey a little confused

is this to link buttons to the main images ?

I can add actions to the buttons in As3 Cs4 am I missing something

[EZ31000]

@siavashaus I applied that code on the thumbsASlayer and I keep getting an error: Access of undefined property Photos_MC.

[aristotel45]

i'm still not able to put these two to work that was suggested for cs5 im using cs4 though so any help would be appreciated: i have

on(release){ photosML.gotoAndPlay("img1");

}

... and thumb1 is marked as b1 on mine and photosMC is marked as photosML on mine...tnx

how do i add the rest

[troylcook619]

I created this but now I'm trying to insert it into another .fla site that I've already created. How would I go about doing this??

[Napoleonvbn]

Make a date with sexy wife *lushfmlk.info*

[superjadeo1]

hey, just wanted to say thankyou so much i start a new job monday and have been told to learn how to use flash. this tutorial was brilliant i had been searching the internet all day up unitll now.

thanks again, jade!

[moodystar9]

EXCELLENT TUT. You Just made it easy to understand even more than my teacher in college. thanks so much.

[timabema]

This is an EXCELLENT tutorial. Thanks so much for taking the time to share this!

[ztlhsn]

The easiest and most understandable tutorial ever! I can do this just with hearing him while I was on with my flash assignments. Thanks, Nathaniel! Such a big help and a good teacher.

[x69Kasanova69x]

I have like 3000 images!? am i supposed to convert them all one by one into symbols???

[heckyat699]

Thanks for the tutorial. Is there anyway to add an actionscript or something to give the desciption or title of the image using the filename? Example if the image filename is John sitting on the stoop.jpg I would like the filename be used to create a title above the image.

[lffm07]

Thank you very much !

[sachintha1991]

how can we donate this man some money

[Q8yaMal]

what's the different between the flash and swishmax programme ?

[TheReflectingmirror]

thanx alot

[DerSchaddan]

Great Tut ! But,i think you should tell us,that this Actionscript only works in AS2. :D

[ZrepsejZ]

I wanted to know if i can code it so when i click on one of the pictures it links to a diffrent site, if so could you pm me and enligten the path on how to do so?

[mobile0811]

AMAZING tutorial!!!! thank you so muchhhh!!!!!!!!!!

[Fernyxferny]

MY GOOOOOD, even I can understand this...

Thank you Tutvid.... thank you very fucking much

[suspgr]

Hey dude you are AMAZING!! Thank you very very much you helped me finish my school project gallery :) big respect

[hitNEkey2continue]

Excellent tutorial!!!

[clevelandtvshow]

For FREE image Hosting i'am using this : pixpin.c0m < change 0 to o

[DiscoShtick]

Is this on 2.0?

[SupernaturalSolution]

@DiscoShtick Yes it is 2.0

[SuperAlana1]

can you do a tutorial on how to zoom using flash please

thanks

[148jaydub]

Great Tutorial...I breezed right through it, basically doing a test with about 5 images, but now I need to add about a hundred more to it. What is the best way to go about adding photos to it? Cheers!

[DeebsinItaly]

I'm stuck, I am working with CS3 on a mac (I am at 23:30) and I can't seem to apply actions to my buttons, i select the button, as emphasized, but the actions window tells me that actions cannot be applied to the selection.

anyone out there who can help, it would be greatly appreciated.

[eliot313]

Man it worked, i didnt believe it, THANKS no words i m speechless THANKS again i hope to create more too.

[minhmeo1209]

I can't make the thumbs to light up

What did i do wrong?

Can't he make it easier for us to do these???

[SerbianCobra]

@minhmeo1209 did you change the opacity to 50% before changing it to 100%?!

[minhmeo1209]

Can we make the pictures set vertically not horizontally like in the video?????

[fulldesignlive]

@Christopher1290

hello, I answer your question. Flash version he uses is the number 8. is a bit old, but I'm sure this is the Action Script version 2.0. all the codes you see are from this version.

[fulldesignlive]

@Christopher1290

hello, I answer your question. Flash version he uses is the number 8. is a bit old, but I'm sure this is the Action Script version 2.0. all the codes you see are from this version.

[fulldesignlive]

nice man, thanks for your help..!! i need this for my web site. a lot thanks

[SuciCerulean]

Thanx so much... it's really help me for my final project... ^^

[bsukker]

Very good!!

Thank you so much!! :)

[hablaconmarina]

Great tutorial!!! this is so simple and fun, action script doesn´t seem hard to learns as i thought, thank u very much!

[gepanther]

Great tutorial!! I was wondering if you could post a video on how to animate the thumbnail when clicked so that it rotates while moving on a tween out and back in to where the main picture will be and then at the end of the tween the main full picture appears. Thank you so much your the greatest!

[mp4ever31]

awesome .. anyone knows how to put your slideshow on your page layout for the web?

[mickey00ron]

tutvid! your the best! ever! ^_^

[msskyoflove]

THANK YOU fOr this tutOriaL. it reaLLy heLp mE fOr my pROject. ;)

[SexAndTheClub]

Helloooow,,,,

when i type this script

thum1.onRollOver=function(){

this._alpha=100;

}

thum1.onRollOut=function(){

this._alpha=50;

}

it's not working! i'm using CS3...

anyone know whts d prob???... plzz, help me out....

[Sysmatix]

thum1.onRollOver=function(){

this._alpha=100;

}

thum1.onRollOut=function(){

this._alpha=50;

}

You wrote thum not thumb

[jologs21]

@SexAndTheClub .. Ummm which actionscript are you using... you have to put it on Actionscript2.0 .. if AS3 then select

AS3.0 - on action pallete.. you wanted to fade out.. on mouse roll over.

[DeanoGarno]

Does anyone know how to add a pre-loader to this awesome flash gallery?

[kurtblake]

@DeanoGarno Did you find out how to add a pre-loader? Thanks!

[jeanclaude36]

Excellent! Is there away you can add a slideshow where it automatically goes to the next image. I am working on one right now I but it loads everything causing it to take a long time to start the website.--It seems I have to abandon slideshow because it loads all the image in that time line.

[RocketsOfDoomsday]

Thanks. It looks hard, but its really easy if you payed attention.

[TheTovez]

Thanks! Great tutorial, it helped me a lot!

[lil1314]

How come everytime I add a new symbol which was the movie clip, the whole thing zooms in and all I see is white... I cant zoom in by double clicking... So i have no idea where to delete... I'm using CS4... This is fucking hard..!

[SWAT091]

Can someone help me I get this error "1120: Access of undefined property Btn1." I am using Adobe CS4 anyhelp please?

Thanks

[jjbrettfavre]

great tutorial. i would like to know how to make the exact same gallery, however I would like for there to be an image on the gallery when it loads (instead of being blank with just thumbnails). can anybody help me?

[jesseleikermusic]

Yeah dude, absolutely. This was awesome. I am a comeplete noob and I basically took an hour and a half to go through this three time...just listening to the audio and doing my own thing in CS4. I now know how to do it and feel comfortable doing it on my own without instruction. I appreciate it. Davegas: patience my man. It's a virtue.

[davegas666]

absolute cock. as a newbie I could not follow this video.

[peonowns]

Cheers for thhe tutorial.

changed some things around, i used flash cs4 using AS2, thing i found for anyone doing it in CS4 is that when you click the "motion tween" to make it fade to whole, in cs4 this is called "classic tween" the motion tween on cs4 will not work idk why but classic tween does the same thing.

cheers for the video, keep em coming

[16133411]

I was really enjoying this tutorial but got stuck when it came to the first action scripting for the thumbnails. I am new to action script and (flash for that matter) and really want to learn!

I am using cs4 and have tried changing the settings to as2, as opposed to as3. For some reason my action script never goes green or red, just blue.

If anyone can help it would be greatly appreciated!

thank you!!!

[mbwinther]

@peonowns Thanks a bunch, I had this issue, and it was driving me nutz.

[jkw0789]

Yeah. Not sure if this was asked already or not, but how come the alpha scrip only works with AS2? I'm completely noob to flash, and I'm just curious. I get errors when I export with as3, but exporting with as2 it works fine.

[caaramelcha]

hi, what if I wanted accompanying text with the pictures? Can I put text and picture together as one symbol?

[Saltomurs]

Problem Solved!! JUST set your publish settings to actionscript2 and follow the instructions as tutvid says! thanks a bunch, man you rule!!!

[sarahwhitney1169]

@Saltomurs

So, in CS4 if I use Actionscript 2 and not 3 it will work?

[Saltomurs]

thanks a lot!. but it would have been a lot helpful if you mentioned at the beginning to make sure we use actionscript2!

[abstractwizard]

i've followed the tut just about exactly and when checking have no script errors but for some reason when i preview and click the buttons to make sure they work nothing happens

[Nsdnayz]

For the proper control of images, in AS3:

btn1.addEventListener(MouseEve­nt.CLICK, actie15);

function actie15(event:MouseEvent):void­{

fotosMC.gotoAndPlay("img1"); ;

}

[smoothers]

I used this code and was successful for the 1st thumbnail. However, with AS3, for some unknown reason i cannot modify each thumbnail individually. by that i mean clicking on the thumb and going into the script to enter the code. Is there some way to do this?

[Nsdnayz]

Otherwise are two different pics, executing the "same" action.

Capiche?

[csteocomp]

Hi..went thru this great video..does anyone know how to 1. Slow down the scroll and 2. How to stop the automatic play of scrolling and be abel to click and activate the scroll...NEED HELP thx! : )

[sarahwhitney1169]

Maybe try changing the frame rate to slow it down.

[sarahwhitney1169]

When it gets to 22:28 adding action script to the thumbs . . . I click a button on the stage (MasterClipMC) I press F9 and my action script prompter comes up and says "Current selection cannot have actions applied to it." What am I doing wrong?I am using CS4 and had to go in one by one to create each state for my buttons . . . did that mess things up? HELP

[quicksilverusu]

all those using flash cs4 use this code for the button rollover:

import flash.events.MouseEvent;

thumb1.addEventListener(MouseE­vent.MOUSE_OVER, manageMouseOver1);

thumb1.addEventListener(MouseE­vent.MOUSE_OUT ,manageMouseOut1);

function manageMouseOver1(e:MouseEvent) :void{

thumb1.alpha=1;

}

function manageMouseOut1(e:MouseEvent): void{

thumb1.alpha=0.5;

}

[abstractwizard]

thanks

[ErcanWorld]

@quicksilverusu

thanks

[kkm0103]

@quicksilverusu the best is when using CS4 use Flash 2.0

[aspartameprincess]

@quicksilverusu

Hey There,

This video was great! I just have one question ... I have about 60 images I want to put up ... Are all of the thumbs going to fit on the stage? How does that work?

[aspartameprincess]

@quicksilverusu

Hey There,

This video was great! I just have one question ... I have about 60 images I want to put up ... Are all of the thumbs going to fit on the stage? How does that work?

[jmtzhouston]

when i try placing action script on mu thumbAS layer

it says

extra characters found at the end of the programm HELP?when i delete the curly brackets though it says fnot specified :/

[jmtzhouston]

really good :]

[vintageozarks]

About three months ago life circustances forced me to learn CSS/HTML code so I can design and create our website from scratch.

I credit you and about 10 other css teachers for making it possible for me, a 62-yr grandma, to experience the beauty of creating with css within my lifetime. Thank you.

[DagmarNicole]

I love Your tutorials. Thank You.

[jdawgt808]

I designed this gallery and it looks great only my images are top left of the page, I followed the centre instructions to the letter. Im not sure where I went wrong, how do I centre it to the stage.

Thanks

[dhead00]

Awesome. Thanks a lot :D Really nice Tutorial 5 stars

[larryexplodeterra]

good tutorial

[wrdeboise]

Can I import other transitions and use them, for instance, if I want something to slide in or bounce in from the top or side? Also, can I create a loader class to load my thumbs from an xml file? This would indeed make changing and updating the file very easy.

[ozxyeuwh]

Great tutorial!

Question: If my gallery has a lot of pictures, the thumbnails will exceed the stage width. Any suggestions for a solution?

[widespreadfanic]

AWESOME! I followed this tutorial last night and it worked PERFECTLY! Thank you so much. Your tutorials are structured very well and I appreciate the quality of your instruction. I can't wait to view more.

[janecathryn]

Anybody able to help with the AS3 in CS4? I am having trouble getting the last part where you add actions script to the buttons. Thanks