Following a discussion with one of my tutors it was advised that I should create a few app pages for my augmented reality side of the project. As the app is going to be simple in terms of content it was advised that I just include:
App Icon > Loading Screen/Splash Screen > Main Menu (If other features were present or options) > How to use > Augmented Reality Scene
From this I first began to draw out what these pages may look like, and from this I could then begin to wire-frame the app.
SPLASH SCREEN AND HOME PAGEHOW TO USEAR SCENE
App Pages
This is the final outcome of the app pages that I wish to use for the AR app, I tried not to put too much attention into this as it would draw attention away from the development of the animations and working app. I wanted to ensure that the app was east to navigate and understand, all whilst keeping the style and theme I have chosen. By adding small elements to the splash page I have tried to give the illusion of motion, that these shapes are moving from the left of the screen to the right. I have also added an Adobe XD file to help in visualize how the app would look and operate on a mobile phone.
After posting my first initial draft of my motion graphic piece I thought it would be a good idea to get some feedback from professionals on ways in which it could be improved.
I received some positive and constructive feedback from this forum. It was very nice to see that the majority of the comments were positive on my animation and that only a few minor changes need to be made.
“Hey man, looks great so far! Love this color scheme and design, I think you could make this more dynamic tho. Some squash and stretch could be added to when the screen scales up. Also I think you could maybe try to speed it up juuuust a bit at some parts, try to always have something going on in your animation. Hope it helps :)”
“I don’t see how can it be done, the design is great, the animation is smooth, I don’t think there’s much room for improvement so far. Keep up the good work mate”
“In the beginning, scaling up of the browser/screen needs a sharper animation curve. Also its a bit simple compared to rest of the animation. Thats mainly because of the white space it creates. Graphic elements can come in while it is scaling up.”
“I love this for the most part. Really strong work. The only part that I feel wrong are the circles. The physics is off, they don’t fall or bounce right. Otherwise, excellent work. You may consider moving the cursor over a little bit for typing bit so it’s not over the text.
And if it were me, I would say every nerd knows that the correct response to “I love you.” is “I know.” ;)”
“Right when you click on the chat box have a blinking type icon pop onto screen almost immediately. It’ll help with the lack of movement going on between the chat popping up and the typing
Maybe in between the duck movement and the chatting of Kate you could have someone update a status or something on the left side of the screen.
Or or or you could have Kate initiate the chat with an icon popping up over the chat before it’s clicked. Because there is no audio it would help the audience determine a reason for why the character is originally clicking on the chat box. And when you click on the chat box it would have the chat swapped with who says what.
At the moment none of the other icons on screen give me any indication as to why the character would message Kate “I love you,” it just seems a little random. If you don’t want Kate to initiate the conversation then have one of the icons on the screen possibly have a pic of a girl with a heart. This is just a thought after watching this animation a ton of time.”
“Love the visual style! Never been able to nail that look myself, it’s impressive work. Someone mentioned the circles but I think that smoothing out the rest of the easing as well will make your project flow together a lot better. Right now it feels a bit stairstep-ish, how elements move almost in increments (esp. in the second half).”
“The design is great! In fact, your design skills are way ahead of your animation skills.
It’s not that your animation doesn’t have nice ideas in it – I actually like how everything forms – but as somebody mentioned: the physics are not right. More precisely, this has to do with your easing. Have a look at animation principles, this is a good overview: https://youtu.be/wtJeoPAGbfY.
I think you know there is something not completely right, you just couldn’t put your finger on it. If you fix your easing, i’m sure it will look fantastic.”
Surprisingly, as this is the main forum for Adobe content, I did not receive as near amount of feedback as I had thought. This was frustrating as it would have been very helpful to get opinions and ideas from people who actually work with Adobe. This being said the comment that I did receive will be taken into consideration.
“Don’t use AE to add & mix sound effect files. It sucks for that purpose. Use Premiere Pro.”
Conclusion
It is always a very positive thing to receive feedback on a project, no matter how little or bad, as it will help in knowing just how the project can be improved. The comments that I have received will all be taken into consideration. Following the comment from the Adobe forum, as my next animation piece will require some sort of sound effects too I will consider importing the file into Premiere Pro, where I will be able to add the sounds and edit them more effectively. The main piece of feedback that I received is that some of the animations seem a bit clunky, there is also empty space in some parts of the video where not much is going on. To amend these I will try to shorten the animation to help in removing any blank spaces, I will also try and make the ball physics smoother to give the illusion of a more realistic bounce.
Overall I am pleased with the feedback that I received as it has allowed me to understand how I may improve my first motion graphic. The majority of the feedback was quite positive also, gives me an ease of mind as I know I am able to make future motion graphic pieces with some level of skill.
After conducting tests and research into using AR I thought it would also be a good idea to conduct some tests using motion graphics within After Effects, as this will be a vital part of my project as it will be the main thing the users will see. I decided to follow a few basic tutorials to help myself in getting used to using the software.
In order to achieve the best quality in my motion graphic pieces, as well as an easy and manageable workflow, it was also important that I considered ways and techniques into using After Effects.
One important feature that I will need to ensure is working when animating my illustrator files is the ‘Continuously Rasterize’. By toggling this sunburst icon in After Effects (AE), it is instructing the file asset to redraw itself on every frame it is used. As a result AE will analyse the shape data within the source file and draw it from scratch every time, rather than using a rasterized snapshot of file as it is imported. This will allow me to scale and rotate my Illustrator files within AE, without the the worry of the image becoming distorted.
Here is an example to show the impact in quality this option has when creating a motion graphic. The top image shows the illustrator file mouse icon within after effects whilst the continuously rasterize option is ticked. The second image is the same file but without the rasterise ticked.
Following this weeks meeting with my tutor I was advised to do some more research into Augmented Reality, in terms of its current state, the applications available, and maybe how my project could be developed without the need to hold a device in-front of us; but to instead wear it.
Sprite-kit.com is a central hub of tutorials, books, open source projects and various assets for developers working with Sprite Kit – iOS/Mac graphics framework for 2d games – by iUridium.
Sprite Kit is a powerful iOS/Mac graphics framework for 2D games (side-scrolling shooters, puzzle games, and platformers) introduced by Apple targetting games on iOS 7, OS X Mavericks and potentially Applet TV:
A flexible API lets developers control sprite attributes such as position, size, rotation, gravity, and mass without requiring advanced knowledge of the underlying OpenGL code
Built-in support for physics to depict the force of gravity and inertia
Built-in support for particle systems for creating essential game effects such as fire, explosions, and smoke
Aurasma is available as a software development kit, or as a free app for iOS and Android-based mobile devices. Its image recognition technology uses a smartphones camera to recognise real world images and overlay media on top of them in the form of animations, videos, 3D models and web pages. This type of platform could be an option for me to develop my project on as the app is already there for me to use, I would just have to simply implement my data and follow the instructions provided.
Augmented Reality has come a long way from when it was achieved in 1957 by the cinematographer Morton Heilig. His invention, the Sensorama, delivered visuals, sounds, vibration and small to the viewer. This wasn’t computer controlled but it was the first example of adding additional data to an experience.
Augmented reality today is achieved through a range of technological innovations, all of which can be implemented on their own or in conjunction with each other.
General Hardware Components – The processor, display, sensors and input devices. This will typically be a smartphone as it contains all the hardware required to be an AR device.
Displays – A monitor is more than capable of displaying AR data, however there are other systems that could achieve the same. Optical projection systems, head-mounted displays, eyeglasses, contact lenses and handheld displays.
Sensors and input devices – GPS, gyroscopes, compasses, wireless sensors. touch recognition, speech recognition and eye tracking.
Software – There is an Augmented Reality Markup Language (ARML) which is being used to standardise XML grammar for virtual reality (VR). There are also software development kits (SDK) which offer simple environments for AR development.
Google Glass seems to have established a new kind of consumer electronics device, which is distinguished by its integration of an optical head-mounted display, augmented reality, camera, web access, and voice-based interaction.Google Glass can be categorised and an “ubiquitous” computer, mainly because it can be used both actively and passively.
This video discusses how Facebook is stealing millions of views a day from independent creators. They have done this by creating an algorithm that when videos are uploaded into their player, they are preferred to YouTube links. This helps to keep as many users as possible on their site, so that they can then be shown advertisements. This method results in content creators receiving much less attention than they deserve. As well as this topic being important and informative it is also very appealing to watch. Through motion graphics and sound they can explain a theory in detail, all whilst keeping the viewers attention fixed.
This type of style is something that I would like to consider within my project, with bright colours and smooth transitions it makes these simple animations come to life. The assets that are used are made with a lot of detail, this helps in adding depth and an element of fun to the videos. I also believe that sound is a very important factor to help in making these videos enjoyable, when there is any transition or movement within the video there is some element of sound.
I also like the way in which these videos show the dashboard for a social media platform, the second image can easily be distinguished as some form of social media. This is something that I will need to consider as I will need to be able to show that what the viewer is seeing is a form of social media, without having to tell them.
Ahrefs is a Search Engine Optimization platform (SEO), allowing their users to rank higher in search engines. This feature can be used for businesses to rank higher, increasing publicity and sales. I believe that the video that they made for this service is a great marketing technique as it is relevant to the service, and it is also very nice to watch, which will in turn keep the viewer entertained.
When a lot of simple components and animations are put together they make something that looks a lot more in depth and professional. The pastille colour and chunky style of assets help in making the video unique and memorable, which is something that I will need to consider within my videos. The use of colours and overall art style will help in making my videos all fit together. I am also going to take inspiration from the way in which this video shows a computer dashboard, as it will be a main component for one of my short motion graphics.
This videos use of sound is also a significant feature, it helps in making simple transitions like a line moving from one side of the screen to the other come to life. It helps in giving each component of the video a reason for being there, even though there are a lot of moving components the video does not seem cluttered. This is something that I will need to consider within my animations. I will need to include enough content so that it is interesting to watch, but not too much that it makes the video seem cluttered.
These are a series of short GIFs that help in bringing any mundane task to life. The amount of detail that each asset has helps in making these short and snappy animations fun and enjoyable, they do not need to run for any longer as they already show some sort of interesting story. This is something that I will need to consider within my animations as I do not want them to run for very long, but they still need to be entertaining and memorable.
As these short pieces are GIFs they do not have any sound, if sound was included I think it would help in adding more life to the characters, for example the sound of the TV playing or the buttons being pressed on the remote, creating another element to enjoy.
A project by Nasser Pindarry helps to advertise and online food service that makes choosing food easier. I have chosen to include this piece as I would like to take into consideration the way in which the creator has taken these 2D images and added depth to them. Through the use of colour, shadows, and image layering it creates the illusion that the food is raising above the assets underneath it. Again the only other way I believe this piece could be improved would be to add mini sound effects over the small animations and transitions from one plate of food to the other, rather than just having a voice-over.
