STUDENT NAME Wai Chai Tam

Draft:18 May 2017

DUE DATE
Final: 8 June 2017
MT GRAVATT HIGH SCHOOL
INFORMATION TECHNOLOGY SYSTEMS
ASSESSMENT
Item 5
YEAR: 12 ITEM
SEMESTER: 1
Product
Summative
PLEASE ENSURE THAT: 6 weeks
Supervised and
Ensure you include your name on all unsupervised
documents; conditions
You attain the word count; ASSESSMENT
Individual
You show evidence of your work in progress CONDITIONS
each lesson; and 1000-1500 words
The assignment is submitted to the teacher (journal/log, tables,
both in hard copy and on The Learning Place. appendices and visual
representations not
included in word
count)
OVERALL STANDARD

KNOWLEDGE &
COMMUNICATION

DESIGN &
DEVELOPMENT

IMPLEMENTATION
& EVALUATION
Contents
Topic ................................................................................................................................................................... 3
Benefits and Uses ................................................................................................................................................ 3
Purpose of Report ............................................................................................................................................... 3
Description .......................................................................................................................................................... 4
Simplifications, Assumptions and Boundaries ................................................................................................... 4
CARP .................................................................................................................................................................. 5
Functionality ....................................................................................................................................................... 5
Summary ............................................................................................................................................................. 7
Bibliography ........................................................................................................................................................... 7
Gantt Chart .......................................................................................................................................................... 8
Site Map .............................................................................................................................................................. 9
Target Audience .................................................................................................................................................. 9
Site Map .................................................................................................................................................................. 9
Sounds and Images ................................................................................................................................................. 9
Webpage Design Templates ................................................................................................................................. 13
DESIGN - DEFINE THE PROBLEM

Introduction
Topic

Interactive websites are everywhere, without them, the Internet would become a very boring and
unexciting place to browse. Those websites would not be interactive without animated menus, with
animations such as a scrolling menu, sounds, or flash buttons. A flash animation is typically created
using a program like Adobe Flash (as of current, now called Adobe Animate CC (Adobe, 2015)) can be
used on platforms such as a webpage, film, or game. Interactive websites are websites that allows one
to use its functions, for example, clicking on a link, using a search bar, or even creating an account.
The functionality of a website is important for it to continue to improve and increase its user-
friendliness. This report will analyse a website and focus on the design aspect of functionality.

Benefits and Uses

Interactive websites can be very beneficial to many industries and is a major part of the daily life of an
average person. Some of the more popular interactive websites include blogs, forums, and social
websites as they appeal to a wide range of users and benefits them (Nayanathara, 2015). These social
websites allow users to change the way the website or pages look like through a settings menu,
interact with online friends and perform a host of tasks such as applying transactions or submitting
files (pictures, text etc.) make a website user-friendly (Nayanathara, 2015).

Many industries rely on interactive websites to promote their products or services. Industries, for
example, that are categorized under retail shops including: Target, Big W, or Myer are
dependent on their websites to attract potential customers and employees. Customers can access
their information (pricing, discounts, sales or products) at any time and shop online, raising the
popularity and profits of retail stores.

The design industry would be at great advantage as well. From a photography studio perspective, their
best works can be featured at the home page and attract clients or potential business deals with other
companies such as advertisement organisations for commercial photography. The functionality and
design of the website would also be emphasised to stay true to the industry title. Through functions
and promoting purposes interactive websites are of great benefit to many industries to display their
services, products or creations.

Purpose of Report

The client, Keith Mann, is the owner of an organisation called Kirby Studio who focuses on
photography. They wish to create a digital menu to showcase their service and product information.
The website will display their finest works in photography and promote their services to potential
customers and other businesses. The website will be made using Adobe Flash with animations such as
scrolling menus, animated buttons and sounds to accommodate the websites functionality.
Main Body
Description

The client is the owner of a photography organisation called Kirby Studio. They have requested for a
digital menu to be created which portrays their organisations photography skills and services. They
specialise in wedding, commercial, landscape or nature, abstract and artistic photography as well as
digital art to cater for their customers' needs. The clients services include studio renting for
photoshoots or other activities, renting their cameras for events, providing their professional
photographers for events and special occasions and lending their studio for printing. The client has
submitted sixty-eight pictures taken by their photographers to ensure the customers will be able to
comprehend the organisations variety and have a higher chance of choosing the clients organisation
to cater to their needs. The client wishes for the website to include all their services and works with
specific pages. They have outlined that the website must include their logo, five webpages displaying
their information (Appendix - Site Map), audio such as button clicks and action script. The client
submitted the profile sheets of their photographers (in total, six). This would give the clients
customers a choice that can be tailored to their own needs and requests. Including a logo in the digital
menu will make the organisation recognisable and distinguishable from other organisations. The
webpages will help the clients customers navigate comfortably and easily around the website. The
audio will enhance a users experience on the website and make the organisation unique. Linking
action script into the website will provide better functionality and user-friendliness as well as
incorporating design with the website. This project will fulfil the requests of the owner of Kirby Studio
effectively to ensure the business success in the photography industry online.

Simplifications, Assumptions and Boundaries

Simplifications, assumptions and boundaries are important to address in case of a misunderstanding

and as the client did not outline everything in detail, assumptions and simplifications are bound to be
made. Kirby Studio has not disclosed the image of a logo to be used in the project. Consequently, it is
assumed that the client has no existing logo and one needs to be made for the organisation. This
situation can provide opportunities for the client to adopt a new logo which may improve their
business. Because the client has stated that the website would be promoting their services and work,
the design and functionality is assumed to be very important. Six weeks were given for this project to
be completed and if more time was provided, the final product would continue to improve. However,
the website will be simplified to overcome the boundary. Out of the sixty-eight pictures submitted,
only half of them (thirty-four) were selected to use for the gallery page which would showcase their
best work and in turn, actively promote the organisation as well as increasing its reputation online
as those pictures were judged and then chosen. The profile sheets that the client has submitted,
which contains the photographers details, will be simplified to only contain the most important
information such as age, experience, name, and specialty. This assures that the customers would have
more variety in their choices for photographers. With these simplifications, assumptions and
boundaries, the client would receive a better idea of their websites makeup.
Development
Analysis
CARP
CARP is an essential tool for graphic designers as it provides something similar to a
set of rules to follow. CARP stands for contrast, alignment, repetition and
proximity. As can be seen in the appendix (Webpage Design Templates), the
colour scheme of the website will be white, black, pastel blue, pastel pink and a light
grey (right rectangles). Text colours will be either light grey, pink or black, depending on the back
and fore ground colours. This will create a satisfying contrast which will be soft on the eyes and
emulate the cartoon character Kirby (left picture). The home page contains the pink icons linking to
the contact, service and FAQ page. These icons are quite large to attract attention and create a
contrast against the light blue background. The logo (right picture) is also quite distinct to the
webpages as it contains a darker shade of blue and Kirby appearing squashed
against the screen which symbolises the lens of a camera. The play and stop
buttons in the corner contrasts against the blue background so that the clients
customers are able to locate it easily and they are not in the main container of the
web pages to cause a distraction.

The alignment of a graphic design is important as it gives the design a clean and neat appearance. It
also shows the designers organisation skills. The logo in the home page is centre-aligned. During the
beginning phases of the website, the logo (right: second picture) was a different image and placed at
the top left corner. It created a large space to the right of the webpage. As a result, it was decided that
another logo was to be made to fulfil the large space at the top of the webpage. Due to the contents of
the webpages filling most of the main container space, they were not aligned, but rather spaced
evenly. However, they are, to an extent, justified (Appendix Webpages). Repetition in the webpages
provide the clients customers with a feeling of familiarity. The buttons underneath the logo stay in the
same positions to minimalize confusion and acquire the neat appearance. The rectangular containers
of the image galleries (Appendix Webpages Gallery) depicting different varieties of photography
also maintain the sensation of familiarity. These repetitions also make the webpages user-friendly as
the user would not take unnecessary effort to locate buttons or galleries. The projects purpose is to
create webpages for the client who is the owner of a photography organisation. These webpages must
contain specific information which contributes to the proximity of the website. As requested, the
gallery featuring the organisations best work is included in the home page and any other relevant
information including icon links to other pages (services, contact and FAQ pages). The gallery page
contains all galleries and no other irrelevant information. The services pages only display the different
services that can be provided and the FAQ page includes frequently asked questions that are
answered. The graphic design element CARP has been effectively used to create the clients website
and has met their needs by abiding to it.

Functionality
Functionality is a prominent feature in web design to ensure the successful experience of a user.
Buttons were used mostly to link to other scenes in Adobe Flash for convenience. Below is the process
of the home button in the up stage then progressing to the over stage, continuing to the down
stage. This process will indicate that the button is animated and linked to a page. During the down
stage, an audio sample has been added to meet the needs of the client.

The image galleries used in the gallery page were created separately to decrease confusion. The
categorised pictures were then imported, distributed into different layers and converted into graphic
symbols. The first and last frames has a colour style of Alpha 0% to assist in the transition between the
images (for more information, please refer to the Flash file: home menu.fla). Classic tweens were then
placed for smooth transitions (refer to logbook: 02/06/2017 and 05/06/2017). These image galleries
portray the best collections of photography effectively as the clients customers would not have use
their hands to scroll through the galleries; instead they can watch the images fade into each other.

As per the request of the client, actionscript has been included in the website. The buttons underneath
the logo are linked to different scenes within the main file. These buttons were coded with the
following:

stop();
import flash.events.MouseEvent;

instance_name.addEventListener(MouseEvent.CLICK, goinstance_name);
function goinstance_name (e:MouseEvent):void
{ Object(root).gotoAndPlay(1,"scene_name");
}

The code begins with the stop code to prevent the flash file from looping through the different scenes
and progresses to the flash events which are linked to mouse events. The instance_name (the button)
has an event added to it which is the mouse event, click. When the button is clicked, it goes to and
plays the named scene. These buttons provide convenience to the client and their customers when
navigating through the website and delivers a smooth transition between pages.

Audio has been placed in the website in various forms: background music and button sounds. When
editing the buttons, the audio sample was placed in the down frame so that it plays when the button is
clicked. This function fulfils the clients request of audio being incorporated into the website. In the
corner of all the webpages, there is a play and pause button. When the play button is pressed, it plays
background music to accompany the website. When the pause button is pressed, the music stops. This
particular function allows the clients customers to alter the website functions to their own taste and
meets the need of the client.
Conclusion
Summary
The client, Keith Mann, is the owner of a photography organisation that is offering its services online.
Due to concerns of the business failing, the client has asked for a website to be made in order to
increase its customers and profit. This has been achieved effectively as the website fulfils all of the
clients requests including: five webpages, their products, sound, and Actionscript. These elements of
the website contain information relevant to the clients organisation such as galleries, contact
information, frequently asked questions and services. A major limitation would be the project needing
to be made in Adobe Flash. If there was a combination of software, such as Adobe Dreamweaver,
used for the project the outcome would be much better.

Bibliography
Adobe. (2015, June 21). Adobe Animate CC. Retrieved from Adobe:
http://www.adobe.com/au/products/animate/features.html
Nayanathara. (2015, May 11). What is an interactive website and how does it benefit the user? | Zyxware
Technology. Retrieved from Zyxware Technology: http://www.zyxware.com/articles/4860/what-is-an-
interactive-website-and-how-does-it-benefit-the-user
Appendix
Gantt Chart

May- May- May- May- May- May- May- May- May- May- May- May- May- Jun- Jun- Jun-
Activity Comments May-18 Jun-08
03 05 08 10 12 15 17 19 22 24 26 29 31 02 05 07

Creating a schedule for the [DRAFT [FINAL

Gantt Chart
assignment DUE] DUE]

Design Planning for the assignment [DRAFT [FINAL

Template through the design template DUE] DUE]

Writing any observations in class

[DRAFT [FINAL
Logbook or outside school on the
DUE] DUE]
assignment

Action Creating the action scripts for the [DRAFT [FINAL

scripts assignment DUE] DUE]

[DRAFT [FINAL
Writing Start introduction with research
DUE] DUE]

[DRAFT [FINAL
Writing Progressing to Benefits and Use.
DUE] DUE]

[DRAFT [FINAL
Writing Progressing to Purpose of Report
DUE] DUE]

[DRAFT [FINAL
Writing Progressing to Description
DUE] DUE]

Progressing to Simplifications, [DRAFT [FINAL

Writing
Assumptions and Boundaries DUE] DUE]

Progressing to Analysis and [DRAFT [FINAL

Writing
Conclusion DUE] DUE]

[DRAFT [FINAL
Writing Progressing to Evaluation
DUE] DUE]
Site Map
Interactive Menu Design Template
Target Audience

The flash menu will be designed for a local photography organisation called Kirby Studio. The client is the
manager of the organisation who has requested for a flash menu to be created. It should serve to promote
their services and display the best works of the organisation. The photography company was chosen because
it would be a better choice for the website design and layout. Photography is also becoming increasingly
popular and in high demand in the modern world. With demand so high, there would be many customers
looking for various photography companies to cater for their needs.

Site Map

Home

Gallery Contact

Photographer's
Services profiles

FAQ

Sounds and Images

SOUNDS: button clicks, swishing sound, camera clicks

Buttons
These buttons are pictures with transparent backgrounds to adjust to the webpages.
PHOTOS
Wedding

Nature/Landscape
Commercial
Abstract

Artistic

Digital Art
Webpage Design Templates
- The prominent background colour will be white and the foreground colour will be two colours: black
and pastel blue
-

HOME

LOGO

GALLERY CONTACT US SERVICES FAQ

SLIDESHOW OF GALLERY
with pictures shown above

CONTACT SERVICES FAQ LINK

LINK LINK

GALLERY

LOGO

GALLER CONTACT US SERVICES FAQ

Y

WEDDING NATURE/LANDS ABSTRACT

PHOTOS CAPE PHOTO PHOTOS

ARTISTIC DIGITAL
COMMERICIAL
PHOTOS ART
PHOTOS
PHOTOS
 CONTACT

LOGO

GALLER CONTACT US SERVICES FAQ

Y
PHONE NUMBERS/FAX
Profile 1 Profile 3
PHOTOGRAPHER NUMBERS Profile 2 Profile 4

ADDRESS
POST ADDRESS
PROFILES OF PHOTOGRAPHERS

MAP OF LOCATION
DIFFERENT STUDIOS IN BRISBANE

SERVICES

LOGO

GALLERY CONTACT US SERVICES FAQ

PHOTOGRAPHY PRINTING
- EMAIL - EMAIL
ADDRESS ADDRESS

HIRE STUDIO RENT

- EMAIL CAMERAS
ADDRESS - EMAIL
ADDRESS
 FAQ

LOGO

GALLER CONTACT SERVICE FAQ

Y US S

QUESTIONS ON
SERVICES,

FAQ GALLERY (WHERE

THEY WERE
TAKEN),
PROBLEMS WITH
CONTACT
Logbook
Activity Date Comments Images

Gantt Chart I have finished the skeleton of the

and Gantt Chart and started the design
Tutorial 10/05/2017 template as well as a tutorial on the
and Design hover menu button. There were no
Template problems today.
 Design template has been completed
fully. The picrures that will be used on
the website has been added into the
Planning 12/05/2017 document and the uestions have all
been answered. Apart from Word
being unresponsive, there had been no
problems thus far.

I have started to design the buttons for

the website. I have completed the logo
which will function as a button as well
Design 15/05/2017 with the link to the home page.
Although I cannot view the picture on
my laptop, however, I can view it in
other programs such as Word.

I've finished making the buttons for

the menu. They are very simple as the
focus is on the convenience of the
Design 16/05/2017 website and to provide a simplistic Menu Buttons
look for emphasise the gallery and
(transparent
Kirby Studio's services. No problems
backgrounds
occurred today
The introduction (Topic, Benefits and
Uses and Purpose of Report) were
Writing 17/05/2017
completed. Not problems were
observed.
DRAFT DUE 18/05/2017 DRAFT DUE DRAFT DUE
 The start of
the Home
Page
I have started the home page in Flash.
After reviewing the design template, I
decided that the background of the
Design 19/05/2017
website should not be white as it may
appear too plain for the client. The
blue is also not harsh on the eyes.

I started to make the button for the

website and the photo gallery to be Menu buttons
included in the home page. I will follow in neutral
a tutorial online made by Riyadh Al position
Balushi from Republic of Code. After
reviewing the buttons, I have decided
to change the over button colours to a
light, pearl pink to contrast it against
Design 22/05/2017 Menu buttons in
the background and I also changed the
over position
down position buttons to black instead
of mint.

Menu buttons in
down position
 Thumbnail of picture
(actual size)
Below is the original
picture

I have begun the tutorial to create a

scrolling photo gallery. The first step in
the tutorial says that a thumbnail must
Design 24/05/2017
be made for all pictures to be included
in the gallery. The thumbnails are to be
250x250 in pixels.
 Icons created

I have created the other pages for the

Gallery, Services, Contact and FAQ
menus. I have made the icons or
contact, service, FAQ, and social
websites such as Facebook, Instagram,
Design 25/05/2017 Twitter, Snapchat and PinInterest.
These icons are pink to allude to the Home menu
character Kirby who is also pink. I have design so far
also added images to the home menu
that link to the services, contact and
FAQ pages.

I have completed the image gallery
tutorial. However, the images used for
the gallery keep flashing when tested.
It may be a fault in the software or
Design 29/05/07
code. But the forward and backward
buttons work.
For the icons on the home page I have
created a hover version.
First pic is a screenshot of the
layers used for the image
gallery.
Second pic is the timeline of
the image gallery.
Third pic is the overall design
for the gallery.
Fourth pic is a screenshot of
the beginning code.
The last picture is the
completed code for the image
gallery.
The last pictures are a progress
of the icons in the home page
through the neutral stage to the
down stage.
 I found pictures online to be profiles
for the workers in Studio Kirby. I have
cropped their pictures to the size of
170pix X 258pix. These are the
Since the tutorial I used to make my pictures I will be
Design 31/05/2017 image gallery did not work, I have using for the
found a better one to suffice for it. The website.
pictures would fade in and out and on
the website the images shown would
be the best features of the
organisations work.

The image gallery has been completed.

And then I have made a worker profile The first picture is
including their name, age, experience showing the neutral
Design 02/06/2017 and specialty. This would provide state of the worker
information for the clients customers profile which was
and they would be able to choose their converted into a
preferred photographer. button.
The second picture
shows the state
where the button
hovers over the
worker profile.
 These pictures show
the transition
between two
pictures in the
gallery.

From top to bottom, the

I recorded a button click to be used for
pictures show the process in
the Flash website. I edited the audio
which the audio track is edited
file to isolate the final product. The
Design 04/06/2017 and cut to isolate the final
program I used to cut the audio is
product.
Adobe Audition as I am most familiar
with it.
 Left picture: The FAQ page
Pictures below show the
timeline of the
nature/landscape and
wedding categories of the
website gallery.
The very last picture is a
The FAQ section of the website has screenshot of the FAQ
been completed. I copied a section of button timeline with the
FAQ from the website called Sydney audio file added.
Prop Specialists. The audio file has
been added to the buttons
Design 05/06/2017
successfully. I have nearly completed
the image gallery for all of the
different categories for the website;
only the artistic and digital art
category remain.
 The image galleries have been added
through much difficulty such as errors The galleries appear on
in importing or exporting the files; not the scene as a dot
being able to align them; resizing them indicating the middle
for the webpage and Flash having of the gallery. I also
problems reading the files. These labelled which gallery
issues have been resolved by is which in
importing the galleries into the convenience of the
webpage then going into individual file clients customers.
to resize the symbol used in the
gallery. I have also changed the
Facebook icon button sound to the
Messenger notification sound to
appeal to the clients customers.
I have added the sound for the phone
The three images show
icon which is a phone ringing. It has
the process in which the
been edited to cut out the repeated
phone file went through
ringing the original file had. The
Design 07/06/2017 where the repeated parts
service page has been completed. The
pictures which show the different
are highlighted and then
services that the studio has were deleted.
converted into buttons. When hovered
over the picture will become grey with
a text saying, Click Me! on it and
when it is clicked an email regarding
the service will show. The different
services, hiring photographers,
printing photographs, renting the
studio and renting cameras, has been
added with the same method.
Throughout the whole project, I have
always been displeased with the logo
so I created another one with Kirby
behind the words Kirby Studio. This
logo is centred at the top of the page
to look clean and modern.
 The three
following pictures
show the process
where a mouse
hovers over the
button, showing
the picture of the
specific service
and when clicked
will show text.

This is the
new logo
for the
website.

FINAL DUE 8/06/2017 FINAL DUE FINAL DUE

Screenshots of Webpages In Order of Template
Home
Gallery
Services
Contact US
FAQ
Action Script
stop();
import flash.events.MouseEvent;

gallery.addEventListener(MouseEvent.CLICK, gogallery);
function gogallery (e:MouseEvent):void
{ Object(root).gotoAndPlay(1,"scene2");
}

service.addEventListener(MouseEvent.CLICK, goservice);
function goservice (e:MouseEvent):void
{
Object(root).gotoAndPlay(1,"scene3");
}

contact.addEventListener(MouseEvent.CLICK, gocontact);
function gocontact (e:MouseEvent):void
{
Object(root).gotoAndPlay(1,"scene4");
}

faq.addEventListener(MouseEvent.CLICK, gofaq);
function gofaq (e:MouseEvent):void
{
Object(root).gotoAndPlay(1,"scene5");
}

contactus.addEventListener(MouseEvent.CLICK, gocontactus);
function gocontactus (e:MouseEvent):void
{
Object(root).gotoAndPlay(1,"scene4");
}

bell.addEventListener(MouseEvent.CLICK, gobell);
function gobell (e:MouseEvent):void
{
Object(root).gotoAndPlay(1,"scene3");
}

questions.addEventListener(MouseEvent.CLICK, goquestions);
function goquestions (e:MouseEvent):void
{
Object(root).gotoAndPlay(1,"scene5");
}
EVALUATE THE SOLUTION
CONTEXTS

The client, Keith Mann is the owner of an organisation called Kirby Studio. The organisation specialises in
photography and digital art. They have requested for a website to be made using Flash as they are concerned of
their failing business and hope that reaching out to an online platform will help them. This has placed pressure
on the designer as they are expected to cause the success of the clients business. As the client had submitted
many examples of their products, the file for the website is quite large and there were many instances where
Adobe Flash has become unresponsive due to the large file. At times, it may take the program a few minutes to
save the file. This can eventually impact on time and patience of the designer. Being a student, the designer can
only work from their laptop. Albeit portable, the device is slower than a desktop which would be very
convenient. The website was created using the older version of Adobe Flash 2015. Due to unknown reasons, the
program would glitch whenever Actionscript is added. Therefore, the trial version of Adobe Animate CC, the new
version of Flash, was downloaded and Actionscript could then be inserted. At times, the classroom environment
would become too distracting to work in and result in procrastination. Being an individual working on this
project did not allow distraction from other members from a group if it were a group project. There would be no
issues with communication because it was an individual project, however, it limited help from other students
doing the same project.

INPUTS

The software used for the project is Adobe Flash Professional. This software is very much appropriate for the
project. However, when making webpages, Adobe Dreamweaver would have been a better choice. Hardware
used for the project were two external UBSs; one for backup, and one main USB. The time allocated for the
project was six weeks, shorter than the usual project time. However, the beginning two weeks of the project
were used on tutorials and gathering pictures for the website. As the software was not familiar to the designer,
much time was spent searching for tutorials on specific functions. Eventually, the right tutorials were found and
the problems were overcome.

PROCESSES

The design template used for the project was followed very closely as it was planned in detail. The planning was
very useful as it gave the designer the overall picture of the website and how it would function. The only
changes the designer had made were the placement of the logo (from the top left to the centre), added text
beside the gallery in the home page and the services page was completely altered. It was first planned for just e-
mails to be placed there. However, the designer decided to use pictures as buttons and when clicked, it would
display the e-mail. This made the page more interesting and interactive. The developing phase was somewhat
efficient when the designer had sufficient knowledge to create some pages. As discussed, some tutorials had to
be searched to continue the website. All the webpages were made as separate files and this contributed to a
large problem. the designer searched for any tutorials that linked buttons to external swf files. Eventually, the
other webpages were exported then imported into the main webpage with different scenes.

PRODUCT

The features used in Adobe Flash include: symbol conversion, rectangle and text tool, transform and alignment
tool, publishing files, exporting and importing files, renaming scenes and Actionscript. The website has met the
initial aims effectively has the design template was followed very closely. The designer is very satisfied with the
final product as it fulfils the needs of the client. If this project can be done with a combination of software such
as Adobe Flash and Dreamweaver, it would have impacted greatly on the final product as it is easier to link and
edit pages with Adobe Dreamweaver.