Using camera at runtime: A gamer’s dream come true!

As a game developer, how often have you wished you could pass on the run-time camera controls to your users when they play your animated game?

As a gamer myself, I often wished I could control the camera movement by focusing the camera on certain objects during the animation. While developing a game, you will find it difficult to provide this runtime feature to your end users with a static camera.

Adobe Animate provides the perfect solution to your interactivity woes! You can now use APIs to provide run-time control on camera features such as location and movement. In addition to this, you can mask the camera, zoom, pan, rotate, add color effects, and pin camera to any object in animation. If you are not familiar with writing scripts in Animate, here’s some good news! Animate has introduced a simple and intuitive code wizard, that automatically generates code without your intervention.

Read on for a step-by-step tutorial to learn how to use camera APIs in Animate CC. Here are the assets that can help you get started:

Click here to download the samples.zip file. It consists of:

  • runtime-camera.fla  – source file for interactive camera elements animation
  • camera-mask.fla  – source file for camera mask usage at runtime

In the sample file, you can see a dog on jet pack and a pig on parachute moving around an urban landscape. At runtime, you can control and focus the camera on these two objects.

A step-by-step approach to creating animation using interactive camera is depicted in the following flow diagram.

Create animation with an interactive camera

  1. Create objects on individual layers in Animate by using drawing tools of Animate. For example, add parachute object on pig-parachute layer, jetpack object on Dog_Jetpack layer, and so on.
  2. Add camera to the timeline by clicking the camera tool in Animate tool bar.
  3. Add tweening to layers (Insert > Create Classic Tween). In this sample, we have used classic tween.
  4. Click Windows > Actions to open the Actions window.
  5. Click Add using wizard in Actions window, to open the actions code wizard.
  6. Create actions such as attach layer to camera, camera panning, and camera rotation by selecting them from the list in Add using wizard window.
  7. Click Next and add triggers for the corresponding objects.
  8. Click the frame on left pane to edit code for adding additional API methods and parameters as per your requirement.
  9. Click finish and play.

The above video demonstrates the usage of interactive camera by focusing the camera on parachute, jet pack, and the urban landscape at various intervals.

For more information on actions code wizard, see How to use actions code wizard.

You can also mask the objects in animation at runtime (for Action Script 3 document type) using the following camera API code:

import fl.VirtualCamera;
fl.VirtualCamera.getCamera(root).setCameraMask(torch);

Here is a sample screenshot from the animation, when using an oval shaped mask:

If you have any further queries or feedback, you are welcome to leave a comment at the end of this blog.

For more information on layer depth and camera enhancement features in Animate, see using advanced layers and using camera in Animate CC.

For more information on all the features introduced in October 2017 release, see New features summary.