The final step that we’ll cover in our study of Adobe Animate is an aspect of the program called ActionScript, which allows you to add code to your animations and have the program perform different functions for you. This is also used to make your animations interactive, so the viewer can click on things, move things, input things, etc. This is how many apps and video games are made.
Open Adobe Animate
In the new file dialogue box, choose Action Script 3.0
Draw a shape. Any shape, any size!
Right click on the shape and Convert to Symbol
In order for something to have ActionScript code attached to it, it must be a MOVIE SYMBOL.
This symbol is going to be a link to a website, so I’m going to call it URLButton
In order to have code attached, it needs to be given an “Instance Name.” You can choose/modify this in the Properties panel. When writing code, instance names and objects in the code are usually written in something called “camel Case” in which multiple word names are put together with no space in between, and a small letter on the first word and a capital letter on the second word. So my Instance name is going to be “webLink”
*NOTE. If you don’t choose your own instance name, Animate will create one for you, but it’s always best to keep yourself organized and know what each item does.
In order to add and edit the code, there are two panels that you will want to open. Go into the Window menu and open Actions and Code Snippets
I have added those to the panel bar on the right so that I can easily open and close them as needed. Just drag the panel over onto the bar and wait for a white line to appear.
On your timeline, ActionScript code should always be added on top of all of your layers, so create (or wait for the program to create when you add code) a layer called Actions. My timeline looks like this:
Using the Select Tool, select the shape that you drew
Open the Code Snippets panel (looks like <>) and open the “Actions” section.
Double click “Click to Go to Web Page”
The Actions panel should open and you will see the Code Snippet that was added:
There are instructions at the top that explain what this does and what you need to do to make it work.
The code starts by identifying the symbol’s instance name (webLink), then adds a code that “listens” for a mouse click. When that click is “heard,” the “function” below is activated, which tells the computer to navigate to the specified URL (change adobe.com to whatever you want) and tells it to open the page in a new browser tab.
EXERCISE 2:
For the purposes of my example, I will be using a photo of the best looking, most wonderful, most brilliant, kind and generous person in the world. You may download it here: ex2Symbol
Create a new Action Script 3 file. The size and frame rate don’t matter too much, but I like my frame rate to be 25, which helps me keep track of how long my animation is.
Before you even begin, ALWAYS SAVE YOUR WORK with the correct name and in the correct location! I’m making a game where you have to blast a monster, so I’ll call mine MonsterBlast, and will save it in my Google Drive folder.
In my timeline, I have 3 layers: Actions, Character, and Background.
Choosing frame 1 of my Actions layer, I am going to add a Code Snippet that tells the animation to not play until I tell it to, because I want to add a title, instructions, and a play button. Go to Timeline Navigation, and choose Stop at this Frame.
On my Character layer, I designed a welcome screen
I created a new BUTTON symbol to act as my play button. You can design your own, but I got lazy and grabbed an arrow from this link.
On frame 1, in the Actions layer, I opened the CodeSnippets panel, went under Timeline Navigation, and chose “Click to Go to Frame and Stop”
The code pops into the Actions panel. All you have to do is change it so that it goes to the frame of your choice. In my case, I just need it to go to frame 2.
Looking at the code, it’s adding instructions to my playButton instance, and telling the animation to “listen” for a mouse click, and if that happens, it will go to and stop at frame 2.
Of course, in order for that to work, I need to actually have content on frame 2. I’m going to add a new frame on each layer
But on frame 2 I want those words to be gone, so, selecting the Character layer (where I’ve added the words), I’ll Insert Kayframe instead, and delete those objects from my stage.
I want this screen to have instructions on it, so I’m actually going to keep the playButton in the same spot. I went back to frame one, selected the button, and copied it. Then went to frame 2 and chose “Paste in Place”
Now for the moment of truth. Press Command ⌘ and return to test your movie! You should see the welcome screen
and if you’ve done it correctly, clicking on the playButton should take you to the next frame, which is blank except for the playButton
This screen is going to have the instructions, and the playButton will do exactly the same thing, except it’ll take us to frame 3 this time and it will Play the next stage of our animation/game.
Again we’ll need to add frames for frame 3
and add a key frame to get rid of the text and the play button.
I am going to import a new symbol (the one linked above, or again here) into the stage. You can draw or find your own if you wish.
Some import options will pop up. STOP and read the next set of IMPORTANT instructions.
We need this file to become a Movie Clip Symbol, and we’ll give it an Instance Name. VERY IMPORTANT: move the Registration point to the CENTRE. This will make it so that the player has to shoot me in the middle of the head to kill me.
Wait, is that a good idea? Nobody would ever want to hurt me! Oh well, it’s just a game. Hopefully they’ll play along.
Just like in real life, my head is too big.
So I’m going to right click on it and go to Transform, then Free Transform.
Hold down shift (unless you really want to squish or stretch my head) and grab one of the corners and drag it in.
My head is going to start off screen, and I’m going to animate it to move across the screen in an interesting pattern. You can animate this however you like. Make it go as fast or slow as you like (don’t make it too hard or too easy.)
On my Character layer (where your object should be), I’m going to add a Key Frame every second or so, and connect them with a Classic Tween, so that my head bounces around a bit. Here’s mine so far:
[swf src=”http://misterjrobson.com/MonsterBlast1.swf” width=”600″ height=”400″ ]
Now I’m going to add what happens when the user clicks on my head. In my case, I want it to open a webpage URL.
I’m going to add a Code Snippet: Click to Go to Web Page
And in the Actions panel, I’m going to add my own URL (the URL I am using is: http://misterjrobson.com/RIPJR.jpg
If you want to customize your own picture, create something and send it to me so that I can upload it, or just link to a site of your choice.
Now, my game looks like this:
[swf src=”http://misterjrobson.com/MonsterBlast2.swf” width=”600″ height=”400″ ]
Now I want to add a custom cursor, which will make it look like we have a gun pointed at the screen, and should make it a bit easier to hit the target.
It’s going to be a new Movie Clip symbol, and it’s going to be called “cursor”
Go into your library
and then press the New Symbol button on the bottom left of the panel
I’m going to use the oval tool + shift to draw a circle. My circle has a stroke, but no fill
Then I’m going to draw a line the same colour and thickness as my stroke. I’m again going to hold down Shift to make my line perfectly horizontal. Once I’ve drawn that, I’ll switch to the Selection Tool (click v on your keyboard) and then draw a box around both items to select them. Then right click, go under Align, and choose Horizontal Centre.
You can copy and paste the line, then hold shift or just use the arrow keys to move it down and into place
Paste a third line, right click on it, and choose Rotate 90⦁ (doesn’t matter whether it’s clockwise or counter clockwise, cuz, uh, it’s just a straight line.)
Eventually you should have something that looks kinda sorta like this
Returning to our scene, we’ll add that cursor BESIDE the stage on the Character layer AT FRAME 3.
With that selected, we’ll add the Custom Mouse Cursor code snippet.
We want our cursor to turn back to normal at the end of the movie, so we’ll take the last few lines of code and cut those. These lines are the ones we’ll cut:
//To restore the default mouse pointer, uncomment the following lines:
//cursor.removeEventListener(Event.ENTER_FRAME, fl_CustomMouseCursor_3);
//stage.removeChild(cursor);
//Mouse.show();
Go to the last frame of your movie (mine is 357) and add a key frame on the Actions layer. Open the Actions panel, and paste in the code that you cut out of the original command. You need to take the // marks off of the code lines (starting with cursor.removeEvent…). It will now look like this:
//To restore the default mouse pointer, uncomment the following lines:
cursor.removeEventListener(Event.ENTER_FRAME, fl_CustomMouseCursor_2);
stage.removeChild(cursor);
Mouse.show();
[swf src=”http://misterjrobson.com/MonsterBlast.swf” width=”600″ height=”400″ ]