Construction of Website
1.Logo was created using Adobe Photoshop. A font was downloaded from
www.dafont.com called Angelic War. As can be seen a simple gradient overlay effect was
applied. Once logo was created was then added to a plain black canvas to create an Enter
Page for the website.
2.The same font was then used to create Sub-Headings for each page. This time another
effect was applied which was Drop Shadow. These images were saved in a PNG image
format. This allowed us to save the image with a transparent background but keep the
3.We decided to create the website in Flash to give a more interactive feel to the site. As
can be seen a new document was created with the canvas size being 800 pixels wide and
1100 pixels in height, with a Frame Rate of 20 frames per second to allow for smoother
4.Once the pre- loader was
installed all the relevant files that were required for the website were imported into the
5.Once the files were
imported the buttons for
the navigation bar were
created. This was done
but creating a Button
Symbol and then placing the
Text in the centre of the
symbol canvas. From there
the colour of the text was
altered for the different
states of the button.
6.Once the buttons were created different objects were animated using Motion Tweens.
The objects were animated for when the site initially loads after the pre-loader. As can be
seen the Timeline shows the different objects on different layers.
7.Once the initial objects
were laid out on the page the
next step was to create
each area of
information, such as the text
area, the jukebox, the events
information, etc. This was
done by creating Movie Clip
Symbols and then animating
within those symbols.
As can be seen the text area
for the Home Page is being
created. The Timeline
shows the different objects and when their state changes by looking at where the
Keyframes are positioned.
8.With the Jukebox area, the music tracks had to be imported in. These music tracks first
had to be converted to a lower quality to decrease the file size so it would allow the overall
website file size to be lower and as a result would load quicker. The play, pause, next and
previous buttons were created using the tools in Flash and then converting them into
9.This step shows how the gallery was created. Once again it was created as a Movie Clip
Symbol and the images were cropped and re-sized in photoshop. Then using Motion
Tweens and Keyframes, the Alpaha Levels were altered along with the size of the image
to create a sense of a fade in, fade out gallery.
10.Once all the information
areas had been placed on the Timeline as separate layers and on the canvas, the site was
then previewed, as can be seen.
screenshot shows the
exported version of
the site. The site was
then imported into a
blank document in Adobe
Dreamweaver and saved
as the home page. The
Enter page was linked to
the Home page but saved
as the Index page.