Evaluation

In this assignment I set myself the task of learning the basics of the Adobe Flash program. On looking back to my SMLP (Self Managed Learning Plan) I am going to now assess how successful I was in completing this task.

When I set out on this project I had never before even opened the Flash program so I was a novice to say the least.

What I felt I needed to do in the first instance was to understand the capabilities of Flash as I couldn’t design something in Flash without knowing this.

What I had to do to understand what it was capable of was to look at existing examples of it. One place that I looked, which came recommended was http://www.thefwa.com/ which had what is considered to be the best uses of Flash on the internet. When I looked at this site I couldn’t help but be inspired, but at the same time a bit boggled, at the ability of some of these sites creators. In addition to looking at this site I also looked to http://www.bestflashanimationsite.com and http://weblogs.macromedia.com.

Once I had given myself this time to research what I potentially could achieve (in future) I felt more equipped to then given myself a smaller goal to get me off the starting block.

At this point I was on track with my SMLP and was keeping to the schedule, I had allotted myself one week approximately to complete this section so I was pleased that I had appropriately identified how long this should take.

The next thing I needed to do was to complete some tutorials so that I could pick up some basic understanding of the Flash interface and become familiar with the words and phrases associated with the program.

To do this I looked to the Flash program itself for in built tutorials but in addition I looked on the internet at sites such as http://www.kirupa.com.

At first I found Flash very difficult to understand as it was introducing me to terms I had never heard before such as ‘Tweens’ (a motion animation) and FMA (flexible messaging area). In addition to this there were multiple layers to create animations on and ‘keyframes’ (points in the timeline in which a key event will occur) to be inserted and the whole thing took place on a ‘Stage’ (the working area).

All of these terms are now familiar to me but initially it is very difficult to understand and what I found most difficult is that many tutorials are written assuming you understand all of these terms. Luckily the tutorials built into Flash have a much smoother learning curve and I found that I much preferred these tutorials.

For this element of my SMLP I had given myself two weeks to complete it making use of class and self study time. Unfortunately I had not estimated this correctly as the time spilled over to a third week to complete tutorials as didn’t feel I had enough understanding. What I feel contributed to this was that I was held up by trying to produce a web page that held all of my written documentation, I had tried to put this together in class and this had eaten away at my tutorial time.

The next thing I needed to do was to complete a web plan. I had chosen for this assignment to produce a site for somebody other than myself to make the projects end product more purposeful. In addition it gave me a small taster of what it would be like working for a client. As I decided this at short notice I used a recently qualified Photographer friend of mine as my guinea pig.

To be able to create the web plan I needed to know what my client wanted in her website and so I created a scoping document. This was a document to ask probing questions and find out colour schemes, target market and the purpose of the site.

On doing this I was provided with all the relevant details to then create my web plan and it made the job much simpler than in the past.

When I came up with my initial Screen design my client was very happy with it as it was a direct interpretation of what had been asked for, however I wasn’t completely satisfied with the design and after feedback with fellow students decided to redesign it. On doing this the client was also much more impressed with the redesign and so I was able to press on with my new improved design.

The time allotted to this exercise in my SMLP was one week using class and self study time (sixteen hours) I had eaten into this time already because of not finishing my tutorials when I had originally proposed. Fortunately I had overestimated in this department and instead of needing the full time I was able to finish it in eight hours initially. However because of the later decision to re-design I did end up going over again.

I was then able to start production Initially I had allotted fourty hours to this section of my SMLP but this had now almost been cut in half by other areas of my plan taking longer than expected.

When I first decided I wanted to use Flash for this project one of the factors was that I wanted to make images open in a method I had seen on the web already. What I found out after I started the project was that this was a method called ‘Lightbox’. I wanted to incorporate this into my page also http://www.huddletogether.com/projects/lightbox2/.

A major problem that I did have now was that once I had built all my elements for my webpage I realized that it was actually quited a difficult layout that I had given myself and so much of the time I was using in class in the penultimate lesson was eaten up by trying to correct my HTML and CSS coding to make my site work correctly. After class this still wasn’t working correctly and so I consulted Web Standards Solutions in which I immediately found the problem and my 2 collumn layout code had been over complicated and I just needed to slim this down, I had put in ‘clear’ which wasn’t needed I had just needed to use ‘floats’ and ‘margins’.

When it came to actually producing the Flash elements of my page I felt really quite confident at this stage and when I produced the border of my page in lights I did this without any aid at all.

The Slideshow I produced however was done using a tutorial but this went very smoothly. http://www.flashvault.net/tutorial.asp?ID=118

Towards the end of the project my biggest concern was making the site validate in HTML. I had thought this would have been simple as I had not used flash before. What I soon realized was that the Flash code was not compliant with web standards.

To resolve this I looked at the ‘Satay’ method which involved altering your Flash code, unfortunately I felt it was too late for this as I had all my elements finished. http://www.alistapart.com/articles/flashsatay/

What I decided to go with was the UFO method which alters the way in which the Flash components are embedded in your HTML document. This was very difficult to get a grip with and it took up a whole day making this work.
http://www.bobbyvandersluis.com/ufo/index.html

In addition to this I also learnt a very basic piece of PHP which I didn’t set myself to do but I thought would be good to have a taste of. I completed a tutorial and I am pleased to say that the PHP on this site is in working order.
http://www.kirupa.com/web/php_contact_form.htm

Overall I feel that the project has been a success, I feel that my initial SMLP was well thought out and that I had included everything in it that I needed to achieve. I feel that the only reason for me being of schedule is due to personal choices that have been in error such as my attempt to make my own site to hold my written documentation. This information in now in a blog instead which I think is a much more appropriate place.

I feel that I have benefited from writing the brief myself, I think because I wrote the document I was aware all along of what exactly needed to be done and when. When the brief is given to you by somebody else then it is more difficult to remember everything required with referring back.

I think that the SMLP has also made me more aware of thinking about how long tasks take to complete.

I am very pleased with my end product and am happy to say that I met all the goals set in my SMLP and that the site validates in both HTML and CSS on the W3C site.

Screen Re-design

Screen Design

Screen Designs

http://www.drewellis.co.uk/screen_designs/laura_home.pdf

http://www.drewellis.co.uk/screen_designs/laura_gallery.pdf

http://www.drewellis.co.uk/screen_designs/laura_contact.pdf

Competetive Analysis

1. http://www.123photography.co.uk/indexportraits.html

This is one of the top sites that comes up when I search for a portfolio photographer in Yorkshire. This would be one of the competitors as this site offers a many different types of photography including Glamour, which would be the market Laura Bainbridge would be aiming for.

The sites appearance is quite corporate and the layout is rather cluttered. There doesn’t look to be too much thought to have gone into the layout and for a photography site there appears to be quite a lot of text.

The layout and links are not clear. The main navigation at the top are obvious enough but aren’t particularly attractive to look at and look quite amateurish.

Having clicked onto the Glamour Photography Portfolio to look at the gallery I am navigated to a page with different layout to the main pages which is a design floor. Clicking the images makes them open up in a new window.

I feel that this site would have benefited from having a more regimented layout that was consistent throughout. I don’t think it is a bad thing that the images open in a new window but I think there are more attractive ways of doing this, such a using Lightbox.

2. http://johngardnerphotography.com/portfolios.htm

This site has some really great examples of work and the initial impression I got from the site was a professional one. On further investigation it is clear that the design of the site has errors.

A brisk flick along the top navigation bar highlights the errors with the sites layout; certain pages have a completely different banner that is a totally different size to the others. Even the pages that have a banner that is the same size all have a different image behind the banner which again provided problems with consistency.

In addition to the banner problem the pages with the smaller banner also are wider and the navigation shifts position also. This gives the impression that you have left the site and I was inclined to press the back button to get back to the site rather than use the navigation links available.

The thing that the two sites so far have in common is that they have examples of more than one genre of photography which is broken up into categorys. As for this project I am aiming to make a small site I will only be displaying one genre of photography on the site. Laura Bainbridge has provided photos of different genres but as there will only be one gallery I wouldn’t want it to look confused.

Overall the work on the site is strong and some of the design elements are nice, such as the banners, unfortunately the whole thing is let down by inconsistency.
3. http://www.imagemaker.org.uk/index.html

This is my favourite site so far. The look of the site is by far the most professional and slick in regards to design. The navigation is clear and the content is primarily kept down to the photographs which I think is a bonus.

One thing I would point out about the navigation is that when on the home page you are presented with a set of images which are the navigation and unfortunately there are no words to support the images. The result of this is that you don’t actually know for certain where the link will take you. You are able to hazard a guess by the look of the pictures but it isn’t made clear until you actually go into the page.

Another area where this site is better than the others is the way in which it displays the photographs. On this site the pictures are presented in a square and so are all neatly presented are within a bounding grid. Clicking on the image you want to view then makes it appear in the box to the left.

This is something I would like to incorporate into my design to allow the audience to view the photographs without navigating away from the page within which they thumbnails are contained.

Overall I think this a really successful site with little wrong with it and I would hope that I can make a site with a similar amount of functionality.

Delivery Requirements

XHTML 1.0 Strict
XHTML will be used to make the structure of my site and hold the content. The content will be in ‘Divs’ and I will use CSS to then arrange my divs and control the design and look of the site.

CSS 2.1
I am using CSS to keep file sizes lower and coding faster. CSS will provide a better result in search engines and help to adhere to the W3C guidelines 1.0. I will use CSS 1 and CSS 2 as they are the most widely supported versions in current browsers.

Flash
When I am using Flash to produce elements of my web page I will be using Flash CS3. Should the elements produced contain actionscript it will be implemented in Actionscript 3.0 as this is the latest version of the language which is supported in Flash Player 9.

PHP 5
PHP 5 will be used if I am to use a form element. I am using this version of PHP as this is the latest version that is supported by my web host. I will also use PHP to enable people to contact my client.

Target Audience

Kate is an 18 year old female Fashion student who has recently started her study at University. Kate is an attractive girl and has aspirations of working part time as a model whilst she studies and is supported by her parents, she has no previous experience. Whilst study she works part time at Top-Shop doing 15hrs per week at £6 per hour. In addition to working she has a student loan of which she receives £3k per academic year. She is experienced with her use of the internet as she has grown up using it quite regularly to send emails and chat online, more recently she has used it to access online profiles such as ‘Facebook’. Kate accesses the internet daily to check her profile and to chat to friends, access is mainly recreational but she also uses the internet to carry out research for her degree in Fashion. Kate is living in Halls of residence and so access the internet from her university building and in the university library. The university offers use a modem and has an 8mb broadband connection, internet explorer 7 and a 17” monitor. She enjoys socialising, movies and reading in her spare time. Kate visits ASOS, River Island and Office to shop online making one purchase every 2 weeks.

Simon is a 25 year old male who works full time in customer service. Outside of his role in customer service he is signed up with a local model agency that spotted him whilst he was out shopping. Simon earns a basic salary of £18k per annum but with his bonuses he usually tops this up to around £22k. Simon is between novice and experienced with internet use and accesses the internet for an average of an hour per day to use email and look at online profiles. Simon uses the internet at work which has a 17” widescreen, broadband connection and uses Internet Explorer 7 Simon currently doesn’t have internet access set up in his rented flat where he lives with a flatmate. Simon enjoys socialising, Music, Football and Technology and also likes to play computer games. He is very fashion conscious and always makes an effort with the way he looks. Simon visits sites such as Play, BBC Sport and Top-Man and makes an average of one online purchase per month.

Goals

• To design a site that meets with the W3C guidelines for accessibility.

• To create a website in XHTML 1.0 strict that validates.

• To use Flash in the design of the page.

• To produce a web page that is appropriate to the target market.

Learning Development Part 5

Overall I would say that I have picked up a decent amount of information form doing these tutorials and if nothing else I have become quite familiar with the language/terms associated with Flash. I feel much more confident that I will be able to go on and produce a webpage myself. To test what I havd learnt I decided to try and produce a banner for portfolio site just to have on there temporarily until I come to design the site at a later date. I wanted to try and create a banner that looked like a neon light had been switched on just after you accessed the page.

I was able to do this simply enough as it wasn’t a complex idea and included processes I had used in my previous tutorials. I was pleased with myself however that I was able to do this with minimal referral back to the tutorials.

The only major problem I encountered was that I couldn’t remember how to stop the animation looping. I was able to stop this by adding the smallest and simplest piece of Actionscript which was ‘stop();’which solved this. I looked this up in Flash CS3 Proffessional by Katherine Ulrich.

Then I decided that the action was too quick and people might not notice the animation at all so I added some extra frames so that the animation didn’t start immediately.

The resulting piece is something that, although very simple, I am very proud of as its my first piece of self designed and produced Flash.

Self Designed Banner

Learning Development Part 4

To finish off my tutorials I went back to Flash 8 and completed a tutorial that taught me how to create some simpler buttons that changed colour when hovered over. These where much easer to create than the ones I tried to produce from scratch.

Also the tutorial explained how to set a target area for a link. When looking at the example at the bottom of the page the clickable area of the logo is actually wider than text.

Button Tutorial

What may be the cause of this feeling of ease with the built in tutorials is that they often provide you with the design elements and so it is more like putting a jigsaw together than creating a working document from scratch.

The final tutorial I completed was to do with making a website in flash that meets with accessibilty guidelinesAccessibility. This required me to add a tab order to elements and provided text for a screen reader to follow.

This was a relief to find that this was actually possible but not only possible it is actually possible to do it quite simply. Flash actually prompts you in certain instances to add these elements much the same way that Dreamweaver makes adding alt tags simple. I think it is elements such as this that makes it a very user friendly piece of software.

Learning Development Part 3

In this tutorial I was to create a re-usable menu button which I thought would be a useful tutorial to complete and would teach me an element I could incorporate into my upcoming piece of design.

Sadly I found this tutorial difficult to follow and I wasn’t able to complete it with any success. The problem I encountered was that the elements I was creating were not functioning or moving on the stage as the tutorial was telling me they should.

I thought that this may possible be down to the settings of my version of Flash but in addition to this the writer of this tutorial was not as easy to follow as the previous writers.

After this failed attempt I decided to go back to building a banner. The reason for this was that there was a lot of changing layers and animating instances involved in the creation of buttons in one single button which had me confused and so I felt I might have been trying to run before I could walk.

The next banner I attempted had a fixed graphic and fixed text but also had an animated graphic in it.

Completed Tutorial

This was obtained from a link in the Flash help section that took me to the Adobe website, there were a few choices on there but this looked to be the most suited to my current level, novice.

This again was a much smoother operation to complete and I pulled it off without much of a hitch and it works well.

What I feel is that there is a distinct difference in quality between the tutorials written for the product and those created and posted on forums and on independent websites.

Learning Development Part 2

However the following tutorial was to create a banner with an animation. Unfortunately I got quite mixed up with my measurements during this tutorial and was a bit lost with the layers. I had realised half way through that I must have the measurements wrong and so tried to backtrack through the tutorial to try and find where I had gone wrong.

Unable to locate where I had gone wrong, as my measurements all appeared correct, I decided to start over. Thankfully my second attempt at the tutorial was much smoother and I was able to complete it.

Failed Attempt

Even though the first attempt went wrong it still functioned as it was supposed to and so it wasn’t a total failure.

Successful Attempt

In this tutorial I was introduced ever so slightly to the use of Actionscript. This seems like it quite a complex mark-up with much more script required to perform single tasks. On the face of it I would think that this may be quite difficult to learn and, if possible, I will try to keep my learning of Flash to using the Flash interface and leave the learning of Actionscript for another time.

This concluded my tutorials that I learnt within the program of Flash 8. The next tutorial that I undertook was in Flash CS3 and this program had a slightly different layout for its interface but overall I was able to transfer my knowledge, already accumulated, across with little set back.

Learning Development Part 1

The first tutorial that I did was a simple one that was to introduce me to the very basics of Flash and this was built in to the actual Flash program itself, in version 8. The tutorial stated that it would take approximately an hour however what I actually found was that it took me about two hours.

The tutorial asked me to create a circle on the stage. What I learnt very quickly is that the stage is actually what the document space is called and it is referred to as this by all the tutorials I have undertaken from a range of sources.

When I had completed this tutorial I had been introduced to the basics of Flash which meant that I understood what a Timeline was and also I had been introduced to the term Tween. Tween is a term that means in-between and is the animation created by Flash from changing the appearance of one object between two key points within a timeline.

What I had produced in the tutorial was a clip of a round circle moving between two points.

This tutorial went very smoothly and I felt really quite confident with my progress and that I was going to find the program easy to pick up after this short tutorial.

Simple Flash Example

Research Part 3

Research using weblogs.macromedia

I have located a page that shows some examples of accessible Flash when using a screen reader.

http://www.eduplace.com
21/01/08

This sites home page has alt tags on it however once you enter the flash section of the site there aren’t any alt tags so I would assume at this point that this isn’t possible to achieve for buttons made in Flash. The list from which I found this site however claims the site is accessible and that a screen reader can be used on it. On a quick look into roll over alt tags I found an article and tutorial on how to do this at

http://www.tutorio.com/tutorial/flash-rollover-alt-text-or-captions 21/01/08

This site explains how alt tags are possible to use with a flash file and the example contained in the document shows how the alt tag can be style to match the design of the page which is something I like the idea of.

Looking further than alt tags I wanted to find out how accessible Adobe Flash is as I have set myself the goal of making my site in line with W3C Guidelines 1.0 and so it is important that this is possible.

I have located this document

http://www.adobe.com/resources/accessibility/best_practices/bp_fp.html

which has been issued by Adobe themselves who clearly have made a concerted effort to make their software contemporary.

So in summary I have found that Adobe Flash offers me as a designer the opportunity to create something quite extraordinary and spectacular in terms of design but in addition it also offers the ability to create sites that are accessible. What I would imagine is that it would be difficult to achieve both a truly original interactive site that is also inline with all or most of the accessibility guidelines.

What I hope to achieve is something that can meet the guidelines but also be more than just a standard site in terms of design.

Research Part 2

Research using bestflashanimation

1. http://www.aeonflux.com/

This site has a shorter loading time than that I have looked at previously. This has a more traditional feel to its navigation with the side panel system in use, I feel this is much better when playing to a large audience in terms of usability. This is clearly the difference between a site that is aimed at an American audience and the previous sites that were aimed at Eastern audiences. As this will be my initial attempt at a flash site it might be a better way to go to have the navigation set out in this way.

2. http://www.anovadesign.com/

This site of all the ones I have viewed seem to have the least visual flair and gimmicks. This page is more like the traditional type of site produced in HTML and CSS. The one thing I have noticed on this site is that there are what appears to be alt tags. These are not instant like those that appear usually however and they themselves have been designed to fit in with the style of the site which makes me wonder if they are actually alt tags that conform to the W3C guidelines. Obviously this is something that I will have to research afterwards.

3. http://www.billyharveymusic.com/

With this site I find the layout the most confusing of all the sites so far and wouldn’t consider this to be a good piece of layout design although I do think the idea itself is very inventive. Again this site makes use of the traditional side panel layout but the reason for the confusion is the secondary layout within the page.

4. http://www.planetinneed.com/

On this page I have noticed the longest loading time, if it wasn’t then the animation that accompanies the loading seems to make the load seem longer. The initial load unfortunately isn’t the end of it there are more load times within the page. As I have found this frustrating I will need to ensure I am conscious of this when creating my own pages.

Research Part 1

Research using FWA

1. http://ludoescrime.com/?color=0xFF0000

The first thing I notice is the amount of time it takes for the page to load. Firstly there is a splash screen almost which you click to enter, then the loading page. Once loaded the 3d effects begin. There is music on this site which is not something common amongst pages not produced in Flash I imagine, does Flash make adding a sound file easier?

This page once loaded is a 3D page and navigation occurs due to the site rotating through 180 degrees on a vertical axis, I haven’t seen this before and it seems quite impressive. The overall feel is a site that is very trendy and modern though, I imagine, not a site that conforms with the usability guidelines. I can’t see any alt tags which must be in relation to the file type of the button and images or else this site doesn’t concern itself with usability. This is something I will look into when looking at further sites in Flash.

2. http://www.axeeffect.jp/axebusters/

Again this site suffers from loading times but once loaded you are greeted with a video with the option to skip. Again this isn’t the type of site I have yet come across when conducting research on this course. It seems that the types of site produced in Flash are those used by corporations for a means of advertising. The sites focus seems to be their interactivity. This site very much has the mood and feel of a computer game or a Anime cartoon. Again I didn’t notice any alt tags, is this possible?

3. http://www.upleat.com/

Initially on this site loading is not a problem though it does occur later. The loading screen has been designed in an interesting way on this site which makes the waiting process a little easier to cope with. On this site it becomes apparent to me that the site navigation is not like that of usual site. It is not possible to click the back button and the site navigation all happens with one page. This will be something interesting to find out how this works, it seems a complete mystery to me right now but I’m certain it will make sense once I begin tutorials.

4. http://www.yoshinoya.com.sg/

This site is definitely my favourite so far, I like the way it moves around and the navigation seems easier to understand although the idea of it is quite complex. The site again seems to based on a game and it is very interactive. The thing that stands out most and what I like about it is the animation and the way the site moves, I also like the style in which it is produced, this may be because it is in flat colour which is similar to my style of design.