Watch the free video tutorial above or get the digested version below…
Adobe Animate has plenty of great components you can use in your AIR for Android apps. This includes scroll panes, buttons, checkboxes, radio toggles, etcIf you’re coming from the iOS world, these are similar to many of the UIKit objects we can make use of. Â And although these components function pretty darn good, appearance wise they leave a bit to be desired. So I thought I would lead off this series by creating a Movieclip that acts a bit like a component, but we’ll draw and code it up ourselves.
One of my favorite UIKit objects is the toggle switch in iOS. Sadly Adobe hasn’t decided to make a component that resembles it, so we’ll build our own.
Draw a Circle using the Oval tool. Mine is about 47 by 47 on the width and height.
Now draw a Rectangle using the Rectangle Tool (R). After selecting the tool, in the Properties window change the Rectangle Options to 30, which will give it a rounded corner. In the toolbar, set the Stroke color to White and the Fill color to blue.
Once you’ve drawn the square to approximate the same height as your circle, double-click the blue Fill area (which should also select the stroke part) and convert the shape the to a MovieClip. Press F8 on the keyboard or from the Modify window > Convert to Symbol. Â This is now an object in the Adobe Animate Library. To make changes to the symbol, double click into it.
Do the same thing with your circle, convert it to a MovieClip.
Now select the rounded rectangle and go to Modify > Symbol > Duplicate Symbol. Â This is going to create a unique instance of the original symbol. So if you change this symbol, it won’t change the original. Which is exactly what you’re about to do. Double click into the duplicated symbol. Now select the blue fill area and delete it (using the Delete key).
This is going to be the toggle backing when the switch is turned off.
Select all three of your symbols, the circle, the “on” backing, and the “off backing”, and hit F8 to create a symbol of all three of them. Call the symbol something like “Toggle”. The MovieClip name is not necessarily what we’ll refer to it as with Actionscript, so this name can be whatever you want.
Double click into the Toggle symbol and let’s arrange things by layers. The circle will be on the top layer. The On backing will be the middle layer, and the Off backing will be the bottom layer. The image to the right shows the button to Add a New Layer to the Adobe Animate timeline. You can leave the Off backing in place, then Cut (Command X) both the On backing and Circle then Paste (Command V) them into their own layers. Â Alternatively you could select all 3, and Right-Click and select Distribute to Layers.
Once on their own layers, arrange the two backing symbols right on top of each other.
Next up create a new layer named Actionscript. Here we are going to add code to frames 1, 5 and 10. Select each of those frames (one at a time) and tap F7 on the keyboard or right-click and just Create Blank Keyframe. On the layers below, you can hit F5 on frame 10 to extend out those layers to frame 10 (otherwise the content won’t be visible).
If you paid attention last lesson you remember how to write Actionscript using the Actions window. Do that on each of the blank keyframes. And write the following….
stop(); Â //on frame 1stop(); //on frame 5gotoAndStop(1); //on frame 10
Now we need to animate our switch going from the On to Off position on frame 5, then back to the On position again on Frame 10 (which will then skip back to frame 1). So frame 1 and 10 will look identical. As such, go ahead and place Keyframes on Frame 10. Hit F6 on the layers with the Circle and “On” Backing.
We don’t need a keyframe on the Off Backing (the bottommost layer) because this layer won’t change. What will change is the position of the circle and the transparency of the On Backing.
Move the timeline to Frame 5Â and make Keyframes on frame 5 for both of those layers. Move the circle to the left side of the toggle. Then select the On Backing and in the Properties window find Color Affect and Style the Alpha property to zero.
Almost done. Exit editing the symbol and go back to the main timeline. Select the toggle and in the Properties window give it an Instance Name of simpleToggle.
Awesome. You’ve made a custom toggle for yourself. We just need to code it!
Time for some Actionscript 3…
Switch over to the initial_setup.as file we created last lesson and write the following code (you can cut and paste it from below). To fully get an understanding of what’s happening here, we suggest you watch the video above. But here’s the gist of it…
When the user taps the simpleToggle  (or does a mouse click on it), the tappedToggle function is called.
This function is mostly just testing if the toggle is on or off. But before we get to that part, we do some initial testing (mostly just for the heck of it) to see if what was pressed is actually a movie clip. So we are casting this new variable named just toggle as the currentTarget that was tapped. That’s this part…
var toggle: MovieClip = e.currentTarget as MovieClip;if (toggle is MovieClip){
We could have just referred to the simpleToggle instance this whole time, but I’m a curious programmer and coming from the iOS and Swift world, I wanted to see if casting like this would work.
Onward. Next up we want to see if the boolean variable isToggleOn is true AND if the toggle is currently at frame 1. Â If both aren’t true that means the toggle is either in the off position or it is animating toward one or the other. Â If both conditions are true, we make the toggle play at frame 1, we set isToggleOn to false, and just to verify that value, we trace (print) it to the Output window.
The next condition checks the opposite. If isToggleOn is false and if the currentFrame is at 5. In which case, we again play the toggle forward and flip the boolean value.
The final else condition only fires if the user clicked / tapped too often and the toggle was animating at the time.
import flash.events.MouseEvent;
import flash.display.MovieClip;
var isToggleOn:Boolean = true;
simpleToggle.addEventListener(MouseEvent.CLICK, tappedToggle);
function tappedToggle(e:MouseEvent): void {
var toggle: MovieClip = e.currentTarget as MovieClip;
if (toggle is MovieClip){
if (isToggleOn == true && toggle.currentFrame == 1) {
toggle.gotoAndPlay(1)
isToggleOn = false
trace (isToggleOn)
} else if (isToggleOn == false && toggle.currentFrame == 5){
toggle.gotoAndPlay(5)
isToggleOn = true ;
trace (isToggleOn);
} else {
trace ("Toggled while animating");
}
}
}
