Recently I picked up a copy of Creativity, Inc. and have been completely immersed. Near the beginning Ed Catmull shares a story that really confirms something that I believe in.
“… so many who were pursuing [computer animation] held their discoveries close to their vests… After talking about it, however, Alvy and I decided to do the opposite — to share our work with the outside world. My view was that we were all so far from achieving our goal that to hoard ideas only impeded our ability to get to the finish line.”
In July of 2016 I partnered with Paul Slemmer, Senior Motion Designer at VeracityColab, to update his Rigged Box preset.
After using the preset for a while I saw room for improvement, especially when it came to anchor point offset. Adding a few more slider expression controls was easy, but I wanted something a little more modular. I was inspired by Type Array, which had recently been updated by Paul Conigliaro, to utilize a pseudo effect.
Our new Rigged Box 3.0 generated a lot of interest and support from the motion design community and was recently featured in School of Motion’s weekly newsletter.
Let’s go ahead and stop here to clarify a few terms.
- Preset: Applying an animation preset recalls what you already created on a single layer using other effects, expressions, or keyframes.
- Script: Using JavaScript and the After Effects API, scripts tell After Effects what to do such as automating repetitive tasks. Scripts cannot actually affect pixels in your composition.
- Extension: Extensions are more robust scripts for After Effects and won’t really be covered here.
- Plug-in: Native or 3rd party plug-ins (effects) actually affect pixels in your composition.
- Pseudo Effect: A pseudo effect can contain all of the different property controller types (sliders, angles, colors, etc.) but cannot directly affect pixels in your composition. Instead, pseudo effects are normally used as controllers for expression based setups.
- Expressions: JavaScript that can be used to affect the property they are applied to. Expressions can generate motion, link multiple properties together, and much more.
To learn more about these different After Effects tools, check out this quick tip from Mikey Borup.
Creating an animation preset using a pseudo effect and expressions
Creating an animation preset using a pseudo effect and expressions is simple. However, I don’t claim to be an expert and my way might not even be the best way. If you see room for improvement, tell me, either through Medium or on Twitter.
1. Find a need
First, I need to recognize that using simple expression controllers in After Effects can be extremely robust and often I don’t need a pseudo effect. However, sometimes it makes sense for me to take the extra time in the beginning of a project because I know I’ll be reusing my setup (or rig) often.
My most recent rig was a layer targeting system that I named Target (original, I know). I knew that I would have 30+ pairs of shape layer targets and animated text connected with an animated stroke. I also knew that my client would ask for a lot of changes, particularly when it came to the position of each target and text description.
This type of setup is perfect for implementing a pseudo effect and animation preset.
2. Add expression controls
I always start by listing out everything I think I’ll need to for my rig. It’s practically impossible for me to imagine every use-case immediately, so I build a working example using expression controllers first. It’s a lot easier to add or remove an effect than it is to update a pseudo effect.
There are several types of expression controls.
- Slider: A control for single number values that works especially well for percentages. Probably the most commonly used expression controller.
- Point: A control for 2-dimensional values such as 2D position.
- 3D Point: A control for 3-dimensional values such as 3D position.
- Checkbox: A control for toggling between two different values or situations.
- Color: A control for color values.
- Angle: A control for rotation values.
- Layer: A control for referencing a layer. This avoids hard coding layer references in an expression.
If you are planning to distribute your finished pseudo effect, do not use 3D Point controllers. Every 3rd-party plug-in, such as Trapcode Particular or Video Copilot Element 3D, represent 3D position using a Point controller for X and Y and a single slider for Z. The 3D Point controller was implemented recently and doesn’t have the compatibility as a standard Point controller.
I thought of several requirements for Target. I wanted a user selected layer, spacing options, the ability to animate a Trim Path modifier without twirling down into the shape layer properties, and I guessed that I would need to allow for the description text to be left or right justified.
I also knew my rig would require a lot of math. Adam Plouff, the brilliant mind behind RubberHose, moved all of his actual calculations into a separate math group and I love this approach. This allows for manageable properties, which can easily be referenced later on.
3. Apply expressions
Next I actually start applying expressions and get my rig to work. Its here I usually find the limitations of the controllers I’ve put in place and this is exactly why never build the pseudo effect right away.
Now technically, after everything is working, I could stop there and create an animation preset. But we’re here to talk about pseudo effects!
4. Build the pseudo effect
I use a lovely tool from Batchframe called Custom Controls Creator to create my pseudo effects. Basically, I just recreate my expression controllers in the pseudo effect. Pseudo effects also have user experience benefits.
- Groups allow for properties to be organized rather than appearing as one long list.
- Controllers can have limits. Limiting a regular slider expression control requires processor-heavy expressions such as
clamp().
If you plan on distributing an animation preset that uses a pseudo effect, there are a few things you need to know.
In CS6 and below, the user will always receive a notification that your “effect” is missing unless they edit their settings. This doesn’t matter since the pseudo effect doesn’t actually affect pixels in your composition, but it can be unnerving to the user. This issue has been fixed in newer versions of After Effects by appending Pseudo/ to the beginning of your chosen matchname. Thanks to Paul Conigliaro for pointing that out to me. Also, Custom Controls Creator won’t allow you to add Pseudo/ to your matchname so you’ll need to edit the generated XML.
After I’ve finished creating my pseudo effect I copy the generated XML code to a text file on my computer.
5. Install the pseudo effect
If you plan on distributing an animation preset, you’ll need to think about comparability. Animation presets can only be used in the version of After Effects they were created in or newer. Ideally, create your animation preset in CS6 at least.
I make sure After Effects is closed and I add the pseudo effect code to the PresetEffects.xml file.
Mac:
/Applications/Adobe After Effects CC 2017/Adobe After Effects CC 2017.app
Right click and “Show Package Contents”
Contents/Resources/PresetEffects.xml
Windows:
I am not sure.
This process can be completed by a script. Tools such as Ouroboros by Sander van Dijk can do it, but I just do it manually.
6. Add the pseudo effect
Because a pseudo effect isn’t a real effect, you won’t be able to find it in your Effects and Presets panel. Instead, you’ll need to add it to a layer via script. I use ft-Toolbar but a standalone script will work also. Either add a JavaScript button to ft-Toolbar or create a JSX file that contains the following code.
app.project.activeItem.layer(1).effect.addProperty(“Matchname”);
Select a layer and click your ft-Toolbar button or File > Scripts > Run Script File…
7. Link the pseudo effect
I now move and update all of my expressions to the pseudo rig instead of the individual expression controllers. The process is manual and time-consuming, but definitely worth it.
As a side note, I always add a comment to the first line of any expression explaining what it is doing, regardless of whether they are used in a pseudo effect or not. That way, when I press EE to toggle showing all expressions, I can see what each property is doing without needed to twirl them down.
Technically I could stop here, save the project, and just import or copy and paste the rig into new projects. But animation presets are cooler.
8. Create the animation preset
Animation presets are After Effects generated files with a FFX file extension. Presets are based on selected properties for a single layer. Remember, compatibility matters and animation presets can only be used in the version of After Effects they were created in or newer. Default values, expressions, and keyframes are all stored in an animation preset but only for a single layer.
Select all properties you want to save and click Animation > Save Animation Preset… You can save your FFX wherever you want but if you don’t use the default location After Effects will notify you.
Now you can share your animation preset and pseudo effect with the world!
Hopefully you found this helpful. If you have any questions, feedback, or thoughts feel free to leave a comment on Medium or contact me on Twitter.
If you are looking for a motion graphic designer to help you with your next big project, I’d love to chat! You can find my latest work and contact information at www.kyle-martinez.com.
“This article was originally published on Medium. Thank you Adrian for reaching out to share this on Modio. -KM”
1 Comment
-
Hey Kyle,
thanks for your quick tipps!
Kind regards from Germany
