3D, Animation, Branding, Identity, Illustration, Motion, Storytelling, Strategy, Television, Title Sequences, UX, Web
It’s Thursday. And we have something we’d like to share with you. Two things, actually, packed in the same story: a new partnership and a new product. Yes! Beoplay is tossing it’s newest product out onto the market. Meet A2. A fantastic little transportable loudspeaker that not only emits great sound, but also has a gorgeous, eye-opening design. At any rate, we’re a little bit in love with this tiny atmopshere-creator. Even though we’ve spent a lot of time staring at it over the past few weeks.
We have actually been part of the launch campaign, for which we have created feature and product films for in-store use around the world. We’ve also converted our video and animation ideas to a product website, and made sure Beoplay was ready to present A2’s most important product features on Instagram.
With this production, we wanted to see how flexibly we could deliver this type of thing if we combined many aspects into the same work process. That’s why from the start we created a rule that every single scene from the product film should be able to be taken out and function well on its own. We wanted to have precisely the same expressions and movement everywhere from Instagram and in-store videos to the website and other digital platforms. It worked out great, and as soon as the film was approved we created the part of the website that was our responsibility in a very short time – but still with 100% correlation between the expressions and animations.
In order to have maximal freedom concerning the product’s angles and movements, we drew and animated it in 3D. Afterwards, the entire film was put together in AfterEffects with backgrounds and images from an earlier photo shoot.
On the website, it was important that we thought in terms of performance. The videos needed to be of relatively high quality in order to present the product as well as possible. We knew we didn’t want to have just one video that would play and then finish, leaving the site static. We also didn’t want to have a video on each web section that was several minutes long. The solution was to work with dividing the video into one scene per section.
Basically we thought in terms of two ‘chapters’, establishing a loop. It was pretty basic, but with this approach we could establish and build scenes within, say, 3-5 seconds, while at the same time loading the longer loop – invisibly, of course – so the establishing shots can disappear after the execution, after which our loop takes over and runs infinitely. At least until the site is reloaded.
This seems to be working as we hoped, which opens up for a lot of other possibilities for video integration on websites in general. We’re looking forward to it!
VISIT THE WEBSITE