Learn how to make a text layer randomly cycle through an array of words that you assign it. Great for random HUD info, background filler, etc…
After watching the video, see below for the code and a breakdown explanation.
DISCLAIMER: For readers that copy and paste the following Expression code below, be aware that double quotes are currently showing as smart quotes. This is a PVC article default that I cannot override at the moment. I am looking for a workaround, but in the meantime you will need to make sure you paste the Expression code into a blank simple text document, NOT a rich text one, first to convert all code to simple text, then copy that and paste that into your Expression field in After Effects. Use TextEdit on Mac or NotePad on PC for this. If you paste directly into the Expression field without this step, you will end up keeping the smart quote formatting and it will cause a syntax error when you try to run the Expression. Just a heads up.
SOURCE CODE:
words = [“Text”, “More”, “List”, “Hi”, “Something”, “Article”, “Code”];
count = words.length;
currentWord = random(0, parseInt(count));
words[parseInt(currentWord)];
For this expression we are dealing with a very different looking expression code than you may be use to using. Don’t worry I’ll help you through it. We will be dealing with Arrays, random() method and the parseInt() method. So what do all these do?
Array [“”, “”, “”, “”] – In this breakdown I am using a shorter Array than what’s in the video, just so I can explain the process better. An Array is used to store multiple values, think of it as a box that you are packing items into, that box will always hold only the items you place in it and it will keep them all in one single location for easy retrieval later. Each item listed in an Array can be retrieved by it’s index number. In an Array the index numbering system is a little different as it starts with 0 and not 1, so the first item in the Array is 0. The second will be 1, the third being 2, and so on. Takes a little getting use to.
random() – The random() method is, well just that, random. You can give it two values as a start point and an end point, so saying random(0, 20) will generate a number between 0 and 20.
parseInt() – The parseInt() method is used to force a numerical value to be an integer number, hence the “int” in it’s name. We use this to make sure we get an integer number and not a floating point number like 1.5 or 4.286349. We want just 1 or 4 in that case.
CODE BREAKDOWN:
1) words = [“Text”, “More”, “List”, “Hi”, “Something”, “Article”, “Code”];
2) count = words.length;
3) currentWord = random(0, parseInt(count));
4) words[parseInt(currentWord)];
Line 1: The Array contains all of the chosen content we want to eventually display. Each item in the array is surrounded by double quotes and separated by a comma. The entire list is surrounded by brackets.
words = [“Text“, “More“, “List“, “Hi“, “Something“, “Article“, “Code“];
Line 2: The count variable is storing words.length, this is the length of the Array, the number of items. We could just as easily say count = 6;, but if you are adding more items to the Array later on then you will also have to change this number. Why do that when .length does the math for you. 🙂
count = words.length;
Line 3: Here’s a little confusing one. The random() method is what’s randomly grabbing our words from our Array variable, words. To do this we tell random to choose between 0 and the length of our Array, which is 6, so effectively we would write random(0, 6); and it would work. But going back to my note above about .length doing the math for us, we would write random(0, count);. Now what’s wrong with this? There’s a chance that our variable count could be seen as a string and not a numerical number. This could cause an error So we force it into a numerical value by using parseInt(count).
currentWord = random(0, parseInt(count));
Line 4: This last line is what we want to display as our final value. We access Array items by their index number like this, Array[0]. This would access the first item of an Array. So our Array is called words, and if we wanted the third item we would write words[2]. Remember what I said above about Arrays starting at 0. 🙂 So for our purpose we want our Array, words, and we want the random number value which is our variable, currentWord. We can write words[currentWord];. Yet another possible issue here, what if our random number is 3.589646 and not 3? Well there are items at 0, 1, 2, 3, 4, 5 and 6, but not at 3.589646. We need to make that number an integer. You guessed it, we use parseInt() to get the final code here.
words[parseInt(currentWord)];
I hope this explains this code clearly enough. Not knowing Javascript can make this stuff frustrating, believe me I know, but I hope to make that process a little less painful for you with each of these videos and code breakdowns.