The Making Of Gallery Subpage
1.0 Flowchart
For the 3rd assignment, my group will be doing about St Paul Hill, Malacaa and my part is
to do the gallery subpage.
2.0 GUI Design
This is my GUI design. I have divided into 3 main element in the subpage which is
flash that contain image gallery, video clip and random image with description on
the side.
3.0 Tools
Website page - Adobe Dremwever CS5.5
Image Gallery - Adobe Flash Professional CS5
4.0 Content
Image
First thing i do is collect all the picture about St Paul Hill (A Famosa), Malacca
from google image. These are all the collection of picture that i'm going to put in
the gallery subpage.
Video
There are 2 videos that i'm going to put in the page which i download from youtube.
St Paul Hill A famosa Malacca video - http://www.youtube.com/watch?v=As3f2difK6w
The Famous Portugese Man - http://www.youtube.com/watch?v=ejKofMMB08w
Image Gallery
I have created a flash of image gallery by using Adobe Flash Professional CS5. When you
click at the small image it will appears on large image at the top.
Action Script-stop()
btn1.addEventListener(MouseEvent.CLICK,play1);
function play1(event:MouseEvent):void{
gotoAndStop("1");
}
gotoAndStop("1");
}
btn2.addEventListener(MouseEvent.CLICK,play2);
function play2(event:MouseEvent):void{
gotoAndStop("2");
}
gotoAndStop("2");
}
btn4.addEventListener(MouseEvent.CLICK,play4);
function play4(event:MouseEvent):void{
gotoAndStop("4");
}
btn5.addEventListener(MouseEvent.CLICK,play5);
gotoAndStop("4");
}
btn5.addEventListener(MouseEvent.CLICK,play5);
function play5(event:MouseEvent):void{
gotoAndStop("5");
}
btn6.addEventListener(MouseEvent.CLICK,play6);
gotoAndStop("5");
}
btn6.addEventListener(MouseEvent.CLICK,play6);
function play6(event:MouseEvent):void{
gotoAndStop("6");
}
btn7.addEventListener(MouseEvent.CLICK,play7);
gotoAndStop("6");
}
btn7.addEventListener(MouseEvent.CLICK,play7);
function play7(event:MouseEvent):void{
gotoAndStop("7");
}
btn8.addEventListener(MouseEvent.CLICK,play8);
gotoAndStop("7");
}
btn8.addEventListener(MouseEvent.CLICK,play8);
function play8(event:MouseEvent):void{
gotoAndStop("8");
}
btn9.addEventListener(MouseEvent.CLICK,play9);
gotoAndStop("8");
}
btn9.addEventListener(MouseEvent.CLICK,play9);
function play9(event:MouseEvent):void{
gotoAndStop("9");
}
btn10.addEventListener(MouseEvent.CLICK,play10);
gotoAndStop("9");
}
btn10.addEventListener(MouseEvent.CLICK,play10);
function play10(event:MouseEvent):void{
gotoAndStop("10");
}
btn11.addEventListener(MouseEvent.CLICK,play11);
gotoAndStop("10");
}
btn11.addEventListener(MouseEvent.CLICK,play11);
function play11(event:MouseEvent):void{
gotoAndStop("11");
}
btn12.addEventListener(MouseEvent.CLICK,play12);
gotoAndStop("11");
}
btn12.addEventListener(MouseEvent.CLICK,play12);
function play12(event:MouseEvent):void{
gotoAndStop("12");
}
btn13.addEventListener(MouseEvent.CLICK,play13);
gotoAndStop("12");
}
btn13.addEventListener(MouseEvent.CLICK,play13);
function play13(event:MouseEvent):void{
gotoAndStop("13");
}
btn14.addEventListener(MouseEvent.CLICK,play14);
gotoAndStop("13");
}
btn14.addEventListener(MouseEvent.CLICK,play14);
function play14(event:MouseEvent):void{
gotoAndStop("14");
}
btn15.addEventListener(MouseEvent.CLICK,play15);
gotoAndStop("14");
}
btn15.addEventListener(MouseEvent.CLICK,play15);
function play15(event:MouseEvent):void{
gotoAndStop("15");
}
btn16.addEventListener(MouseEvent.CLICK,play16);
gotoAndStop("15");
}
btn16.addEventListener(MouseEvent.CLICK,play16);
function play16(event:MouseEvent):void{
gotoAndStop("16");
}
btn17.addEventListener(MouseEvent.CLICK,play17);
gotoAndStop("16");
}
btn17.addEventListener(MouseEvent.CLICK,play17);
function play17(event:MouseEvent):void{
gotoAndStop("18");
}
btn18.addEventListener(MouseEvent.CLICK,play18);
gotoAndStop("18");
}
btn18.addEventListener(MouseEvent.CLICK,play18);
function play18(event:MouseEvent):void{
gotoAndStop("18");
}
gotoAndStop("18");
}
Banner
I use paint tool to create a simple banner to put on top of the gallery subpage.
The size is by 1078 x 190 px and the background color is black.
5.0 Page In The Making
Step 1 - Choose the background color.. I decided to use plain color because since i
going to do gallery,the page will be crowded with images.
going to do gallery,the page will be crowded with images.
Step 2 - Insert the banner
Step 3 - Create the button and put in the tables consists of 1 row and 6 columns
Home <> History <> Accomodation <> Delicacies <> Activitites <> Gallery
Step 4 - Divide into 2 section.. I have insert 2 columns of table to divide into 2 sections
on images and videos
Step 5 - Insert the image gallery (flash)
Step 6 - Insert images into tables and put some description about the image
on the side. I have insert other tables which consists of 2 columns to divide the image
and the image description.
Step 7 - Insert the 2 videos into the right side of the table. The weight of this video 350
and the height is 270.
