Once more we under-take an exciting new project! This time we are working with web animations. We will explore and gain knowledge on where they are used, the effects of them being used and why they are used. In addition to this, we also will be researching on the different methods used to create web animations, what are the different types of animation, what their purpose is and of course... we will be finally making and designing our very own web animation!
Here is what the project brief outline in terms of what is expected to be accomplished at the end of the project:
'The aim of this unit is to develop learners’ practical skills in the creation of interactive animations designed for web delivery. Learners will investigate web animations and explore digital animation methods. They will devise, plan and create an animation using vector-based animation software techniques to produce animated, interactive web content.'
Some words that stand out to me from this brief in hand are; 'interactive', 'investigate', 'plan', and 'techniques'. These words (along with the brief in general) are things I should always refer back to and remind myself of throughout this project.
To get us under-way with this task, it is important that we gain a little knowledge on different key terms and phrases that will be cropping up throughout this project. Some examples of these key terms include; 'animated interface elements', 'banner-ads', 'linear and interactive animations' and 'compression'. By researching on these terms we will have a great advantage when taking this project on. This task will allow us to gain so much knowledge on the topic ready for when when need to apply them into our work. Some of the terms were already researched upon in previous projects, so this task was also allowing us to research on the terms we are already familiar with.
We did this task in a blog entry called 'Unit 65 web animation' which you can view on this very blog!
Day 1-10/06/2013
Technically today was our very first day of media on this project. Now we have familiarised ourselves with the outlines of the project, we are now ready to start preparing ourselves for our own animations.
To ensure we are able to get to the 'near professional' standard we have set ourselves, it is important that we research and plan thoroughly. To do this we started to think about what we would like our animation will be based on, and weather it will be linear (non-interactive) or interactive. Our teacher recommended that we link this project and our ideas to the previous ones, where we were basing our ideas on the school's PE department. Therefore, our animations are likely to be sports related.
With a basic idea on what we want our animations to be (as a group of two), we then started to get a little inspiration by collecting and gathering some images related to our ideas.
men as characters. This portrays the typical images people associate with the sports, which is why it may be humorous.
I also found a useful on-line tool that allows you to create neat and professional looking mind-maps with ease. This was a practical and convenient alternative to using programs such as Word or Power-point.
Here is the mind-map we created. As you can see, it may be a simple one, however, it has gave us a good idea on what we actually want to achieve and how we go about to get there.
Day 2- 10/06/2013
Today we moved onto finding inspiration from other professional sites. We looked at the interactivity of the site in terms of animations. In addition to this, we also analysed the sites/animations for the 'visual style', 'colour palettes', 'typology' and 'sounds'.
Some really good web sites included 'BOOMERANG' and 'The Simpsons'. These sites included many interactive elements and animations. They were creatively designer and really do bring the site to life!
We were told to include image and brief notes on the things we notice, and to gather it all into a power-Point. To back up my point further I decided it would be best to include a video that gives a brief tour of the Simpsons site. This showed some of the interactive elements and backed up the points I noted about this site in particular.
Screen Cast For Pre-production
This is my screencast for the pre-production stage of my animation project. Here, I go through my powerpoint presentation which includes research, briefs, sourced items, ideas and sketches, which are carefully analysed and walked through.
Screencast for Production
At this stage I have managed to create and animate some of my scenes. Whilst i have not completed this project and at the time where I evaluate the animation as a whole, I have talked through the some of the scenes induvidualy-pointing out improvements and good aspects.
I talk through my process and my planning to get my scenes together!
Screencast for post-production
So now the project has come to an end! With all scenes animated, and audio added, it was time for me to conclude with another screencast. This screencast goes through the changes I would make and the areas I felt happy with. I went through the animation pointing out areas I felt were necessary.
There has been some confusion as to when and how to update our blogs in this project, as we wanted to change the idea of updating it everyday. Unfortunately it has not been made clear on when we should do the updates but hopefully these screen casts show you some sort of development time-line of the process I went through!
IMPROVING MY ANIMATION!
After recieving a grade merit for this project, I was aware that, if I pushed myself, I could imprve this to distincion. Despite not being informed of the importance of interactivity in this project, this was a good element to include. This not only enchances my animation overall, but also shows my consideration of the audience and client- Bluecoat Academy.
To give the audience control over the aniamtion, my first idea was to incldue a 'play' and 'replay' button at the start and end of the animation. Of course my lack of knowedge in this field meant I had to research into how to include interaction in animation. This incuded; ganing knowledge from my tutor and peers, whilst also watching online tutorials.
To create an interative button of this nature, I had to look into the action and snippet panels on Flash. This allows you to embed coding that directs objects to do certain actions under specific cercumstances. In this case, these buttons used the follwing coding;
on(release){
gotoAndPlay(2)
}
The number indicates the frame in which the button takes you to- in this case the very start of the animation.
In addition to this, I also included a golf ball and owl that move when the user clicks on the objects. The golf ball was created by myself whilst the Owl was a free online vector. The coding below gives an indication as to what gives them the commands:
on(release){
owl = 1
}
Whislt the coding seems basic and small, it took a while to grasp and correct. As mentioned, I have little knowledge in interactions so this was an up-hill struggle for me. However, my determination to overcome my weakness and my ablilty to find help, ensured i gained valuble knowledge on animations.
Other projects in the past saw me create a basic animated GIF for the same client. Whsilt GIF's tend to be basic, I still see an improvemtn in my golf animation. I have gone beyond my origonal ideas and have show a creative flair in my ideas for interaction. My research in aniamtion suggested that children tend to enjoy animations with interactions and are more engadged by them. Therefore, not only do I reflect modern animations in the professional indusrty, I have also show my capabiltes of satifying a client and specifed audience.
The golf animation has fludity and now has been complmented by interactions. Interactions, take an animation to a whole new level. The show a more complexity and suggest more knowledge has been produced!
No comments:
Post a Comment