Simpele Fotogallerij - Knoppen en Stop actions

Voor deze tutorial is een versie van Adobe Flash benodigt.

In deze tutorial leer je in flash een simpele fotogallerij met thumbnails te maken, waarbij basis begrippen als knoppen en time line control aanbod komen. Deze turorial is niet geschikt voor gevorderden.

eindresultaat (klik op een foto in het menutje):

Stap 1: Layout

Maak een nieuwe layer en noem hem 'layout', teken hierin de vormgeving van de gallerij. In het voorbeeld: het grote vierkant en de twee kleintjes, je kunt zelf elke layout gebruiken die je wilt, het is natuurlijk ook mogelijk om de thumbs (kleine plaatjes) onder de hoofd afbeelding te plaatsen. In het voorbeeld heb ik een groen gadient fill gebruikt en de vier 'gradients' naar een movie clip geconverteerd zodat ik er een grijze glow filter aan kon geven.
Het converteren naar een movie clip is benodigd om een object een filter te kunnen geven, volg hiervoor dezelfde stappen als bij stap 2 maar selecteer dan 'movie clip' in plaats van 'button'.
Voor het gebruik van filters en gradients verwijs ik naar mijn tutorial 'flash banner' stap 7, 2de deel voor filters en stap 3 voor gradient fills.

Hieronder zet ik de plaatjes en bijhorender thumbs die ik in het voorbeeld heb gebruikt.

Stap 2: Het maken van de Knoppen (thumbs)

Maak een nieuwe layer aan onder de layer 'layout' en noem hem 'thumbnails' importeer mijn thumbs of je eigen thumbs allemaal in deze layer File>import>import to stage. Plaats ze op de juiste plek. Klik vervolgens met de rechter muisknop op de eerste thumb en selecteer covert to symbol. Selecteer vervolgens button en geef hem een naam bijvoorbeeld 'button1'. Klik op ok. Herhaal deze procedure met alle thumbs

Fig 1

Stap 3: Het neerzetten van de foto's

Maak een nieuwe layer boven de 'layout' layer en noem hem 'afbeeldingen'. Maak 4 blanke keyframes achter elkaar (of meer als je meer foto's hebt) door op het eerste lege keyframe 4 maal op F7 te drukken of Insert>Timeline>Blank Keyframe(*4). Plaats in het eerste keyframe de foto bijhorende bij de eerste thumbnail in de tweede keyframe degene horende bij de tweede thumb enzovoort. Wanneer je hiermee klaar bent, verleng de layout layer en de thumbnail layer tot dezelfde lengte als de afbeelding layer door deze te verslepen. (een keyframe na het einde vasthouden met de muis en verslepen naar de nieuwe gewenste locatie)

Stap 4: Het definieren van stop actions

Maak nog een nieuwe layer aan helemaal bovenaan en noem hem 'stop actions' maak evenveel blank keyframes als foto's: selecteer de keyframes en druk op F7 dit gaat een stuk sneller. Klik het eerste keyframe aan en klik op actions boven properties, wanneer je het niet ziet Window>actions.

Type vervolgens in de actions layer:

stop();

Fig 2

Als het goed is zie je nu in het lege keyframe in de tijdlijn een a'tje boven het rondje verschijnen. Dit betekent dus dat dit frame code bevat.
Herhaal dit met alle lege keyframes in deze layer zodat elk frame een stop command bevat. Dit zorgt ervoor dat de movie niet gelijk zal gaan afspelen waardoor de foto's als een soort super snelle slide show voorbijkomen.

Als het goed is ziet je timeline er nu zo uit:
Fig3

Stap 5: Het definieren van de Knop actions

Voor elke aparte foto hebben we nu een keyframe gemaakt. We willen dus dat de eerste knop ons naar het eerste keyframe brengt waarin het bijhorende plaatje staat

Klik nu op de eerste button/thumb en klik op actions boven properties wanneer je het niet ziet met de button nog steeds geselecteerd Window>actions. Verzeker jezelf ervan dat achter actions in het menu 'Button' staat net zoals in figuur 4. Wanneer dit niet het geval is stond de knop waaraan je de actie wilde toevoegen niet geselecteerd toen je op actions drukte.

Type of plak vervolgens de volgende code in het paneel zoals in figuur 4:

on (release){
gotoAndStop(1);
}

De een stond zoals je al raad voor keyframe 1 dus als je nu op knop een drukt speelt de swf keyframe 1 af. Herhaal dit bij alle knoppen waarbij je het getal natuurlijk steeds verandert in het bijhorende keyframe.
Mischien ten overvloede, maar bij knop 2 om bij keyframe 2 te komen word het dus:

on (release){
gotoAndStop(2);
}

Fig 4

Test je movie wanneer je klaar bent met ctr+Enter of Control>TestMovie en je zult zien dat wanner je op de thumbnails drukt de bijhorende foto zal worden getoond.

Ik hoop dat de tutorial duidelijk was en wanneer je de gallerij wat dynamischer wil maken raad ik aan om binnenkort hier nog is te kijken, want dan zal ik een scroll paneel voor de thumbs en een fade-in effect behandelen voor de gallerij.

Reageer
De vragen en reacties kunnen door tijdgebrek helaas niet altijd beantwoord worden door de auteur van de tutorial. Help elkaar daarom, en houdt het vriendelijk. Plaats geen rare reacties, anders riskeer je een ban voor de website. Voor overige vragen, zie ons Photoshop Forum.
Naam:
E-mail: (niet verplicht)
BBCode:
Reactie:
Code: (tegen spam)*

Reacties (15)

Geschreven door Tinoz, op 04-12-2009 23:30 Snap het niet en ik heb een pagina gemaakt met meedere plaatjes , hoe fix ik dat dan ?

Geschreven door noob, op 27-11-2009 09:32 kankerlelijk :P

Geschreven door Anis, op 20-05-2009 18:47 HOE MAKKELIJK!!!! (Wel goede tut.) Als je een échte wilt krijgen(Gratis), mail me dan! (Met papervision 3D script)

Geschreven door niko, op 11-03-2009 13:54

Geschreven door Jack, op 22-10-2008 15:32 Euhmzz vraagje hoe moet je de foto's in de keyframes doen ?  Bij STAP 3.    Alvast bedankt

Geschreven door Assassin, op 02-11-2007 09:48 Kijk, dit is nogeens handig!