[Broly]

Create a Complete Photogallery with Flash, MySql, Php and AMF-Php

LITTLE NOTE: At the end of tutorial, I linked some image and not inserted it into the post because the forum doesn't allow a so big amount of images

Example : you can see a little simple example of the photogallery we're going to create at the URL http://www.brolyweb....ry/Gallery.html

1 – Preparation & Requirements

1.a – What software we need

For this tutorial we don’t need a lot of software…here a list of what we’ll use

- A graphic software, for the GUI elements (I used Ulead Photoimpact 10, you can download a trial from http://www.ulead.com/pi/trial.htm , but we don’t need nothing special…than every graphic software can be ok … I used Photoimpact because I know it more than others software :-D )
- A text editor, for PHP files (also notepad it’s ok, but I suggest an editor with at least
line-number and syntax highlighting)
- A visual manager for MySql (I’use PhpMyAdmin, http://www.phpmyadmin.net/home_page/ )
- Flash Remoting Components (http://www.macromedia.com/software/flashremoting/downloads/components/#flr_as2)
- AMF-Php (http://sourceforge.net/projects/amfphp/)
- Flash Mx 2004 (http://www.macromedia.com/software/flash/)
- Php (www.php.net) *
- MySQL (www.mysql.com) *
- Apache (http://www.apache.org/) *

* You can install it on our pc if we want test the application on localhost. If you want to test only on your server, you haven’t to install them (obviously, your hoster must support php and mysql).

1.b – Software installation

- For Flash Mx 2004, Photoimpact 10 (or other graphic software) and the editor you’ll choose, refer to their respective help...usually a double click on the setup file is all you have to do :-D

- For Flash Remoting Components installation, double click on the installation file you downloaded from Macromedia website. You’ll find the components in the menu
Window -> Other panels -> Common Libraries -> Remoting

- For AmfPhp installation, you can follow this tutorial -> http://www.sephiroth...p_installation/

- For PhpMyAdmin installation, simply extract files into your webserver directory (or into your webspace) and configure it with your database data (host, user, password). You can do it simply opening config.inc.php and changing host, user and password variables, for example



- If you want to install Php, Apache and MySql on your pc, please refer to their respective installation guidelines. You can also use packages like FoxServ (http://sourceforge.net/projects/foxserv/) that install php, mysql, apache all in one…even if I don’t suggest this solution because with the “separated” installations you can manage and configure better php, mysql and apache…but in this tutorial we won’t discuss this argument…then choice the way you prefer for the installation of those products ;-)

1.c – Requested (suggested) knowledge

I’ll try to make this tutorial more simple than possible, but some knowledge can help you better understand the code and the concepts. This doesn’t mean that if you haven’t some of the following knowledges you can’t follow this tutorial, but only that maybe some passes will be more “obscure” and could request more time to be well understood. Those are

- Intermediate/Advanced Actionscript (arrays, movieclip duplication, cicles, functions)
- Basic Flash (file importation, software interface)
- Basic PHP
- Basic SQL/MySQL (queries, tables creation, data types)

This tutorial will be more “simple” if you know those topics and if you have some experience of programming…anyway I’ll try to use simple explanation and also simple (but efficient :-) ) code, moreover I’ll illustrate more complex passes with images or videos…Well, the only things you absolutely need for follow this tutorial are patience and longing ;-)

2 – Gallery guidelines

Before start the project, can be very useful think the guidelines of the project.

How we want structure the gallery ?
What features we want insert ?
What user can (or can’t) do ?
What the different files must do ?
Etcetera..

Well, before all I thought the “essential-files-schema” and their interaction. Something like this

Image 2.1




Let’s see more in detail.

Gallery.swf – Is the main file. It send data to gallery.php (into “services” folder) and receives/elaborate the answer.
gallery.php – Is the “hearth” of the application. It contains all methods of the photogallery and, communicating with MySQL database, it gives to gallery.swf the info for albums, files,etc.
download.php & view.php – Those files are opened by clicking buttons in gallery.swf. They are options avaible on photos. download.php can download the selected .jpg on the user pc, while view.php can show the image at her fullsize (in fact, gallery.swf is only 550x400…if photo is larger, we can show it at full resolution in this file, opened in a pop-up window with variable size)
gateway.php – Contains info about AmfPhp paths

Now we saw the “essential-files-schema”…let’s see all files and their disposition in folders

Image 2.2 – Folder structure




Image 2.3 – Files in the tutorial




Obviously this structure is only indicative…but I suggest to use it, because some files in this tutorial will point to other files…then if you use the mine folder-structure you won’t have path problems ;-)
Note: this is the structure with only essential files and folders. During the tutorial we’ll use also some graphic files.…but they won’t be included into the final gallery, then I preferred show only the “final structure”.

Well…Now we established the files number, location and interaction.

But there’s one thing yet. We must establish the database structure…in fact, all the flash and php code will be based on the data we can use…
The database will be very simple…in fact it will have only 2 tables (albums and photos).
As you can understand by the presence of a table “albums” in the database, we’re going to create e gallery with more albums…then, when the user select an album, he see the various thumbnails of the photos, and last (but not least ) he can click on the thumbnail for see the big photo (and use the download/view options we mentioned before).
Now, after this long (but useful, I hope :-)) introduction, we enter in the “creation phase”.


3 – Start create – The Database creation

First, start PhpMyAdmin (if you’ve installed it on localhost, go to its url, like http://localhost/PhpMyAdmin , while if you have it on your webspace, go to the right URL)

You’d see something like this

Image 3.1



I think you haven’t difficulty to create a new database, called “broly_gallery” (simply insert “broly_gallery” in the “Create new database” field and press “Create” (see Image 3.2[/).
Then you’ll see a new screen, like in Image 3.3.

Image 3.2




Image 3.3




In this screen, we can create a new table into the database.
We already said that we need two tables: albums and photos
Well…but how many fields must they have?
Albums need 2 fields (id, name)
Photos need 5 fields (id, album_id, name, description, file)

In the videos below, you can see how to create the two tables, their field and also what type of field they have to be.

First, the album table

Video 3.1

http://www.brolyweb.com/Tutorials/Photogallery/Video.swf

Now, click again on “broly_gallery” on the right column. You see again the screen from table creation. Follow the video for see how to create the photos table.

Video 3.2

http://www.brolyweb.com/Tutorials/Photogallery/Video2.swf

If you want follow the videos (you’re lazy, eh? :-p) you can directly use this SQL code



Now we have a database with to tables.
What we have to do? It’s simple…fill those tables! But..before fills it…we need some data to put in them. Well, it’s time to pick some photo…and here start a new phase!


4 – Start create – Photo selection and preparation


It’s time to fill our database tables.
Now you can

- Select some photos you have on your pc
- Download the zip containing some photos (already divided by album) I prepared for you ;-)

REMEMBER : The photos MUST be non-progressive jpgs.

If you have downloaded my .zip file, simply unpack it into your “Broly gallery” folder.
Otherwise, you have to follow some passes (it’s useful to read them also if you have download the .zip, because they are the passes you have to follow for create your own albums).
We need to divide photos in albums, and also to make thumbnail for every photo.
We can select a little number of photos (two or three): forward in this tutorial we’ll create also a little admin panel…and it will create the thumbnails automatically, so it’d be absurd hand-create a large amount of photo when we’ll have a script that automatically will do it
Maybe you’re thinking “yes, good…why you don’t explain it NOW?” . The answer is simple…because the panel will interact with the database, but now we’ve only 2 empty tables. Then I prefer before fill the database and explain how operate on it, and only at the end, when we’ve a good feeling with this database, create an admin panel for the gallery: it will result more simple to understand, because you have had already a lot of operations with the gallery data.


4.a – Albums & thumbnails

If you’ve downloaded my .zip file, you’ve only to unpack it into your “albums” folder inside “broly gallery”. But it’s however useful follow this passes, because you can need them for your albums creation :-)


If you have Photoimpact, follow the video below.
Otherwise, open the images you’ve decided to put in your gallery and resize them to 600x400 (or similar) for the big photo, and 100x67 for the thumbnail.
NOTE: You can select size you want, I only suggest them because the photos I’ll use during the tutorial have this size … this is a good reason to download my .zip, you’re sure you have photos adapt for this tutorial.

Now we’re going to prepare 2 albums, everyone with 1 photo. I think the video explain well all passages.

Video 4.1

http://www.brolyweb.com/Tutorials/Photogallery/Video41.swf

Now you can easily understand the albums structure: a folder with inside photos and another folder “thumbs”, that contains the thumbnails of the photos. Big photo and relative thumbnail have the same name. The name of the album folder will be the album’s name in the database.
Now you’d have, for the “albums” folder, something like image 4.1

Image 4.1




Okay…we’ve got two albums (only with one photo…but it’s enough for the first passes.
Now we must insert the albums and photos info into the database.
Recapitulate, we’ve

Album “Beach”, with photo “Beach1.jpg”
Album “Park”, with photo “Park1.jpg”.

Then, in the database, we must insert “Beach” and “Park” into the albums table, and “Beach1.jpg” and “Park1.jpg”, linking them to their respective albums.


5 – Start create – Database filling

Do you remember the database table and their fields ?
Yes? Well!
No? Ok, read below ;-p

Table : albums
Fields
- id
- name



Table : photos
Fields
- id
- album_id
- name
- descry
- file

You can easily imagine that “album_id” field in the photos table refers to “id” into the albums table.
In fact, we need it for establish what’s the album of a photo.
For example, if we have in albums

Id Name
1 Broly

The photos we want into “broly” album, must have “1” as album_id.

Now stop examples, fill our database with real data we have.
You can follow the video, that show how insert the data using PhpMyAdmin, otherwise you can use the SQL query you’ll find after the video.

Video 5.1

http://www.brolyweb.com/Tutorials/Photogallery/Video51.swf

SQL query (if you don’t want follow the video)



As you can note in the video (and in the code), we’ve inserted two albums, Beach (with id 1) and Park (with id 2). Then we’ve inserted the photos info.
Now our database contains some data…a small number, but enough for test some gallery functions; we’ll also test the page division…for that function one photo isn’t enough…but before that pass I’ll explain how to create the insert panel I mentioned before. Now it’s time to project the gallery.
6 – The gallery – Graphic User Interface

Now, it’s time to start create the GUI (Graphic User Interface). The GUI is what the user see…even if the heart of our application will be in Php, the GUI must be simple and intuitive.
We’ll project it before into Photoimpact , then we’ll transfer the GUI in Flash

6.a – GUI Project / Phase 1

The first phase of the GUI creation is to draw it in Photoimpact.
I thought a GUI like this

Image 6.1




The main GUI, where the user can select the album and then select the thumbnail

Image 6.2

http://www.brolyweb....y/GUI_Photo.jpg
[/i]The GUI when the user see the photo he selected[/i]

I hope you like that GUI, even if it’s very simple…if you don’t like it…Sorry, I’m not good at graphic
As you can see, I inserted some description for different sections of the GUI.
I hope they’re clear…everywhere following the tutorial you’ll understand them

I shown you the GUI I thought…now you can follow video below for recreate it (in the video I used Photoimpact, you can use your favourite graphic software. You can also made your personal GUI, obviously you will adapt the rest of the tutorial to your GUI).

Video 6.1

http://www.brolyweb.com/Tutorials/Photogallery/Video61.swf

You don’t want follow the video, or you haven’t Photoimpact but you want to have the same GUI I’ll use in the tutorial? Then you can DOWNLOAD THIS ZIP, that contains. .ufo , .psd and .jpg of the GUI.

Now that we’ve the GUI, we must insert it into Flash.
We’ve two ways: insert all the .jpg into Flash and “mount” the elements over it, or export the GUI parts and reconstruct the GUI in Flash.
I suggest to follow this 2nd way, because we’ll have more liberty into Flash for moving elements…and also a greater level of control of compression, in fact using separated elements we can compress one more than others…while with only one big GUI we had to compress all.
Well…are you ready to pass to Flash ?

7 – The gallery – Recreate GUI in Flash

For the GUI recreation into Flash, we’ve to do essentially 2 operations
- Export the single elements from Photoimpact
- Import the elements and positioning them in Flash

7.a – Export elements from Photoimpact

This operation is so simple…follow the video 7.1 for the exact passages.

Video 7.1

http://www.brolyweb.com/Tutorials/Photogallery/Video71.swf

What exactly we done?
Simply we made 3 images (TopBar.png , Center.png, Bottom.png) that we need to recreate the main GUI into Flash.
We exported them as PNG because is the better format for this situation, in fact
- Jpg doesn’t support transparency
- With .gif we hadn’t shadows that make this GUI “nice”

Now, make the same operation for the 2nd GUI (gui2.ufo)…I don’t make another video, I think you understood the passages to do
NOTE: Obviously you don’t need to export also the TopBar of the 2nd GUI, because is the same of the 1st GUI … while you need to export all other elements.

I called them

- PhotoView.png
- Options.png
- PhotoNav.png
- BottomBar.png

We’ve all the images we need for make the GUI in Flash.
Then….start Flash!

7.b – Import elements in Flash

Well…are you tired? I hope no…and if you are…think that you must only read, I had to write all
:-P
Now, start Flash and open a new project. The change the background color
(right click on the stage-> Document properties, then “Background color”), and set #A52900 (like in image 7.1)

Image 7.1



Perfect. Now import (File->Import->Import to library) all the .png we create before…like in image 7.2 , then open the library.

Image 7.2




Into the library we’ve now all pngs we need to recreate the GUI.
Follow the video

Video 7.2

http://www.brolyweb.com/Tutorials/Photogallery/Video72.swf


This is the main GUI, where user will select an album.
The same GUI will show the album’s thumbnails. Then we can add a keyframe, without change nothing on the stage. At the third frame, the user will see the photo … then here we must change the GUI. See the video 7.3 for all passages.

Video 7.3

http://www.brolyweb.com/Tutorials/Photogallery/Video73.swf


8 – The gallery – Adding elements to the GUI

Well, now the “background graphic” is complete. Add a stop() on every keyframe (1st, 2nd, 3rd frame in this case). Now we must add some elements, for example some textfields. See more in detail what element is necessary on every frame.

Frame 1
- A textfield into the topbar
- Albums list in the center of the movie
- 2 text field into the bottom “small bars”

Frame 2
- A dynamic textfield into the topbar
- Thumbnails in the center of the movie (then, one movieclip we’ll duplicate via AS)
- Dynamic textfield in the bottom left “small bar”
- Static textfield in the bottom right “small bar”

Frame 3
- A dynamic textfield into the topbar
- Photo in the “Photo Viewer”
- A movieclip that works as “Photo Navigator”
- Some icons that represent the options
- A dynamix textfield into the bottom bar

8.a – Start from the beginning

Let’s start from frame 1
Here we need only some textfield…but what about the albums list ?
I thought that this tutorial is already long and complex…so here I’ll simply use a ListBox component. You can adopt another solution and create your list, here I don’t want to add another passage that could require a lot of code and explanation…because there’ll be already a lot :-p
In Imge 8.1 you can see what kind of situation you’d create.

Image 8.1

http://www.brolyweb....ery/Image81.jpg

Very very easy

8.b – The 2nd keyframe

Pass now to the 2nd keyframe, where the user will see the thumbnails of the album he selected at the 1st frame. Here we need always some textfields, but dynamic and not static. We need also a movieclip that will contain a thumbnail (and we’ll duplicate it when we’ve more then one photo in the album). This movieclip must also contain a preloader for the thumbnail.
In image 8.2 you can see the frame as it’ll appear at the end, while in video 8.1 you can see the passes for the “thumbnail movieclip” creation.

Image 8.2

http://www.brolyweb....ery/Image82.jpg

Video 8.1

http://www.brolyweb.com/Tutorials/Photogallery/Video81.swf

Let’s summarize the “thumb” structure.

Thumb
Cont
Border
Preloader
Bar
Border

Why this structure? It’s simple.
Into “Cont” we’ll load the image thumbnail, while “Preloader” will sign the progress of the thumbnail loading with the bar.
Maybe you’ve noticed that the “thumb” mc is 123x93…while the thumbnails we create were 100x67! Well, it’s not a problem. Why? Because we can resize “thumb” mc…but also (via AS) make the thumbnails 123x93…without too deformation. I’ll use this second method for show you how “adapt” an external image to a movieclip which have a different size. Obviously you can also directly create movieclips and thumbnails of the same size , but isn’t always possible…so I prefer show you a little passage for force the “correspondence”.

Now also the 2nd frame is ready. It’s time to prepare the last frame.

8.c – Last but not least

Are you ready for the last graphic work of this tutorial ? (Yes, last…next phases will be almost all code!). The 3rd frame must show the photo, its name, its description, some options (download & view photo, more than general “back to albums” and “back to thumbnails” options). In this frame we also have an “Image navigator”. If you don’t know what an image navigator is, you can see an example (by Sephiroth) at URL http://www.sephiroth...etail.php?id=86 before create your one . Also for this frame, I’ll show you an image with the final result, and a video for the image viewer movieclip and for the image navigator movieclip.
HINT: Create new layers for image navigator and image viewer. It will more simple select them, and we’ll also can insert their code on their layer, this means a more clear code

Image 8.3

http://www.brolyweb....ery/Image83.jpg[/IMG]


NOTE: The options icons are from Icon-Archive.com . The “back albums” and “back to thumbnails” icons are at page http://www.iconarchi...tory/index.html , while “view” and “download” icons are at pages
http://www.iconarchi...tory/Search.gif
and http://www.iconarchi...ry/Diskette.gif


Video 8.2

http://www.brolyweb.com/Tutorials/Photogallery/Video82.swf

Phew…finally we’ve finished the graphic part! Now it’s almost all code…are you ready ?

9 – The code– Preparing .php files

Well, we explained, at the begin of the tutorial (long time ago, eh? :-)) that we had to use 4 .php files.

- gateway.php
- gallery.php (into “services” folder)
- view.php
- download.php

The hearth of the gallery will be “gallery.php”, while view.php, download.php and gateway.php will be composed by a little number of rows. We start from gateway.php, because it’s the “bridge” for the communication between AmfPhp and the file “gallery.php” that we’ll create.

9.a – Gateway.php code and explanation

Gateway.php is composed by only NUMERO rows of code, in fact he must only indicate to gallery.php (and to gallery.swf) where is AmfPhp respect “Broly gallery” folder.
Here the entire code



I think it’s easy to understand.
First, we declare the constant “AMFPHP_INCLUDE_PATH” as “../../” . In fact, if you watch the folder structure, we must go up 2 times to find the “AmfPhp” folder. (in fact the structure is AmfPhp/Prove/Broly gallery).
Then, we use that constant concatenated to the string "flashservices/app/Gateway.php" for include a Php file. (the file in fact is in “../../flashservices/app/Gateway.php” respect the “Broly gallery” folder). We need to include this file for work with AmfPhp
Other lines declare a new Gateway class and call 2 methods, they are needed to start AmfPhp.

Stop…gateway.php file ends here…it’s more simple to write that to explain!

9.b – Gallery.php – The hearth of our gallery

It’s time to write the more important code of the gallery.
This file will include almost all the functions of the gallery. Gallery.swf will often interact with this file, especially for

- Obtain the albums list
- Obtain the thumbnail list of an album
- Obtain the infos for every photo

It means we need three methods, and everyone needs different parameters. Let’s see more specifically those methods and parameters.

1 – get_albums_list (no parameters required)
2 – get_thumbs_list (album_id required)
3 – get_photo_info (photo_id required)

I think that you can easily understand why that parameters are needed, especially if you look at the database structure and remember the paragraph about the database creation.

Summarize…in this file we need to insert 3 methods. We must insert in it also the function for database connection. The file must be structured as a class (AmfPHP requires it).
Here you’re the complete (and commented) code for this file.



I think that comments are clear and the code simple…there’s only some query to the database…the complex code will be in flash :-p
The class – function – methodTable structure is required by AmfPHP.
You can be sure that your php code is syntax correct trying to open it in your browser: if you see a blank page, there aren’t syntax error.
Now our “application hearth” is ready. We must create yet view.php and download.php, then we go back to flash and we’ll plunge into actionscript!

9.c – Download.php & View.php , two simple but useful files

This two files have to be associated at the two icons that we saw before in the GUI.
Download.php, as the name said, is the file that we’ll use for download the .jpg on the user’s pc.
It’s possible download directly the .jpg (without .zip it, for example) using particular header, then “forcing” the download.
Here the commented code



HINT : You can also insert this script in a frameset, for show to the user a “thanks for download” message, while with this script only a blank window appears.

Well, also download.php is ok…last file we create is view.php
This file is very simple, in fact it must only show a photo at her original size (while in the gallery it’s “masked” by the photo viewer). This file simply will write the <img> tag and show the photo; it will be included in a popup (that we open from gallery .swf) which size is passed always by gallery.swf (we’ll see more in detail this passage next in this tutorial).

This is the view.php code



Okay…with this file we’ve concluded also the php coding (except for the “photo insert” panel we’ll see forward)
It’s time to write some actions in Flash, friends

10 – The code – It’s Actionscript time

Well…there’s enough a lot of code to write…no no don’t escape!!! It’s more simple to write that to explain…because the code is not complex, but the “logic” behind it have to be explained in some passages…I hope to explain it well!

First of all, we must insert into the scene the Remoting Components we downloaded at the begin: they’re necessary for use the potentiality of AmfPHP. Then we must insert the code for communicate with “gallery.php” and the code for elaborate the data that this .php file will send to flash.

The passages we make are

- Remoting components insertion
- Remoting code writing (functions that request data to gallery.php)
- Responder code writing (functions that elaborate data arrived from gallery.php)
- Test the code with only one photo (like we’ve actually in the albums)

Then I’ll explain you how to create a little insert panel (NOTE: You need to have GD libraries installed for create and use it, please refer to PHP manual for the extension installation), then we’ll insert more photo in the albums so we can write and test a “pagination” code.

10.a – Remoting components

Start from 1st point…insert the remoting components into the scene.
It’s very simple. You have simply to open Window->Other panels -> Common libraries -> Remoting.
You’ll see two components, Remoting Classes and Remoting DebugClasses.
Create a new layer, called “Remoting”, then insert the components on the stage.

You can follow the video for better understand the passages

Video 10.1

http://www.brolyweb.com/Tutorials/Photogallery/Video101.swf

Perfect, now we’ve our remoting components on the stage.
It’s time to write the code for make them communicate with gallery.php.

10.b – Remoting code

Obviously we’ll proceed in “frame-order”. Start from the 1st frame, where we’ve the album list.
What we make do in this frame?
- Call the get_albums_list method
- Receive the answer
- Put the albums names and id into the listbox “albums”

Okay, but before start, remember then in every keyframe of the remoting layer (we’ll create 3 keyframes), we must insert this code



Otherwise flash give us an error if we try to write remoting mehotds.

Then…pick the 1st frame of “Remoting” layer, and paste the code I written before.
Then we must give to flash the info about the location of gateway.php file, and start the remoting service and netdebug. We make all this with



Okay. Now the “main” remoting code is made.
It’s time to use get_albums_list method.
We must call it and wait for an answer: the code is



What it means?
Simply, the pendingCall exec the call to the method and wait the answer.
The responder “intercept” the answer: if is ok exec the AlbumList function, otherwise exec the Error function. You can easily imagine that now we’ll write those 2 functions :-)

AlbumList receives data from get_albums_list, and must insert them into the listbox component we’ve on the screen.
Here the code



As you can see, the code is very simple.
AlbumList receive the parameter rs, that’s the result of the method called before.
With rs.result.length we get the number of albums, then set a for…cycle that insert into the listbox “albums” the name and the id of the albums.
We use rs.result._items[album] because the data are structured like below



And in fact in the example the var “album” can be 0 or 1 , then with this var we “walk” into the array.
Now if you test the movie, the “album” listbox become populated by “Beach” and “Park” (like in video 10.2)

Video 10.2

http://www.brolyweb.com/Tutorials/Photogallery/Video102.swf



10.c – Albums list actions

Perfect! We’ve our albums list! Now…what the user will be with this list ? Beh…it’s simple…it will click on one album for see the photo inside it…then we must write an action that can intercept the album selection, detecting album’s name and id. For this, we’ll use the components capabilities: the eventListener and the “change” listener. The code is the following



NOTE : I suggest to write this code on “layer 1”, not on “remoting” layer, so we’ve a code more clear and more divided into “sector”: this is useful, especially for future modifies.

In video 10.3 you can see the result of this action.
NOTE: The trace actions are only for test. You can remove it after seen that the code works correctly, or you can leave them, in fact in the final .swf the trace actions haven’t effect. However I suggest to remove (or comment) them, so in the following test phases we don’t have so much trace.

Video 10.3

http://www.brolyweb.com/Tutorials/Photogallery/Video103.swf

Well, now we can know what album (name and id) the user chose. Once selection is made, we need send the timeline to the second frame, when we’ve the “thumbnail interface”. We must add a small piece to the previous code, then it became



Now it’s ok…the user select an album, we set two variables (select_name and selected_id) for know what album he selected, then send the timeline to the 2nd frame, where we’ll show the thumbnails.
We don’t need more actions on the 1st frame.

10.d – The 2nd frame code.

We arrived at the 2nd frame, where we must show all the album’s thumbnails. In this frame we have to call the gallery.php method “get_thumbs_list”, passing to it the album id (that we memorized in the variable “selectd_id”). We must also create the code of the responder, that must load all the thumbnails and offer to the user the opportunity to click on it for see the photo in the 3rd frame, with the photo viewer, navigator and the options.
Create a new keyframe on the “remoting” layer.

Start from the remoting code.
As saw before, you must insert



Then we must create the call and the responder for the get_thumbs_list method



NOTE : As you can see, we use the same error function of the 1st frame. We don’t need to create different error functions for every method. You can do it…but it’s no compulsory.

Well, now we had to write the ThumbsList function.
This function must receive the thumbnails list, then “transfer” it into an array and call another function (“populateThumbs”, that we’ll create after) that will create the “thumbnails containers” (duplicating the existing one we created before).
Maybe you’re thinking “ok…but…we’ve only one image for album!”…it’s true, in fact now I’ll explain the ThumbsList function, after we write a “small” populateThumbs (only for test, it will load the only image we’ve in the albums), then we’ll create the “famous” photo insertion panel, so we’ll insert a lot of photos in a short time…later we’ll can write the populateThumbs function!

Start from ThumbsList function. We said it must receive data from get_thumbs_list method and put it into an array. Here you are the code.



I think that can be useful explain better that “for” cycle.
We created an array, “thumbs”.
In the cycle, we declare its index (0,1,2,etc) as objects, so he can contains more data and index.
At the end, we insert into those objects the indexes “id”, “name”, “file” and relative values.
So, for example, for the “Beach” album we obtain

Thumbs[0][“id”] = 1
Thumbs[0][“name”] = Beach
Thumbs[0][“file”] = Beach1.jpg

It’s simple, isn’t it?

Well, now we can create the populateThumbs function. We’ll create only a “simplified” version for now, that only load the .jpg into the “thumb” movieclip. This is for testing the functionality of our structure and the right passage of data.
As for the 1st frame code (for the listbox component), I suggest to write this function outside the “Remoting” layer.



REMEMBER, this is for test only! (the real complete function will be commentd).
You can see in [b]Video 10.4 the result you’d obtain.

Video 10.4

[Broly]

Wow, I noticed only now that the tutorials was cutted

Here the rest of the text

- make the automatic resizing of the image, for create the thumbnail and the “big” photo (as “big” photo I speak about the photo at her big size…for example, the “big” photos we created at the start of this tutorial was 600x400)

I’ll write below the complete and commented code.
I don’t explain it more, because it isn’t “fully linked” with the tutorial topic (even if it’s useful into this application), and also because the comment are, in my opinion, enough clear to explain the code…if you have more doubt, especially about some function, you can refer to PHP official manual (www.php.net)

The complete code is



You can see in below images the various screens of the insertion panel.






I think you don’t need an explanation about the use of this panel
HINT : If you can’t install the GD libraries, make some image with your graphic software. Otherwise insert some new data in the database, linking always to the same photo…the “visual” effect won’t be so nice…but for test the right functions work, it can be a good and fast workaround.

Now, using the panel (or the workaround I described), fill the album “Beach” with some photo…7-8 photos are enough for test the paging (in fact we’ll show 6 thumbnails for page, but you can easily change this number changing the size of the “thumb” movieclip into Flash)

10.e – Back to flash; Complete the 2nd frame code.

Well, now we filled an album, then we can write the complete “populateThumbs” function.
This functions must have those functionalities


- Dispose the thumbnails on rows and cols (in our example, 2 rows and 3 cols)
- Detect if more than one pages are needed : if true, show the “previous-next” page options in the bottom left bar *
- Show the preload for every thumbnail
- Where a thumbnail is loaded, hide the preloader and resize it to the thumbnails container size
- When the user pass the mouse over a photo, show her name in the bottom left bar
- When the user exit with the mouse from a photo, remove her name from the bottom left bar (and show again previous-next options if needed) *
- When the user click on a photo, intercept what photo user select and bring the timeline to 3rd frame

* For the previous-next page options, this function interacts with other 3 functions: “prevPage”, “nextPage”, and “Pagination”. We’ll see them after the writing of “populateThumbs” code.


Whew…this function have to do a lot of things!
Begin from the thumbnail movieclips disposition.
First, we must duplicate the existing movieclip (“thumb”) for the number of thumbnails in the album. (we’ll create thumb0,thumb1,thumb2,etc… and make invisible the original “thumb”)
Every movieclip must be placed at TOT pixel for the previous, and we must also “find” the movieclip that must do on another line.
Well, every row will be composed by 3 movieclips. Then the movieclip 3, 6, etc… must go to another line. 3,6,9,etc… are multiple of 3.
Then we can know how movieclip send on the new line using the % operator (please refer to the actionscript manual if you don’t know how it works)
If n_movieclip%3==0 => go to new line.

The code for this part is



Once the movieclip is positioned, we can load in it the thumbnail and start the preload.
Once the loading is complete, we must resize the thumbnail to the “thumbnail container” width and height.
For make this, we must use this code



Okay…we must yet set the actions for the thumbnails rollover – rollout.
Remember then on rollout we call the function that manages the pages division (“Pagination”)
We have to use onRollOver and onRollOut movieclip methods.
Here the code



And as final thing, the function must bring the timeline to 3rd frame when the user click on a photo ( we must before delete the thumbnails on the stage).
The function must also manage the division on rows and columns of the thumbnails, so we must increment posX (or increment posY and bring to her original value posX).
We have also to call “Pagination” code for establish how many pages we’ve and write the right text into bottom left bar.

All it is in the code below



Okay…so the complete populateThumbs function is



Ok friends, we’re near to the end of the 2nd frame cose…I hope you’re happy for this notice!
We need yet to write 4 functions: removeThumbs, nextPage, prevPage, pagination. We need also some line of code on the frame…but not too complex.

- RemoveThumbs

This function is called when the user click (then select) a thumbnail. It simply must remove the thumbnails movieclips on the stage (from thumb0 to thumb6). The code is very simple: a cycle that remove from thumb0 to thumb6.
NOTE: Maybe we won’t every thumb0,thumb1,thumb2,thumn3,thumb4,thumb5 and thumb6 on the stage, but the code will work correctly also with only some of this clip



Ok, this function is already finished !

Now we can write the Pagination code.
It’s a simple code that check if thumbnails are more than six and calculate how many pages we need. If more than one pages are necessary, it writes into the bottom left bar the text for change page (using asfunction linked to prevPage and nextPage , please refers to Actionscript manual if don’t know this function).
Here the complete code for Pagination function.



And now, my friends, the last two functions for this frame: prevPage and nextPage.
Both functions must check if they have to be executed (for example, we haven’t to exec prevPage if we’re already in the 1st page!).
The functions had to change the value of “ini”, call removeThumbs, then recall the populateThumbs function (so we can recreate the page with new thumbnails).
It’s more simple to write then to explain…and in fact here you are the code



Perfect.
Last thing to do for this frame : show the album’s name in the topbar.
It’s only one line of code




Wheey…a lot of code for this frame, uh? But…we’ve finished this frame! (Don’t be scared, the 3rd frame will have less code!).

In Video 10.5 you can see the result of our hard coding work!
NOTE : In the video I inserted 7 copy of the same image (Beach1.jpg) only for my comfort, but I suggest you to use different photos, also for a more nice “visual impact”.
In the video you can also note that prevPage and nextPage works only when it’s needed, so prevPage don’t have effect when we’re in 1st page, like as nextPage don’t modify nothing if we’re in the last page.

Video 10.5


http://www.brolyweb.com/Tutorials/Photogallery/Video105.swf


10.f – The last frame!

Finally we arrived to the 3rd frame of our gallery!
I hope you aren’t sleeping yet
Go boys, this is the last code for finish the photogallery!

In this frame we must write the code for
- Get the info about the photo (using get_photo_info method)
- Write the Image viewer code (it must load the image and show the preloader for it)
- Write the Image navigator code (it must interact with the Image Viewer for show the various sectors of the image)
- Write the code for the options
- Write some line for show photo title in the topbar and photo description in the bottombar.

Are you ready?
Let’s go!

Start, as usual, from the remoting code.
In the “remoting” layer, add a new keyframe, with the usual code



Ok. Now we must call the get_photo_info method, receive and elaborate its answer.
I think now you have learned the passages to do :-)

Here the commented code




Now we have to write the PhotoInfo. What does this function? Simply it
- writes the photo name in the topbar
- writes the photo info the in the bottom bar
- Set the var “photo_file” (which contains the name of the photo’s file…obviously!)
- call the “loadPhoto” function



Now it’s time to write loadPhoto function.
This function load the photo (with loadMovie) and show the preloader. Once the loading is finished, the preloader became invisible. It must also duplicate the empty “cont” for can create a mask that will show only a sector of the image (for view other sectors we’ll use the navigator).
As for 1st and 2nd frame, write this function outside from the remoting layer.



As you can read, the loadPhoto image loads the photo into “photo_view”, at the end calls the “Navigator” function.

Well…we have to write “Navigator” function now
What will this function do? First, it load the image also in the navigator (and resize it to the navigator size). Then, it set the onPress and onRelease functions for the navigator cursor.
In this function we also establish the rapports necessary for make the navigator works fine.

The code is



As you can see, we set the _width and _height of the navigator cursor in base of the navigator width and of the photo container width and height.
At those rapports we must join this code



That calculate the movements of the big photo basing on the position of the navigator cursor.

Now we navigator cursor is complete. You can see the result in video 10.6

Video 10.6

http://www.brolyweb.com/Tutorials/Photogallery/Video106.swf

Very well friends.
We’ve almost finished our photogallery. We must only insert the actions for the options and then we’ll have finished!!!
First of all, convert the various icons (inside the “options” movieclip) in buttons (istance names: view, download, backT,backA).
Then insert this code, always on the 3rd frame of the main timeline.



Ok friends. Now see video 10.7

video 10.7

http://www.brolyweb.com/Tutorials/Photogallery/Video107.swf

Yes…you seen right…we FINISHED THE GALLERY!!!!

I hope this long tutorial wasn’t so boring, and I hope also you liked and understood it without too many problems

See you next time, friends! Thank you for the attention!

Broly

This post has been edited by Broly: 31 January 2005 - 06:14 PM

[brainy_creature]

I am a newcomer can you teach me some basic great things with flash...
let me remind i am a complete newcomer.. you seem to be great at this