Flash Slideshow

Here is a slideshow that I created in Flash:

Flash Training

Last week we had Flash training. This was great training as we covered alot of the basics. We were taught how to do motion tweening and shape tweening. We also learning about buttons, movie clips and graphics. It is important when creating a flash movie that you don't generally draw straight onto the stage. One of the times you can do this is to create a mask. However, you generally create a graphic for a still image, a movie clip if you want to apply tweening etc, and a button speaks for itself.

We also created a basic flash photo gallery using actionscript controlling the movie. I also enjoyed creating a MP3 player, using actionscript to show the position and duration of the song.

Here is a motion tween I created, with the car following a motion path:

Sounds Like Music

Last week we had 2 days training on creating sounds and music. The first day consisted of an overview of Audacity, which I had used once before when we created our digital stories. It was good to have a more detailed rundown on how to use this software. We were also given a general overview of the different file formats for music such as mp3, wav, aiff, oggs and midis. I hadn't previously realised that midis work abit like xml files, in that they are a way to store information and a 'container' for music. For instance, on the second day we had a look at Reason and imported some music midi files. I used the track 'Men in Black' and assigned different instruments to e.g. the drums, guitar etc on the track. It sounded similar to the original, but not the same. On the first day on Audacity we all recorded our voices with reading out lines of a section in the novel Moby Dick, and then saved them as wav files. We then imported them all into Audacity and tried to alter the levels of each person's file to obtain similar sound levels. We were also taught about 'clipping' which means when the sound that has been recorded or imported is too loud and 'clips'. You can then then use the effect of 'normalising' the levels to sort this out.

It was a helpful couple of days, although I think I will need to practice making music in Reason to become more comfortable with it.

Dreamweaver Brief Mission Complete

The Dreamweaver Creative Brief has now been completed. We have finished testing, and the final version is now on the web. The website can be viewed at:

www.d10dev-studio.com/NicolasFinch/factory

I am pleased with the final outcome. We had a meeting with Martin at Atticus last week which went well. He said he liked the design, which was in keeping with the style of the magazine, and that he thought we had done well to get as far as we had in the short space of time.

This week has entailed writing self-evaluations of our performance on the project, and a joint team document logging all of our research and stages of the development. I think that for this website, if we did further development, it would be good to have a fully integrated content management system, and for the video showcase, a dynamic page where when you click on the thumbnails of the video it loads the clip in the same page.

Overall, I think that it has been a rapid learning curve. I have learned CSS, some basics in ASP.net, and what is involved in the design mock up stage.

Website mock ups and build

We have completed our designs of the website. It was good practice to learn to create a mock up in Photoshop. We created a few samples, and emailed them to Martin to choose and comment on which one he liked best. We tried to keep the design in line with the style of the magazine, with an emphasis on photos. The site will have a random image appearing from the magazine as a background to the site everytime a user loads the page. This will help to give a fresh look to the site. There is simple navigation and a feature is the ability to download archive PDFs of previous issues.

Martin came back to us and decided that the design below is the one we should go for, which we were pleased about:



So we have started to build the content of the site using Cascading Style Sheets. My role has mainly been to build the template using CSS, and to create the Access databases, mailing list, subscribe and contact forms. This has been really useful for me, as I am new to CSS and ASP.net for the databases. It has been a steep learning curve. Nic has been looking into the News blog and tweaking the CSS and formatting, which has been important to get the site layout correct.

I was pleased with my first go at CSS as we ran it through the W3C Webstandards validation and it came back validated and error free.

For the rest of this week, we will finish placing the content into the site, checking the layout, testing it, for the Friday deadline. We have a meeting with Martin at Atticus tomorrow to discuss the progress of the brief, and next week we will present it to the client.

Dreamweaver Brief

This is a bit of a blog catch up. We have had some training on Dreamweaver, and have now started our first brief. The training included the following:

Navigation and file structure.
A tour of Cascading Style Sheets.
ASP.net and the creation of forms linked to Access databases. This is useful for mailing lists and subscribe forms.
A mail form for contact details.

I found the training on ASP.net helpful as it gave me a start to learn something I have always wanted to know how to do. Having used Access before, there was some element of familiarity. However, ASP.net is completely new to me.

We were given our briefs and put into teams of two. I am in a team with Nic and we have the Factory Magazine brief. There are 2 teams that have this brief, and the 4 of us went to see Martin at Atticus Media who set the brief. He outlined what we needed to achieve, and some background to the client. The website needs to be in keeping with the style of the magazine, which is stylish and has a strong emphasis on photos.

It was outlined to us that, taking into account we are trainees, some aspects of the brief are to create mailing list and subscribe forms using ASP.net, download PDF options for archive magazine issues, a video showcase using Flash for movie clips, and a news update page. Also on the brief was the creation of a website to download to mobile phones, however, it was stated that we have to just understand how this would be done.

It is a challenging brief for our first one, but I am looking forward to learning ASP.net and how to design a magazine site.

Maya FTV Ident Animation

All of last week, we had intensive training on Maya. It was quality training. We covered a vast range of topics including modelling, animation, dynamics such as putting a wind effect on an animation, and rendering.

We were given a brief to produce a TV animated ident for a fictional music channel. I thought of FTV as the name for my TV station (F for future or Funk music). I created a dancefloor scene with animated spheres which have hair and eyes to become characters. I included a few coloured spotlights to give a dancefloor impression. I also animated the logo to come down in a box that unfolds, and the tag line - the future of music here and now also snaps into view.

It was a challenging week, as we had to learn alot in a few days, but I am pleased with the outcome.

Here is my animation -

Why I Bothered - Digital Story

Digital Storytelling

This week has been spent on creating a 2 minute digital short. We were given a few lessons in what makes a good story including -

What is digital storytelling -
-Modern expression of ancient art of storytelling to share knowledge, wisdom and values.
-Stories were told around the campfire, then moved to screen, then to the computer.
-Used by community groups.

What's needed-
-Using low cost
-Desktop computers
-Digital capture devices - cameras and flatbed scanners
-editing software
-personal photo archives - a compelling short multi-media story
-can be published on internet or transmitted on t.v.

Resources - www.storycenter.org - runs many workshops.

You choose the story to tell. You keep control.

7 Elements -

1) A Point of View (personal view)

From the 1st person. Think about a goal and then work backwards.
Sometimes we forget the story, but we remember it's point.

2) A Dramatic Question

A desire-action-realization model.

3) Emotional Content

Moment in a story where we are emotionally engaged. Can happen anywhere.
This effect is a result of a truthful approach to the material.
Examples are death and our sense of loss, love and loneliness, confidence and vulnerability, acceptance and rejection.

4) The gift of your voice

Use your own voice in the voiceover.

5) Power of the soundtrack

We all walk around with a soundtrack running through our head.
They set the mood of our day, can perceive the visual information streaming into our eyes.

6) Economy

Show what is necessary whilst keeping the story visually rich and moving forward.

7) Pacing

The rhythm of story determines much of what sustains an audience interest.


Getting Started
Finding your story -
Start with a small idea.
As you build up your raw material, you are also working your storytelling.
Get feedback, reading material to someone .

Genres of Story
-Character stories - how we are inspired, loved, find meaning. These stories tell us more about ourselves and details of our life story.
-Memorial stories - honouring and remembering people.
-Story about an event in my life - To travel or go on an adventure is an invitation to challenge ourselves, to change our perspectives about our lives, to reassess.
-Accomplishment stories - these stories easily fit into the desire/struggle/realisation structure.
-Story about a place in my life - insights into this place give a sense of your values, and connection to community.
-Story about what I do - we all have unique ways of perceiving and valuing our jobs.
-Other personal stories - recovery stories - overcoming a challenge in life, like a health crisis or personal obstacle is the archetype in human story.
-Love stories
-Discovery stories - the process of learning is a rich field to mine.

We also had a script-writing workshop by Catherine Lindstrum which was helpful. She went over our scripts with us. She emphasized that we need lots of detail to make a story interesting. I rewrote my script to try and adhere to her suggestions. After much deliberation, I have decided to do a piece on Why I came to Wales, and why I have stayed in Wales. It was a challenge to get the photos to fit the script, but I finished my story today. I used Audacity to edit my voice over, and I used Adobe Premier to piece it together with music and pictures. I am quite pleased with the finished product.

Multimedia Presentation

This is abit of a blog catch up. Last Friday, a few of us did our presentations on multimedia pioneers. I did mine on Douglas Engelbart. It went better than expected, and talked for about 15 minutes with questions afterwards on the man who pioneered the mouse, amongst other things. I spoke about Engelbart's vision of augmenting computers to help us to share knowledge, and then be more able to solve problems. I included a clip from the famous 1968 'Mother of all demos'. I also showed a timeline of how the design of the mouse has evolved since its 1968 inception, culminating in the Mac's "Mighty Mouse".

Illustrator training and BBC

On Tuesday we had a day's training on Illustrator. This was good because I have never used it before. This is largely because I have boxed it as an artist's tool, not to be used by amateur designers like myself. Although I find drawing challenging to say the least (!!), it was great to have an overview of how to use Illustrator. It was a pleasant surprise to discover that when you draw with the paintbrush tool, when you have finished drawing your line, Illustrator helps to curve it properly.

We learnt how to join up separate lines and pathways. The mesh tool is also useful, especially if you are wanting to create a globe effect. You can also create your own symbols and paintbrushes.

We were given our brief on the mock up of a game or website. Initially I thought I would like to do the game, as this is new territory for me. However, after an afternoon on Illustrator trying to draw a character that looks like a chef, but looked more like the Pope instead, I think I have decided to do the website assignment. I do find drawing a challenge and it can be frustrating as I know what I want to produce, but struggle to draw it.

Yesterday we visited the BBC New Media department. This was interesting and informative. A range of people from producers, developers, designers and project managers came to speak to us. We had a run down on how they operate and the issues involved in creating Flash and HTML sites, and what considerations each person has to be aware of depending on their role.

Photoshop training and S4C

Yesterday we had Photoshop training. This was a good fast-track to learning shortcuts and correct ways of methods such as masking. Although I have used Photoshop before, I am self-taught, so it is good to get the low-down on the right ways to do things, and I have never used masks before. We had an overview in the morning, and then in the afternoon we put into practice what we had learned with editing some photos.

I began to edit a doorway picture. I learned a great way to trace a part of a photo that is a tricky shape was to use the extract command. This is great to know as I have struggled to trace images before. I also learned how to turn text into an image by rasterizing it.

We then went to visit S4C, and met the team on the New Media department. Their team was smaller than I had anticipated, but it was good to see how all the roles in the team fitted together. The manager, Rachel, gave us a run-down of what they do, as well as a brief description of the issues involved with making a bi-lingual website. Issues included- when leaving space for text you have to leave alot more space for Welsh as it takes more text. Also, when thinking of short words for navigation, when you think of the English, you have to think what would be the equivalent in Welsh. She also mentioned what to think about when designing a Flash game for pre-school children - such as obviously they can't read, so use of text is minimal. Also, their coordination is still in the early stages of development, so their mouse control is less. To overcome this, all the graphics have to be big and spaced out.

It was a useful, if brief, look at how the media in Wales organise and operate their website.

Cd-rom evaluations

Yesterday we evaluated some cd-roms and dvds. This was a good exercise at using the 10 Jakob Nielson's Heuristics to evaluate each one.

The 10 Heuristics are:
Match between system and the real world -
Looking out for how well the design, words and icons are similar to what a user would be familiar with in the real world i.e. no jargon.
Visibility of system status -
Is there any indication e.g. on a flash site of the percentage download, or feedback to tell the user where and what is happening on a site - such as buttons lighting up with the mouse rolls-over.
User control and freedom -
How well the site is structured with navigation - i.e. is it easy for the user to go forwards and backwards in one step, and also get back to the main menu.
Error prevention -
Have there been steps taken to prevent errors from happening and give warnings to users to stop them doing something that will cause an error.
Recognition rather than recall -
Does a site/cd rom etc have a simple and consistent way of navigating around it and methods, so that the user quickly recognises and remembers what to do , or is it more complex and they will have re-read and understand what to do.
Aesthetic and minimalist design -
The site should have a good looking and minimalist design, with relevant words because every word that isn't relevant will compete with the ones that do.
Flexibility and efficiency of use -
This includes looking for accelerators - things that help the advanced user to skip steps and e.g. get back to home by clicking on an icon.
Helps users recognize, diagnose, and recover from errors -
Error messages that have no codes and help the user in plain language to understand and recover from the error.
Help and documentation -
If needed, it should be clear, easy to follow and the file not too large.
Consistency and Standards -
Navigation, fonts, colours, buttons, and symbols should mean the same thing throughout the site/cd-rom or dvd.

We tested 5 different packages -
Go for Gold (an interactive cd-rom with games and learning related to the Manchester 2000 Commonwealth Games). This wasn't very good as it had horrible graphics developed with Director, the games weren't very engaging and the layout was confusing.
Music dvd - this was a clean, great graphics layout, with aesthetic design. The navigation was good, and its only flaw was some of the font sizes were abit small.
Being John Malkovich dvd - The design of the menu was good, drawing themes from the film. However, the information icon lead to a link that wasn't very helpful as it just described what all the different icons meant, which we later discovered wasn't constistently used throughout the links. Also, there was little in the way of accelerators and the chapter selection was limited as you have to use the arrows.
Learning Italian cd-rom - this wasn't great as the first cd didn't work at all on the pc. The kids version did, and some of the games were effective learning tools, but there wasn't much feedback on the buttons, and the layout was abit confusing.
Eye Toy PS2 game - this was an excellent game. Once we had grasped the navigation around the menus using the camera almost 'touch screen effect'. The help animated file was excellent and very clear, and the games were engaging.

Overall, I thought that this was a good exercise to do, to get used to evaluating games, dvds etc, and understanding where Heuristics play a part in planning.

Heuristics made simple

This afternoon we have had a presentation on Jakob Nielson's Heuristics. What's that you might ask? Nielson was a pioneer in rules for usability on websites. It was great to have a run-down on the 10 usability heuristics (or 'rules of thumb'). We were shown examples such as how the bbc website is great at layout, remembering that people read from top-left to bottom-right. Also, looking at their help documentation and how it is easy to read as it is not a massive pdf file to download, but is right there for if you have a muppet-moment and need something clarified.

Another key rule is to be consistent with colours, menus, as well as providing feedback for users by highlighting things when they click on certain links/functions. These rules are all well and good as far as I am concerned with making websites the best they can be.

Evaluating Websites

Well it is day 3 of d10, and for a quick summary of yesterday afternoon's task, we were given 4 websites to evaluate with the following questions -
1. How easy is it to use?
2. What audience is it made for?
3. Is it a commercial/educational/entertainment product?
4. Is it obvious how to use it, even before you click?
5. Can you tell how it was made?
6. What clues are there?
7. Does it contain mostly image/text/sound?
8. Are you satisfied with the way it works?

We evaluated the following websites -
http://www.billyharveymusic.com
I thought this was quite a good music site, with some interesting navigation, once we had worked it out. It is quite an interactive experience for the user with different animated photos to click on.
http://demo.fb.se/e/if/badluck
This was an advertising/education demo for an insurance company. It was quite simple to use, mainly for homeowners to learn about health and safety.
http://www.ownyourc.com
This was an anti-smoking site for teenagers in Colarado. It mainly had a community feel with lots of colours and animation for young people to explore, which was good. However, one criticism which came out in the session that it was perhaps too subversive in what it was really about, and takes awhile to discover the anti-smoking theme.
http://www.flymetothemoon.es
This is a site for a design agency, with a flash animation which guides the user to a few descriptions of what the agency does, but omits to give their portfolio, which I think is a mistake as that is what you want to see from a design agency.

This was an interesting exercise and got me thinking about what programs were used to make the sites.

New Beginnings

I just have started a course as an Interactive Media trainee. This will be an intensive 6 months learning curve, but I hope that it will give me a solid background to interactive media, and the tools to develop and design on the web.

After yesterday's induction, we have now launched into the course with an overview of 'What is Multimedia'. This gave snapshots of the key developments and history of the interactive media industry, much of which is largely fresh and new to me. I look forward to going into more depth and having intensive training not only on Dreamweaver and Flash, but also 3D software such as Maya.

I learned how the web has been developing more recently, with emphasis on video applications and how this has expanded to mobile phones. It is interesting to think around the usability issues of developments in video and the web, such as the short attention span of users when viewing a small screen such as on the mobile phone.

Also, thinking through the implications of a 2-tier web, with the potential of payment for some of what the web has to offer. This has accessibility issues as well as the impact of excluding some users from the interactive experience on the web.

I know it will be an intensive 6 months, but I am looking forward to the variety of input we will have. We also get to check out some places in the industry, starting with a trip to S4C.