How to make a photo gallery in Flash CS5? - ActionScript 3.0

In this article you will find many interesting things about making flash gallery! I hope thisshort tutorial will help you in your work!



So let's start by opening our site in Flash and start working! It would be nice if you hadalready prepared all the photos and thumbnail that you want to put on your site!







If you already have everything prepared, and your template is already in Flash, go to asubpage "gallery" (or as you called it) by clicking on the timeline first frame of yourpages (for me it is a frame 21) as is shown in the picture Then click on the Movie Clip -the point is a circle, which is located in the lower right corner of the picture! Of course,double-click to get into this clip!


If you're in the middle of this, now you can import your thumbnails to the gallery, but before that it would be good if you create a new layer for the thumbnails! Now selectFILE-IMPORT-IMPORT the Stage, the window appears and you select all the thumbnailsyou want to add the page! Arrange them at their discretion (as you wish) and go to the next phase of the gallery! 



OK, if you've done it all you have done is we have to do with these thumbnails buttonsthat will lead visitors to the larger photos:) To facilitate the work of a new layer on whichwe will do a small square or rectangle (discretion). Select the "rectangle tool"(R) anddraw a rectangle on the Stage of the same size as your thumbnail (I draw a rectangle100x100 pixels), of course, choose the color you want (I will choose white) 



This square will serve as a button, which will be duplicated there to create more buttons!Now that everything look nice, simply drag the white square on the first thumbnail!



As was shown above, the square is marked so we can be pro convert button. Selectfrom the keyboard F8 and give it a name! 



As you can see I called the "btnmini1" but you can call it as you like! Select the type -"button" and press OK! Now we are almost ready to button our gallery. To give it a feweffects, click on it twice and there is a new time line!



You can do some interesting things if, in the first frame will change color or opacity of thebutton will be the effect you see when you will not do anything if you do not invade the mouse, nothing happens. For something to happen you have to go to the second frameby pressing F6, and you can also change the color or opacity! Another framecorresponds with the click, the point is that if a user clicks on your button, it will changeunless you do nothing (do not change color or opacity), and of the final frame is responsible for the active field or button there in total, do not do anything, just click F6and go on!

I am a law in the first frame opacity to 50%, the second at 0% and the other just like the other! Now go to the clip gallery!



Now we have to create a few more buttons than one:) It is proposed to do it in such a way that when you move the mouse on a square, press the left mouse button and select the ALT keyboard, the cursor should change to white color with a plus, if so, just drag themouse and have already dealt another button! Do the same with more buttons!



Well, we have the keys ready, now you have to go to the panel on "properties", in whicheach of the buttons you need to name an instance! Select a button and type the name you want!



Do this with every button and go on!
OK, I understand that everything is done? Let's go further. Go to theWINDOW-INGREDIENTS (CTRL + F7) shows you a window whereyou have to to go to the " User Interface" -is developing a list and choose " UILoader "simplycreate a newlayer , you select and drag it UILoader the Stage in a place where you want to be shownyour picture! 



As you can see in properties this is a movie clip, which we must give a name, you canenter any, I typed "myUILoader"



Well, we already have almost everything!

Again, go to the window and select "code snippets" window appears. Select the first button and select the "sub-event handling"



Select the first option - "Event - a mouse click", click on it twice. Now, new window willpop up "operations" and create us a new layer in the timeline! 



Now we have to remove the piece of code and write something like what they will needour pictures by clicking the mouse on the thumbnail. What is it? First of all, it is importantthat your photos to be displayed on the page must be saved in one folder with a file of your site, for example, "index.fla" and in this folder, you can create a new folder with pictures! Do as I do in the pictures!



If you did like the image that you know what I typed in the name of the instance of this small square, which will download in the folder "Photo" pictures named "1.jpg". I hopeyou know what I mean, if not you probably will understand it quickly because it is not that hard:)
Similarly, we have to do with the other miniatures. You do not have to use codefragments, it is enough that you copied the script and podmieniałem photos. If youcopied the need to change the button name, such as adding 2,3,4,5 ... function name2,3,4,5 ... and no pictures! Do everything as in the picture.



OK, if you already have everything ready you can close the window operation and usingCTRL + ENTER to see how your gallery!



As you can see everything is working properly but something strange has happened toour pictures. Now close the window and click the exported movie to UILoader on the right side of his property will appear where you need to uncheck "scaleContent"



I think everything should now work correctly, so take a test video to see a properly working gallery (CTRL + ENTER)



As you can see everything works for me correctly, I hope it is useful to you! I also inviteyou to watch a movie or on my Youtube channel!













Brak komentarzy:

Prześlij komentarz