Animate

1 May, 202326 November, 2023 by ward2021

The assignment task is to create a 15/30 second web-based advert or infographic focused on an imaginary nightclub or music venue. I need to consider aspects such as branding, logos, colors, shape theory, style, and target audience to make a visually appealing and memorable piece.

To complete this assignment, I must use Adobe Animate and incorporate animated elements like foregrounds, backgrounds, and some level of interaction to make the advertisement or infographic more engaging.

Initial Ideas

Upon analysing the brief, I initiated the creative process by crafting a comprehensive mind map filled with a multitude of diverse ideas to consider and explore in greater detail. Figure 1 displays those ideas.

Figure 1: Presented here is an extensive mind map filled with ideas that will contribute towards the progression of the final animation.

Initially, I was captivated by the idea of incorporating the pop art style into the design. This artistic movement allowed me to draw inspiration from the most renowned artists of the era when pop art gained popularity. However, upon further development, I realised this design direction was better suited for a music event than the intended venue. Consequently, I decided to discard this idea and explore alternative concepts.

figure 2: The initial idea sketch. The concept involved a dynamic rotating background, with a prominent figure of a renowned singer at the center. To convey information, speech bubbles would gracefully appear, carrying relevant content within them.

After setting aside my initial idea, I shifted my focus to another concept from the mind map. This fresh idea centred around a venue named Groovy Garden. At this point, I contemplated whether to create a nightclub atmosphere or a festival-style setting for the venue. To better align the design with the name, I delved into the genres associated with the term “groove,” including salsa, rock, soul, funk, and fusion. This exploration helped guide me towards the most appropriate direction for the design.

Figure 3: Here is a basic idea sketch of how I envision the final product and the placement of animated features using HTML. The setting is a straightforward bar scene.

Final Idea

After careful consideration, I ultimately settled on the concept of Groove Garden as my final idea. Through extensive research, I discovered that the name was already associated with a festival. Therefore, I decided to focus more on creating a nightclub/bar setting rather than a festival atmosphere. My aim is to primarily appeal to the younger generation, specifically individuals aged between 20 and 35.

Logo Development

To infuse the essence of music into the concept, I incorporated the symbol of an eighth note and explored many different placements, giving the logo design a distinct musical touch.

To create the musical symbol, I discovered an online image of tropical flowers and utilised the clipping mask tool. This enabled me to apply the floral pattern specifically to the symbol, achieving the desired visual effect. As a result, the symbol with the floral pattern can be utilised as a secondary logo, as it exudes a garden-themed ambience and name, making it suitable for such purposes.

Final Logo

Displayed below are the final logos that I have selected. These logos possess a greater level of clarity and align well with their intended aesthetic purposes.

Scene

The advertisement scene takes place in a nightclub bar. The colour palette is intentionally limited. I have incorporated the logo as a sign positioned behind the bar, enhancing its visibility by adding a luminosity effect to the back, giving the impression that it is illuminated. To add visual interest, I have placed two images on either side of the logo, acting as posters on the walls. These images are interactive, meaning that when the user clicks on them, a box containing relevant information will appear. The emojis displayed on the images correspond to the information that appears when clicked.

Storyboard

Considering the limited timeframe for the animation, I opted for a relatively simple storyboard to ensure a clear and concise viewer experience. The intention was to avoid overwhelming the audience and detracting from the main focus, which was the interactivity of the animation.

Final Animation

Using Adobe Animate, I finalised the animation. I designed four distinct action pop-ups integrated with HTML to enable interactivity. These pop-ups facilitate user engagement by providing interactive elements within the animation.

Figure 8: The final Infographic Animation.

Reflection

This segment of the assignment allowed me to delve deeper into the capabilities of Adobe Animate and explore the interactive possibilities using HTML. It proved to be a challenging task that required numerous trial-and-error iterations throughout the process, but I eventually understood where I was going wrong and corrected it.

References

Freepik. Unknown. Vector cocktail bar or nightclub illustration. [ONLINE] Available at: https://www.freepik.com/premium-vector/cocktail-bar-nightclub-with-alcoholic-fruit-juice-drinks-cocktails-illustration_33726582.htm#query=bar%20illustration&position=45&from_view=keyword&track=ais. [Accessed 28 April 2023].
Adobe Stock. Unknown. Drawing of palm leaves and flowers in a modern style, tropical print pattern on a black background. [ONLINE] Available at: https://stock.adobe.com/bg/searchk=tropical+wallpaper+pattern&asset_id=564696168. [Accessed 28 April 2023].