Creating Animated Contentwith Moovly

Training WorkshopGeert Coppens

Co-Founder, Moovly

October 2014

Agenda

Part 1: Working with Moovly

• The Moovly Editor

• Styles and colors

• Uploading media

• Advanced Features

• The Moovly Marketplace

Part 2: From Script to Animation

• The creation process from A to Z

• Writing scripts

• Production

• Content distribution

Part 3: Using Moovly in Education

• Flipping your classroom with animated video

• The role of text books and publishers

• Practical cases and examples

• Q&A

Introduction

• About Moovly• The power of animation• Democratizing animation• Application areas

– Company and product videos (online, mobile, offline)– Communication, presentations – Tutorials, explainers, e-learning, education– Banners, narrowcasting, events– Contests, co-creation, brand activation– E-cards, job applications, info graphics, …

What can you make with Moovly?Animations, videos, banners, music video clips, commercials, info graphics, photo animations, presentations and other multimedia content = Moov(s)

Requirements

• Moovly is browser-based

• Windows-PC or Mac

• Chrome, Internet Explorer, Firefox, Safari

• Moovly Editor is Flash-based

– > Editor does not (yet) work on iPad

• Internet connection

PART 1: Working with Moovly

Getting Started

• Creating an account

• Managing your profile via Manage -> Profile

Moovly Licenses

Free Plus Pro Business Agency

INDIVIDUALS ORGANIZATIONS

Creating a new Moov

The Moovly Editor

Libraries

The “Stage”

Timeline

SaveProperties

Tips

Thumbnails and scenes

Upload pictures and sound

Adjusting the EditorZoomMoving the Stage

The Libraries

• The Moovly Libraries

– Doodle Marker

– Info graphics

– Colorful Cartoon (Plus)

– Cut-Out (Pro)

• Personal Library

– Individual uploads

• Marketplace Objects

Filter and search

Manipulating ObjectsFlip

Rotate

Resize

Cut and pasteUNDO

Selecting and aligning multiple objects

Click on the first object, hold Shift and click on the second object

Working with Text

Text background can be filled with color and be made transparent

The Color Picker

Last used colors

Pick (copy) existing color

Exact color code

Layers on the Timeline

Objects in higher layers are in front of

lower ones

Animations on the Timeline

Direction: in Properties

The Move and Zoom animation

Starting position End position

- Intermediate positions also possible!- Rotations too- Remove an intermediate position:

Click position point in timeline + Delete

Upload media to your Personal Library

Video

PictureSound

Record using microphone

Refresh after import of objects from Marketplace

Remove

Advanced Moovly Features

• Editing Sound

• Working with scenes– Simplifying the Timeline

– Inserting and removing “time”

– Cut and paste scenes

• Presentation Mode

• Other dimensions/resolutions

• Replacing Objects (swap)

• Upload video clips

Managing Sound

Adjust length

Adjust volume level

Right-click to split sound

Adding Voice-Over

• Record yourself or have it recorded

• OR: first record yourself, later:

– Voice of a colleague

– Professional voice

Locking an Object/Layer

• Lock = no changes possible• Object not clickable• Use when an object is covering others or should remain untouched

Selecting multiple objects on the Timeline

• Hold Shift and click

• Shift horizontally: relative timing is respected

Working with Scenes

• What is a Scene?– A short piece of content

– Typically an isolated part, a chapter, a complex animation

– Can be moved, copied or deleted as a whole

Remove scene

Add scene

Adjusting the scene length

All objects starting on the right-hand side of the edge shift with itObjects left of the border stay untouched

• Dragging the scene edge to the right = insert time• Dragging the scene edge to the left = remove time

What sits within a scene?

• All objects (graphics, sound…) of which the start and end falls between the scene edges

When moving, cutting or copying a scene, only those objects that are fully inside the scene are included.

Splitting scenes

Click right in the thumbnail zone:

Moving, cutting, copying and pasting scenes

Or use Ctrl-C, Ctrl-X, Ctrl-V

Copy Scenes to Personal Library

• = Pro feature

• Save scenes for later use

• Copy content from one moov to another

Use Saved Scenes

Simplifying the Timeline

Remove to only show the objects of the active scene

Presentation Mode

Pins indicate where video will pause

Click here to insert a pin (= a stop) at the Timeline marker.

Presentation mode requires downloading as a Flash-file

Dimensions and resolutions

Dimensions and resolutions

1920 x 1080

1280 x 720

720 x 480

480p

720p

1080p

Replacing Objects (Swap Object)

While keeping (standard) animations, color, position and timing

Uploading video

Max size per clip: 15MB= typically 30 to 45 sec in MP4 (compressed)

Formats: FLV, MOV, MP4, AVI, WMV, M4V

Using the Moovly Marketplace

• Graphical Objects

• Music and Sounds

• Templates

• Future:

– Voice-over services

– Other services (copywriting, production…)

– Clips

Using or earning credits

The Details Screen

Changing title and description:

Exporting (Download/Publish)

Sharing moovs (including source)

PART 2: From Script to Animation

StoryboardAnimation

Programming

Production process

Voice over

AnalysisScript

Professional/Custom made

Script AnimationVoice over

Moovly

Design/L&F

Linear content processing

Chapter 1 Chapter 3 Chapter 5Chapter 2 Chapter 4

User progress

Drop-off point

Helicopter view

CONTENT

Elevator pitch

Most important

CONTENT

Secundary info

CONTENT

Secondary

Most important

Pyramid model

Key

information

Secondary

information

Background info – reference material

Put the most important information

in the strongest/richest format

Text

Multimedia

High impact

Low

The Script

• = most important messages in powerful wording

• = your voice-over text

– 120 to 140 words per minute

– 3 minutes = 1 A4

• Approach:

1. Brainstorm, snippets, ideas, post-its, mind-map

2. Organize and structure

3. Write out in full sentences

Example structure of a script

• Introduction: context or case: 1 or 2 sentences

• What is this video about: 1 sentence

• Middle part: detailed story

• Conclusion: what to remember

Example

Wireless networks are everywhere: at work, at home or in public places. We usually talk about “Wifi”.

This video explains what Wifi stands for and how the common Wifi standards differ from each other.

Local area networks – abbreviated as LAN – have been wired networks for many years. Wiring became a requirement for many years, and the introduction of higher speeds meant …

…

So if you buy a new smartphone, tablet, computer or router, make sure to check the supported Wifi standards, as these determine the speed and reliability of your network connections. Also don’t forget to verify the security standards that your device supports. Happy surfing!

Introduction

Middle part

Conclusion

The Production Process

• Choose a style

• Assemble your media and upload to Moovly

– Pictures

– Sound (voice, music, sounds)

– Video clips

• Compose your content and synchronize

• See Part 1

Styles and Colors

PART 2: Using Moovly in Education

Using Moovly in Education

• Flipping your classroom with animated video

– Editable educational videos

– Project work, assignments, book reviews, translation exercises, media literacy…

• The role of text books and publishers

– > Moovly theme libraries in line with text books

• Practical cases and examples

The Teacher as a Moovly Group Manager

• Add, remove and manage Moovly accounts in your group

• Control rights

• Start page:

https://editor.moovly.com/en/edu/start

Contact details

• www.moovly.com

• gcoppens@moovly.com

• Twitter: @moovly - @moovly4edu

• Facebook, Google+, LinkedIn…