digital zen garden

24
Digital Zen Garden Leila Ling ITGM 709

Upload: leila-ling

Post on 25-Mar-2016

215 views

Category:

Documents


0 download

DESCRIPTION

Final project for ITGM 709.

TRANSCRIPT

Page 1: Digital Zen Garden

Digital Zen Garden

Leila LingITGM 709

Page 2: Digital Zen Garden

My project is a digital Zen garden which will be made using Adobe Photoshop and Flash. The target audience will be a variety of ages. Those who would play are most likely stressed or are looking for something to do and relax, as many find “Zen” type games calming.

The home screen will present two options: Start and About Zen. Start will initiate the game, while About Zen will provide some information regarding Zen gardens. After pressing Start, a short instruction screen will show before the user can begin designing their garden. Currently the dimensions are set at 700 px by 664 px.

Essentially, I will set up several backgrounds--at least one spring and one winter setting--that the user can select. Then, the user would just drag and drop various elements onto the workspace/garden to create their own Zen garden. Elements may include rocks, trees, lanterns, ponds, statues, etc. The goal is to relax and calm the user, similar to what a Zen garden would do. If time permits, the user will also be able to save their garden as a jpeg.

Overview

Page 3: Digital Zen Garden

sketches

Page 4: Digital Zen Garden

sketches

Page 5: Digital Zen Garden

sketches

Page 6: Digital Zen Garden

sketches

Page 7: Digital Zen Garden

sitemap

Page 8: Digital Zen Garden

initial cOmps

Page 9: Digital Zen Garden

initial cOmps

Page 10: Digital Zen Garden

initial cOmps

Page 11: Digital Zen Garden

initial cOmps

Page 12: Digital Zen Garden

For the final design, I decided to on the light green color scheme and Orator Std font for the main home screen. For the inside text, Century Gothic will be used. There will be a small splash HTML page prior to the actual page featuring the Zen garden, as seen in the final comps. I believe these general design decisions will not change during the technical aspect of the process.

The interface will employ the workspace/garden on top, with the menu of Zen garden elements at the bottom. There will be a total of fourteen elements the user can use to decorate the Zen garden. Above that will be a text menu which allows the user to switch the background of the garden through the four seasons. In addition to the Sound (on/off) and Save button, there is now also a Reset button to start the garden again from scratch. These technical aspects may or may not change as the scripting process occurs. For this project I am using Actionscript 3.0 in Flash CS3.

revisiOns

Page 13: Digital Zen Garden

lOOk & Feel

Page 14: Digital Zen Garden

lOOk & Feel

Page 15: Digital Zen Garden

lOOk & Feel

Page 16: Digital Zen Garden

lOOk & Feel

Page 17: Digital Zen Garden

FinalSmall design changes occurred as the project was implemented. In terms of technical change, the Zen elements needed to become smaller in order to cooperate with the code in a more functional way. I also needed to omit the Save feature as it would have required PHP to work. Many resources online have had trouble having this done correctly. There is one resource that allows you to save a Movieclip to JPG, but not a specific flash frame, which is what I needed. Finally, there is a limit of twenty for each Zen element, which I found is more than enough for the user since Zen gardens should normally be kept in a minimalist fashion.

In terms of art design, I redesigned the “Digital Zen Garden” logo/screen to facilitate a more Asian-esque feel using brush strokes to create the letters. Having a loading screen, I decided there was no need for the splash page mentioned in the initial look and feel process. Finally, the icon for the Reset button changed from an “X” to a trashcan, as I felt that was a more proper metaphor for its function.

Page 18: Digital Zen Garden

Final

Page 19: Digital Zen Garden

Final

Page 20: Digital Zen Garden

Final

Page 21: Digital Zen Garden

Final

Page 22: Digital Zen Garden

Final

Page 23: Digital Zen Garden
Page 24: Digital Zen Garden