Final Outcome

Now that it is the last day before the deadline I decided to re-run the functions to make sure they are all working to the extent that I have coded them to. I am not implementing anymore code or designs as I do not want the project to encounter problems that might not be solvable before my assessment tomorrow. I am disappointed that the functionality of the project is basic although it is only a prototype. I would have like for the entire project to be on one application but due to pre-occurring errors this was not possible therefore I plan on joining the sections at a later stage. The design is plain and dull unfortunately the issues of errors did affect the design process especially the use of colours leading to a bland looking interface. The conflicts within the code resulted in separate applications in order to display the various multimodal functions  that worked due to this the project as a whole did not interlink together. The time frame to learn a whole new code language was short and therefore I struggled to code various areas thankfully Adam was a great help in explain various functions and terms that were important within my project. 

Overall the outcome has been a success as I have taken on board a new form of code that I had never come across before and attempted to create a prototype application. Although the initial plan was not fully successful I must acknowledge the constraints I encountered and other commitments to projects. Learning a new code language was challenging but opened up my skills to another area of design and functionality that I had not undertaken before.  The aim of the project was to create a multimodal prototype which I did by implementing a camera and canvas for users to interact with. The project development will not end here throughout my rare free time whilst I complete my major project I will attempt to enhance the project in order for it to be at a higher standard. Purpose of this is not only to further enhance the skills I have learnt but also make it presentable in order to display it within my portfolio website and in our end of year show. 

Colour Picker on the Canvas

Once I managed to achieve some functionality on the canvas I decided to attempt the colour picker tool in order for users to be able to choose a colour to draw with. In order to do so I followed various tutorials on action script and Flash but just like the canvas implementation I came across many errors and conflicts. 

Within the image below the functions had a conflict where they did not have a body, this was resolved by using curly brackets for each of them. As you can see something as simple as a missing curly brace can affect the code and overall functionality. 

Within the code I created an actionscript file where I have created a Bindable selecting specific colours that I have mentioned. I chose specific colours as I was testing out the code there wasn't a specific reason why I wanted just a small set. 

Within the mxml document I imported the action script file, in order for the bindable to run within the application. 

Final Canvas Output

Below I have displayed the final output of my canvas as you can see the overall function works, users are able to draw doodles. 

The image below displays the colour picker once the user has selected it, as you can see I have provided a large range of colours. Unfortunately the code implemented does not apply the colour change that the user has selected therefore the colour picker is not fully functional at this stage. 

After trial and errors I have been unsuccessful in completing the draw canvas to my original expectations as only one colour is functional at this time. I was able to change the line colours within the back end code therefore not being useful to the user as they cannot change the colour themselves. I feel that the functionality is there I am just missing a minor section that links the canvas and colours picker in order for them to work together. 

Sources

Adobe.com. n.d. Adobe Edge: February 2010 - Getting started with Adobe Flash Builder 4. [online] Available at: http://www.adobe.com/inspire-archive/february2010/articles/article2/index.html [Accessed: 11 Feb 2014].

Blogs.adobe.com. 2010. Spark DateField and ColorPicker. [online] Available at: http://blogs.adobe.com/aharui/2010/01/spark_datefield_and_colorpicke.html [Accessed: 9 Feb 2014].

Codebabble.com. 2014. Customizing a Flash Builder component. [online] Available at: http://codebabble.com/flash-builder/customizing-a-flash-builder-component [Accessed: 9 Feb 2014].

Extension Time

Due to unforeseen circumstances within the university I was entitled to an extension which I did not consider taking until I came across a large amount of errors. During the extra week I decided to attempt to enhance the canvas I had created previously by adding a functional colour picker. This was to allow users using the system to choose their own colours of preference to draw on therefore another way of making the interface user friendly and in a way customisable. This process has been explained within the follow blog post. 

PowerPoint Presentation

My assessment consists of the process undertaken in order to produce the functional prototype, here I decided to develop a presentation in Power Point in order to show the development process and conflicts encountered within the application. Although the blog contains the in depth information and research it is a large amount of information to project altogether therefore a presentation structure will keep it simple and to the point. 

Within the Presentation I will discuss the following:

• The Project: remind my peers what the project is
• Development Process: discuss the methods undertaken for each section of the project  and problems found along the way
• Future Work: The initial plan of the project has not been successful due to time constraints therefore I will discuss what I aim to enhance for the end of year show

Further Implementation of the Drawing Canvas

Since the previous tutorial was not as detailed regarding the user interactivity I decided to look further to see if I could develop some user implementation. I came across another video tutorial that focuses on Flash and not Flash builder although this should not be a issue as they are using ActionScript. 

Within the tutorial the video explains ways to change colour, line thickness and forms of deleting the drawing. This form of guide is more appropriate for my project although due to slight difference within the program functionality I have come across numerous errors that need to be dealt with. An on occurring presence of errors related to conflicts within the code that is already integrated within Flash Builder. I came to the decision to look at a previous action-script canvas documents completed during a class tutorial on Flash. This method was much more helpful as I was familiar with the structure implemented.

Problem Solving
The code I used as an outline of what was need was useful in helping me develop the canvas although I found many conflicting errors within Flash Builder. In order to get a functional canvas I had to replace various sections with a different order of code. The image below displays both the original and replacement code, I decided to keep both in order to show my progress and failed attempts at creating the function.  

I found that a large amount of the conflicting code was a result of elements being placed twice, by this I mean that Flash Builder has various components already integrated within the program that do not need to be coded again. As you can identify within the code various sections are display under a private function, this merely states that the function is only for internal use and users have no need to access it. 

Sources
Qamar, Z. 2011. DRAW ON CANVAS IN AS3. [video online] Available at: http://www.youtube.com/watch?v=ZmYlaFtIH0Q [Accessed: 11 Feb 2014].

Nocircleno.com. n.d. Graffiti - ActionScript 3 Bitmap Drawing Library. [online] Available at: http://www.nocircleno.com/graffiti/ [Accessed: 11 Feb 2014].

Make A Sketch Pad In Flash. 2011. [video online] Available at: http://www.youtube.com/watch?v=pDlJwCHifzo [Accessed: 11 Feb 2014].

Issues with Previewing XML Documents

During the process of tackling the ongoing presence of such lovely errors I came accross another issue. It seemed that the program struggled open the documents to preview even though the errors had been tackled. This is a major problem for the presentation day as I need to make sure that this is not the case.

I  changed the configuration to display on the web instead of as a desktop application. This method was a success as I was able to test and view the functions I had created. Although this preview was a problem it was a minor issue compared to the rest. 

Encountering Problems

After the endless presence of errors within the code I felt that I was not getting anywhere regarding the functionality of the project therefore I decided to separate the files. I created separate flex projects for each of my multimodal functions in order to test and run the code separately. This method proved to be successful as I managed to get the camera working without any major issues. Before the presentation of the project I informed Adam of my decisions to separate the code as I wanted to make sure that the change of methods was acceptable luckily it was. 

Camera
Implementing the camera code in a separate application provided the ability for the code to work and not clash. The application was functional although at this point in time it runs quite slow. 

Canvas
The implementation of the canvas code within a new application document was beneficial in detecting errors within that own section. Although this method has been useful I encountered a long-winded and frustrating process of detecting the most annoying errors EVER!!!!!!!

This is how I felt...

I decided to leave the comment out code within my project as it shows my various attempts at developing the functionality. Now that I have managed to fix the major problems I decided to begin developing the Power Point Presentation where I will explain the process of how I created the project.