Mary Slessor Website Flash Animation

Gary also said that he would like a "kids zone" to the website. For this I am creating an animation to tell the story of Mary Slessor this will also feature a voice over.

Here are some screen shots:

Carebears Game

These are screen shots of my game so far. It is carebear based and follows quite a basic platform style. Controlling Love-a-lot bear with left and right arrow keys and the space bar to jump, the aim of the game is to jump from cloud to cloud, collecting items and reaching the Rainbow at the end of each level.

Paul Wyatt

Writer, Animator and designer, Paul Wyatt has worked with many big name brands including, Sony, BBC, Virgin Media, British Airways and Smirnoff. He is a regular contributer to .net magazine which is where I came across his name.
Looking through his site he has some great work I especially like some of his animations such as Same Sky and Meet Max. Unfortunatley i can't provide links as the site is purely flash, but i would recommend a visit.

Oliver Beaudoin I ♥ U

I love this!!!
Its so simple but so cool! and the music is funky too. Its got me really excited about doing more animation. It reminds me of an animation I did for my Foundation year with the limited colours and silhouette style but obviously his executed with much more sophistication.

Other youtube Gems

Grocery Shop Boyz

One idea I had was to create a Fruitmachine type interaction. This would act as the 'animated introductory section' that we were required to create. It would allow the user to stop and start the tweened animation by simply clicking the stage and also have a 'skip' button as required.


Another idea was to create a little car that would drive to 'The Grocery Boyz' shop. This would be in a similar 2D stlye of the image below.

For the main site i had a few ideas. I originally thought of this theme....but after a brain storming session I came up with some improved ideas. One I had was to simply use images like the ones below as the background. These would be different on each page and there would be a white area for the content.

However, my preferred idea was to use a trolley. The links would run along the handle while there would be the logo on the front of the trolley where they often put advertisements. This would link well to either of my ideas for the 'animated introductory section and could incorporate a photographic or illustrative style.

While searching google for inspiration; I came across this image.

Its from this site http://www.trolleywobble.com/trolley.htm. I like this mainly because of its simplicity. Its aesthetically pleasing and quite quirky.



I also found this...

Its quite irrelevant but its very impressive. Its by Ptolemy Elrington is made from a rescued supermarket trolley. He has made a whole range of these on the theme of the riverbed where the trolleys are rescued from.

and this by Brendan Jamison, made from coloured wax. He also has a series of these ranging from JCB buckets to helicopters. Other mediums he works in are sugar cubes, wool and the more traditional:bronze.

again this is quite irrelivant but tangents are always good!!


flash tutorial

Fireworks Banner

We were asked to create a flash banner promoting firework safety that appeals to all ages. This should aim particularly to families and incorporate inteactive elements.

Links to firework safety advice
fireservice
saferfireworks
fireworksafety
rospa
berr
fire

Resources
Rhyme and history of Guy Fawkes
Flash Tutorials

Who will the audience be?
The audience is anyone of any age although we were asked to create a design that would appeal especially to families, although personally I think the people that need to be educated on the topic of firework safety are teens.

What message needs to be communicated?
That fireworks are potentially dangerous in the wrong hands and you can still have enjoy fireworks while being safe.

How will FLASH appeal to the intended audience?
FLASH elements attract the audiences attention by allowing them to interact. This encourages the user pay attention to the message that is trying to be passed on.

What are your designs for the visual appearence?

How will the interaction work?

Does the interaction increase the ability to communicate the intended message, how?

Lecture Task

ITEM 1
This interview with Dan Saffer, is very informative. He goes into quite a lot of detail and also gives good links. He gives incite into his world and some good advice to the budding designer.

His personal site
His blog has a lot of quirky posts. I find it interesting to see the way designers find inspiration.







He also has written a book: Designing for Interactive
Other links mentioned:
Stamen Design
Stimulent
Dopplr




ITEM 2
Through Joel Schafers brief answers to the interviewers questions, he parts with some quite useful links




Cap & Design- a Swedish magazine for...
Web Desiger- English magazine

Dope Awards
Kirupa
Flash kit
jsgd.se
strange fruits


IDEO
This website instantly grabbed my attention with its bold purple hompage and interactive elements. I hadn't come across IDEO before so I wanted to know who they are. This was answered straight away, by hovering over 'WHAT WE DO' giving me no time to get distracted or loose interest.
As you navigate yourself around the site, the visual stimulus depreciates some what as the site's objective turns to a functional website with informative, however interesting content; rather than design. This made me feel a bit let down to a certain extent....

The site is quite easy to navigate around although I felt a bit overwhelmed by the quantity of links.
SONY
Sony have clearly designed this site to suit the audiences needs. This site is funtional. People will visit it wanting to find information or purchase their products and thats exactly what they can do. It has some nice elements of design like the bar at the top but interactivity is minimal and I didn't feel any urges to explore the site. Like the Sony brand i'm sure its faultless in its funtionality and usability, however some elements of flare would make it more visually stimulating.
APPLE
very much like Sony's site; the design of the website is quite simple which makes the information easy to navigate to. This site is for people wanting to buy apple products and so it gives the audience the information they need and doesn't over complicate things with fancy design.
NOW
I'm not a great fan of the new VLP. The main thing that I find a bit frustrating is the layout. The areas of the site that are used the most (timetable, email etc) are small and squashed at the top of the page while the rest of the page is covered with unuseful information and white space. Its trying to be a social network, with your own profile and buzz, which is also hidden.
One benefit is the library search which takes you where you want to go quite painlessly.
The visual design is very simple and unlike the VLP you can't adjust any settings apart from the font and font size as far as I can make out.


FWA-flash content
(3) For 2 websites with FLASH content from http://www.thefwa.com/ discuss them in your online journal using the same criteria as above.

(4) Have a look and go at the FLASH tutorial available for FLASH CS3, via a link in top right hand widget on the Exploring Multimedia homepage, do this before the seminar in Week 14 28/10/08.

Interactive Narrative

The idea of this peice didn't come from research, it was the first idea that came to mind after reading the brief so i went with the flow!
I had used Adobe Flash prior to starting this course and so knew the basics and roughly what i could achieve with the software. Although not having used Actionscript or buttons at all I had to gain a basic understanding. The template we were given allowed me to do this plus asking students in the years above and lectures helped!




I had taken a 360degree view of Rome's Colosseum when I was there last year, and so I used these images as the background.






I also had this photo of a Roman Soldier and my sister, and used it to create a game style interation. The idea is to navigate yourself around the Colosseum and when you spot the soldier, take a photo of him.








I got this image from google. Tracing it in flash allowed me to edit the image, so i was able to create a window in the back of the camera and make buttons etc.



I am quite pleased with the final outcome of this peice however, i would've liked to create a zoom function so the viewer could zoom in and out of the images. I found using Action script quite complicated, and although i eventually got it to work it kept throwing up errors due to very simple human errors such as an odd {. this i found quite frustrating!