Museum Poster in Animate - 29/02/2024

-

 For one of my assignments at the start of my second semester I was tasked with creating a mock-up poster for an exhibit for The Design Museum called Visions of the Future in Adobe Animate. The poster would be required to follow the design theme of The Design Museum and function as an effective short webpage in order to promote and advertise the exhibit. This poster was completed over about 4 weeks of work, started at the beginning of the semester.

For my poster I decided to settle on a focus on image and colour manipulation using photos gathered from the royalty free photo website Pexels, the images of which used will be linked at the end of the blog. In order to make the Animate project function as a webpage we made use of Adobe Animate's HTML5 formatting and it's included Code Snippet features in order to programme actions into certain buttons on the page. These buttons would allow for users to jump to different keyframes which served as the different pages that can be moved to. In order to create the illusion of a webpage we utilised the code snippets included with Adobe Animate in tandem with it's keyframing. By coding a keyframe to force a loop in the animation it's possible to lock the viewer on a single page, then when the appropriate button is clicked, the project will jump forwards to another keyframe sequence representing another page. Below is an image showing an example of the code used to manipulate and control the different pages within the project.


We were instructed for our poster to comprise of 6 different pages: An initial welcome page where the webpage would start of on, a menu page for navigation, two example pages of different parts of the Visions of the Future exhibit, a page displaying ticket prices and a link to purchase them, and a map page for viewers to locate The Design Museum so they can attend the exhibit.

For my welcome and menu pages I used two free images from Pexels which I manipulated with the website Photomosh in order to get that glitchy, futuristic look that I wanted my poster to maintain throughout each page. In the background I also chose to animate several floating circles to move around each page, except for the welcome page, to add a bit more movement and engagement to each webpage. 

For my two example pages I chose for Virtual Reality and Artificial Intelligence Learning to be my two exhibits, once again grabbing images from Pexels, and including a small animation on each. For the VR page I added a few images of moving eyes I animated myself within Adobe Animate. For the AI Page I chose to include a small animation of a brain spinning, using images of a pre-rendered brain from the website brainfacts.org, which I will link at the end of the blog. I also at this point decided to have each of my pages to have a different colour overlay in order to make them stand out more from each other. To do this I created simple rectangle shapes to sit on top of my images and circles, then had them set to Multiply overlays in order to create a more striking and visually appealing colour effect. Back onto the example pages, I wrote short and engaging descriptions for the two parts of the exhibit in order to make the pages seem more realistic, and included a main menu button on each to allow users to return to the home page to view the other pages.

For my tickets page I simply created a basic grid, this time however choose an image of The Design Museum itself, as there were no pictures on Pexels that would really fit a tickets page anyway. The link to the source of the image will be linked at the end of the blog. After making up some ticket prices I chose to include a button linking to where the viewer would but these tickets from. This button in reality links to The Design Museum's website, checking both the criteria for linking The Design Museum website and including a link to buy tickets from.

Finally for the map page for where to find the Design Museum, I took another image of The Design Museum to emphasise this page's purpose, the image used also will be linked at the end. I chose to include a screenshot from Google Maps of the museum's location, and also chose to include a button which linked to the actual Google Maps location of the museum, as I thought this would be a nice touch to make the page seem more authentic.

Overall I am very pleased with how my webpage poster came out, considering I have never used Adobe Animate in this way before. Hopefully what I've learned through this assignment can help develop my skills in both Adobe Animate, web design and animation in general to enhance and develop any future artefacts I chose to create down the road. Below is a link to a Google Drive containing the Adobe Animate project file for my poster for The Design Museum's Visions of the Future.

https://drive.google.com/file/d/1xbzOVdPa4xte32NOsuhGBDX3_MdFCDGY/view?usp=sharing

Image References

VR man: https://www.pexels.com/photo/man-wearing-vr-goggles-2007647/

VR woman: https://www.pexels.com/photo/a-woman-using-virtual-goggles-8728382/

Plasma ball: https://www.pexels.com/photo/plasma-ball-illustration-414860/

Toy robot: https://www.pexels.com/photo/blue-and-white-miniature-toy-robot-8566525/

Design Museum interior: https://www.archdaily.com/799642/the-design-museum-of-london-oma-plus-allies-and-morrison

Design Museum exterior: https://vocaleyes.co.uk/venues/the-design-museum/

Brain renders: https://www.brainfacts.org/3d-brain#zoom=true&focus=Brain

Comments

Post a Comment

Popular posts from this blog

Storytelling and Gaming development timeline and doccumentation.

-
Image
The purpose of this blog post is to outline the development, creative process and progression of my Storytelling and Gaming assignment for my second year second semester at Hertfordshire University. While I understand that the assignment brief requested a series of blog posts to be created over the duration of the project's development, I neglected this aspect of my work out of no fault than my own, due to already having to maintain a seperate blog for my Independent Project, and on being told prior that the final end product was the most significant component of what we present. I appologise for the unprofesional nature of this stand-in blog post, though shall do my best to use this blog post to deliver a cohesive timeline of events. CREATIVE DEVELOPMENT My choice to have the style and asesthetic of my storytelling project to be in the form of a retro-esc videogame introduction cutscene game both from my enjoyment of the style of introductory cutscene I wished to make, as well as...
Read more

Animating in Photoshop 2 - 17/11/2023

-
Image
 Today in Photoshop continuing onward from our bouncing ball project, we moved onto more complicated animation, namely being the animating of a simple walk cycle. To do this we used a template from AngryAnimator.com as a base for our initial animation. Below is shown the template we used for our initial animation. To animate our person taking each step we first separated each part of their body into their own layer, the head, the torso, and front and back arms and legs. This was done to make animating far easier and to prevent unwanted squash when warping the limbs, additionally converting each layer into a smart object for easier animating . In order to make the arms and legs move we utilised Photoshop's puppet warp tool in order to establish joints on the arms and legs to manipulate and animate. One again using Photoshop's timeline feature we created a 25 frames per second animation of the walk cycle. After that was complete we then created a background for our person to walk...
Read more

Animate Future Stories Piece Documentation

-
Image
 For my Adobe Animate project for our Future Stories assignment I chose to do a rendition of the 3 Little Pigs story modified to be an educational interactive story for children about Internet Safety and Password Security. My initial design process was done by drawing out the designs for the characters, the story structure and the movement of assets in animate in Adobe Photoshop, which can be seen below. The wolf was designed to be more angular, mainly made up of triangles to signify danger, also being a harsh red colour with yellow added on his ears and grin. The three pigs all share the same base body structures, but being colour coded and with different shaped heads, each chosen to signify the stability of each pig's house, or in the case of my story, passwords.  The first big has a circular head and is sacredly, with circles not being very stable shapes. The first pig is also a light blue colour to represent their general sad attitude and passiveness. The second pig is squ...
Read more