For this assignment we created a multi-page interactive poster for a hypothetical exhibition about future technologies. The poster needed to have both interactive and animated elements. The first part of the assignment was to decide what future technologies to cover in my poster. For this I looked up one of my past blog entries, where I had researched several technological developments. Out of the three technologies, the one I was most interested in was tactile VR, which is VR with touch and VR is a very relevant current technology that I thought would interest those visiting a future technologies exhibition.
The starting point was to figure out how to represent this technology in my poster. Using some photos as reference, I began to draw a figure wearing a VR bodysuit and hand controls. To showcase the technology, I wanted to add something it could interact with. For my illustration, I wanted to use a lion as an interactable object. I thought it would be a good idea to use a real image as this would not only reduce the amount of drawing I would have to do, but it would effectively communicate the idea you were interacting with a virtual object.
The most difficult part of drawing the figure was ensuring the the anatomy looked right as I was not very practiced at drawing this kind of image. Once I had drawn the basic figure, I wanted to add a glowing effect to the suit and the hands to communicate the idea that they were being affected by this interaction. By the end, I felt I had created a good result.
The next part was to animate the static images; I exported the image in two parts, with one part being only the hands/forearms, and the other part was the rest of the body. In Animate I put all the layers together, then I made the hands move in a stroking motion, as if he were petting the virtual lion. For the background, I made a transition from a grid pattern, to a savannah environment. The grid was put there to emphasise it was a virtual environment.
I had difficulty in deciding what the second technology should be. I did some research into what innovations were out there and decided to look at robots, but specifically robots that were controlled by the mind.
The two main elements were - a robotic arm and the silhouette of a human controlling it, using the same caps that are usually used to scan brainwaves. Unlike the last page, I made these elements completely from scratch within Animate. The element that took the longest time to make was the robotic arm, as it had many parts and I had to use several photos to decide on how to draw it properly. Some of the parts I had to assemble in Illustrator and then import into Animate, as I generally found it easier to create Vector graphics in that program.
After it was drawn, the next thing was to animate it moving. Animating the arm was fairly easy as there were only a couple of joints in it, the claws were a lot more problematic, because they had more moving parts. To make it work properly, I put the hand into a group, within which I created a separate animation loop to the arm. The hardest thing was to ensure that the hand didn't open and close when not required as I did not want this to be happening constantly. Eventually I was able to solve this problem by giving the claws their own group and animated them on their own timeline.
For the human figure, the only animation that I wanted was for a glow effect to cover the area of the head, to show that the person's thoughts were controlling the machine; the glow effect would fade in and out.
I felt that my title pages required some animated features to make them more interesting. To solve this, I drew some streaky light effects in photoshop, made a few different colours ie blue, green and a purple. I then imported them into Animate and made a looping sequence of them moving through the page at different speeds and directions. Before settling on the final result, I experimented by trying to vary the speeds and the directions of the animations, finally settling for a diagonal left and/or right, which presented the best option.
These last two pages that were required, contained information on booking and tickets. For my document I decided to include ticket prices with a button to go to the Design Museum website, however, as this was not a real exhibition, I created a “spoof” weblink. To find out how to compile this, I went into the Design Museum website and looked at some of their exhibition pages, to ascertain how they organised their booking information. I based my tickets page on that research. I decided to add a section where you could gain membership, which was included in the website I had seen while researching. I linked that web page to my newly created button.
In creating the maps, I felt that there were two important issues that needed to be included, firstly, the address of the venue and secondly, the opening and closing times of the exhibition.
I also thought it would be a good idea to add a map that users could click on and view online. The process for this was that I went onto Google maps, made sure that the Design Museum was selected in the center of the screen, and then I screenshotted it without all the side widgets. I then put the screenshot into my document and turned it into a button users could click on. This would take them to the google maps page for the Design Museum.
Throughout this process there were problems that I encountered. The main problems were with the last few buttons, particularly those that linked to web pages. Initially, the buttons were not working correctly and they made the overall performance of the document unstable. This caused the document to be completely blank when I tried to export a preview. To counter this problem I converted the buttons to “movie clips”, which seemed to work. This came at the price of not being able to have the buttons change appearance when being clicked, or having a mouse hanging over them. Instead, I added this looping effect of a “sheen”, a sort of shining effect, to make up for the loss of changeability.
One reason for this may have been that part-way through the process, I moved from working on the University’s computer to my own personal computer, which had a slightly newer version of the Adobe suite. Another side effect of this was that the two computers had different fonts installed (not including the default fonts). When I opened the document on my home computer, the font I had used on the University computer was not available on my machine, forcing me to change the font.
Comments
Post a Comment