Interface Designs

These are almost completed Interface Design and Application layout after working on it for nearly two semesters.There bug errors here and there.. Arggh! Never mind those (can fix it later). I maintained classic and standard looking layouts as this is suitable for all aged users. I played around the images and abit of text. I choose warm colours as this colours are commonly used in an Indian Wedding and represents Indian culture. There are very limited animations in my applications as my main object to deliver the message completely. So, I decided not to mess up so many animations with the text. So here it goes!..

This are my main links pages.

This is the Main Menu. From here, the user can choose their desired links that they wish to learn from.

This is my video page.

This is how the interface of the description looks like.

Saree Page

Mehendi Page

Thali Page

Wedding Matter's Page

Bindi Page

Blooms Page

Brides and Grooms Wear's Page

These are Facts and Rituals pages. Description with Images.

These are my Gallery pages.

Process 2

Creating an informative application with interacts with the users and with interesting contents that suits users from different ages is really hard. I have minimized animations in my application which is only limited on the menus, and created an interesting platform for my users to read the information displayed. I have maintained a classic and standard application format that suitable for all kinda of users. Here is the print screens of some working process. 

Editing the wedding video took a ample of time for me as I am not so good in editing video. The original video had a different background sound and music, I had to edit and combine with the background music that I downloaded from internet as that is the real music of an Indian wedding. After editing the video, placing the video in the timeline of Flash software was another big headache as Flash only support up to 16000 frames in one file whereas the video has 18000 frames. 

Later on, I managed to solve the problem by placing the hot-spots in a different way. I have inserted the video and the button of the hot-spots in one key frame and the buttons moves by the coordinate placement in the Action Script. Which means, the buttons moves according to the seconds of the video and it will placed on the user click-able area according to the coordinate of the stage.

This is the working progress of the animation button on my main menu. The icons moves according to the coordinate of the mouse cursor as well. As the mouse cursor gets nearer to the center of the stage, the animation will slow down and stop.

Above are the process of creating the Fact & Rituals pages. All the text and images are converted into graphic and movie clip and placed in the library. Action Scripts plays its role to bring out the related text and images from library when the a button is clicked.

Lastly, this the working progress of Gallery page. All the photos are edited accordingly using Dreamweaver and then later on placed in Flash to combine with the main file.

Coding and Programming 3

Lastly, here is the script to load my gallery page.

//Example of loading multiple SimpleViewer swfs into another flash movie.

//init stage

//Stage.align = "TL";

//Stage.scaleMode = "noScale";

Stage.align = "";

Stage.scaleMode = "noScale";

//set width and height of SimpleViewer swf

_global.SVStageWidth = 640;

_global.SVStageHeight = 360;

var galleryId:Number;

var mLoader_mcl = new MovieClipLoader();

mLoader_mcl.addListener(this);

//Set button actions

mcGal1.onRelease = function(){

                loadGallery(1);  

}

mcGal2.onRelease = function(){

                loadGallery(2);

}

mcHide.onRelease = function(){

                mcLoader._visible = !mcLoader._visible;

}

function loadGallery(galId){

                galleryId = galId

                mLoader_mcl.loadClip("viewer.swf",mcLoader);

}

function onLoadInit(){

               

                //set gallery xml name

                _root.xmlDataPath = "gallery"+galleryId + ".xml";

                //set gallery specific options

                if (galleryId == 1){

                                com.airtightinteractive.apps.viewers.simpleViewer.Options.imageFrameColor = 0xffffff;

                }else{

                                com.airtightinteractive.apps.viewers.simpleViewer.Options.imageFrameColor = 0xff00ff;

                }

}

//load first gallery

loadGallery(1);

Coding and Programming 2

Finally! Coding for Hot spots for my video link! I managed to overcome my problem of placing the hot-spots in the video with the help of my tutor. 

stop();

var secs:Number;

flvMovie.playheadUpdate = function() {

//trace(flvMovie.playheadTime);

                secs = Math.round(flvMovie.playheadTime);

                txtSeconds.text = secs;

                displayhotspot();

};

function displayhotspot() {

                               

                // hotspot 1

                if (secs >= 7 && secs <= 20) {

                                hpbutton._x = 276;

                                hpbutton._y = 175;

                                hpbutton._visible = true;

                                hptext._visible = true;

                                hptext.text = "Wedding Invitation";

                                hptext2._visible = true;

                                _root.txtName = "txtHP01";

                }

               

                // hotspot 2/3

                else if (secs >= 32 && secs <= 36) {

                                hpbutton._x = 308;

                                hpbutton._y = 147;

                                hpbutton._visible = true;

                                hpbutton2._x = 230;

                                hpbutton2._y = 200;

                                hpbutton2._visible = true;

                               

                                hptext._visible = true;

                                hptext.text = "Bridesmaid / Coconut carried by the bride";

                                hptext2._visible = true;

                                _root.txtName = "txtHP02";

                                _root.txtName2 = "txtHP03";

                               

                }

               

                // hotspot 4

                else if (secs >= 38 && secs <= 41) {

                                hpbutton._x = 275;

                                hpbutton._y = 200;

                                hpbutton._visible = true;

                                hptext._visible = true;

                                hptext.text = "The Stage / Manavarai";

                                hptext2._visible = true;

                                _root.txtName = "txtHP04";

                }

                // hotspot 06

                else if (secs >= 52 && secs <= 64) {

                                hpbutton._x = 275;

                                hpbutton._y = 200;

                                hpbutton._visible = true;

                                hptext._visible = true;

                                hptext.text = "First Appearance of the Groom";

                                hptext2._visible = true;

                                _root.txtName = "txtHP06";

                }

                // hotspot 07

                else if (secs >= 87 && secs <= 92) {

                                hpbutton._x = 275;

                                hpbutton._y = 200;

                                hpbutton._visible = true;

                                hptext._visible = true;

                                hptext.text = "Religious Rituals for the Groom";

                                hptext2._visible = true;

                                _root.txtName = "txtHP07";

                }

                // hotspot 08

                else if (secs >= 95 && secs <= 97) {

                                hpbutton._x = 360;

                                hpbutton._y = 100;

                                hpbutton._visible = true;

                                hptext._visible = true;

                                hptext.text = "Religious Rituals for the Groom";

                                hptext2._visible = true;

                                _root.txtName = "txtHP08";

                               

                }

                // hotspot 09

                else if (secs >= 101 && secs <= 104) {

                                hpbutton._x = 275;

                                hpbutton._y = 200;

                                hpbutton._visible = true;

                                hptext._visible = true;

                                hptext.text = "Religious Rituals for the Groom";

                                hptext2._visible = true;

                                _root.txtName = "txtHP09";

                }

                // hotspot 10

                else if (secs >= 112 && secs <= 116) {

                                hpbutton._x = 275;

                                hpbutton._y = 200;

                                hpbutton._visible = true;

                                hptext._visible = true;

                                hptext.text = "Religious Rituals for the Groom";

                                hptext2._visible = true;

                                _root.txtName = "txtHP10";

                }

                // hotspot 11

                else if (secs >= 118 && secs <= 138) {

                                hpbutton._x = 290;

                                hpbutton._y = 170;

                                hpbutton._visible = true;

                                hptext._visible = true;

                                hptext.text = "Religious Rituals for the Groom";

                                hptext2._visible = true;

                                _root.txtName = "txtHP11";

                }

                // hotspot 12

                else if (secs >= 142 && secs <= 145) {

                                hpbutton._x = 300;

                                hpbutton._y = 200;

                                hpbutton._visible = true;

                                hptext._visible = true;

                                hptext.text = "Wedding Attire";

                                hptext2._visible = true;

                                _root.txtName = "txtHP12";

                }

                // hotspot 13

                else if (secs >= 146 && secs <= 159) {

                                hpbutton._x = 275;

                                hpbutton._y = 200;

                                hpbutton._visible = true;

                                hptext._visible = true;

                                hptext.text = "Bride's First Entrance and the Rituals";

                                hptext2._visible = true;

                                _root.txtName = "txtHP13";

                }

                // hotspot 14

                else if (secs >= 165 && secs <= 169) {

                                hpbutton._x = 275;

                                hpbutton._y = 200;

                                hpbutton._visible = true;

                                hptext._visible = true;

                                hptext.text = "Bride's First Entrance and the Rituals";

                                hptext2._visible = true;

                                _root.txtName = "txtHP14";

                }

                // hotspot 15 - N/A

               

                // hotspot 16

                else if (secs >= 181 && secs <= 195) {

                                hpbutton._x = 275;

                                hpbutton._y = 200;

                                hpbutton._visible = true;

                                hptext._visible = true;

                                hptext.text = "Bride's First Entrance and the Rituals";

                                hptext2._visible = true;

                                _root.txtName = "txtHP15";

                               

                }

                // hotspot 17

                else if (secs >= 219 && secs <= 222) {

                                hpbutton._x = 275;

                                hpbutton._y = 200;

                                hpbutton._visible = true;

                                hptext._visible = true;

                                hptext.text = "Bride's First Entrance and the Rituals";

                                hptext2._visible = true;

                                _root.txtName = "txtHP17";

                }

                // hotspot 18

                else if (secs >= 227 && secs <= 232) {

                                hpbutton._x = 350;

                                hpbutton._y = 200;

                                hpbutton._visible = true;

                                hptext._visible = true;

                                hptext.text = "Bride’s First Entrance and the Rituals";

                                hptext2._visible = true;

                                _root.txtName = "txtHP18";

                }

                // hotspot 19

                else if (secs >= 242 && secs <= 249) {

                                hpbutton._x = 275;

                                hpbutton._y = 180;

                                hpbutton._visible = true;

                                hptext._visible = true;

                                hptext.text = "Groom Dressed in Wedding Vesti and Jippa";

                                hptext2._visible = true;

                                _root.txtName = "txtHP19";

                }

               

                // hotspot 20

                else if (secs >= 259 && secs <= 262) {

                                hpbutton._x = 250;

                                hpbutton._y = 200;

                                hpbutton._visible = true;

                                hptext._visible = true;

                                hptext.text = "Pradhana Homam";

                                hptext2._visible = true;

                                _root.txtName = "txtHP20";

                }

                // hotspot 21

                else if (secs >= 262 && secs <= 265) {

                                hpbutton._x = 320;

                                hpbutton._y = 150;

                                hpbutton._visible = true;

                                hptext._visible = true;

                                hptext.text = "The Bridegroom";

                                hptext2._visible = true;

                                _root.txtName = "txtHP21";

                }

                // hotspot 22/23

                else if (secs >= 266 && secs <= 272) {

                                hpbutton._x = 275;

                                hpbutton._y = 200;

                                hpbutton._visible = true;

                               

                                hpbutton2._x = 270;

                                hpbutton2._y = 70;

                                hpbutton2._visible = true;

                               

                                hptext._visible = true;

                                hptext.text = "Flower Girls / Bride in Her Best Wear";

                                hptext2._visible = true;

                                _root.txtName = "txtHP22";

                                _root.txtName2 = "txtHP23";

                }

                // hotspot 24

                else if (secs >= 290 && secs <= 302) {

                                hpbutton._x = 275;

                                hpbutton._y = 200;

                                hpbutton._visible = true;

                                hptext._visible = true;

                                hptext.text = "The In Laws' Ritual";

                                hptext2._visible = true;

                                _root.txtName = "txtHP24";

                               

                }

                // hotspot 25

                else if (secs >= 314 && secs <= 318) {

                                hpbutton._x = 130;

                                hpbutton._y = 200;

                                hpbutton._visible = true;

                                hptext._visible = true;

                                hptext.text = "Reading Of Lagna Pathirigai";

                                hptext2._visible = true;

                                _root.txtName = "txtHP25";

                               

                }

                // hotspot 26

                else if (secs >= 326 && secs <= 344) {

                                hpbutton._x = 275;

                                hpbutton._y = 200;

                                hpbutton._visible = true;

                                hptext._visible = true;

                                hptext.text = "Matha Pitha Pooja";

                                hptext2._visible = true;

                                _root.txtName = "txtHP26";

                               

                }

                // hotspot 27/28

                else if (secs >= 346 && secs <= 360) {

                                hpbutton._x = 275;

                                hpbutton._y = 250;

                                hpbutton._visible = true;

                                hpbutton2._x = 310;

                                hpbutton2._y = 170;

                                hpbutton2._visible = true;

                                hptext._visible = true;

                                hptext.text = "Tying the Sacred Thali";

                                hptext2._visible = true;

                                _root.txtName = "txtHP27";

                                _root.txtName2 = "txtHP28";

                               

                }

               

                // hotspot 29

                else if (secs >= 390 && secs <= 405) {

                                hpbutton._x = 240;

                                hpbutton._y = 120;

                                hpbutton._visible = true;

                                hptext._visible = true;

                                hptext.text = "Tying the Sacred Thaali";

                                hptext2._visible = true;

                                _root.txtName = "txtHP29";

                }

               

                // hotspot 30

                else if (secs >= 406 && secs <= 414) {

                                hpbutton._x = 275;

                                hpbutton._y = 200;

                                hpbutton._visible = true;

                                hptext._visible = true;

                                hptext.text = "Exchange Garlands";

                                hptext2._visible = true;

                                _root.txtName = "txtHP30";

                }

               

                // hotspot 31

                else if (secs >= 421 && secs <= 440) {

                                hpbutton._x = 300;

                                hpbutton._y = 200;

                                hpbutton._visible = true;

                                hptext._visible = true;

                                hptext.text = "The Methi";

                                hptext2._visible = true;

                                _root.txtName = "txtHP31";

                }

               

                // hotspot 32

                else if (secs >= 443 && secs <= 457) {

                                hpbutton._x = 275;

                                hpbutton._y = 200;

                                hpbutton._visible = true;

                                hptext._visible = true;

                                hptext.text = "Circumbulating the Agni (fire)";

                                hptext2._visible = true;

                                _root.txtName = "txtHP32";

                }

                // hotspot 33

                else if (secs >= 463 && secs <= 469) {

                                hpbutton._x = 275;

                                hpbutton._y = 200;

                                hpbutton._visible = true;

                                hptext._visible = true;

                                hptext.text = "Fishing the Ring";

                                hptext2._visible = true;

                                _root.txtName = "txtHP33";

                }

               

                // hotspot 34

                else if (secs >= 494 && secs <= 500) {

                                hpbutton._x = 275;

                                hpbutton._y = 200;

                                hpbutton._visible = true;

                                hptext._visible = true;

                                hptext.text = "Blessings";

                                hptext2._visible = true;

                                _root.txtName = "txtHP34";

                }

               

                else {

                                hpbutton._visible = false;

                                hpbutton2._visible = false;

                                hptext._visible = false;

                                hptext2._visible = false;

                }

               

}