Shapes, Animations and Audio in Lightwell

Suzanne Xie
Lightwell Pro
Published in
4 min readSep 12, 2018

#LightwellinAction highlights our newest features monthly 🥳

It’s been a busy month with updates released every week! Since our last update (which introduced Chromebook compatibility, Editor previewing, a new Warning System, and more ⚡), we’re excited to share a few new features up our sleeves.

New: Shapes

Layers now support custom shapes and colors. This means you can add colored shapes to fill backgrounds (save on app file size!), which is a common optimization concern when creating image heavy apps like stories or games. Shapes also scale up and down without pixelation, so you can create a shape layer once and use it throughout your app.

Artists can create and use shapes in Lightwell, knowing that it will make their finished apps more efficient and beautiful.📲

The benefit of using Shape and Text Layers is that they have a minimal footprint on your final app size while Image Layers are dependent on the size of your image assets.

Adding Layers: Images, Text, Shapes

Artists can create and use shapes in Lightwell, knowing that it will make their finished apps more efficient and beautiful. 📲

Building support for our shape engine allowed us to replace the canvas layer outlines with dynamic shapes. This gave us a good testing ground for shapes, better control of the appearance, as well as the added benefit of improving overall performance of the canvas. Faster canvas speeds also makes connectivity to your iOS device smoother for previewing. Double 👍!

Pro Tip: You can drag images directly onto the canvas.

Drag-n-drop image files onto the canvas like you would in Photoshop or Sketch

Creating Animations

Introducing a new and easier way to create animations on the canvas. With Lightwell, you can edit keyframes for custom animations without leaving your scene.

The new interface is 💯 for creating animations quickly and intuitively on your canvas, without needing to switch contexts.

Here’s a rundown of the three new animation interfaces: Rotation, Opacity and Scale. Similar to Position animation, the keyframes and handles are directly on the canvas for you to edit.

Rotation animation

Rotation

We’ve added rotation handles right on your layers which makes creating rotation animation much easier. 😂
Start by picking an anchor point, then slide to a degree angle and see your layers rotate in real-time. 🔄

Opacity animation

Opacity

Want to create transparency in your animations? So do we!The new opacity slider edits alpha values for multiple keyframes.

You get the granularity of selecting the exact opacity values while also seeing the visual effect on your layers.

Scale animation

Scale

With the scale animations, you can see how your layers scale in your scene. The new scale handles means no more guesswork needed (especially with multi-keyframe animations).

Note: The keyframe handle is the farthest corner from the layer’s anchor point.

Editing Multiple Animations

The animation manager can also display multiple animations at once, allowing ease of editing and timing.

The new interface is 💯 for creating animations quickly and intuitively on your canvas, without needing to switch contexts.

Audio Events

Lightwell now lets any audio event trigger animations, audio and navigation. This means your dialogue, music, and sound effects can lead to an infinite number of interactive possibilities!

Make sure to update to the newest version of Lightwell. If you don’t see an automatic update reminder, you can always “Check for Updates” in your main menu.

Until next time Lightwellers! Happy Creating! ✨

Download Lightwell for Mac OS X
Download the Lightwell Previewer app for iOS

--

--

Suzanne Xie
Lightwell Pro

Founder and CEO of @Hullabalu building @Lightwellpro. Fan of software and soft serve.🍦