Printer Friendly Version

BellaOnline's Flash and Animation Editor

Craft Product Trailer Design Elements

In this tutorial, we will continue to dissect our craft product trailer prototype in preparation of creating a Motion template. We can then use the template to create other craft product trailers with less time and effort.

In the previous tutorial, we took a look at the product images and the transitions between them in our prototype (see below), resulting in a list of timeline positions for each image/transition. When we create our template, these will become drop zones for our product images. Also, we mentioned that we need two drop zones at the beginning and ending of the trailer for importing a logo opener and closer.

But there are three other customizable design elements in our trailer. First, there is a small copyright text in the lower left corner, which stays on the screen for the duration of the trailer. This will remain the same for each trailer, except for the color of the text, which we can easily change in the Inspector. There is also the background image that stays on the screen throughout the trailer. We can use a drop zone for this image to make it easy to change the background for each trailer.

As the first product image transitions on to the screen, so does a text title displaying the name of the product and a small background image behind the text. Both of these move in from the left together and stay on the screen until the product name is more prominently displayed with the seventh image at 00:00:36:15. They display at the bottom left corner of the screen just above the copyright text, so as not to interfere with the product images. We will use a drop zone for the small graphic that will be behind the title text. Of course, the text can be easily changed as any text in Motion.

When choosing the product images, they should be the same size and resolution as the trailer. The prototype trailer is 1920 x 1080 and 30 fps. So we will make each drop zone 1920 x 1080. However, we will also set the background for the drop zone to transparent so that the empty space around a smaller image will not be seen.

  • 00:00 - 55:00 Background image remains on screen
  • 00:00 - 55:00 Copyright text remains on screen
  • 9:15 - 37:00 - Text title and background image behind the text move on to the screen from left.

Join us in the Animation forum. | Join us in the Digital Art forum.


Flash and Animation Site @ BellaOnline
View This Article in Regular Layout

Content copyright © 2013 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact Diane Cipollo for details.

| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2018 Minerva WebWorks LLC. All rights reserved.

BellaOnline Editor