Clear
Back

As a result of the coronavirus (COVID-19) outbreak, we have a reduced capacity to review effects and delays in publishing are expected. Learn more.

There may be differences between your version of Spark AR Studio and this tutorial because the product is currently in beta and we update it regularly.

Tutorial: Boombox with Audio

The Boombox with Audio effect is a world effect including audio and animation. Tapping the boombox on the device screen causes the effect to switch between 3 increasingly complex synced music loops. The volume of one clip will increase, with the others fading into the background. This technique is known as ‘loop layers’.

Something Went Wrong
We're having trouble playing this video.


You’ll use the Patch Editor to build this effect, trying out different audio, interaction and animation patches.

Download the sample content to follow this tutorial. You can adapt any of the assets in this effect in your own projects.

You'll lean about:

  1. Object hierarchy in Spark AR Studio.
  2. Placing an object on a plane tracker - so it'll appear when the camera detects a real life surface.
  3. Using null objects.
  4. Adding animation.
  5. Adding audio.
  6. Changing the position, scale and rotation of an object based on interactions.

If you want to build this effect yourself, open the unfinished effect in the sample content folder. We've already imported the assets you need, to help you get started quickly.

Object hierarchy

In this effect, we'll create child-parent relationships between different objects in the scene. Child objects will take on or be affected by the properties of the parent object.

To make one object the child of another, all you need to do is drag the child object onto the parent object. You can also right-click on an object and insert an object as its child.

When an object is a child of another object, it'll be listed underneath it in the Scene panel, like this:



In the example above, Boombox_animated is a 3D object. It's a child of a null object, placer. It will take on any transformations applied to the null object.

Adding a plane tracker

To start building the effect, add a plane tracker to your scene. Objects that are children of a plane tracker will appear when a flat surface is detected by the camera, for example a table or floor.

When you add a plane tracker the video in Spark AR Studio will change to blank.

Using null objects

Insert a null object as a child of the plane tracker.

To insert a null object:

  1. Right-click on the plane tracker.
  2. Select Null Object from the menu.
  3. Rename it placer.

We'll use placer to group 2 objects so we can make changes to them both at the same time:

  1. The 3D object that looks like a boombox.
  2. An object called a speaker, which we'll configure to play sound in the scene.

Adding the boombox 3D object

We've already added the 3D object to the unfinished project. It's listed in the Assets panel as boombox_animated:



To add it to the effect, just drag and drop it from the Assets panel, into the Scene panel. Drag it on to placer so it becomes a child of the null object:



You'll see the boombox object in the Viewport and Simulator, but it isn't animated yet - we'll use animation patches to do this later.

Animating the boombox

Next you'll use the Patch Editor to build a simple graph, animating the boombox.

If you expand boombox_animated in the Scene panel, you'll see it's made up of multiple objects:



The first 4 objects are meshes. The mesh is where materials are applied to determine how the boombox looks.

There's also a skeleton which you can expand to reveal 3 joints. We'll manipulate these joints to control the animation. We'll animate:

  1. base_jnt - to add movement to the base of the boombox.
  2. speaker_left_jnt and speaker_right_jnt - to animate the two speakers.

Creating the patches

We're going to manipulate the 3D Scale properties of the joints, so the boombox appears to get bigger, then smaller.

First, create patches to represent the 3D Scale of each joint:

  1. Select base_jnt in the Scene panel.
  2. In the Inspector, click the arrow next to Scale. This will create a patch and open the Patch Editor.


Repeat these steps for speaker_left_jnt and speaker_right_jnt, so you have 3 patches in the Patch Editor.



Next, create patches to drive the animation:

  1. Right-click in the Patch Editor.
  2. Select 2 Loop Animation and 2 Transition patches from the menu.


The Loop Animation patch and Transition patches are usually used together. The Loop Animation patch controls the progress of an animation, and the Transition patch can be configured to control how and where the object moves.

Animating the base

Start by connecting:

  1. The Progress port in the Loop Animation patch to Progress port in the Transition patch.
  2. The output of the Transition port to the 3D Scale port in the base_jnt patch.


Because the Start value in the Transition patch is set to 0 by default, the rescaling effect is quite extreme:



To change this, set the Start values to 0.09.

Currently the boombox is getting bigger, then resetting to its original size. In the Loop Animation patch, check the box next to Mirrored. The boombox will get bigger and then gradually smaller:



The movement is also a bit slow - change the Duration to 0.4 to speed the animation up.

The final adjustment is to change the Curve in the Transition patch. This sets the movement of the object as it rescales. We chose Quintic In, but you could pick something different.

Your finished graph should look like this:



Animating the speakers

Animating the speakers is very similar to animating the base of the boombox. Again:

  1. Connect the Progress port in the second Loop Animation patch to the Progress port in the second Transition patch.
  2. Connect the output of the Transition port to the 3D Scale port - this time in both speaker_right_jnt and speaker_left_jnt.

In the Loop Animation patch:

  1. Again, check the box next to Mirrored.
  2. Change the Duration - this time to 0.2 seconds.

In the Transition patch:

  1. Change the Start values to 0.7, and the End values to 0.85.
  2. Change the Curve to Elastic Out.

Your graph will look like this:

Adding looping audio

Start by adding the 3 audio files to the scene. They’re listed in the Assets panel as:

  • arl_mus_SleepTalk_lpl_01.m4a.
  • arl_mus_SleepTalk_lpl_02.m4a.
  • arl_mus_SleepTalk_lpl_03.m4a.

You can customize this effect by swapping them for a different files - there are lots of free, licensed audio files to choose from in the AR Library.

Add the speakers

An object called a speaker renders audio in the effect. You’ll need to add 3, one for each audio file. Add the speakers as children of the placer null object:

  1. In the Scene panel, right-click on placer.
  2. Select Add.
  3. Select Speaker.
  4. Add 2 more speakers - you can use keyboard shortcuts to copy and paste the one you’ve already added.

It’s worth renaming the speakers to help you keep track as you’re building the effect. Rename:

  1. speaker0 - speakerMusicLoop
  2. speaker1 - speakerMusicLoop2
  3. speaker2 - speakerMusicLoop3

Here’s how the Scene panel will look, with the 3 new speakers highlighted:

Set up the audio playback

You’ll use a patch representing each audio file, the Single-Clip Controller and the Audio Player patches to do this. A Pulse patch will detect when the effect opens and send a signal to the rest of the graph, triggering the playback. At the end of the graph, a patch representing the Audio property of each speaker will render the sound in the scene. To create this patch:

  1. In the Scene panel, select all 3 speakers. You can select them at the same time using keyboard shortcuts.
  2. In the Inspector, click the arrow symbol to the right of Audio.

Three yellow patches will be added to the Patch Editor:



To create the other patches, right-click in the Patch Editor to open the menu. Add the following patches:

  1. 3 Single-Clip Controller patches
  2. 3 Audio Player patches
  3. 3 Pulse patches - this patch will detect when the effect has been opened, and send a signal to the graph telling the audio to play.

Finally a patch to represent each audio file:

  1. Select an audio file in the Assets panel.
  2. Drag it into the Patch Editor.
  3. Repeat these steps for the remaining 2 audio files - you'll see 3 orange patches in the Patch Editor.


You'll build 3 small graphs, one for each audio file. To do this, connect:

  1. The output of each Pulse patch to the Loop input in a Single-Clip Controller patch.
  2. The output of each Single Clip Controller patch to the Controller input in the Audio Player patch.
  3. The output of an Audio Player patch to the Audio input in a speaker patch.
  4. The output of a patch representing the audio clip to the Audio Clip input in an Audio Player patch.

Here’s how the 3 graphs in the Patch Editor will look:



If you click the Reset button in the toolbar, you’ll find all 3 clips are playing at the same time! It’s probably a good idea to turn down the volume on your computer until you’ve set up the loop layers.

Setting up audio loop layers

For the loop layers, we’ll add a volume value for each of the 3 speakers to an Option Picker patch. In each Option Picker, one speaker will be set to play at 50% volume, and the others will be set to 0.

An interaction patch connected to a Counter patch will count through each of the Option Picker patches. As a result, every time the boombox is tapped a different speaker will gradually reach 50% volume and the others will fade down to 0%.

Add the interaction patch

To add the interaction patch that will detect a tap on the boombox object on the device screen:

  1. In the Scene panel, select boombox_animated.
  2. Go to the Inspector.
  3. Under Interactions, click Create.
  4. Select Object Tap from the menu.

An Object Tap patch connected to a patch representing the boombox object in the scene will be added to the Patch Editor:

Add the counter and option picker patches

To create the patches, right-click in the Patch Editor and add:

  1. 1 Counter patch.
  2. 3 Option Picker patches.


Next create patches to represent the Volume property of the speakers. Like before, select the speakers in the Scene panel. This time, click the arrow symbol next to Volume in the Inspector. 3 yellow patches will be added to the Patch Editor:

Connecting the patches

Now make connections between:

  1. The output of Object Tap Patch and Increase input in the Counter patch.
  2. The output of the Counter patch and the Option input in each of the 3 Option Picker patches.
  3. The output of each of the Option Picker patches to a patch representing the Volume of the speaker.

Here’s how the graph will look:

Editing the patches

Because there are 3 options to count through, change the Maximum Count value in the Counter patch to 3.

In each Option Picker patch, add a value to control the volume:

  1. In the Option Picker at the top of the graph, set the first input value to 0.5.
  2. In the Option Picker in the middle of the graph, set the second input value to 0.5.
  3. In the Option Picker at the bottom of the graph, set the third input value to 0.5.

Now each time the screen is tapped, the counter state will be advanced. As a result, only one of the audio clips to be audible.

Adding exponential smoothing

An Exponential Smoothing patch will finish this part of the graph. Adding this patch between each Option Picker and speaker patch will change the volume more gradually when the screen is tapped, creating the cross-fade effect. Create this patch using the menu in the Patch Editor.

The finished section of the graph should will like this:

Editing the animation

So the animation moves in time with the audio clip, make a final adjustment to the animation patches you created earlier.

The audio clip is playing at 85 beats per minute. You’re going to use a Divide patch to output the seconds between each beat. This signal will drive the animation of the base of the speaker. You’ll animate the speakers at twice the speed of the base, using another Divide patch to halve the number outputted by the first Divide patch.

From the menu in the Patch Editor, select 2 Divide patches. Connect:

  • The output of one Divide patch to the input of the other Divide patch, and the Duration input of the Loop Animation patch driving the animation of base_jnt.
  • The output of the other Divide patch to the Duration input of the other Loop Animation patch.

In the first Divide patch, set:

  • The value at the top of the patch to 60, for the number of seconds in a minute.
  • The value at the bottom of the patch to 85, for the number of beats per minute in the audio clip.

Set the bottom value of the second Divide patch to 2.

Here’s how the complete graph will look:

Changing the position, scale and rotation of the boombox

This effect uses interaction patches to change the scale, position and rotation of the boombox.

Adjust these properties in the null object, placer. This is because the scale, rotation and position of the boombox object are already controlled by the animation:

  1. Select placer in the Scene panel.
  2. Click the circles next to Scale, Position and Rotation in the Inspector to create patches representing these properties.

Find out more about using screen interactions to change the scale, position and rotation of an object.

Testing the effect

The best way to try out this effect is by mirroring it to your device with the Spark AR Player app.

Join the Spark AR Creator's community

Find inspiration, see examples, get support, and share your work with a network of creators.

Join Community

Join the Spark AR Creator's community

Find inspiration, see examples, get support, and share your work with a network of creators.

Join Community

Frequently asked questions

Have a specific question? Maybe it's been answered.


Read FAQs
Was this document helpful?