Royal Armoury Activities
Learn. Win. Survive
Having grown up in Nottingham, England I’ve had the opportunity to experience a lot of history and see many artifacts from the past; Its one of the benefits of being born and raised in a country that has been established for about 6,000 years or so. One of my highlights of England that I recommend to all is a museum in Leeds called the Royal Armouries. Simply put, it’s a museum that covers wars, battle, weapons, armor, hunting and anything else that pertains to those genres. I went there a few times growing up and go every-time I visit England now because it has so much information and interesting relics that show how war and weapons evolved through time. Seen as I’ve been fortunate to experience the Royal Armouries and it is a free (yes FREE) museum, I decided for my one of my next projects, it was time to give back and create some content for a truly legendary place.
Its all Connected!
The overarching theme of this project was that each of the smaller project would tie together to deliver a seamless experience. The intention of each smaller project is that they could be inserted into a kiosk at the museum for a visitor to interact with, therefore enhancing the experience.
Part 1: Typographic Animation
For the first part, I needed to put words to a speech or music. I had the idea to do an introduction type video to the song “Survival” by Muse, as the lyrics closely resemble competition and battle and the tone of the song is exciting while still filling the descriptions of epic and historic. Before color, font or any other design elements were decided, I storyboarded the 30–40 second sequence. I placed the boards into Adobe Illustrator where I used simple type with masking to frame the scenes and once framed, used red arrows and shapes to direct the general look of the animations. Below I also added in some directions to give more accurate descriptions of the scene.
Style
Once storyboarding was completed, I decided upon a simple color palette that I could use throughout the projects. To keep in theme with genre of war, battles and armory, I chose a slightly darker red that was dark but still striking and a bright orange to accompany the red as a complimentary color. Once i had decided on colors, I built out my assets for the video by taking the lyrics for each scene and exporting them as separate png files.
Final Output — video
To pull everything together, I used Tumult Hype to create the animation. Hype is great for animation, first, because it can export to HTML, making it so animations and interactive pieces can easily be dropped into places that support HTML. Second, it allows for direct manipulation on the timeline and canvas which helped with really getting to see how the words would play out. Most of the frames that I had planned out in the storyboard phase, I was able to translate to the final phase, with only a few animations being slightly off from what I had originally imagined. A finished version can be see below (minus the music due to copyright issues on videos).
Part 2: Interactive Display
As I completed the typographic animation, I moved towards what it could be connected to. The second part of the project was an interactive learning page. Using the branding from the first part of the project, I sketched up some ideas of what I could create that would be fitting for a kiosk sat in a museum.
Usually it seems kiosks in museums are geared towards a younger audience while still remaining interesting enough for adults to use them. With this in mind, I planned to make the kiosk animations and designs very interactive and visual, while also including a good deal of text and information for visitors who wish to read about the objects included.
Once again, I obtained assets to carry out the planned design and to give the kiosk a realistic feel by using imagery from the Royal Armouries archives. Depending on where in the museum, the items and information could be changed out to better reflect surroundings and information.
When I had enough assets to design, I used Adobe Illustrator to create one long page that I could then place into hype and animate a scroll effect, making the main page interactive. I also created simple icons for visitors to interact with the items on the page and learn more about them. Lastly, I modeled item information pages after the main page to give consistency and connection to the parts that would come up when a visitor selected an item to see more detail about it.
Testing & Completion
Once I had built the pages I needed, I imported them into Tumult Hype and animated the different elements that needed to be interactive. I found myself using mostly animations accompanied by a timeline pause so that it would give the viewer control over what was happening on the screen. Most of the building and testing went well. The hardest part of the project was making my pop up screens work.
The issue that plagued this portion of the project was that the pop-ups made the main timeline too messy and blocked access to other elements. The other problem was that if I made scenes for my pop ups (which worked great), I couldn’t get back to the main timeline, at the same timecode. With this issue, I researched and found that I had to manipulate the main HTML code of the project and write a little bit of javascript to make it so my pop up scenes would continue the timeline once they went back to the main timeline.
Once I had figured out a way around the pop up debacle, the project went smoothly with the interactive experience working as intended.
Part 3: Interactive Educational Game
To round out the overall project of an interactive kiosk I decided to cross into a realm that can sometimes be forgotten in design and that is gaming. I say gaming lightly as it wouldn’t be a full fledged game like we see many places but rather a simple action-reaction type event. Honestly, while the concept seemed daunting at first, I was able to clearly think through the interactive experience once I had storyboarded my idea.
The concept
As my kiosk has the intent of being used in the royal armouries museum, I wanted to keep the game focused on the content that is presented. I first thought of a 2-player duel game where the first to press a button would win the gun-duel. After thinking over this idea, I felt like it was cliché and that it may be a limited experience because it was essentially a game that people would play one or two times before moving on. I scrapped the duel idea. My second concept felt more natural in its integration into the overall project.
The “Joust Game”, as I nicknamed it, seemed to fit well as it would both educate the player and provide several outcomes depending on the choices made.
The basic idea of the game is that the player chooses one of several speeds for their knight to go. When a choice was made, an event is played that determines a winning or losing outcome, or a draw/missed outcome. When one of the outcomes played, a different animation would play and display a fact based on whether the player won, lost or missed.
Along with the game fitting in with the existing content and being educational, I knew that I would be able to accomplish the overall output using tumult hype for the interactions. I planned to have different elements be interactive and then house the outcomes in different scenes or timelines so that when a choice was made it would play smoothly.
The Build
Once I had my idea ready, I began creating the assets needed to pull it all together. I knew that I wanted a cartoon-like design so that it would draw the attention of a younger audience but still be enjoyable for adults.
When creating my assets I created 2 different characters and accompanying horses. I also created a long background to pan behind the character to create a parallax effect and to show motion. Lastly for my assets, I created the speed buttons that would be selected and the outcome titles that appear upon completion of an outcome animation.
Completion
I use the word completion lightly as everything can always be improved but with all 3 parts of the project finished, I was able to build the whole kiosk experience. I created simple menu’s to navigate between the different experiences and to include credits into the project. The kiosk ran smoothly as I tested and I was able to navigate from home to experience and experience to home. The project as a whole has been a great project for myself and shows how possible it is to create interactive experiences from many genres and interests. While this is intended for presentation in a museum kiosk, the experience could also be taken in on an iPad or another interactive screen.
Copyright content used in this project is covered under the fair use law as the project was created for educational purposes and is not used for profit.
