Stupeflix After Effects Guidelines¶

Why After Effects?¶

Animating and compositing graphical designs using XML is time consuming, excessively complicated, and ultimately not rewarding. Not to mention that motion designers or graphic artists simply don’t code to make things move. As we were looking for a design environment for our templates, we decided After Effects will be our weapon of choice. Widespread acceptation in the motion design world, ability to script it and convert projects to XML sealed the deal for us.

On top of that, After Effects has a great community, and a sweet learning curve.

What versions are supported?¶

We are internally using Adobe After Effects CC 2014, but we accepts projects from CS6 and above.

Where to learn After Effects¶

If you are new to After Effects and want to quickly learn the basics, head over to VideoCopilot Basic Training Series . You’ll be able to create cool stuff in a matter of hours.

Now if you’re already an After Effects artist and want to know what the technical constraints and requirements are to work with Stupeflix, just click the Next button below :)

Let’s talk about Widgets¶

From now I will make a distinction between an After Effects Project and an After Effects Widget.

At Stupeflix, we build videos like Lego objects. For each video theme (aka “template”) in the Stupeflix Studio, we have basic bricks for each kind of data the user can input, and then plug them together to create a unique video every time. We can add bricks next to each other, on top of another, regroup them together in a long sequence, and so on. Like Legos, the possibilities are endless. You can try and experience that with our Scrapbook template. Play with the template, add a map, a picture and a text, change their orders, put several pictures one after another, with or without captions. Preview you video between each action you make, you’ll see that we are using a limited amount of basic bricks and build your video on the fly with them.

When we design a template for the studio, we create all the basic variations of scenes and transitions, or bricks to go on with the Lego analogy, inside the same After Effects project, to share the graphical assets and to ensure that all our variations share the same look and feel. Then we export each brick separately using this brilliant After Effects Script (created by yours truly) into their own projects.

Even if you’re not designing a Studio Template, but a personalized video ad campaign, there are numerous advantages to slice your project into smaller widgets. But we’ll see that later.

Because grown-ups don’t like being reminded that they cannot play Legos anymore, we are calling these bricks Widgets. That was the end of the Lego analogy.

Designing Your Widget¶

Now let’s talk about what you can and cannot do in After Effects, and how it interacts with our render engine and XML video description language.

Widgets can contain 2 sorts of elements:

Design elements (like the cork texture of the Scrapbook template) Placeholder elements (like the precomps that receive the user picture)

The only difference between a design element and a placeholder is tagging. In order to “convert” a composition or a text layer into user customizable elements, you have to add a tag. We’ll come back later on that subject.

So, what’s the big picture when designing an After Effects Widget to be used by Stupeflix ? Well, the short answer is: you see that pretty “Effects” menu in After Effects? Well forget about it. Slightly longer answer: you see that pretty “Effects” menu ? Well, pretty much forget about it for placeholders (not for design elements).

Joke aside, since projects are rendered by our engine, not After Effects, we had to develop our own feature set. The most import feature is animation, so we decided to add effects on a case by case basis. We already support some of them as you can see on our Supported Effects page. When I say support, I mean, available on our engine for real time rendering. You can use any effects (including 3rd parties effects) on design elements as long as you Pre render or Proxy them.

You can find a detailed list of all the features we do not support yet on our Unsupported Features page.

Now, on the bright side, we support almost all of the other features you can find in After Effects: Trackmattes, Expressions and Bézier curves, parenting, and all layer transformation properties such as Position, Rotation, Anchor Point, Scale, Opacity and so on. As disabled layers are not exported (except for trackmattes), be sure to parent layers to enabled layers only.

For text layers there is extra complication. We support the same transformations and effects as any other layer, but we don’t support any character animations. And because After Effects doesn’t allow the export of leading, kerning and most of the font options (including the layer size, or bounding box) we don’t support anything else than paragraph alignment, Font face (one per layer), Font size (one per layer) and Font color (one per layer). Also, don’t change the anchor point position on a text layer. Last but not least, as we have to recalculate the layer size on our side, it is not recommended to use a text layer as a parent. You can still use it as a child without problem.

You can find more informations about text layers in the Placeholder and Tagging page.

Paradigm shift¶

So what about this Paradigm shift I talked about earlier? The big difference between a normal After Effects project and a Stupeflix After Effects project is rendering.

When you design an AE project to make a video, you usually make the final render once, so you don’t really care about rendering time or rendering optimization (I don’t know anyone converting expressions into keyframes to reduce rendering time).

In the case of a Stupeflix AE project, once your Widgets are in our system, they will be rendered every time a user uses them. The most important thing for us is speed. We target a faster than realtime rendering in SD, and realtime for HD videos. If you create heavy, complicated Widgets, we won’t be able to deliver that speed, and it will impact the user experience.

We have a full help section dedicated to Widget optimization. You’ll find examples on how you can drastically reduce render times.

Camera and 3D layers¶

We completely support 3D layers and cameras. You have to make sure that any composition featuring 3D layers has a single camera. If you have no camera, or more than one camera in your composition, our AE SxC Validation Script will warn you, and log an error.

When building your 3D world, make sure that your 3D layers are in the correct depth order, front layer on top of the layer stack, back layer at the bottom of the stack. Having two 3D layers separated by less than 2 pixels in depth can produce Z-Fight. Z-Fight is an inelegent side effect where our 3D engine don’t know which pixel of the 2 layers is in front because the rounded calculation results are equal. This usually happens when rotating in z-space the layers.

You can of course use 2D layers along with your 3D layers.

We don’t support the depth of field of the camera. The trick involving Adjustment Layers to break the 3D world doesn’t work with Stupeflix. Collapsing Transformation to propagate a precomposed 3D world into another 3D world doesn’t work either.

Nesting and Precomposing¶

Nesting and Precomposing is a great feature we totally support (except for Collapsed Transformations). We also use precomposing for graphical placeholders.

But you should be light on your nesting depth, as nesting is heavy on our render engine. We think that you shouldn’t go deeper than 3 levels of nesting:

main comp (lvl 1)

precomp (lvl 2)

precomp (lvl 3)

Of course, precompositions used as placeholders for graphical elements won’t be considered as precomps in our system, they will be replaced by the user assets, so they don’t slow down rendering.

Also you have to make sure any precomp or nested comp is using the same framerate as it’s parent comp. We only allow 1 framerate per project.

Some Limitations¶

As our render engine don’t use the same algorithms as After Effects, you might notice some aliasing around the edges of your layers. Activating anti-aliasing on our side would drastically reduce the render performance. We have found a very subtle, but yet significant, workaround to get anti aliasing for free.

We have aliasing issues on the edges of layers, not on the content of the layer itself. If your layer, may it be a footage or a composition, have transparent edges it will be ok.

For that I recommand you to make your precomposition a bit wider to leave some empty space around the edges, and to prepare your graphical assets accordingly using the same trick.

If you have Photoshop, you can import your PNG files in it and just make them 4-6 pixel wider by simply adjusting it’s canvas size in the Image menu.

Having slightly larger assets works around another limitation: blur. Of the few effects we support, Blur is the most usefull one. But we are facing a big limitation: we cannot blur outside the boundaries of a layer. So if you have a 50×50 pixels asset and apply a blur of 100 on it, only the small 50×50 pixel asset will be blured, showing it’s clear cut edges, thus giving a bad result. If you want your layer to have a larger blur than it’s boundaries, either precomp it (but it can produce slowdowns as you can see in the Nesting and Precomposing section above) in a larger comp or enlarge it’s canvas size in Photoshop.

We don’t support masks. You will have to use track mattes instead.

Hold keyframes are not supported either, be sure to be carefull about this.

Blending modes are not supported.

For every layer, may they be placeholders or design elements, make sure that their In Point and Starting Point are exactly the same. If they are not, this will confuse our engine and might give an unexpected result.

Click here for a full list of Unsupported Features.

Sneak Preview of the XML Power¶

Your After Effects Widget will be interacting with our XML language. XML is mainly used as a cement between Widgets: It allows stacking and grouping Widgets amongst other things.

XML is also used to directly modify the behavior of a Widget:

To fill the placeholders with user’s data To define the behavior of user’s data inside a graphical placeholder (ken burs, stretch, etc…) To hide a layer To change a Solid color / transparency

If you want to know how does it works, we have a whole section about Mixing After Effects with XML.

Exporting¶

In order for us to convert your After Effects Widget into a Stupeflix Widget, we need you to send us your project. In order to do that efficiently, we need you to follow these easy steps:

• Check that your project is Optimized, properly tagged & keyframed, and fully compatible using our AE SxC Validation Script.
• Make sure your main comp is named ‘main’ and is in the root folder of the project (if not, you’ll have a warning, and the script will take care of it during the export process)
• Select your main composition and go to File > Reduce Project.
• Now go to File > Collect Files, select a folder and choose to export all files.
• If you use custom Fonts, include them in the directory created by the Collect Files command.
• Zip the directory.
• Send it to us.

Demo Project¶

We have made a sample projects for you to see how everything is working out on a simili real-world project:

If you have After Effects CS5 or above, please download this full featured project: Demo CS5

You can preview the result in our XML Editor here (remix a copy to see the XML code).

In this project, you can customize the front logo, the front text (the left text is linked to the front text), the movie poster on the right and the color of the front pane. For that you will find 2 graphical placeholders and 1 text placeholder.

The project is a mix of 2D/3D layers spread in several precompositions masked by trackmattes.

Graphical Placeholders¶

If you want to add a placeholder for a Google Map, a video or a picture, you just need to create a precomposition with the correct dimensions and aspect ratio. Then, nest it into your main comp and tag it. What is important to understand is that this tagged precomposition, aka Placeholder, will act as a “window” to the user data. Any modification you do on it such as rotation, zoom, track mattes, transparency and so on will be applied to the user data. Also be aware that any layers or data inside the precomposition will be completly replaced by the user asset.

The size of the placeholder composition depends on the use you plan to have. Depending of the kind of data you expect to fill it with, you can optimize it:

• Maps are usually square, with a max size of 640×640
• Portrait Pictures usually have a 10/15 ratio
• Landscape Pictures usually have a 15/10 ratio
• Videos usually have a 16/9 ratio, but can also be 4/3 ratio

For picture size, I usually use the main composition width as the width of the placeholder. Like this you can always fit the screen without scaling it. For example, if your Widget is in Full HD resolution (1920×1080) I will use 1920 as the default width for the picture placeholders. As general advice, make sure your placeholder is neither too small, nor too big. Scaling up assets can result in a visible loss of quality (above 200% scale, results can really look terrible). Keeping assets scaled down results to a loss of performance in render time. So it’s up to you to find the perfect balance between quality, performance and placeholder size.

If you are doing a personalized video campaign and you control where the user pics come from, you can even get perfectly sized placeholders. For instance, pictures coming from Facebook or Instagram uses fixed size, so the more you know from where the assets comes from, the better it is.

If in your application or in our Studio, users select a bigger or smaller picture, our engine will automatically make it fit in your placeholder. We’ll see how to do this, and how to customize this behavior in our Mixing your Project with XML.

Text Placeholders¶

If you want to add a text placeholder, simply add a text layer. And then be extra carefull and make sure you carefull apply everything that is in this section.

When creating the text layer be sure to use the simple text tool and not the box text tool. To create a simple text layer, just clic on the composition viewer with the text tool selected, instead of drawing a box with it. If your texts are inside text boxes, they will be slightly moved around depending on the anchor point position.

Also make sure the font size of your text is big enough to be readable, especially in high definition videos where texts are usually designed to be small. Then become unreadable if the video is not viewed at full resolution. A small sized text at 1080p won’t be readable at all at 360p. The smaller the characters, the more the compression will harm them.

If your text is in a 3D composition and comes close to the camera, it will get scalled in our engine whereas it’s vectorized in AE to keep constant quality. In order to avoid to much quality loss, we recommand using a font size 2 times bigger than what you need, and then scale down the layer to 50%.

Texts are the most difficult layers to export from After Effects as we don’t have access to a lot of parameters. This is a list of what we can’t do with text layers:

Tagging your Placeholders¶

So, how do we tell our engine that this nested composition or this text layer is to be replaced with the user input? We simply tag it. To tag it, you just have to add a marker on the layer. To do that, simply select the layer and press the * key on the numeric keypad (or go to Layer > Add Marker).

Now that you have your layer marked, we need to edit the marker to give it all the data we need.

We are using 2 important text zones in the marker settings:

• Comment: the text here won’t do anything apart from being displayed in the timeline. This is recommended for easy referencing inside your project. Not mandatory.
• Flash Cue Point Name: This is where we define the type of placeholder, and its index. This information is mandatory. If not properly filled, your placeholder won’t be recognized.

As you can write whatever you want in the comment section, let’s focus on the Flash Cue Point Name and see what information needs to be there. We actually support 2 indexed tags:

• TEXT_XX
• IMAGE_XX

TEXT_XX, where XX is an index ranging from 01 to 99, is used to tag a text placeholder. IMAGE_XX, where XX is also an index ranging from 01 to 99, is used to tag a picture, map or video placeholder.

If you want to display several times the same user input, may it be a text or a graphical asset, you can tag different elements with the same index. For this to work, you just need to take care of renaming the layers sharing the same indexed tag with the same name.

For example, if you have 3 different text layers displaying the same user input, even if they are in different compositions with different properties, they will need to have the same layer name, and the same tag index.

Tagging a project comes in the very last steps of it creation. In order to properly index your placeholder, you must have already sliced your project into widgets (if needed), or know how it will be sliced. For each Widget, tags must start at 01 and then go on without skipping any number.

Example with a Widget accepting 2 user texts, and 2 user pictures:

This is correct:

• TEXT_01
• TEXT_02
• IMAGE_01
• IMAGE_02

TEXT and IMAGE tags are correctly indexed.

This is incorrect:

• TEXT_02
• TEXT_03
• IMAGE_01
• IMAGE_02

The TEXT tags doesn’t start at 01.

This is incorrect too:

• TEXT_01
• TEXT_03
• IMAGE_01
• IMAGE_02

The TEXT tag TEXT_02 is missing

This is also incorrect:

• TEXT_01
• TEXT_02
• IMAGE_03
• IMAGE_04

Indexes are tag independent. Here IMAGE tags cannot take the index continuity of the TEXT tags indexes.

Tags are usually the first place to look when a user text or picture is missing in the stupeflixed video. When using our validation script, you can check the number of placeholders detected in the Overview Panel.

Demo Project¶

You can download our exemple project to see how to tag your project: Demo project CS5 or above

Cloud Renderer¶

Expressions, Bezier curves and Hold keyframes are not natively supported by our engine, but they can easily be turned into linear keyframes while preserving ease.

For layers with Bezier Curves, just Alt-Clic on the property stopwatch to create an expression and press the numeric keypad Enter key. Now select the property and go to:

• Animation > Keyframe Assistant > Convert Expression to Keyframes

For properties with expressions, select them and go to:

• Animation > Keyframe Assistant > Convert Expression to Keyframes

For both operations, you can select multiple properties.

Then, with all the newly created keyframes selected, crtl (or cmd) click on any of them to turn them into diamond shaped keyframes (standard keyframe) instead of roaving keyframes (round shaped keyframes).

iOS Renderer¶

On our iOS Renderer, Bézier curves are natively supported by our engine, so no need to rasterize (bake) them using the above methodology. You’ll still need to bake the expressions.

Supported Effects¶

We currently support this list of effects:

• Fast Blur
• Exposure
• Directional Blur
• Tint
• Tritone
• Threshold
• Hue/Saturation
• Ramp

Support Details¶

Supported File Types¶

Features¶

• Effects (except those mentioned here)
• Masks
• Time Remapping
• Lights Layers
• Shape Layers
• Layer Styles
• Adjustement Layers
• 3D Material Options
• Photoshop Live Layers
• Photoshop 3D Layers
• Blending Modes
• Collapse Transformation
• Motion Blur
• Assets larger than 4096x4096
• Compositions larger than 4096x4096
• Layer In Point different than Layer Start Time
• Vertical Align for text Layers
• Frame blending
• Audio *

Formats (Static Images)¶

We don’t support these graphical assets inside AE projects (non exhaustive list):

• Photoshop Files
• Illustrator Files
• EPS Files
• Tiff Files

We recommand using jpegs for non alpha assets, and png otherwise.

Formats (Video files)¶

We don’t support file formats other than h264 (in mp4 encapsulation) for non alpha videos, and On2VP6 (in flv encapsulation) for video with alpha.

• For h264 we do recommand using the High Profile with 5.1 Level, 2 pass VBR with a 5-8Mb bitrate for SD videos, and a 10-15Mb bitrate for HD videos and up to 20Mb for Ultra HD videos.
• For On2VP6 we do recommand a 10Mbit bitrate in VBR encoding, with target quality set to Optimal.

We are using Adobe Media Encoder in house to compress our assets, we do recommand it.

Non Linear Template¶

If you’re doing a non linear Template, you project must be spliced up into different Widgets.

When designing a Template, it is important to keep in mind that it is the user who is storytelling his video, not you. Depending on what the user wants, and what the user wants to say, we will choose programmatically one widget or another. The most important aspect of your template is visual coherence. You don’t know in what order, or in what combination your widgets will be used, so it’s essential that they all have a consistent look & feel, and most importantly, that any widget can be used before or after any other widget.

Linear Template¶

When you are designing a video for an advertising campaign, unlike a non linear Template, you are doing the storytelling for the user, but you allow him/her to somehow interact with your story by customizing the video.

Usually, such projects are designed as a long video with special parts where user assets can be seen. One could even imagine different paths or scenes for the video depending on some user choices.

In such cases, there is not a predefined Widget structure, it really depends on how your video is conceived. From past projects and experience, it is safe to not slice your video into multiple Widgets. Just keep on project for the whole video, or for each path of the video.

Technical Recommandations¶

Our render engine is much more efficient with standard 16/9 video ratio, such as 640×360, 960×540, 1280×720 or 1920×1080. Our online XML editor, used for previewing, can only preview correctly 16/9 projects. We of course support other resolutions and other aspect ratios, but we recommend you to work in 16/9 aspect ratio.

Working in native resolution is important. If you provide us a Full HD (1080p) project but only allow your users to create 360p videos, the render won’t be as efficient as a lot of processing power will be lost dealing with high resolution assets to be scaled down. We highly recommend you to design and provide us a project that is matching your destination resolution.

For the framerate, we strongly recommand 24 fps as it’s the default cinema one. You need to set your framerate according your assets. If you are using royalty free footage set a 29,97, your project framerate will need to be 29,97.

Tip: for the same content, a 24 fps video will render faster than a 29,97 video. Just because we will render 5,97 frames less per second.

Script Basics¶

Current version is 2.4 (Released October 29th 2014).

You can download it here for CS6 and above: Sxc Validation Script

To check if your project is good to go, open it in After Effects and then:

• File > Script > Run Script File (swith the dropdown from *.jsx to *.jsxbin)
• Select the script
• Select, in the Project panel, your widget main composition
• Clic on “Project Analysis”.

The script now reports several key project information right inside it’s UI: The number of compositions (plus the number of time they are used) and same goes for your layers and your placeholders. It also gives you your project depth, the highest layer stack and the number of errors/warnings it found.

If the script finds anything that is not complient with our workflow, or anything that could impact visualy the final look once it’s in our system, it will generate a text log, with links to this documentation for each problem it found.

On top of these details, the script will give you an estimation of the Render Speed of the project on our render engine.

I highly recommand you to run it regularly while you are developing your widget to make sure you take the appropriate steps. Discovering at the end that you went the wrong way is always depressing and irritating.

Scoring System¶

Starting with the version 2.0 of the script, we introduced a “scoring” system built to help you estimate how fast and how light your project will be when turned into a Stupeflix Widget.

In the text log header, you’ll see a “Score” line looking like this:

Score: 0.59 (average per layer)

It’s a score based on the comps & layers, the depth, the effects and everything you put in your project. We assigned a default score to every items, depending on how they perform or impact our rendering engine. We also take into consideration the complexity of your project for any given frame, and weight the score on it too.

The score found in the header as described above is your project total score, frame by frame divided by the total length of your Widget giving you an estimate of how time consuming it is. Here are the performences you can expect depending on your score.

As your project complexity can vary during time, we added a temporal complexity table, looking like this:

Time Stamp:             | 0     | 10    | 20    | 30    | 40    | 50    | 60    | 70    | 80    | 90    |
Layer Stack:            | 12    | 12    | 12    | 12    | 12    | 12    | 12    | 12    | 12    | 12    |
Project Score:          | 1     | 1     | 1     | 1     | 1     | 1     | 1     | 1     | 1     | 1     |
Death Combo:            | No    | No    | No    | No    | No    | No    | No    | No    | No    | No    |

The first line, Time Stamp is the frame number. We display show 10 frames, every 1/10 length of your project. The second line, Layer Stack is the height of the layer stack at that Time Stamp. The third line, Project Score is the complexity score of the project at this Time Stamp. The lower, the better. The last line, Death Combo is if what we call a Death Combo have been found at that Time Stamp.

Estimated Render Time¶

To give you an idea of how fast your project will render, we have captioned the score into 11 stages. And this time, you don’t want to go up to 11.

• ERS: Fastest: Your project will be rendered faster than realtime. This is the best.
• ERS: Very Fast: Your project will be render slightly faster than realtime.
• ERS: Fast: Your project will be rendering more or less at realtime. That’s the usual target.
• ERS: Not so Fast: Your project will be rendering in less than two time the realtime. Usually preview (half framerate) will be realtime.
• ERS: Mediocre: Your project is quite heavy and will take more than two times the realtime to render.
• ERS: Sluggish”: Your project is heavy and will take around three times the realtime to render.
• ERS: Slow: Your project is really heavy and will take around four times the realtime to render.
• ERS: Very Slow: Your project is too complicated and will take around five times the realtime to render.
• ERS: Ultra Slow: Your project will take too long to render for our engine. We won’t accept it.
• ERS: Killing Slow: Your project will take too long to render for our engine. We won’t accept it.
• ERS: Deadly Slow: Your project won’t be able to render on our engine. We won’t accept it.

SCORE : 3.1 (total comp layer score)

Naming Convention¶

We need your layers to avoid special characters in their name to be properly used within an XML context (changing layer color, hiding a layer….).

Please, only use [a-z][A-Z][0-9] along with “_” in your layer names.

Pre-Rendering¶

Proxies and pre-rendering are really usefull when you have a bunch of layers with motion blur and effects that are not supported by our engine. They can also be used to reduce the amount of layers and effects to be processed by our engine, resulting in faster rendering times.

You can render your proxies and/or pre-renders in any file format we support. You can find a summary on our Supported File page.

Don’t forget that you can also render semi-transparent animated footage, very usefull to add, for exemple, a layer of dust and scratches to simulate old film footage !

You can also use pre-rendered video in black and white to be used as a Luma or Luma Inverted track matte, especially if your track matte is a crowded composition with a lot of animations and effects such as blurs.

Pre-rendering a single image is quite straight forward: JPEG if it has no transparency, PNG otherwise.

Pre-rendering an animation is slightly more complicated as you have to keep the filesize low, and the compression low too, to keep a top quality level to avoid to much artifacting when it will be reencoded for the final user. For that we recommand using the h264 codec, 5.1 Level (High), vbr 2 pass encoding at 6mb target, 10mb max (for HD) or 3mb target 5mb max (for SD).

Start/End - In/Out Points¶

In After Effects, each layer have 2 starting points and 2 ending points. By default, they are the same, but sometimes you might need to change them, and they’ll become out of sync. If that’s not a problem for the ending / out point, our engine will struggle if the Starting / In point are different. But what are those points ?

Starting and Ending points are where the layer starts and end. In and Out points are where the layer is active.

The difference is subtle, here is an exemple: let’s say you have a 5 seconds precomposition but want it to be trimed down to 3 seconds in your main comp. Either you’ll shorten the precompo to 3 seconds by opening it and changing it’s duration in the composition setting panel, or you’ll just trim it down in the main composition view by dragging the end of the layer with your mouse or your Wacom pen. In that second case, the Ending point will still be at 5 second, but the Out point will be at 3 second.

After Effects lets you trim your layer from the end, but also from the start of the layer, and it’s clearly visible on precomp. If you move your comp layer in time the layer head won’t change, but if you trim your comp layer head you’ll see it become semi transparent. You can trim the head of any layer, but it will only be visible on comp layer. And it’s easy, when you add a solid for exemple, to trim it to it’s intended starting point instead of moving it. And you won’t visually notice it. That’s where it’s complicated. So make sure to never trim a layer’s head, but move it along the timeline.

It is mendatory that both Start and In point remains in sync. So if you need a layer to start at the 2 second mark in your timeline, don’t trim its head, move the whole layer to it. Same if you need your layer to start a bit before it’s actual position, don’t expend it from it’s head, move it entirely. Be sure to move your keyframes accordingly.

Assets Size¶

As you may have read in our Unsupported Features page, we don’t allow graphical assets larger than 4096 pixel in width and/or 4096 pixel in height. That is also true for your composition sizes.

This limatation is due to graphic card memory and Open GL drivers to ensure best performances.

Still, 4096×4096 assets requires a lot of ressources and we encourage you to keep your project as fast as possible, to limit your assets size to 2048×2048.

Also, the smaller the assets file size, the faster it’s processed, thus the faster the video is rendered. If you need transparency in your file, use PNG, if not use JPEG.

Output that Matters¶

We are now all used to work in native HD, may it be 720p or 1080p, and output at several range of resolutions, from SD for mobile devices and DVD to HD for broadcast and BluRay.

When creating a project for Stupeflix, you have to keep in mind that we are not rendering it once, we are rendering it everytime a customer calls it. So using oversized assets will slow down render time every time your assets is called.

The best practice is to create the AE project at the correct resolution to avoid as much as possible realtime downsizing during rendering.

For one of our client, we managed to divide by a factor of 2 the render time of their widget simply by reducing assets size, because they designed their project and rendered their assets in 1080p while they delivered the videos to their at a 360p resolution. This rendertime gain was only by reducing file sizes through assets resolution reduction.

To put it simple, if you are targetting to deliver 360p or 540p files to your customers through Stupeflix, the best practice is to deliver us AE projects in 360p or 540p.

If you plan to deliver multiple resolutions, you can either provide us a project at the highest resolution, or several projects to cover several resolutions.

Please note that just nesting your HD comp into a SD comp inside AE and scaling it to fit the new resolution is not the way to go because you are not scaling down your original assets, only the output, and you are instead adding 1 level of depth thus slowing down the whole rendering process.

Depth and Matte¶

The most render time intensive elements in an After Effects project are depth of the composition nesting, and the trackmattes. And the more you nest both, the bigger the render hit. That’s what we call a Death Combo, and you can learn more about them here

Matting a precomp is something sometimes you can’t avoid, but matting a precomp which already have matting inside will be killing the render time. If on top of that your precomps are exceeding the recommanded max size of 2048×2048 it will get ugly.

So beware of nested matting and try to avoid depth bigger than 3.

Also, if you need to stack several trackmatted layers, all using the same trackmatte, you will get better performance by precomposing your layer together and then only matting the precomp. This will save some render time

iOS Render Engine¶

If your campaign or your template is to be used on our iOS Renderer, you might take some more things into consideration:

• iOS Renderer supports bezier Keframes without rasterizing them.
• iOS Renderer will struggle with a layer stack higher than 10.
• iOS Renderer does not support video assets such as prerendered animated backgrounds.
• iOS Renderer won’t accept assets larger than 2048x2048

Merging Mattes¶

The script detected that you have several stacked mattes. This is going to severly impact the rendering time on our servers. One way to limit the overhead, is to create a video with an alpha channel on top of your assets, merging your background asset and your alpha mattes. That way the resulting alpha channel of the video will act as your cut out for your assets.

Nested Scale¶

We detected that some of your nested compositions are way bigger than their parent composition (ex: having a full HD comp nested in an SD comp). If you used nesting as a way of scaling the pre composition down, this won’t make the rendering faster as we’ll still need to process the full resolution. You should really try to lower the nested composition resolution as much as you can to improve rendering performance.

Duration Trim¶

We detected that some of your video assets are longer than the main composition. This affects performance because the bigger the file assets are, the longer they take to process.

File Size¶

We detected that your project is somehow heavy weigthed for its duration. You might want to reduce the file count or the assets bitrate. Bigger the file size are, the longer it takes our servers to process or to import. Big files can take some times even when they are streamed from one AMZ bucket to our. If render speed performance is key to your workflow, you might want to investigate this issue.

Video Stacks¶

We detected that you have 3 or more video stacked at some point in your widget. Decompressing and playing back several video streams at the same time can heavily slow down the rendering. You might want to merge them to lower the stream count. Remember that you can also render videos with an alpha channel using the On2VP codec in an FLV container.

Video UGC Continuity¶

When you plan to have video recording as UGC content, by default the video playback starts at the beggining of the UGC footage. But you might often want to spread the content of the UGC footage over several placeholders in time.

You’ll need to create a placeholder for each slice of the video, and increment accordingly the placeholder index. Then, in the XML, you’ll need to use the skip attribute of the video tag. The skip value for each placeholder is specified in the Placeholder section of the report.

Applying XML filters¶

Filters are effects that you can apply on your assets and even on your Widgets.

The most used ones are:

• Alpha
• Colormap
• GaussianBlur
• Glow
• Kenburnsadapter

You can dig the full list here.

<movie service="craftsman-1.0">
  <body>
    <effect type="none" duration="10.0">
      <image filename="http://stupeflix-assets.s3.amazonaws.com/help/assets/IMG_0024.JPG">
      </image>
    </effect>
  </body>
</movie>

<movie service="craftsman-1.0">
  <body>
    <effect type="none" duration="10.0">
      <image filename="http://stupeflix-assets.s3.amazonaws.com/help/assets/IMG_0024.JPG">
        <filter>
        </filter>
      </image>
    </effect>
  </body>
</movie>

<movie service="craftsman-1.0">
  <body>
    <effect type="none" duration="10.0">
      <image filename="http://stupeflix-assets.s3.amazonaws.com/help/assets/IMG_0024.JPG">
        <filter type="colormap">
        </filter>
      </image>
    </effect>
  </body>
</movie>

<filter type="colormap" preset="negative">
</filter>

<filter type="colormap" rgba-bias-matrix="">
</filter>

<filter type="colormap" rgba-bias-matrix="#FF000000,#00FF0000,#0000FF00,#000000FF,#00000000">
</filter>

<filter type="colormap" rgba-bias-matrix="#FF000000,#00FF0000,#0000FF00,#000000FF,#aa000000">
</filter>

<movie service="craftsman-1.0">
  <body>
    <widget type="set.scrapbook.text.01b.m.01" duration="10.0">
      <text>What a wonderfull world !</text>
    </widget>
  </body>
</movie>

<movie service="craftsman-1.0">
  <body>
    <widget type="set.scrapbook.text.01b.m.01" duration="10.0">
      <text>What a wonderfull world !</text>
      <filter type="colormap" rgba-bias-matrix="#FF000000,#00FF0000,#0000FF00,#000000FF,#aa000000">
      </filter>
    </widget>
  </body>
</movie>

<movie service="craftsman-1.0">
  <body>
    <stack>
      <widget type="set.scrapbook.text.01b.m.01" duration="10.0">
        <text>What a wonderfull world !</text>
        <filter type="colormap" rgba-bias-matrix="#FF000000,#00FF0000,#0000FF00,#000000FF,#aa000000">
        </filter>
      </widget>
    </stack>
  </body>
</movie>

<movie service="craftsman-1.0">
  <body>
    <stack>
      <widget type="set.scrapbook.text.01b.m.01" duration="10.0">
        <text>What a wonderfull world !</text>
      </widget>
      <filter type="colormap" rgba-bias-matrix="#FF000000,#00FF0000,#0000FF00,#000000FF,#aa000000">
      </filter>
    </stack>
  </body>
</movie>

Applying modifications to AE Widgets¶

With After Effects Widgets, we have introduced some features to give you slightly more control on how it will look:

You can hide a layer (any layer) You can change the color and the opacity of any solid layers Layers are obviously children of the Widgets, and so we are going to modify them directly within the <widget> and </widget> tags in our XML.

<movie service="craftsman-1.0">
  <body>
      <widget type="set.scrapbook.text.01b.m.01" duration="10.0">
        <text>What a wonderfull world !</text>
      </widget>
  </body>
</movie>

<movie service="craftsman-1.0">
  <body>
      <widget type="set.scrapbook.text.01b.m.01" duration="10.0">
        <text>What a wonderfull world !</text>
        <image filename="http://stupeflix-assets.s3.amazonaws.com/help/assets/IMG_0017.JPG" />
        <image filename="http://stupeflix-assets.s3.amazonaws.com/help/assets/IMG_0022.JPG" />
      </widget>
  </body>
</movie>

.../help/assets/IMG_0017.JPG" />

<movie service="craftsman-1.0">
  <body>
      <widget type="set.scrapbook.text.01b.m.01" duration="10.0">
        <text>What a wonderfull world !</text>
        <style layer="main:pic01Portrait"  visible="false"/>
        <style layer="main:pic01Landscape"  visible="false"/>
      </widget>
  </body>
</movie>

<movie service="craftsman-1.0">
  <body>
    <widget type="set.moviestyle.machete.solo.01" duration="10">
      <image filename="http://stupeflix-assets.s3.amazonaws.com/help/assets/IMG_0017.JPG" />
      <text>Stupeflix</text>
    </widget>
  </body>
</movie>

<movie service="craftsman-1.0">
  <body>
    <widget type="set.moviestyle.machete.solo.01" duration="10">
      <image filename="http://stupeflix-assets.s3.amazonaws.com/help/assets/IMG_0017.JPG" />
      <text>Stupeflix</text>

      <style layer="background:lightColor" color="#F892FE"></style>
      <style layer="background:darkColor" color="#F600E2"></style>
      <style layer="pictureStyle:highlight" color="#F9B2FF"></style>
      <style layer="pictureStyle:Shadows" color="#0C000E"></style>

    </widget>
  </body>
</movie>

<movie service="craftsman-1.0">
  <body>
    <widget type="set.moviestyle.machete.solo.01" duration="10">
      <image filename="http://stupeflix-assets.s3.amazonaws.com/help/assets/IMG_0017.JPG">
        <filter type="colormap" preset="lowContrast" />
      </image>
      <text>Stupeflix</text>

      <style layer="background:lightColor" color="#F892FE"></style>
      <style layer="background:darkColor" color="#F600E2"></style>
      <style layer="pictureStyle:highlight" color="#F9B2FF"></style>
      <style layer="pictureStyle:Shadows" color="#0C000E"></style>

    </widget>
  </body>
</movie>

Applying transitions¶

Until now we have seen how to modify a Widget inside an XML definition, and now it’s tiime to see how to put several Widgets one after another, with and without transitions.

<movie service="craftsman-1.0">
  <body>
      <widget type="set.scrapbook.text.01b.m.01" duration="10.0">
        <text>What a wonderfull world !</text>
      </widget>
      <widget type="set.scrapbook.map.01b" duration="10.0">
       <image type="map" center="Paris" zoom="15" />
      </widget>
  </body>
</movie>

<movie service="craftsman-1.0">
  <body>
      <widget type="set.scrapbook.text.01b.m.01" duration="10.0">
        <text>What a wonderfull world !</text>
      </widget>
      <transition />
      <widget type="set.scrapbook.map.01b" duration="10.0">
        <image type="map" center="Paris" zoom="15" />
      </widget>
  </body>
</movie>

<transition type="move" duration="1" direction="left"/>

<transition type="custom" duration="1" >
  <widget type="set.transitions.dissolve.01"/>
</transition>

<movie service="craftsman-1.0">
  <body>
      <widget type="set.scrapbook.text.01b.m.01" duration="10.0">
        <text>What a wonderfull world !</text>
      </widget>
      <transition type="move" duration="1" direction="left"/>
      <widget type="set.scrapbook.map.01b" duration="10.0">
        <image type="map" center="Paris" zoom="15" />
      </widget>
  </body>
</movie>

Audio¶

Audio is not directly supported in our conversion process as widgets inside Stupeflix are mute. What you have to do, if you have audio in your project (like sound effects or music) is to render out a wav or an mp3 file of the audio and include it in your project.

We will then upload this audio file and link it to your widget inside the XML. If you want to have the audio file play at the same time of the widget, you’ll need to stack them:

<movie service="craftsman-1.0">
  <body>
    <stack>
      <widget type="set.scrapbook.text.01b.m.01" duration="10.0">
        <text>What a wonderfull world !</text>
      </widget>
      <audio filename="url_of_your_file.mp3"/>
    </stack>
  </body>
</movie>