Create a lottie splash screen
Table of Contents
This document explains how to create a static splash screen for a Bolt app, using our interstitial ad capabilities.
Before getting started, you'll need the following:
1. Adobe After Effects
2. The Bodymovin plugin installed
3. The desired image
4. The hex code for the splash screen background colour
STEPS
1. Create a new composition with the dimensions 350x790
2. Add the image in this composition with your desired one, positioning it wherever you want within the frame, You'll want to leave at least a small amount of padding between your image and the edges of the frame
3. The typical animation time of a Lottie screen is 3 seconds, this should prove sufficient in most cases. Should you want to change it, edit the "duration" field in Composition>Composition settings and the duration of the layer (which should be your only layer) in the animation window at the bottom
4. Save your project
5. Open the Bodymovin window from Window>Extensions>Bodymovin
6. Tick the "selected" circle next to flatsplash and flatsplash only (this should already be ticked)
7. Click the settings cog icon for flatsplash
8. Check that the "Glyphs" item is ticked and that "include in json" under "Assets" is ticked (again, this should already be the case if using the attached template)
9. Select your export destination by clicking the three dots to the right of the flatsplash line item
10. Click render, and wait until it's complete
11. Find the json you just exported from After Effects and send it to us
If the render fails, please check AE > preferences > General > Scripting and expressions and then allow scripts to write files and access network