Divcon Digital Interactive Visual Concepts

Bsc.
Multimedia Programming with Design ___________________________
BSc. In Multimedia Programming with Design
Department of Information Technology
Limerick Institute of Technology
DIVCON
digital interactive visual concepts

Final Year Project Report
Peter Delaney
K00070293
April 2009
__________________________________________________________________ 1
Bsc. Multimedia Programming with Design ___________________________
Plagiarism Disclaimer
I understand that plagiarism is a serious offence and I have read and
understood the college policy on plagiarism. I also understand that I may
receive a mark of zero if I have not identified and properly attributed sources
that have been used, referred to or have in any way influenced the
preparation of this assignment. Furthermore, I understand that I may receive
a mark of zero if I have knowingly allowed others to plagiarize my work in any
way.
I hereby declare that this assignment is my work based on my personal study
and /or research and that I have acknowledged all material and sources used
in its preparation. I also declare that this assignment has not been previously
submitted for assessment.
Signed: __________________________ Date: _________________
__________________________________________________________________ 2
Acknowledgments
I would like to acknowlage and thank to all the people who have helped and
supported me over the past year during my final year. In particular, I would like
to thank the following people.
To Patricia Green for her intusiastic spirit and genuine interest the
concept and design of my project. Her input was, to the point, Priceless
and certinly spirited.
To Denise Mc Evoy, for her enthusiastic style of teaching, and
inspiration and motivation she has given me throughout this degree.
To liz Brouke, who took a interest in my FYP and helped me throughout
the project and made me reach my objectives.
To Mike O’Connell, for his amazing ablity to teach and his incredible
patience with me over the past 4 years.
To all of the multimedia lectures who have guided me thought my
education at L.I.T. Without all of you, i wouldn’t of made it this far and
for this i owe you all.
To my parents who have supported me troughout my education and
have stuck by me trough tick and thin.
To my classmates, for your help and acceptance to the group.
Thank you.
Management Summary
__________________________________________________________________ 3
Throughout the creation of this application I have come across many
problems and with research and study I have managed to conquer most of
these issues.
Some problems are still in the melting pot. These issues remain unresolved
due to time and technical problems, but I hope to continue this project into
further development because I believe this idea has potential to be more than
what it is at the moment.
DivCon | Digital Interactive Visual Concepts is an application designed to aid
to user in the creation of there own individual art concepts to be used as
canvas art, laptop covers, digi book covers, desktop backgrounds. The site
Specialize in the production of modern art including beautiful canvas art prints
too digi book covers to complement anyone’s home or office. Browse through
a range of contemporary galleries/samples which will help the use come to
terms with the process of making there own design.
Save or print your own designs.
The application includes wii remote technology to allow the user more
freedom in movement and I feel add to the experience and joy of using such
an application.
The principle of the Final Year Project has given me the opportunity to
express my interest in modern art, such as vector art and also given me to
opportunity to make something different to the norm of a web based site.
__________________________________________________________________ 4
Table of contents
Plagiarism Disclaimer....................................................................2
Acknowledgments..........................................................................3
Management Summary.............................................................. ....3
__________________________________________________________________ 5
Table of contents............................................................... .............5
Table of Figures.............................................................................8
Document Structure.....................................................................10
CHAPTER 1- INTRODUCTION.......................................11
Motivation & Personal Interest.....................................................12
Benefits...................................................................... ..................12
Market Research...................................................................... ....13
Competitors:.............................................................................. ...14
Aims and Objectives:...................................................................15
Information Gathering:.................................................................16
Creating Flash Interface:..............................................................16
Adding the Wii motes for navigation:............................................18
System Requirements:............................................................ .....18
Tools Needed:..............................................................................19
CHAPTER 2 – DESIGN..................................................20
Colour..........................................................................................21
Page Design Layout................................................................. ....21
Navigation Problems....................................................................24
New Navigation................................................................ ............25
Fonts.......................................................................... ..................26
Technical Design............................................................ ..............27
CHAPTER 3 – IMPLEMENTATION.................................30
Software Packages Used.............................................................31
Images............................................................... ..........................31
__________________________________________________________________ 6
Gallery images.............................................................................33
Site Construction...................................................................... ....35
Video................................................................................ ............35
Java Code script..........................................................................37
Database Design and layout........................................................38
Usability.......................................................................................39
New Hardware Skills....................................................................39
Project management....................................................................40
Blog.................................................................................... ..........43
Testing..................................................................................... .....43
CHAPTER 4-DISCUSSION AND CONCLUSION...........45

Achieved Aims of Project.............................................................45
Additional Aspects developed in the project ................................46
Unachieved aims.........................................................................47
New skills Acquired......................................................................47
Design and Implementation.........................................................48
Conclusion...................................................................................49
CAPTURE 5-FUTURE PROJECT WORK......................50

Future Project work......................................................................51
Image File upload .......................................................................51
Drawing function..........................................................................52
Save Image file and upload to be reused....................................52
Make entire site in PaperVision....................................................52
Funding via advertising and PayPal®..........................................52
__________________________________________________________________ 7
Possible clothing printing PayPal® post serves...........................52
CHAPTER 6-REFERENCES..........................................53
Bibliography.................................................................................54
Websites......................................................................................55
CHAPTER 7-APPENDIXES............................................56
Blog.................................................................................... ..........57
Coding........................................................................................ ..70
Table of Figures
FIG 1 – ONLINE SURVEY...............................................14
FIG 2 – FONTS CONSIDERED.......................................27
FIG 30 – CANVAS MAKER DESIGN .............................28
FIG 41 –FORUM DESIGN .............................................29
FIG 52 – BACKGROUND IN PHOTOSHOP....................31
FIG 63 – SLICED IMAGES..............................................32
FIG 74 –IMAGES FOLDER..............................................32
FIG 85 – XML FILE...........................................................33
FIG 96 – PAPERVISION GALLERY.................................33
FIG 107– PAPERVISION GALLERY FLASH CODE.......34
FIG 118 – BEFORE AND AFTER.....................................34
FIG 212 – SELECTING THE SKIN FOR THE VIDEO.....37
__________________________________________________________________ 8
__________________________________________________________________ 9
Document Structure
__________________________________________________________________ 10
Chapter 1- Introduction
__________________________________________________________________ 11
Motivation & Personal Interest
My main motivation for taking on this project was to let anyone design there
own art in a simple and easy manner and it also combines my personal
interests with my course which makes the FYP more interesting to me.
While I feel that some people have no interest in art and design, I often find
that they still want to express themselves through possessions, with what
they ware and what way there house in designed.
In the past I had a situation with my sister. She wanted me to make some
modern canvas work for her living room, but every time I made something it
wasn’t what she had in her head. So why not make an application that lets
anyone design their own artwork for whatever use they wanted. I found
myself wishing that there was an easier way to help her and an art design
application was the only way.
Benefits
By making an application like this, I feel that it would allow anyone with a
couple minutes on their hands to create there own design at there own
leisure. It will require no artistic ability and little knowledge of technology. All
that is required from the user is a minute or two and curiosity.
__________________________________________________________________ 12
Market Research
To explore the market, I spoke to some friends about the project. Almost all of
them were interested by the idea. As I spoke more with them I learned that a
lot of them pay for artwork put think they pay far too much for prints and think
that letting them use make their own is idle and adds a personal touch.
I set up an online survey which I invited people I knew to take part in. The
purpose of the survey was to clear up some key points about what people
would like in an application of this kind.
From this survey I found that most people would like to make their own works
on canvas. They would also like to play around with famous works (i.e. Andy
Warhol’s) and make them their own. They also wanted to use the work for
other thing like laptop covers, stickers and Ipod covers. The laptop cover idea
was the highest score even higher than the canvas idea.
Following these information I now had to research the copyright law for
ownership of artwork, so that I would know what artist I could use for the
playing around with famous. This research proved that artist in the EU, US,
Australia and Japan need to be died for 50 year for the copyright to end.
Artist in Russia, China and Korea that have died before the fall of
communism, have no copyright law. Due to the art “belonging to the people”.
__________________________________________________________________ 13
Fig 1 – Online Survey
Competitors:
There are no competitors as such, as no such product exists at the moment.
While there is one site http://www.thisisperfect.co.uk/ that lets you make your
own art. It only lets you change the color and noting else.
__________________________________________________________________ 14
Fig 2 – thisisperfect.co.uk
The fact that there are no competitors has left me with a wide playing field and
the ability to explore this area of interest.
Aims and Objectives:
The aim is very basic – A website that will facilitate the ability to make your
own individual art concepts to be used as canvas art, laptop covers, digi book
covers and desktop backgrounds.
__________________________________________________________________ 15
The site Specialize in the production of modern art including beautiful canvas
art prints too digi book covers to complement anyone’s home or office.
Browse through a range of contemporary galleries/samples which will help the
use come to terms with the process of making their own design. The site will
use a mouse or a wii controller for navigation.
Make your own individual art designs for canvas or framed art work.
Use the Wii remote or multi touch screen to move, rotate, scale
images onto a canvas.
Get to select your genre to get preloaded images.
User can input the colour of the room the artwork is going to be
situated in and predetermined colour choices will be made for you.
Tells user which colours affect which emotions.
User can upload own images for uses in the program.
User has the option to play around with famous painting by the likes
of Pablo Picasso, Edvard Munch, Marc Chagall, Andy Warhol and
Robert Delaunay.
Information Gathering:
As I feel that this project is quite a large, I have realized that the information I
need will have to be done fast and to the point i.e. Wii mote knowledge, color
models, artists etc...
Creating Flash Interface:

I have decided to create the site for the project in Adobe Flash as I feel this is
the best application to give me the flexibility I need to create a rich interface
using a combination of paper vision and flash. Flash can incorporate still
images, sound, video and text all in one package. I hope to link this interface
to a database/xml so that it can be updated easily. I have also found a very
nice website with similar effects which has given me loads inspiration for the
design.
__________________________________________________________________ 16
Here are some of the sites that have given me inspiration:
• www.whitevoid.com/application
• http://www.cooliris.com/
Fig 3 – white void application
Fig 4 –Spectra application
__________________________________________________________________ 17
These two sites have use paper vision and flash to their full potential
Adding the Wii motes for navigation:
Fig 5 – Wii Mote
This area is totally new to me so I will be experimenting with the possibilities
of this type of feature. The idea for the project is to create art works the Wii
controller seems the most natural evolution away from the shekels of the
mouse. This gives me greater freedom of movement in a 3 axis environment.
System Requirements:
To give user the ability to make their own artwork
To design a product suitable for placement on the net and the Wii
console.
To make the service more interesting than the existing web sites by
__________________________________________________________________ 18
adding more interaction
Tools Needed:
As the project is quite in-depth, there are many tools needed to create this
application.
Relevant Software and Applications (Adobe Flash, Photoshop, 3DS
Max amongst others).
3mb Broadband.
Wii motes.
Camera.
Printer.
Canvas.
Bluetooth USB’s.
Camcorder.
__________________________________________________________________ 19
Chapter 2 – Design
__________________________________________________________________ 20
Colour
Black (60%) was used as the most dominant in the application because it is
clean easy to work with and has a balance with any other colour.
Blue and Pink (30%) were the second most used colours. These colours are
very formal and clean. The Blue and Pink on Black to me, creates a clean
non-distracting visual for the user to interact with. It also is up to date with the
fashion within design at the present.
White (8%) is the last major colour I used this colour stands out from the
others.
Page Design Layout

The conclusion was that the application was going to be made using flash,
due to the fact that the developer had experience with that program. Flash is
also cross compatible with all other adobe programs (i.e. Dreamweaver) and
can be run as a front-end application with a java back-end.
__________________________________________________________________ 21
The page size was decided on been 800 pixels wide and 600 in height due to
recommendations from Denise. This size would fit perfectly on a normal
monitor and reduces the need to side scroll. The pages were intitinly designed
in adobe photoshop before been converted to flash Backgrounds. The page
design hasn’t change mush over the design prosess and was intierly made
using code in action script 3.0. the designer wanted to have a simple
navigation that was easy to navigate and easy to traverse through.
For the interface of DivCon, I’ve made the choice that Flash with PaperVision
this would give me the freedom I need to run a Wii mote in an application
environment.
With this in mind the interface will follow the three click rule of navigation.
Fig 6 – First Proto Design
The first prototype was made in flash with actionscript 2.0. It involved creating
a 3D enviromnet in flash and this helped to show that the design and
__________________________________________________________________ 22
programming could be linked together.
Fig 7 – Second Proto Design
The second prototype navigation upgraded the actionscript to actionscript 3.0.
This let the programmer use xml to load in the planes onto the screen it also
made it faster to load and easier to update the application. This design made
navigation esay to use, fresh and never used before.
Fig 8 –Final Proto Design

This was the final design for the application. The black background was
__________________________________________________________________ 23
choosn besause it was felt that the application stood out to much with the
gradient blue background. This design made the navigation so esay to use
that 100% of the people that i tested it on got to grips with it in a matter of
second. Each time you clicked on a plan a new content plains would tween
form the plain you clicked and form a row below the main menu. Clicking on
the background would bring you back to the main menu and by clicking on
another content plian in the main menu the application would bring you
straight to the one you clicked.the appliction let the user enjoy the buety and
the simplisity of the program by leting the user go fullscreen with a button in
the top right corner. The application also auto-maticlly detected the screen
size your using a changed the dimentions of the application to suit you
monitor.
Navigation Problems
After a lot of time spent on the navigation using PaperVision with flash a major
problem kept on arising with the program. Problems loading content and other
swf flash file onto the plains made it hard to use and needed more time then I
had to resolve. Due to the fact that my navigation was my page layout, this
resulted in me having to make an entirely new page layout and navigation
with 3 weeks to go. This made to completion of the project difficult and also
made the report award to write.
__________________________________________________________________ 24
New Navigation
__________________________________________________________________ 25
Fig 9 –Background Designs
The new navigation was devised over the Easter holidays. It was made using
flash actionsript 3.0 and was taught to be a classic form of navigation and
design. This made it easy to plan and easy for the user to use because to was
familiar to them. The colours for the background were chosen because there
non distracting due to there opacity and are still strong enough to add a bit of
flavor to the application. The designer decided on letting the your choose from
three backgrounds. This gives the application a new dimension and will hold
in originality. Web safe colours were used to make this using the colour picker
in Adobe Photoshop.
Fonts
The Trebuchet family of fonts were used it this application for all text for it is
popular for screen and web based programs. The font of Trebuchet MS works
well on screen and is comfortable to read. It also is modern and has a simple
feel. Below is a collection on font considered for the application?
__________________________________________________________________ 26
Fig 2 – Fonts Considered
Technical Design
The technical design process and coding of my project was originally carried
out by programming the PaperVision navigation, the drag drop rotate enlarge
functions for the making of the canvas art pieces witch was done with
dynamic instances of the one class and the saving and printing of the art
work. But with the PaperVision navigation now at a halt, more technical
design was need. It was decided to implement an online comment page so
use could comment on each others designs and the background changer.
This would be done through java and java server pages.
A logon function for the application would be place when you select the forum
section of the site. This would add security to the site (database) and add
another element to the application.
__________________________________________________________________ 27
Fig 30 – Canvas Maker Design
From the canvas maker design you can see the print and save functions and
canvas area. The graphs the user uses to make to the image are stored in a
folder and are load in trough Xml and are then linked trough inheritance and
are an instanse of one class.
__________________________________________________________________ 28
Fig 41 –Forum Design
The forum design is simple and lets the user comment on other people’s
creations and talk.
__________________________________________________________________ 29
Chapter 3 – Implementation
__________________________________________________________________ 30
Software Packages Used

Adobe Dreamweaver
Adobe Photoshop
Adobe Flash
Apache Tomcat
NetBeans
JCreator
Microsoft Access
Microsoft Project Management
Images
All images were first made in Adobe Photoshop. The images were then edited
and adjusted to the standard the designer wanted. The files were then backed
up and loaded in to the application and stored in appropriate folders.
Fig 52 – Background in Photoshop

For the canvas images, guides where made on the images and then imported
to Adobe image Ready. The image was then broken up into individual images
and saved as arrow_1, arrow_2 ECT…
__________________________________________________________________ 31
Fig 63 – Sliced Images
When the images were sliced and saved for the web. They were move into
the images folder for use with an xml file and loaded into flash.
Fig 74 –Images Folder
__________________________________________________________________ 32
Fig 85 – XML File
Gallery images
The gallery images are examples of what the user could make using the
application and are made using Photoshop and are saved as jpg and
imported into flash. In flash they are resized to 250 x 250 and placed into
PaperVision
Fig 96 – PaperVision Gallery
__________________________________________________________________ 33
Fig 107– PaperVision Gallery Flash code
The majority of the image in this application are photos (dearth Vader and
gory best) downloaded off the net and then edited into vector graphics. The
arrow images and banners and created by the developer for the use in this
application. An extensive amount of filters were used to create these images.
The threshold and gradient blur filters were the most use as they are the best
to get a good vector style image with minimum effort.
Fig 118 – Before and After
__________________________________________________________________ 34
All images used were .jpg format. The jpg format was chosen as it is the most
suitable format for the internet and when the images are compressed for the
web it greatly reduces the file size while yet still having a fair to good
resolution quality.
Site Construction
The site was first made in a local root folder and this made it easier to
manage and along with the server allowed the user to use JSP pages (java
server pages). The root folder contains all images, SWF files and
dreamweaver pages for the application. This ensured that the site was well
organized and this structure was used so that when the application goes up
on the net that the structure of the folders would make the application upload
easily to the server.
The pages were then made in flash and name with URL addresses and then
linked together using the URL names. The forum uses jsp pages and
connects to a server which links to a database for the user details.
Video
For the purpose of the application a tutorial was needed to help the user find
their feet with the application. The best way to do this was by making a video
tutorial to show the user how to make their own printable or savable art piece.
The footage was captured using a digital camcorder, and then edited using an
iMac. The edited video footage was then embedded into the application.
The footage was imported onto an IMac using a fire wire cable form the digital
camcorder and then captured and stored on the computer hard drive. The
__________________________________________________________________ 35
data was then backed up using an external hard drive.
The video was edited using iMovies. The Macs were chosen due to the
designer been familiar with the Macintosh operating system. The video was
then exported as .dv files. This was the most suitable file format because it
provided the best quality for use on the web and good audio for the
application.
Fig 20 – Encoding Video in flash
__________________________________________________________________ 36
Fig 212 – Selecting the skin for the video
Flash was then used to embed the video file and export the file as a swf file.
The video controls/skin were then produced by flash itself.
Java Code script

The code for the application was based on the code which was completed in
the multimedia programming class in 4th year multimedia computing with
design. The code was edited to suit the application. The server of the
application is an online forum where users can post comments about other
people’s works or just post what they want. The forum was built using a
similar design to the flash application but made in dreamweaver. Saving as
jsp pages this let the file be connected to a server. The server used was
apache tomcat. The java servlet (.java) and java servlet pages (.jsp) were all
__________________________________________________________________ 37
used in the deployment of the forum application.
The deployment implementation followed the following steps.
Open net beans
Open project
Compile
Run jsp
Close
Fig 22 – forum
Database Design and layout

The database in the background of the online form was made using Microsoft
Access.
The servlet was used to connect to the server. This was made possible by
using ODBC (open database connectivity). Communication between the java
__________________________________________________________________ 38
and the database also facilitated by the JDBC Java API. A JDBC driver
connects the interface test fields to a designated database. This lets the
program access and modify the data in the database through queries without
users accessing the database file.
Usability
A vital issue to the design and implementation of the application was usability.
This was the case due to this being a application that let the user make a
physical object as a end result and its human nature for a person to get
frustrated when a program in hard or boring to use. I have taken every care in
the design of the pages, text and visuals to aid the user with this multimedia
application. To fight the frustration the tutorial is there to help user who aren’t
use to online applications. The PaperVision interface design was so user
friendly, it a shame I didn’t have the time or the knowledge to complete that
section. But the new navigation I feel has lived up to my goal and has given
the application structure and a form of familiarity.
New Hardware Skills

During the period of project production, the designer used new hardware he
had never used before. A graphics table was used to help in the creation of
the artwork this gave the designer freedom and made drawing an ease and a
joy.
The programmer also got to use a wii mote and a touch screen for the
majority of the project. The programmer decided to use a wii mote and
learned a new a valuably skill that he will use in the future.
__________________________________________________________________ 39
Project management
When the project proposal stage of the project began, a project plan was
devised using Microsoft Project Management. This program assisted with the
management of the FYP. This tool/program aided the project manager in his
day to day planning, tracking of the projects timeline, milestone and
deadlines. It also gave the manager the ability to price the entire budget and
resources.
Fig 23 – Gantt Chart
__________________________________________________________________ 40
Fig 24 – Resources Chart
Fig 25 – Flow Chart
__________________________________________________________________ 41
Fig 26 – Cost
It also aided the user in the analyze of different stages. This helped the
manager achieve various project deadlines and help me to keep on track.
Project management practical’s were carried out by Denise Mc Evoy and
these were weekly classes. Denise took care in making sure the work was
carried out by all each week and was backed up weekly.
The management program let the manager input all the projects resourses
inclueding hardware, software, human, time. Which provided an extremely
usefull insight into how hard it must be to run a poject on budget and ontime
and yet please the costumer.
As part of the project management we had meetings weekly with our
__________________________________________________________________ 42
designated project supervisor, Patrica Green. During these meetings we
would discuss various problems and achivments in the devlopment of the
project. The supervisor advised us on what path to take to resolve problems.
The supervisor also wanted a completed weekly work form on what was
completed that week and what will be the goals for the week after.
The developer also attended a weekly project class on Thursday for 2
hours(4-6). This time was used to let the developer speck to the course
director Patricia green, Liz Bourke and Seamus O’Ciardhuain. Liz Bourke also
helped with the porgramming issues that we may of had. She help the
programmer greatly with the dynamic instances for the canvas images.
Blog
The blog was use in project management to keep track of the projects
progress. This was used instead of the visual diaries like the pervious years.
See appendixes for the blog.
Testing
To test the application the project manager first tested the navigation with
friends and watched as they navigated through the application to see if they
stopped or hesitated at any stage of interactivity.
Testing for the gallery involved making sure the images loaded in correctly
and that the program works to its intended function.
For the canvas design maker the application was tested by a group to see if
they could Click, Drag, Drop, Rotate and Scale the art pieces onto the canvas.
The Print and Save functions were also tested.
The forum at the moment has not been tested. But the project manager will
have that done in the near future as it is a vital part of the project.
__________________________________________________________________ 43
__________________________________________________________________ 44
Chapter 4-Discussion and Conclusion
Achieved Aims of Project

Make your own individual art designs for canvas or framed art
__________________________________________________________________ 45
work.
This was done and the goal was achieved.
Use the Wii mote or mouse to rotate, scale images onto a
canvas.
This was also achieved on time and worked well
Get to select your genre to get preloaded images.
This was use in the canvas design maker. Where a dropdown menu
appears to select the image genre
User has the option to use famous painting by the likes of

Pablo Picasso, Edvard Munch, Marc Chagall, Andy Warhol and
Robert Delaunay...
This was part of the genre type
Print artwork
Part of the canvas design maker
Save artwork
Part of the canvas design maker
Login
Part of the Forum
Post comments
Part of the Forum
Use PaperVision
Although the main navigation of the FYP was too been made using
only PaperVision and flash, it was found to be too hard. But as a
plus the programmer still got to use the PaperVision for the image
gallery.
Additional Aspects developed in the

project
Forum
The forum was developed with java and gave the application a new
dimension.
__________________________________________________________________ 46
Unachieved aims
The area of the application that was not implemented was the original
navigation. This was to use PaperVision and a lot of time and effort was
spend on programming that form of navigation. The reason it was agreed that
this form of navigation was not to be used was because impossible to make
the plains dynamic in the time remaining for the project.
New skills Acquired

During in making of this application, there was many areas which I learned
new skills, and learn new ways of doing things in multiply ways. I acquired
new skills in IMovies and the Mac OSX 10.5.6. This will benefit me greatly in
the future when I enter the multimedia industry, as the Mac OSX operating
system is widely used in the industry because it is considered the designers
computer.
I learned a new language with flash actionscript 3.0. and I found that this
language is more object oriented than the previous version actionscript 2.0,
which I used and was taught in previous years. I was able to build in my
knowledge of the language and I feel I have gained a confidence in the
subject.
My management skills have improved with the knowledge gained from the
project management side of the applications development. Due to some of
the projects section taking longer than expected. I feel now I would be able to
look realistically at my abilities and judge the amount of time it would take to
complete sections of my forthcoming projects in the future.
This was the first time I use all of the aspects of the course in one project. It
__________________________________________________________________ 47
has given me a major boost in confidence knowing that I can link and combine
sections of me knowledge together.
I found that time management was a major issue for me in the deployment of
the application. As I was my own time and that meant I had to sacrifice
aspects of my own life (job, sports, and band).
I learned the value of making deadline for if you miss one is harder to reach
the next and so forth. This applied to the submission of the project proposal,
design presentation, research report, prototype, drafts, and the final report.
During the project proposal I learned a valuable experience in presenting to a
group. I found that to be one of the hardest aspects of the project. But it did
display my work and the subject matter in question.
Working on your own can be a hard experience but I have learned it use my
own initiative, by make my own deadlines and follow my own path.
Design and Implementation

In all, I am happy with the design and feel of the project. The major setback to
this was the fact the original navigation failed to work and that navigation
could have set the application out from the rest for it in new and fresh. But I’m
pleased with the navigation and in my opinion it clean, straightforward and to
the point. I liked working with flash during the design and coding of the
project. Due to this in have growing an interest in flash and would love to
make site in flash as a job in the future.
On completing the final year project I have learned vast amounts of technical
knowledge in the areas of the project. In future projects I would allow more
time for design and brainstorming for I found that to be the main problem I
__________________________________________________________________ 48
had with this project.
PaperVision was a good experience for me, because it showed me that you
can do a lot of innovative things with web based application if you have the
time and the initiative to do so.
Conclusion
Many of the goals I set out to achieve at the proposal stage with the exception
of the image upload have been completed and the mood colour types. But I
substituted these goals with the creation of an online forum.
Much of the research and development time of the Final Year Project was
spent on implementing and solving the PaperVision. This was due to the lack
of knowledge and inexperience with flash actionscript 3.0.
I now know that it is important to ask for help if you’re stuck on a certain part
as this is a time consuming effort it you don’t ask for help.
I’ve learned to take criticism from lectures and peers and as designers we
have to get use to that as it’s a part of the job.
The main learning object for this project was to gain experience in flash with
Actionscript and I feel that this goal has been achieved. Also the level of
understanding of how different languages work together has greatly risen.
This project was the hardest experience in my college life. And I thought that
there was many ways of expending and enhancing this project and in the
future I may find the time to do the improvements.
Since the completion of this Final Year Project, I have come to realise the fact
that with media design, ideas and plans don’t always follow the same path
that you expect. You are then faced with the dilemma of solve the problem or
__________________________________________________________________ 49
find a new route to the same goal. This gives you alternative ways of
completing aspects of the problem in question.
This project has given me the confidence and the hunger to compete in the
professional industry of multimedia design.
Capture 5-Future project work
__________________________________________________________________ 50
Future Project work

From the experience of creating this project I found a few additional ideas that
could expend this application further. Below is a list that I would like to
expand.
Image File upload

I hope to make this function using java jsp pages and a dreamweaver form
page. This means the user could login and upload their own images for use in
__________________________________________________________________ 51
the art canvas maker.
Drawing function
A drawing function in the canvas maker, that lets the user select the brush
type and draw on the canvas.
Save Image file and upload to be reused

This would involve the save function and the upload function. But instead of
saving as a jpg, it would save as a new file type that can be reused.
Make entire site in PaperVision

This would involve remaking the entire site and resolving to original
PaperVision problem.
Funding via advertising and PayPal®

A lot of applications are using ads to create revenue for the site and PayPal®
could be used to making people pay for creating there canvas art. This would
be a once off charge that is linked to the registration page.
Possible clothing printing PayPal® post

serves
This would be the best route to take if the project team wanted to make large
amounts of revenue. It would let the user make their own images to be printed
onto cloths and then posted to them.
__________________________________________________________________ 52
Chapter 6-References
__________________________________________________________________ 53
Bibliography
Banksy wall and Piece
2006
ISBN 1-8441-3787-2
Flash 8 ActionScript Bible
2006
ISBN: 047177197X
__________________________________________________________________ 54
Websites
www.funkpopart.com
www.technorati.com
www.flashkit.com
www.photoshoptutorials.ws
www.roaminteractive.com
www.papervision.com
www.googlecode.com
http://msnbcmedia.msn.com/i/msnbc/components/spectra/index.html
http://direct.motorola.com/hellomoto/razr2/razr2makingof/
http://www.nitrogroup.com/
http://microsites.audi.co.uk/microsites/RS6/index.html#/home/
http://www.whitevoid.com/application.html
blog.papervision3d.org/
code.google.com/p/papervision3d/
www.cornflex.org
pv3d.org
www.tutorialized.com
www.flashkit.com
www.thefwa.com
__________________________________________________________________ 55
Chapter 7-Appendixes
__________________________________________________________________ 56
Blog
Saturday, February 14, 2009
I couldn't sleep last night, so I looked through my phone a found that there is
3 Fri 13ths this year. Now three Fri the 13ths only occur when there is a Fri
13th in February and on a leap year
Also, there was an unofficial holiday square root day 3/3/09 which fall upon
each century. There was a Friday the 13 on 2/13/09, today 3/13/09 and the
next one is 11/13/09! The next time we'll see 3 Friday the 13ths will be in
2012! 1/13/12, 4/13/12 and 7/13/12. 2010 only having one. As for square root
day the next dates are 4/4/16, 5/5/25, 6/6/36, 7/7/49, 8/8/64 and ENDS at
9/9/81.
It's funny how 13 is always left out... there are 12 months in a year, 12 signs
of the zodiac, 12 tribes of Israel, 12 apostles of Jesus, 12 days of Christmas
and 12 eggs in a dozen. What's your opinion, is there some sort of puzzle in it
or just myth?
I need some sleep............
Posted by Peter Delaney at 3:57 PM 0 comments
Thursday, February 5, 2009
Click and Drag
Ok
__________________________________________________________________ 57
I have the click and drag thing working now. But now I need it to work
for multiple movie clips and this problem. It doesn't
work........AAAAAAAAAAHHHHHHHHH!!!!
I need Liz’s Brain.

Monday, February 2, 2009
Click and Drag
I've now started working on the click and drag thing for making the artwork
itself. I need it to click, drag, drop, rotate, and make the image bigger and
smaller.
Sounds easy!!!!!!!!!!!!!!!! LOL

Wednesday, January 28, 2009
Need More TIME!
The java assignment taking over my life (worth 20% of the year). It’s due next
week and I'm having trouble with. It makes you feel frustrated when you can't
do things to the speed and quality you want. I know I'm not the only one to
feel this way but we're all determined to get it done and I'm sure we'll all help
each-other. I plan to make extra hours next week (LOL Cause I'm Dr.
Manhattan) and hit the FYP with a awful kick in the H*L#.
OH I handed up my final project proposal today.

Tuesday, January 20, 2009
Inspiration or not?
__________________________________________________________________ 58
Being looking at my old art books for Photoshop and print works and found
loads of new way to make different effects.... take a look (I'm beginning to like
Pink and Browns)
__________________________________________________________________ 59

Sunday, January 18, 2009
Images and stuff!!!!
Being working on images and stuff for the making of artwork.

Examples below.......
__________________________________________________________________ 60

Friday, January 16, 2009
A New Hope (AKA 2009)
New Year and all that Stuff
My mind is freaking out :( we need to have a working demo by the 9th of

February. PaperVision in flash is so god dam hard. I've been trying to teach
myself the code and isn’t going down too well on my slowly zombiefing face.
__________________________________________________________________ 61
A Java Zombie
We also have a Christmas Java Assignment to do as well. Its worth 20% so I

have to do well I need it to pass the year. I want Timmy’s brain.
I'll keep you posted on my developments...
Posted by Peter Delaney at 2:54 AM 0 comments
Thursday, December 18, 2008

Holidays and Stuff
Finished my exams now YAY!..... Both seemed to be ok but we'll see what
happens when I get the result. I hope to get a major amount of the
programming side of the project done over the holidays. I want the Gallery
and the Canvas making part done before Jan 8th.
Now if only it were that simple...!
I know I’ll run into some kind of a problem and get all depressed cause I can't
get my head around it.
Wednesday, December 10, 2008
Early Designs
__________________________________________________________________ 62
This was a rough work idea of what I wanted my sites navigation. It’s only a
prototype at the moment so we'll see what happens. It’s all flash code and
papervision. YAY!!!!
Wednesday, December 3, 2008
LOGO
__________________________________________________________________ 63
I’ve been trying to come up with a logo and i think a simple font type will be
grand. besides i'm no a designer
Tuesday, November 25, 2008
Been working on a proto type's and stuff with Papervision the code for it is
grand its the inheritance that is hard. The code uses other methods from
multiple packages and you need to copy them into a root folder to edit them
for you own use with out hurting the original one. the plane wont load in the
same position!!!!! ahah!
Harder than it sounds there more than that!

Friday, November 14, 2008
__________________________________________________________________ 64
This is one navigation system

i'm going for. Its all Papervision Flash and is using externally loaded objects to
help with the loading lag.
looks cool!!!!
Thursday, November 6, 2008
Design Idea
This is my design idea at the moment. i dont have a clue how to make it 3D
but i'll find a way!
__________________________________________________________________ 65
This is my design idea at the moment. i dont have a clue how to make it 3D
but i'll find a way!
Saturday, November 1, 2008
__________________________________________________________________ 66
__________________________________________________________________ 67
This is a short example of the world copyright laws. It is up to date and valid!
have a look if you want to. boring i know.
Tuesday, October 28, 2008
Navigation Plans
Ok so it's been awhile.
I have now move on to navigation and i hope to have a main idea soon. The
site is going to run on the internet, Wii Channel and Iphone/Itouch (wii flash
sould sovle that).
I want to use paperVision3D and WiiFlash to control to systems x and y tilt.
Laterz
Labels: Navigation Plans
Tuesday, October 21, 2008
Research
For the past while I've been sick so YAY! my tonsils are growing back! i had
em removed years ago.
Anyway research is going well my Idea is to design a wii channel site or a

touch screen site that lets you make and design you own canvas art for
printing and stuff...
I have more outlets for this than just canvas printing like laptop cover. digital
multimedia frames, digital book covers.
__________________________________________________________________ 68
Friday, October 10, 2008

Sites that make Canvas prints
http://www.canvasrus.co.uk/ this site only lets you upload your pics, they do
the rest!
http://www.imagekind.com/ not sure whats the point of this!
http://www.thisisperfect.co.uk/ this is the first site i found. it's only lets you
change the colors of the art work. you have a choice of a palate of colors
Sunday, October 5, 2008
proposal
Limerick Institute of Technology
Department of Information Technology
Proposed Final Year Project Titles for

BSc Multimedia Programming and Design 2008/2009
Supervisor:
Student Name: Pete Delaney
Project Title: Digital Canvas Art
Suitable for
People wanting something new and interesting for there homes 2 = very
suitable
People interested doing interior design 1 = suitable
People not interested in Design. 0 = unsuitable
Brief Description of the Project:
· Make your own individual art designs for canvas or framed art work.
· Use the wii remote or multi touch screen to move, rotate, scale images onto
a canvas.
· Get to select your genre to get preloaded images.
· User can input the color of the room the artwork is going to be situated in
and predetermined color choices will be made for you.
· Tells user which colors affect which emotions.
· User can upload own images for uses in the program.
· User has the option to play around with famous painting by the likes of Pablo
Picasso, Edvard Munch, Marc Chagall, Andy Warhol and Robert Delaunay.
· User can save their work for a later date.
__________________________________________________________________ 69
Special Equipments/Tools/Software, if any:
· Wii remote, multi touch screen.

· Printer.
Monday, September 29, 2008
Welcome to my (Peter Delaney) FYP Blog
Hi All
Just opened this now! I still haven't picked my Theme yet. so i'll keep ye
posted.
Pete.
Coding
Gallery
package
{
import flash.display.*;
import flash.events.*;
import flash.geom.ColorTransform;
import flash.utils.Dictionary;
//import flash.filters.*;
// Import Papervision3D
import org.papervision3d.core.proto.*;
import org.papervision3d.scenes.*;
import org.papervision3d.cameras.*;
import org.papervision3d.objects.*;
import org.papervision3d.materials.*;
public class main extends Sprite

{
//
______________________________________________________________
_____ 3D vars
private var container :Sprite;

private var scene :MovieScene3D;
private var camera :Camera3D;
private var planeByContainer :Dictionary = new Dictionary();
//
______________________________________________________________
_____ Album vars
__________________________________________________________________ 70
private var paperSize :Number = 0.5;

private var cloudSize :Number = 1500;
private var rotSize :Number = 360;
private var maxAlbums :Number = 50;
private var num :Number = 0;
//
______________________________________________________________
_____ stage
public var iFull :SimpleButton = new SimpleButton();
//
______________________________________________________________
_____ main
public function main()

{
iFull.visible = stage.hasOwnProperty("displayState");
iFull.addEventListener( MouseEvent.CLICK, goFull );
stage.quality = StageQuality.MEDIUM;
init3D();
addChild( iFull );
this.addEventListener( Event.ENTER_FRAME, loop );

}
//
______________________________________________________________
_____ Init3D
private function init3D():void

{
// Create container sprite and center it in the stage
container = new Sprite();
addChild( container );
container.x = 320;
container.y = 240;
// Create scene
scene = new MovieScene3D( container );
// Create camera
__________________________________________________________________ 71
camera = new Camera3D();

camera.zoom = 5;
// Store camera properties

camera.extra =
{
goPosition: new DisplayObject3D(),
goTarget: new DisplayObject3D()
};
camera.extra.goPosition.copyPosition( camera );
}
//
______________________________________________________________
_____ Create album
private function createAlbum()

{
var material:InteractiveMovieAssetMaterial = new
InteractiveMovieAssetMaterial( "Album" );
material.doubleSided = true;
material.lineColor = 0xFFFFFF;
material.updateBitmap();
var plane :Plane = new Plane( material, paperSize, 0, 2, 2 );
// Randomize position
var gotoData :DisplayObject3D = new DisplayObject3D();
gotoData.x = Math.random() * cloudSize - cloudSize/2;

gotoData.y = Math.random() * cloudSize - cloudSize/2;
gotoData.z = Math.random() * cloudSize - cloudSize/2;
gotoData.rotationX = Math.random() * rotSize;

gotoData.rotationY = Math.random() * rotSize;
gotoData.rotationZ = Math.random() * rotSize;
plane.extra =
{
goto: gotoData
};
// Include in scene
scene.addChild( plane, "Album" + String( num ) );
var container:Sprite = plane.container;
__________________________________________________________________ 72
container.buttonMode = true;
container.addEventListener( MouseEvent.ROLL_OVER,
doRollOver );
container.addEventListener( MouseEvent.ROLL_OUT,
doRollOut );
container.addEventListener( MouseEvent.MOUSE_DOWN,
doPress );
planeByContainer[ container ] = plane;
num++;
}
//
______________________________________________________________
_____ Button events
private function doPress(event:Event):void

{
var plane:Plane = planeByContainer[ event.target ];
plane.scaleX = 1;
plane.scaleY = 1;
var target :DisplayObject3D = new DisplayObject3D();
target.copyTransform( plane );
target.moveBackward( 350 );
camera.extra.goPosition.copyPosition( target );
camera.extra.goTarget.copyPosition( plane );
plane.material.lineAlpha = 0;
// event.target.filters = null;
};
private function doRollOver(event:Event):void

{
plane.scaleX = 1.1;
plane.scaleY = 1.1;
//var glow:Number = Math.max( 20, Math.min( 30, 10 + 20 * (1 -

plane.screenZ / cloudSize ) ) );
//event.target.filters = [new GlowFilter( 0xFFFFFF, 0.7, glow,
glow, 1, 1, false, false ) ];
};
__________________________________________________________________ 73
private function doRollOut(event:Event):void

{
plane.scaleX = 1;
plane.scaleY = 1;
// event.target.filters = null;
};
//
______________________________________________________________
_____ Loop
private function loop(event:Event):void

{
if( num < maxAlbums )
createAlbum();
update3D();
iFull.x = 640 + (stage.stageWidth - 640)/2;

iFull.y = 480 + (stage.stageHeight - 480)/2;
}
private function update3D():void

{
var target :DisplayObject3D = camera.target;
var goPosition :DisplayObject3D = camera.extra.goPosition;
var goTarget :DisplayObject3D = camera.extra.goTarget;
camera.x -= (camera.x - goPosition.x) /32;

camera.y -= (camera.y - goPosition.y) /32;
camera.z -= (camera.z - goPosition.z) /32;
target.x -= (target.x - goTarget.x) /32;

target.y -= (target.y - goTarget.y) /32;
target.z -= (target.z - goTarget.z) /32;
var paper :DisplayObject3D;
for( var i:Number=0; paper = scene.getChildByName( "Album"+i

); i++ )
{
var goto :DisplayObject3D = paper.extra.goto;
__________________________________________________________________ 74
paper.x -= (paper.x - goto.x) / 32;

paper.y -= (paper.y - goto.y) / 32;
paper.z -= (paper.z - goto.z) / 32;
paper.rotationX -= (paper.rotationX - goto.rotationX) /32;

paper.rotationY -= (paper.rotationY - goto.rotationY) /32;
paper.rotationZ -= (paper.rotationZ - goto.rotationZ) /32;
}
// Render
scene.renderCamera( this.camera );
}
//
______________________________________________________________
_____ FullScreen
private function goFull(event:MouseEvent):void

{
if( stage.hasOwnProperty("displayState") )
{
if( stage.displayState !=
StageDisplayState.FULL_SCREEN )
stage.displayState =
StageDisplayState.FULL_SCREEN;
else
stage.displayState = StageDisplayState.NORMAL;
}
}
}
}
__________________________________________________________________ 75

Divcon Digital Interactive Visual Concepts

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Divcon Digital Interactive Visual Concepts

Uploaded by

Copyright:

Available Formats

Bsc.

Multimedia Programming with Design ___________________________

BSc. In Multimedia Programming with Design

Department of Information Technology

Limerick Institute of Technology

digital interactive visual concepts

I understand that plagiarism is a serious offence and I have read and

understood the college policy on plagiarism. I also understand that I may

preparation of this assignment. Furthermore, I understand that I may receive

a mark of zero if I have knowingly allowed others to plagiarize my work in any

I hereby declare that this assignment is my work based on my personal study

submitted for assessment.

Signed: __________________________ Date: _________________

to thank the following people.

and certinly spirited.

To Denise Mc Evoy, for her enthusiastic style of teaching, and

inspiration and motivation she has given me throughout this degree.

To liz Brouke, who took a interest in my FYP and helped me throughout

the project and made me reach my objectives.

patience with me over the past 4 years.

To all of the multimedia lectures who have guided me thought my

for this i owe you all.

To my parents who have supported me troughout my education and

have stuck by me trough tick and thin.

To my classmates, for your help and acceptance to the group.

Throughout the creation of this application I have come across many

what it is at the moment.

DivCon | Digital Interactive Visual Concepts is an application designed to aid

to user in the creation of there own individual art concepts to be used as

a range of contemporary galleries/samples which will help the use come to

terms with the process of making there own design.

Save or print your own designs.

opportunity to make something different to the norm of a web based site.

Management Summary.............................................................. ....3

Table of contents............................................................... .............5

Market Research...................................................................... ....13

Aims and Objectives:...................................................................15

Creating Flash Interface:..............................................................16

Adding the Wii motes for navigation:............................................18

System Requirements:............................................................ .....18

Page Design Layout................................................................. ....21

New Navigation................................................................ ............25

Technical Design............................................................ ..............27

Site Construction...................................................................... ....35

Java Code script..........................................................................37

Database Design and layout........................................................38

New Hardware Skills....................................................................39

CHAPTER 4-DISCUSSION AND CONCLUSION...........45

Additional Aspects developed in the project ................................46

New skills Acquired......................................................................47

Design and Implementation.........................................................48

CAPTURE 5-FUTURE PROJECT WORK......................50

Image File upload .......................................................................51

Save Image file and upload to be reused....................................52

Make entire site in PaperVision....................................................52

Funding via advertising and PayPal®..........................................52

Possible clothing printing PayPal® post serves...........................52

FIG 1 – ONLINE SURVEY...............................................14

FIG 2 – FONTS CONSIDERED.......................................27

FIG 30 – CANVAS MAKER DESIGN .............................28

FIG 41 –FORUM DESIGN .............................................29

FIG 52 – BACKGROUND IN PHOTOSHOP....................31

Signed: __________ Date: _