How to create a random selector filter for Instagram stories in SPARK AR!
I think everyone has seen one of those random selector filters on Instagram. Like “Which XYZ are you?”, then cards are flashing through and randomly land on one answer.
They are all over Instagram and they are a good way for brands or private profiles to interact with their audience.
I want to show you, how you can easily do one on your own in 5 easy steps with no experience in coding or something.
5 Steps
- Download Spark AR Studio
- Create the cards
- Importin the cards to Spark AR
- Program the filter in Spark AR
- Upload to the Spark AR Hub
1. Download Spark AR Studio
To develop an Instagram Filter, you have to download the Spark AR Studio. This is a free software from Facebook to create and upload the filters for Instagram and Facebook.
2. Create the cards
No matter if you want to create a filter with just text or pictures, you have to create a PNG of every single card. For this, you can use Sketch (my favorite), Photoshop, Illustrator, Canva, or any other app you are used for creating graphics.
Tue do the reason we are working with PNGs, your cards can have any shape you want.
I create the cards on a 500x500px canvas to ensure that they aren't too big in file size. Because Instagram has a limit of 4MB for all assets together, so it could get tricky if you want to use pictures with a high resolution.
After you have created the pictures just export them.
3. Import the cards
The next step is to import the cards into the Spark AR Studio.
- Open the Spark AR Hub
- Click on “+ Add Asset -> Import From Computer” and import the Start card.
- Click on “+ Add Asset -> Animation Sequence” to create an animation Sequence
- Click on the Animation Sequence Asset you just created and click on the menu right “Texure — Choose File -> New Image Texture” and select all the cards you want in the selector.
Tip: Disable compression on the pictures to ensure good quality on the picures.
4. Programm the filter
Open the patch editor in the Spark AR Studio.
- View -> Show/Hide Patch Editor
Now we are setting up the patches for the logic of the filter.
Import the following patches by clicking on “+ Add Patch”
- Screen Tap
- 2x Switch
- 2x Pulse
- Loop Animation
- Random
- Delay
Connecting the patches.
Just connect the patches as shown in the following picture.
Setting up the scene
For this, we have to create the following objects in the scene panel. Just click on “+ Add Object” in the right corner at the scene panel.
- Facetracker
- 2x planes
Drag & Drop the 2 planes into the Facetracker Objects
- Bring the planes Into the right
Creating the materials
- Create 2 materials in the assets panel by clicking on “+ Add Assets -> Material”
- Assign the already created textures to the materials.
- Select the material in the Asset panel and assign the two textures to the the matereials.
- NOTE: Set the “Shader Type” to “Flat” for better colors.
- Assign the materials to the planes in the scene.
- Select one of the plane objects in the scene panel and select one of the materials. (Repeat with the second one)
- You will see that the plane with the material of the animation sequence is already shuffeling through.
- NOTE: Name materials and planes in a way you find them.
Getting the planes in the right place
There are two ways to get the planes into the place you want.
The first is by dragging them in the 3D view with the handles.
But for more accuracy I recommend typing in the coordinates manually on the property panel on the right hand side. Just play around with the number.
I normally do X:0 Y:0,12 Z:0.
You can also scale up the planes here.
Creating patches from the assets
After everything is set up we have to create a view patches from the assets. This can be cone by clicking on the little arrows besides the properties.
Just click on them and it will turn yellow and a yellow patch with the name will appear in the patch editor.
For this filter we need the “visible” property from the two planes and the “Current Frame” property from the animation sequence asset.
Now we just have to connect them to the patches we have already set up and to type in the right numbers to get it to work.
Patch Settings:
- Delay - Duration:3.5
This is how long the selector shuffels. - Loop Animation - Duration: 0.05
The speed the cards are flipping through. - Random - Strat Range: -0.4 | End Range: 7.4 (if you have for example 14 cards you have to type in 14.4 here and so on)
Test!
Now it ist time to test the filter. We can do this with the build in emulator. Just make sure the interaction is set to “Simulate Touch”.
You can also test it by sending it to Instagram or with the Spark AR App on your phone. This can be done on the left hand corner.
5. Upload the filter to the Spark AR Hub
When you are satisfied with your filter you can upload it to your profile so everyone on Instagram or Facebook can use it.
For this there are also two ways to do it.
- Straight out from the Spark AR Studio.
This will only allow you to upload to your own profiles. - With the Spark AR Hub.
Export the filter. Go to the Spark AR Hub and log in with your Facebook Account and start the upload from there
I hope you enjoyed this little tutorial and you are ready to do your own random selector
- Thanks for reading, Daniel
