Difference between revisions of "AE Scripts"

From Publication Station
Tag: visualeditor
Line 94: Line 94:
<br>
<br>


== Guide: Font Weight ==
== Guide: Font Weight animation ==
This short assignment demonstrates how to animate text using and editing a given code. <br>
This guide demonstrates how to animate text weight by using and editing a given code. <br>
You can follow the original tutorial showing 3 ways to animate text weight >>here (expression Strats at 6:51)  <br>
You can follow the original tutorial showing 3 ways to animate text weight >>here (expression Strats at 6:51)  <br>
[[File:RandomColor.gif|500px]] <br>
[[File:FontWeight.gif|500px]] <br>


{| class="wikitable"
{| class="wikitable"
|-
|-
| skills || copy-and-adjust code
| skills || copy-paste-and-adjust code
|-
|-
| || layer control expression
| || layer control expression
Line 109: Line 109:


'''step 1''' <br>
'''step 1''' <br>
Add a text layer. Choose a typeface with multiple weights.<br>
Add a solid layer and add text layer. Choose a ''typeface with multiple weights''.<br>


'''step 2''' <br>
'''step 2''' <br>
add a Null layer > rename it 'control'.<br>
add a Null object > rename it 'control'.<br>
[[File:FontWeight1.png|500px]] <br>
[[File:FontWeight1.png|500px]] <br>


Line 142: Line 142:


[[File:FontWeight3.png|500px]] <br>
[[File:FontWeight3.png|500px]] <br>
[[File:FontWeight4.png|500px]] <br>


<br>
<br>
Line 148: Line 149:


'''step 6''' <br>
'''step 6''' <br>
mark everything inside the brackets of r=Math.round(). connect the whip-pick next to the code with the font weight slider. your text and null layer should now be connected. <br>
mark everything inside the brackets of r=Math.round()> connect the whip-pick next to the code with the font weight slider. your text and null layer should now be connected. <br>
[[File:FontWeight5.png|500px]] <br>


'''step 7''' <br>
'''step 7''' <br>
start animating: set the slider on 0 and the indicator in the beginning of the timeline. click the stop-watch next to the slider under the control layer.<br>
start animating: set the slider on 0 and the indicator in the beginning of the timeline. click the stop-watch next to the slider under the control layer.<br>
your text and null layer should now be connected. <br>
[[File:FontWeight6.png|500px]] <br>
move forward in time and set the control slider on 5 (when using 6 fonts). go further in time and set it bak to 0.
move forward in time and set the control slider on 5 (when using 6 fonts). go further in time and set it bak to 0.



Revision as of 13:32, 6 October 2023

On this page you will find a series of guides to create short animations combined into one. You will be adding Scrips into Adobe After Effects.
For this demo I chose the words 'Visual Coding' + square shape + the colours #260340 and #d3e52b on a 5:4 canvas ratio.

Guide: Text Reveal/ Countdown

This short assignment demonstrate how to create a generative text animation.
Countdown s.gif

skills wiggle expression
time to complete 10 minutes

step 1
write text on your background (or solid background layer for creating GIFs).
center your anchor point [ - command double-click on your anchor icon - ]
CountDown1.png

step 2
open your text layer > animate > character offset
CountDown2.png

step 3
Alt + Stopwatch >wiggle (4,40)
CountDown3.png

step 4
Range Selector >offset
Stopwatch on 0% >keyframe 100%
Adjust keyframe to you will: closer to the beginning for shorter countdown, further for longer countdown.
CountDown4.png
CountDown6.png

step 5
Advanced > Random order ON
Random seed: 6

CountDown7.png

=== TIP === You can use the 'wiggle' expression to create a random color text animation as well! follow >>this tutorial

Guide: Multiple Wiggles

This short assignment demonstrate how to adjust multiple layers at the same time.
WiggelingSquares s.gif

skills wiggle expression
layer control expression
time to complete 17 minutes

step 1
create multiple shape on your background/ solid.
WigglingSquares1.png

step 2
add a Null layer > rename it 'control'.
WigglingSquares2.png
WigglingSquares2B.png

step 3
add Expressions Effect > Slider Control to your control layer.
WigglingSquares3.png

step 4
add another slider with command D and name them: Time and Position.
add values to each slider. you can change and adjust these values later.
Lock the Effects panel to keep it visible.
WigglingSquares4B.png

step 5
Open the top layer's Position and Alt-click the Stopwatch.
Write wiggle and keep the brackets empty.
connect the values with the Time , Position sliders using the PickWhip.
WigglingSquares5.png

step 6
control-click (right-click) the Position stop watch > select 'Copy Expression Only'
WigglingSquares6.png

step 7
select all there rest of the shape layers > paste.

step 8
You can now adjust the wiggle values of all the layers together.
WigglingSquares8.png



Guide: Font Weight animation

This guide demonstrates how to animate text weight by using and editing a given code.
You can follow the original tutorial showing 3 ways to animate text weight >>here (expression Strats at 6:51)
FontWeight.gif

skills copy-paste-and-adjust code
layer control expression
time to complete 21 minutes

step 1
Add a solid layer and add text layer. Choose a typeface with multiple weights.

step 2
add a Null object > rename it 'control'.
FontWeight1.png

step 3
add a Slider Control effect to the Null layer > rename it 'font weight'.
FontWeight2.png

step 4
click your text layer drop-down arrow > open the 'TEXT' drop down menu.
next to the Source stop watch alt(Option)-click > paste in the following code:

var array=[

"ChakraPetch-ExtraLight",

"ChakraPetch-Light",

"ChakraPetch-Regular",

"ChakraPetch-Medium",

"ChakraPetch-SemiBold",

"ChakraPetch-Bold"

]; r = Math.round(thisComp.layer("control").effect("font weight")("Slider")); style.setFont(array[r]);


FontWeight3.png
FontWeight4.png


step 5
adjust the code content - change the names of the fonts to your own selection.

step 6
mark everything inside the brackets of r=Math.round()> connect the whip-pick next to the code with the font weight slider. your text and null layer should now be connected.
FontWeight5.png

step 7
start animating: set the slider on 0 and the indicator in the beginning of the timeline. click the stop-watch next to the slider under the control layer.
your text and null layer should now be connected.
FontWeight6.png
move forward in time and set the control slider on 5 (when using 6 fonts). go further in time and set it bak to 0.

Recommended Tutorials

You can watch our pre-tested video tutorials to create the above and more.
1. introduction to Expressions
2. Things Wiggle can do
3. Wiggle multiple objects
4. [1] Wiggle text colors
5. [2] Random color expressions 6. Flicker/ Glitch
7. Random letter reveal
8. Random options
9. Random XYZ Position
10. Five copy-paste Expressions
11. Adobe Expressions Examples