Multimedia Assets Using Fireworks and Flash
Tutor Marked AssignmentDevelopment log
By: Sasathorn Pickering Student ID: spicke01
Development Log
BackgroundIn autumn and winter of year 2008, I have taken some photographs during my
holiday in France, Austria and Hungary. These two seasons are not easy to take nice pictures because of the difficulties getting the natural light and the skies are not always bright and blue. However they are still beautiful and interesting sceneries I have managed to capture in to my photographs. These are the reasons why I chose the autumn and winter 2008 as the theme of my photo gallery.
The TMA: Interactive web photo gallery can be viewed at the fallowing URL:
http://www.bbk.ac.uk/~spicke01/mmtma/index.html
The Multimedia assets home page can be viewed at the fallowing URL:
http://www.bbk.ac.uk/~spicke01/mm/index.html
My Flickr photo stream gallery can be viewed at the fallowing URL:
http://www.flickr.com/photos/c_sasathorn
Design Strategy
1. Site structure
Figure 1: Site structure
The Multimedia Assets Home Page is the main page which serves as a portal access to the fallowing web pages.
Flickr photo stream: My online personal photo gallery.
TMA (Tutor Marked Assignment) which is an Interactive Web Photo Gallery.
FMA (Final Marked Assignment) to be developed in the near future.
The selected hands-on exercises contain the link to Handson 4 and Handson 6.
Handson 6
Site Structure Diagram
Handson 4 TMA
Home
FMA
Site map which provide access to every web pages that can be access via the Multimedia Assets Home Page, included the Home page itself.
The TMA, FMA and Site map contain the link back to the Home page, whereas the Flickr and the hands-on pages do not contain a link back to the Home page. The users will have to click back button on the browser top toolbar in order to get back to the Multimedia Assets Home Page and Site map.
2. Multimedia Assets Home Page
Figure 2: Multimedia Assets Home Page storyboard
The black background is used to bring the main focus to the colour on the pictures. The screen show image of a colourful Christmas tree ornaments shop, taken at the Christmas market in Vienna, Austria. It is one of the symbols of happy moment during the freezing cold winter. I have added a swap behaviour to the screen when move the mouse over. The screen will swap to the picture of me with one of the famous sculptures from Jeff Koons Exhibition, which took place at the Versailles palace during my trip in France in October 2008. The sculpture has metallic colour which coordinate with the colour of the Christmas baubles on the first image, I also wear black coat same colour as the Home page background.
These two images were cropped to remove unwanted areas. In addition the picture of me had been sharpening using Adobe Fireworks CS3 program.
The link buttons were made in the circular shape to create continuity with round Christmas baubles in the first picture.
The orange colour on the Home button, indicate that this is the button for the current page (or the current page is the Home page). While the others are in mid blue, when
Welcome to Sasathorn Pickering’s Gallery
Home TMA FMA MM HO4 MM HO6 Site Map Flickr Contact Me
the mouse is moves on the buttons they will in to pale blue and dark grey letter, fallowing the colour scheme.
3. Interactive Web Photo Gallery
Figure 3: Interactive Web Photo Gallery storyboard
The theme of the photo gallery is the collection of pictures taken during my holiday in autumn and winter 2008. The purpose of the gallery is to have the main screen to display the larger version of the picture when the user move mouse over the
thumbnails and also the second screen on the bottom left will display the description of the photograph which display on the main screen at the same time.
I have created colour scheme for the website by using kuler.adobe.com
With the theme of autumn – winter photo gallery. I used shades of grey and blue which reflect the character of the two seasons. The viewer will also see those colours in most of the pictures in this gallery.
The border of thumbnails will glow in yellow colour when the mouse is move over them, showing that that thumbnail is in active.
The black background is used to make the colours on the photograph and the link buttons stand out. However some pictures in this collection are the night sceneries, in addition I have added the grey frame to the main screen.
Autumn – Winter 2008 Gallery
Opening Screen
Title: Date: Place:
The buttons were created to provide the link back to the Multimedia Assets Home Page and to access the FMA site. I have also made the buttons link to this
development log and my email address.
The 12 photographs used in the gallery were modified using Adobe Fireworks to control the size to 500 pixels in width and file size less than 125KB.
Experiences during development
After I have use Modify- image size to reduce pictures to 800x 600 pixels. However file size still bigger than 300 KB. I have found that I can use Optimize to reduce image quality to keep file size lower than 300 KB (see Fig 4).
Figure 4: The Optimize panel use to reduce image quality and files size.
The problem still needed to be fixed is the .html files that created from .png files, when open on the browser; it stays on the left side of the screen. I have to find out the way to make the webpage display in the middle of the screen.
