Web animation for interactive media: Task 3

Here is my finished vector based project for web design:

 

Evaluation

This animation was created in after effects as a demonstration of what a functional website would look like based on my pre-production and planning, all of the assets were made previously used for my graphic narrative, so not much creative effort was needed to create this project, since the old assets served their purpose.

My goal was to have an interactive website where the user can explore the different elements within the games story, with each page/slide having its own distinct theme and feel, while making it easy to access and navigate.

Although I think the end product is suitable, I think that more could have been done to make it more animated and lively, the buttons light up as you interact with them, however, you are greeted by still images when you visit each page, perhaps the the various creatures on display and their backgrounds could have been made to move around in order to make visiting the website more engaging and exciting.

 

Process

Creating this in after effects required A few extra assets on top of the ones I already had in order to make it interactive. Firstly, a mouse cursor from Google, since you cannot screenshot your own mouse on mac.

Image result for mouse cursor

I also wanted some sort of highlight to make sure that the user knows they have a clickable item selected that can take them somewhere, I took the original image from my graphic narrative:

graphic-narrative-3

And added some glow effect to them in Photoshop, and placed them over the original items in after effects to give off the illusion that something is being highlighted, when it is actually a different image entirely.

swirly not highlightedswirly highligted

I then wanted some sort of left and right arrows, to make the website navigable in a slide show style, so I created these arrows in Photoshop with the “Custom Shape Tool”

arrowpho

I then added my original asssets from my graphic narrative, that would be reachable by clicking one of the symbols on the main menu. to the them to both sides of each slide, adding a navigational tool for people to explore each slide.

fire transition

To create the transition from each slide, I then took a box of each color, orange, blue, green, and grey, and had them mask the entire after effects project using scaling opacity, when the opacity of the box reached 100%, It would then remove the previous image, and introduce the next one.

transition1download

transition2

I then used the appropriate colours to have a transition from each slide.

transition3

39966467-green-wallpapers

transition4

transition5

just_grey_light_grey

transition6

Advertisements

Task 3: Seeking and Obtaining Work

Maintaining Workflow

It will be important to maintain a workflow throughout a freelance career, especially if it is a long career that lasts multiple years, as freelance tends to be much less reliable than employed work since the quantity of work and payment vary wildly overtime.

One of the most important priorities is communication, fortunately, social media sites such as Facebook, twitter, and freelancer.com make it very easy to communicate with potential clients or customers, however, this also makes it easier for competitors to do the same, so it will be important to get ahead by making sure that my social media outlets are professional, friendly, and update consistently, as well as communicating to as wide an audience as possible through things such as leaflets, flyers, promotions, business cards and portfolios. This strategy should hopefully help to keep a constant form of communication with clients over a long period of time, as well as a steady flow of paid work to do. Having a decent amount of contacts would be a good idea, especially since some of them may want to use my services again in the future, if they found my work to be satisfactory the first time. There are all sorts of ways I can maintain contact with these people, as well as the social networks listed above, it shouldn’t be difficult to stay in contact via email, Skype, phone etc.

Time management and deadlines will also be another crucial priority, not only for the the rate at which i produce work, but also to make sure that the client is satisfied and would consider using me again. I think with every task I undertake, it will be important to make sure that I have the deadline in mind, and make sure that I am making sufficient progress each day in order to reach the deadline. A good way to do this would be to create a timetable or schedule, with each task that needs doing split into different sections, this would be a good strategy not only for completing the tasks on time, but also maintaining the skills needed to perform in the various freelance areas and make sure that I am staying productive. Meeting all deadlines on time will ensure that I set a good example for potential future clients, and that my punctuality can be demonstrated on my portfolio on websites such as Freelancer and Odesk.

Since freelance often varies wildly with the amount of work available, it would also be a good idea to dedicate some time to training myself in other forms of freelance, as a contingency plan for when available work becomes scarce. This can serve as a secondary time priority that should be fit into a smaller section of my timetable, so that some time is dedicated to it occasionally. This should more areas of freelance work even more accessible in the future.

Job Searches and Suitability 

This is an exercise in order to see find suitable freelance work that would be feasible and reasonable to undertake.

https://www.upwork.com/o/jobs/browse/skill/3d-modeling/

On this website, contractors can place a skill level on their desired work,  as an indicator to the freelancer of the type of experience they will need to carry out their task. The levels are: Entry level < Intermediate < Expert. The running theme seems to be that the expert level work seems to pay a lot more, since it is a lot more challenging. With that being said, it would probably be the most sensible option to start off with the entry-level jobs that are available, and possibly the intermediate ones if they seem feasible. Here are a few jobs that I think are suitable for my personal skill area:

Screenshot (278)

Screenshot (279)

Screenshot (280)

These are just a few examples of what I believe to be suitable freelance work to start off with, until my skills are developed enough to tackle expert tasks.

Task 2: Professional Development and Skills Maintenance Report

3D Modelling Self Employment

3D modelling freelance work can be difficult, since it often demands for professional, industry standard work to be produced by a deadline. Creating 3D assets is challenging with little experience, fortunately, outside of college there is a treasure trove of helpful information that can be found on websites such as youtube, C4D cafe, and other sites where 3D modellers may have questions about the software they are using. If I wish to pursue this as a career, there is a lot of information about the software I will still need to know about, and skills I will still need to develop in order to succeed within this specialism of freelance.

My work VS Industry Standard

Here is a comparison between some of my recent college work, and a professional looking, industry standard product created using the same tools and software.

An example of my work back in November

golem-screenshot

An industry standard Cinema 4D project

 

grasshopper_cinema_4d_character_by_bonewire-d6np9dz

There is a clear difference in quality when it comes to lighting, modelling, and sculpting. My character has not been rendered with any lighting in the scene, but the shadows shown here are made using advanced techniques.

While I would not be able to recreate something of this quality right away, one advantage I do have is that I can easily identify alot of the techniques used to make this character, so while my work is not competitive with industry standard pieces of work yet, knowing how they are made is a large help, with time and practice, I believe that creating something like this is not only feasible in the near future, but quite simple once you get the hang of the software, since my work has improved drastically from the first year to the second.

Professional Development 

When it comes to learning more about Cinema 4D and other necessary software for this area of freelance, there are plenty of tutorials and tips that can be found online, however, copying a tutorial to the letter, while it may produce the same result as the one being displayed, you might not be able to create much else using the same techniques unless you truly understand them. I believe that when learning the software, independent learning is also very important, as you can learn some very useful techniques just from experimenting and having your own experience with the tools available to you, and how you can apply and combine them to create. When looking at a portfolio of someone who creates professional 3D products, more often than not, they will claim to have years of experience with the software. This being said, its more than likely then that I myself, will need years more experience to be able to compete with my peers in the industry successfully.

Skills Maintenance

If, for whatever reason, you were to take a long break from Cinema 4D (as I did from the first to second year in college), then it is likely that your skills will be rusty and you may have forgotten how to do a lot of things within the software. So when it comes to working in freelance, not only is it important to learn and adapt new skills to be competitive in the industry, but maintain important skills that will be needed for future projects longterm. With a decent plan, this shouldn’t be too difficult to maintain, I think the best idea would be to create a schedule or timetable for using the software, even if it is not to create anything and just to play around for a short amount of time, just as a reminder of how to do things.

Task 2 Research Notes

Professional Skills Audit

Task 2: Plan a Web Animation Sequence

 

For this task, I will create an interactive animation based on the graphic narrative I created for Unit 55: Graphic Narrative. Based on the way my graphic narrative was presented, I think the best course of action would be to layout the animation sequence in a comic book style, with each frame of the comic dedicated to each part of the narrative as it was before. This will be a time efficient way to create a web animation with existing assets, which can also be improved for the sake of the animation if necessary.

Here is a mind map of some of my ideas, the blog post will go into greater detail from the ideas presented here: https://app.mindmup.com/map/_free/2017/04/c45558c02c2111e7b4b43d6c03da1254

Layout

There are a few options for presenting my graphic narrative, here are a few options that I have thought about:

  • Have a web page dedicated to each type of element, water, earth, air, fire
  • Have 1 web page layed out in a comic strip, with each framed dedicated to each element
  • Have a powerpoint-styled sequence where the user can click a button to change the element displayed on screen
  • Have all 4 elements on one long horizontal strip that the user can scroll through to view each one

Having explored these options, I personally think that the best option is to have a single page with a vertical comic strip that can be scrolled down so the user can view each element in the narrative.

Animating the Graphic Narrative

To go about animating the existing assets for my web page, I think it would be best to look at each scene and how I could animate each one in order to bring it to life.

Fire

graphic-narrative-4-2

Firstly, the volcanoes in the background could be made to erupt or simply emit smoke, while also having lava trickle down, I think the background of this image could also use a bit more detail in order to include more animation to make the scene more lively. I would like to attempt to make the fiery elemental creature surge onto the screen, or have the environment scroll across, revealing the creature. I would also like to give the creature some sort of idle animation while he is visibly, so he is not completely static. Either his arms could move, his body could flicker like a flame, or the two flames in either of his hands could be created by him by having some sort of ignite or explosion effect to make them appear.

Water

graphic-narrative-5-2

I would like the water world to have more activity running through it, like some fish or bubbles moving through the background, For the creature, I would like to find some kind of way to make his body bubble or ripple, something to make it more supernatural and less static. I would also like to make the creature’s armor move in some way, perhaps by pulsating.

Earth

graphic-narrative-6-2

This frame will be the most static and peaceful out of each one, but I would still like to animate the creature in the frame to some degree, either by having him jump, walk, or roll into the scene.

Air

graphic-narrative-7

I will probably revise the background for this scene, since I am not entirely happy with it, making it the only existing asset I will not be using. To animate the creature, I think it would be a good idea to have it materialise by several pieces coming together to create it. I would then have a windy, chaotic background to match.

Hopefully, all of these ideas will be easily feasible through vector animation on a software such as Adobe After Effects. The goal is to make sure that each animation reflects the personality of each element. Fire should be chaotic and intense, while earth should be more calm and sluggish.

Interactivity

The animation will need to have some sort of interactive quality to it, my goal is to create a unique way to interact with each frame, for example, the fire scene might have a volcano that will erupt if you click on it, or the water scene could have fish that react to your mouse cursor. Hopefully this should allow for a more engaging and dense website with some explorable depth for the viewers to interact with.

Legal and ethical

Briefly, I do not think there are any immediate legal or ethical concerns that require attention. All of the assets here have been created by me, and it is difficult to identify a way in which these fictional environments and creatures could possibly offend anybody, since there are not any human characters, and no historical events in human history that some people may find offensive. The kind of fictional universe I have created only contains cartoon violence,  none of the themes here should cause any controversy.

Pre-Production Conclusion

If all goes to plan, then this website should be an animated, interactive, narrative using the original assets from unit 55 that can be tweaked to add more detail and look more aesthetically pleasing, with a vibrant and varied colour palette, and decent looking cartoonish graphics.

 

 

Task 1 – Working as a freelancer

Within the games industry, there are several different types of freelance tasks that an individual can pursue based on what they are experienced or skilled in, and preferably tasks that they enjoy if possible. However, an individual working in freelance would be wise not to limit themselves to only one area of expertise, this is because other areas of work within freelance may  be available which offer more beneficial opportunities. You will often find that successful people in freelance are capable in multiple different software and creative areas within computing that are required for the various tasks they will undertake. It will also be much easier to find work more quickly with skills in multiple areas.

For this particular task however, I will focus on 3D asset creation within the games industry, since this is what I have been studying in college for a couple of years, which allows me to better understand the terminology, industry standards, techniques, and requirements for this area of expertise.

Here is a website full of examples of the type of work required of someone looking to freelance as a 3D modeller:

https://www.peopleperhour.com/freelance-3d-modeling-jobs

Upon looking at this website, the type of tasks a skilled 3D modeller can undertake are quite varied, since 3D can be used in a wide variety of areas, inside and outside of game design. A few examples of the kind of work that a 3D modeller can undertake:

  • Designing characters for games (and possibly rigging them)
  • Designing other assets for games (objects environments etc)
  • Creating animations for games
  • 3D architectural work
  • 3D assets for films (CGI)
  • 3D assets for commercial use (logos, adverts, banners etc)
  • Sculpting
  • CAD

There is plenty of work available for anyone who is experienced with the 3D software required to undertake these tasks, however, some of these tasks require years of experience to undertake, since 3D modelling can often be a difficult and time consuming  endeavour.

There are various resources and requirements that are necessary when looking to be freelance within 3D modelling. First and foremost, a powerful computer that can render quickly and allow you to work efficiently is absolutely essential, this is because a slow computer may find it difficult to load larger and more complex 3D projects, as well as making rendering projects take much longer, if a freelancer is working to a deadline, then long render times can cause many issues with their workflow, since they will have less time to create a product since they need a larger period of time to dedicate to rendering. A comfortable workspace will also help when trying to work as efficiently as possible, this includes things such as a comfortable chair and a desk with plenty of space. Having Another place to store memory and creating backup file are useful precautions that can be taken in case something goes wrong. Sitting properly is important for your posture, and taking breaks is important so that you don’t strain your eyes.

A person looking to work in 3D modelling freelance has a few options in how they earn money, the first option would be to create and sell assets that others can purchase and use. In order to do this successfully, the freelance worker can create a portfolio as a way of showing potential customers what they have created as a way of advertising themselves. On these portfolios other clients that have worked with the freelancer can leave reviews on how they think they did, good reviews can help the freelancer find future work since it can encourage future clients to work with them.

When it comes to who regulates freelance work, there are a few rules that must be taken into account. Firstly, if you choose to be self-employed, you need to register as self employed to make sure you pay the correct Income Tax and National Insurance. You pay National Insurance if you’re 16 or over and earn at least  £6,025 yearly as someone who is self employed. Secondly, freelance workers may not be entitled to the same rights as workers who are employed such as minimum wage, as the payment will be decided by the contractor, which can either be hourly or day rates, or a fixed price for completing the project. The contract can be created by the employer, the employer and the worker can negotiate a contract, or in more casual circumstances, there may be no contract involved in freelance work, this can cause problems however, since having no legally binding contract could lead to the worker potentially being treated unfairly, as a freelancer can use the agreed upon contract in their defence if they enter any legal disputes.

Here is more information on the types of tax that freelance workers will need to pay: https://www.crunch.co.uk/blog/freelancer-advice/2013/08/22/what-tax-do-freelancers-pay/

It would also be wise for someone looking to freelance to seek out insurance that can help protect their business and save them money, here are a couple of examples of some different types of insurance a freelance worker can find:

  • Professional Liability Insurance – protects you against claims that you  incorrectly provided a contracted service or it was faulty
  • General Liability Insurance – covers property damage or bodily injury to someone else
  • Business Owners Insurance Policy – combines protection from all major property and liability risks in one package.

 

There are also Codes of conduct that a freelancer would be wise to follow in order to operate as smoothly and ethically as possible without getting into trouble, here is a website that lays down a few ground rules that a self-employed individual should follow:

https://www.freelancer.co.uk/info/codeofconduct.php

This is a website that many freelancers should keep in mind, there are plenty of opportunities here for self-employed people to take on contracts for a wide variety of tasks by getting in contact with the employers on the website looking for work.

The following attachment  is an idea of my future business plan: -BRAD HURLEY Business_plan_template princes trust

When considering plans for the future, pensions are also an important detail, there are 3 main types of pension:

  • The State Pension – payment from the government if you reach state pension age
  • Defined benefit pensions – an employer/sponsor promises a specified pension payment based on the employee’s earning history
  • Defined contribution pensions – pension scheme in which the employer and employee agree on a set amount  to be contributed to an individual pension fund.

When working in freelance, the state pension seems to be the only one that will have an impact on the future, unless a different career path is chosen. It is important that state pension is set up and managed correctly so that there is a comfortable amount of money for retirement.

 

 

 

 

 

 

 

Unit 65: Task 1 – Understand uses and principals of web animation

Here is my presentation for unit 65: Task 1 – Understand uses and principals of web animation

web animation presentation

Notes

Slide 1- Intro

Slide 2 – Talking about how animation is used in web design and showing exmaples

Slide 3 – Quickly showing some examples of animation in web design, different examples such as banner ads and logos

Slide 4 – Showing the evolution and history of animation and talking briefly about each one, how most efficient animation methods are now digital

Slide 5 – Explaining vector animation and comparing it to pixel animation

Slide 6 – Talking about compression, why its important to reduce file size, and methods of compression

Slide 7 – Web animation softwares, talking about the features, advantages and disadvantages of each

Slide 8- Talking about web animation players, where they can be found, advantages and disadvantages of each

Task 2: Produce a Case Study

For my case study, I will critically evaluate World of Warcraft, an MMORPG (Massive multiplayer online role playing game) by Blizzard Entertainment. This game has been out since 2004, and still has large player base despite its age, it has also had six separate expansions released for it over the years,  which is one of the reasons it is still successful today. This is a case study into how the game is marketed, advertised, and how it made its entry into the games industry.

Industry

Around the time World of Warcraft came out, it was one of the first MMORPG’s in the games industry. Back in 2004 this was a new genre in the gaming world, preceded only by a few previous titles such as Runescape (2001) and Everquest (1999). Both of these titles, although popular, were limited by the technology available in this time period. Due to the nature of an MMORPG being a large scale open world multiplayer game, these were so uncommon back in the early 2000’s due to a lack of hardware being able to run such an ambitious project. But since technology has been improving exponentially, when World of Warcraft was finally released in 2004, it was considered as a very large and aesthetically pleasing game that dominated the genre. This is likely down to 2 key factors. Firstly, Blizzard entertainment is a large company based in California with 13 years of game making experience prior to the game’s release. Secondly, the exponential improvement of hardware and its accessibility meant that blizzard could create a bigger, more ambitious title in terms of size, multiplayer capabilities, and graphics.

The game was distributed Via physical copies back when it was released.Productbox-wow-alliance

The game was then later made available to purchase digitally, for convenience and ease of access. However, you could still purchase physical copies with collector’s edition extras.

Based on some discussion online, although there are no exact figures available, it seems that the majority of people prefer the digital purchase: https://us.battle.net/forums/en/wow/topic/20745655957

sept25release-real

Audience and advertisement

At the time of the games release. Blizzard had a much smaller audience of gamers, this is because their previous titles Warcraft 3 (2002) and Starcraft (1998), although critically acclaimed, were both RTS (Real time strategy) games, the RTS genre was not as mainstream at this time since it was also a developing genre, meaning that blizzard had a small but dedicated group of fans. The fans that blizzard had gathered over the years however had a very strong connection with Blizzard’s universe and characters. This meant that they had a reason to be excited for World of Warcraft. However, Blizzard entertainment turned their attention to the mainstream in order to expand its audience. The way the game has been advertised over the years has been very widespread:

From TV spots with celebrities

To online banner adds

833370f8b450eb3d0ffec9fbfc634ced

To promotional events such as recruit a friend, encouraging players to introduce their friends into the World of Warcraft for rewards

An episode of South Park dedicated to the game

maxresdefault

World of Warcraft even had its own movie released in 2016, Directed by Duncan Jones, this film was an introduction into the Warcraft universe for many people who had never played or heard of it before.

Another way the game is advertised is through their cinematic trailers for each expansion, which are released on youtube and shown on TV, There have been seven of these cinematics created and played on Television and internet sources for over 10 years.

Blizzard have also created animated shorts to advertise and market their product, these usually revolve around a character, and tell a short story.

Over the years, the World of Warcraft became very popular through its addition of expansion packs and advertising strategies. In January 2014, Blizzard announced that more than 100 million accounts had been created over the game’s lifetime. This meant that they had a much more diverse audience, not only for World of Warcraft, but for their other ongoing titles such as Starcraft, Diablo, Heroes of the storm, Hearthstone, and Overwatch. These games all cover different genres such as MOBA (Multiplayer online battle arena) FPS (First person shooter) and RTS (Real time strategy).

Blizzcon

Since 2005, Blizzard have held a live event in the united states where thousands of people could attend. This is where blizzard would talk about new announcements, features, and expansions for their titles. Blizzcon also has unique merchandise,  and codes which can be exchanged for in game prizes. Celebrities and bands are usually invited to perform at Blizzcon also. Events such as costume contests and various panels where players can ask the developers questions are also a large event at Blizzcon. Overall, this is a key event which blizzard uses to communicate with its audience, as well as advertise new products to them.

Overall, blizzard’s audience has grown over the years due to its very mainstream and successful advertising techniques, but also due to the wide amount of game genre’s Blizzard covers with their various titles.

Textual Analysis

The World of Warcraft has always branded itself as a large fantasy product in order to appeal to a mass audience, since fantasy can interest a large amount of people due to the wide variety of possibilities within the genre. One way the Blizzard has chosen to present this universe is through its key characters, as well as its environments, the diversity in the color, atmosphere, and sound of each zone is often emphasised as a way to remind players of the sheer size of the Warcraft universe. These are usually represented through art as opposed to the in-game graphics however.

 

Notice how on the box art for every expansion, there is usually an important and threatening looking character in each image.

I think this is a key detail, since these are key characters that the fans will recognise, but new viewers may be curious about. Blizzard likes to present a new, large threat in each expansion for players to defeat, and this often seems to be a strategy they use to present their universe.

Audience Theory

 

Here are audience theories applied to the World of Warcraft’s audience, one important thing to note is that Blizzard quite often communicate with their audience through things such as social media:

https://www.facebook.com/WorldofWarcraft.eu/?fref=ts

https://twitter.com/Warcraft

Q&A sessions via livestreams and blizzcon

And forum posts regarding certain subjects within the game

Screenshot (175)

Passive (Hypodermic Needle Approach)

This audience theory suggests that the message of a media text is consumed without question and accept a dormant ideology on a certain subject. When it comes to the way Blizzard entertainment operate, I do not think this theory holds much value. Since the players have a very open avenue in which to communicate to blizzard game developers, this means that they are often criticised and challenged on some of their decisions and ideologies. Here are a few examples of player outrage and other various controversies when it comes to some of the decisions that blizzard have made.

https://us.battle.net/forums/en/wow/topic/20753795863?page=26

http://www.polygon.com/2016/3/28/11321138/overwatch-tracer-pose-removal

Overall I do not believe that this theory makes sense in the context of Blizzard entertainment, since players are always discussing, debating, and criticising some of blizzards actions through social media and forums. Praising the good ideas, but rejecting the bad ones. Since video games as a media text are much more interactive, this can often mean that the audience are much more involved and vocal about how they want the product to be, since a game that you don’t enjoy for whatever reason can create some frustrating scenarios.

Active (Decode and make rational decision)

I think that this theory works much better when discussing Blizzard entertainment and mostly the games industry in general. As the most interactive form of media, video games are often a much more involved activity. Though not as relaxed as something like television or reading, the audience can have all sorts of different emotions when playing video games. Players might be excited or satisfied when they find a new item they wanted, or defeating a boss that they have failed to beat numerous times over. However, this can also come with negative, this often means that players are much more attached to games (especially world of Warcraft) and this means that when things go wrong they can get frustrated or upset, either with a decision a developer makes, a difficult hurdle, or something that subtracts from their enjoyment of a game. Video games such as World of Warcraft also require you to think much more than other forms of media, since players will often debate things such as what abilities to use, what items to equip, or what strategies to deploy to defeat certain bosses. This has even lead to some players making complicated calculations to maximise their efficiency.

http://www.noxxic.com/wow/dps-rankings/

http://www.wowhead.com/forums&topic=29148/weapon-dps-calculation