Difference between revisions of "AE Scripts"

From Publication Station
 
(39 intermediate revisions by 2 users not shown)
Line 1: Line 1:
{{Template:Quickstartguide}}
{{Template:Quickstartguide}}
For this demo I choose the words 'Visual Coding' + square shape + my site's colours on a 5:4 canvas ratio.<br>
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.<br>
For this demo I chose the words 'Visual Coding' + square shape + the colours #260340 and #d3e52b on a 5:4 canvas ratio.<br><br>


== Guide: Text Reveal/ Countdown ==
== Guide: Text Reveal/ Countdown ==
This short assignment demonstrate how to create a generative text animation.<br>
This short assignment demonstrate how to create a generative text animation.<br>
[[File:countdown_s.gif|500px]] <br>
[[File:countdown_s.gif|500px]] <br>
{| class="wikitable"
|-
| skills || wiggle expression
|-
| time to complete || 10 minutes
|}


'''step 1''' <br>
'''step 1''' <br>
Line 16: Line 24:


'''step 3''' <br>
'''step 3''' <br>
Alt + Stopwatch >wiggle (4,40)<br>
Click Option (Alt on Windows) + Stopwatch >wiggle (4,40)<br>
[[File:CountDown3.png|500px]] <br>
[[File:CountDown3.png|500px]] <br>


'''step 4''' <br>
'''step 4''' <br>
Range Selector >offset <br>
Set the Range Selector > offset to 0% in the beginning of the timeline, and to 100 % on another point in the timeline. This will create a new keyframe. Adjust this keyframe to you will: closer to the beginning for shorter countdown, further for longer countdown.<br>
Stopwatch on 0% >keyframe 100% <br>
Adjust keyframe to you will: closer to the beginning for shorter countdown, further for longer countdown.<br>
[[File:CountDown4.png|500px]] <br>
[[File:CountDown4.png|500px]] <br>
[[File:CountDown6.png|500px]] <br>
[[File:CountDown6.png|500px]] <br>
Line 30: Line 36:
Random seed: 6 <br>
Random seed: 6 <br>


[[File:CountDown7.png|500px]] <br>
[[File:CountDown7.png|500px]] <br><br>
 
=== TIP === You can use the 'wiggle' expression to create a random color text animation as well! follow [https://www.youtube.com/watch?v=37a3YHq4suE >>this] tutorial
 
== Guide: Multiple Wiggles ==
This short assignment demonstrates how to adjust multiple layers at the same time.<br>
[[File:WiggelingSquares_s.gif|500px]] <br>
 
{| class="wikitable"
|-
| skills || wiggle expression
|-
| || layer control expression
|-
| time to complete || 17 minutes
|}
 
'''step 1''' <br>
create multiple shape layers on your background.<br>
[[File:WigglingSquares1.png|500px]] <br>
 
'''step 2''' <br>
add a Null layer > rename it 'control'.<br>
[[File:WigglingSquares2.png|500px]] <br>
[[File:WigglingSquares2B.png|500px]] <br>
 
'''step 3''' <br>
add Expressions Effect > Slider Control to your control layer.<br>
[[File:WigglingSquares3.png|500px]] <br>
 
'''step 4''' <br>
add another slider with command D and name them: Time and Position.<br>
add values to each slider. you can change and adjust these values later.<br>
Lock the Effects panel to keep it visible.<br>
[[File:WigglingSquares4B.png|500px]] <br>
 
'''step 5''' <br>
Open the top shape layer's Position and Alt-click the Stopwatch.<br>
Write wiggle and keep the brackets empty.<br><br>
connect the values with the Time , Position sliders by using the PickWhip:<br>
1. drag the PickWhip next to position first to the Time Slider <br>
2. add coma , <br>
3. drag again the pickWhip next to position to the second slider
[[File:WigglingSquares5.png|500px]] <br>
 
'''step 6''' <br>
control-click (right-click) the Position stop watch > select 'Copy Expression Only'<br>
[[File:WigglingSquares6.png|500px]] <br>
 
'''step 7''' <br>
select all there rest of the shape layers > paste.<br>
 
'''step 8''' <br>
You can now adjust the wiggle values of all the layers together.<br>
[[File:WigglingSquares8.png|500px]] <br>
 


== Guide:Flicker ==
* Set the blade or pen. Always make sure they are in place before cutting. If you don't find it inserted, look behind the plotter in the pencil holder. [[#pen|Dont know how?]]
* Place your Sheet or Roll in the plotter. [[#set|Dont know how?]]
* Select the media type on the display and then press the enter button.
<br>
[[File:Roll selection.jpg|400px]]
<br>
[[File:Piece selection.jpg|400px]]
<br>
* The plotter will show you the width of the roll, and measure the width and length of your sheet. ''Verify that your graphic in Illustrator is not bigger than the plot area''
<br>
[[File:Lenght sheet.jpg|400px]]
<br>
<br>


== Guide: Wiggle ==
== Guide: Font Weight animation ==
* Open the CutStudioPlugin by clicking on the Illustrator menu Window>Extensions>RolandCutStudio
This guide demonstrates how to animate text weight by using and editing a given code. <br>
* If you are using the plotter flex, plottter flock or vinyl (for inside of a window), make sure to mirror your design!
You can follow the original tutorial showing 3 ways to animate text weight >>[https://www.youtube.com/watch?v=EGi_-k9o-OM here] (expression Strats at 6:51)  <br><br>
[[File:Window extension.png|800px]]
[[File:FontWeight.gif|500px]] <br>
 
{| class="wikitable"
|-
| skills || copy-paste-and-adjust code
|-
| || layer control expression
|-
| time to complete || 21 minutes
|}
 
'''step 1''' <br>
Add a solid layer and add text layer. Choose a ''typeface with multiple weights''.<br>
 
'''step 2''' <br>
add a Null object > rename it 'control'.<br>
[[File:FontWeight1.png|500px]] <br>
 
'''step 3''' <br>
add a Slider Control effect to the Null layer > rename it 'font weight'.<br>
[[File:FontWeight2.png|500px]] <br>
 
'''step 4''' <br>
click your text layer drop-down arrow > open the 'TEXT' drop down menu.<br>
next to the Source stop watch alt(Option)-click > paste in the following code:<br><br><syntaxhighlight lang="javascript">
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]);
 
 
</syntaxhighlight><br>
 
[[File:FontWeight3.png|500px]] <br>
[[File:FontWeight4.png|500px]] <br>


* The preview box will show you what will be plot
[[File:First window extension.png|400px]]
<br>
<br>
== Guide: Random Color ==
'''step 5''' <br>
* Depending on the setting, you may have to '''select everything in your graphic you want to plot'''
adjust the code content - change the names of the fonts to your own selection.<br>
* You can also set what you would like to cut through the window highlighted in the screenshot.
 
[[File:Cut options.png|400px]]
'''step 6''' <br>
* To make the knife start cutting/drawing in a given position on the piece of vinyl/paper, move the knife with the arrows and then press the button "Set Origin" on the plotter. Then make sure to tick the "Move to origin box on the Roland Cut Studio extension window as shown here.
mark inside the brackets of r=Math.round() from (thisComp to "slider")> 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>


[[File:Move to origin window.png|400px]]
'''step 7''' <br>
[[File:Originsetup.jpg|400px]]
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.


== Recommended Tutorials ==
== Recommended Tutorials ==
You can watch our pre-tested video tutorials to create the above and more.
You can watch our pre-tested video tutorials to create the above and more.
<br>
<br>
1. [https://www.youtube.com/watch?v=Ar_8XBVEKGY introduction to Expressions]
1. [https://www.youtube.com/watch?v=Ar_8XBVEKGY introduction to Expressions]<br>
2. [https://www.youtube.com/watch?v=kbjsL0i0sPM Things Wiggle can do]  
2. [https://www.youtube.com/watch?v=kbjsL0i0sPM Things Wiggle can do] <br>
3. [https://www.youtube.com/watch?v=hBCBAbR-B5w&t=317s Wiggle multiple objects]  
3. [https://www.youtube.com/watch?v=hBCBAbR-B5w&t=317s Wiggle multiple objects] <br>
4. [https://youtube.com/shorts/2dkyocGqGHM?feature=share Flicker/ Glitch]  
4. [https://www.youtube.com/watch?v=37a3YHq4suE&t=12s Wiggle text colors]<br>
5. [https://www.youtube.com/watch?v=2T_4ndZ6Nr8 Random letter reveal]  
5. [https://www.youtube.com/watch?v=9f8l_Fugc2Q Random color expressions]<br>
6. [https://www.youtube.com/watch?v=xrKMeeFrMxg Random options]  
6. [https://youtube.com/shorts/2dkyocGqGHM?feature=share Flicker/ Glitch] <br>
7. [https://www.youtube.com/watch?v=qNhXjGRSe-s Random XYZ Position]  
7. [https://www.youtube.com/watch?v=2T_4ndZ6Nr8 Random letter reveal] <br>
8. [https://www.youtube.com/watch?v=faheQUVMHWw Five copy-paste Expressions]  
8. [https://www.youtube.com/watch?v=xrKMeeFrMxg Random options] <br>
9. [https://helpx.adobe.com/after-effects/using/expression-examples.html Adobe Expressions Examples]  
9. [https://www.youtube.com/watch?v=qNhXjGRSe-s Random XYZ Position] <br>
10. [https://www.youtube.com/watch?v=MHFgJRtxwDE Using ChatGPT to Create AE Animations]
10. [https://www.youtube.com/watch?v=faheQUVMHWw Five copy-paste Expressions] <br>
11. [https://helpx.adobe.com/after-effects/using/expression-examples.html Adobe Expressions Examples] <br>

Latest revision as of 11:52, 18 October 2024

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
Click Option (Alt on Windows) + Stopwatch >wiggle (4,40)
CountDown3.png

step 4
Set the Range Selector > offset to 0% in the beginning of the timeline, and to 100 % on another point in the timeline. This will create a new keyframe. Adjust this 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 demonstrates 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 layers on your background.
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 shape layer's Position and Alt-click the Stopwatch.
Write wiggle and keep the brackets empty.

connect the values with the Time , Position sliders by using the PickWhip:
1. drag the PickWhip next to position first to the Time Slider
2. add coma ,
3. drag again the pickWhip next to position to the second slider 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 inside the brackets of r=Math.round() from (thisComp to "slider")> 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. Wiggle text colors
5. 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