Introduction to JavaScript and ActionScript
Understanding the Languages
1. JavaScript
Definition: A scripting language for making websites interactive.
Role in Web Development:
o HTML → Structure (like the skeleton)
o CSS → Design (like the clothes)
o JavaScript → Interaction/Behavior (like movement, speech)
Example:
Without JavaScript: Clicking a button does nothing.
With JavaScript: Clicking a button shows a pop-up message.
2. ActionScript
Definition: A programming language used in Adobe Flash/Animate for creating
interactive multimedia, animations, and games.
Why it’s useful: Although Flash is no longer widely used, learning ActionScript gives
beginners a hands-on way to control animation, buttons, and timelines in Adobe
Animate.
Connection to JavaScript: Both come from ECMAScript, so their syntax is very
similar (curly braces {}, semicolons ;, functions, etc.).
Setting Up
For JavaScript
You only need a text editor (Notepad, VS Code, Sublime, etc.) and a web browser.
Save files as .html and open in the browser.
For ActionScript (Adobe Animate)
1. Open Adobe Animate.
2. Create a new ActionScript 3.0 document.
3. You’ll see the stage (canvas for animations) and the timeline.
4. The Actions Panel (F9) is where you write ActionScript code.
Beginner Coding Exercises
Exercise 1: JavaScript – Button Click
Goal: Make a button that shows “Hello, World!” when clicked.
Step-by-Step:
1. Open a text editor.
2. Write the following code:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Example</title>
</head>
<body>
<h1>Click the button!</h1>
<button onclick="sayHello()">Click Me</button>
<script>
function sayHello() {
alert("Hello, World!");
}
</script>
</body>
</html>
Explanation:
<button onclick="sayHello()"> → Adds a button that calls the function sayHello()
when clicked.
function sayHello() { alert("Hello, World!"); } → Defines what happens:
show a pop-up message.
Exercise 2: ActionScript – Button Click in Adobe Animate
Goal: Make a button that shows a message when clicked.
Step-by-Step:
1. Open Adobe Animate → create ActionScript 3.0 document.
2. Draw a button on the stage.
3. Convert it to a Button Symbol (Right-click → Convert to Symbol → Button).
Name it myButton.
4. Give it an Instance Name in the Properties panel: myButton.
5. Open the Actions Panel (F9) and type:
stop(); // Stops timeline at frame 1
[Link]([Link], sayHello);
function sayHello(event:MouseEvent):void {
trace("Hello, World!");
}
Explanation:
stop(); → Freezes the timeline so animation doesn’t play automatically.
[Link]([Link], sayHello); → Listens for a click
on myButton.
function sayHello(event:MouseEvent):void { trace("Hello, World!"); } →
Executes when clicked, printing “Hello, World!” in the Output panel.
Exercise 3: Simple Animation (JavaScript)
Goal: Move a box across the screen.
<!DOCTYPE html>
<html>
<head>
<title>Animation Example</title>
<style>
#box {
width: 50px;
height: 50px;
background: red;
position: absolute;
left: 0px;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
let box = [Link]("box");
let pos = 0;
function moveBox() {
if (pos < 300) {
pos++;
[Link] = pos + "px";
requestAnimationFrame(moveBox);
}
}
moveBox();
</script>
</body>
</html>
Explanation:
#box → The red square.
pos++ → Moves the square to the right pixel by pixel.
requestAnimationFrame(moveBox) → Smoothly animates the movement.
Exercise 4: Simple Animation (ActionScript in Adobe Animate)
Goal: Make a circle move across the stage when clicked.
Step-by-Step:
1. Draw a circle on the stage.
2. Convert it to a Movie Clip Symbol (Right-click → Convert to Symbol → Movie
Clip). Name it myCircle.
3. In the Properties panel, set Instance Name: myCircle.
4. Open Actions Panel (F9) and type:
stop();
[Link]([Link], moveCircle);
function moveCircle(event:MouseEvent):void {
myCircle.x += 10; // Moves circle 10 pixels to the right each click
}
Explanation:
myCircle.x += 10; → Changes the circle’s x-position (horizontal).
Each click moves it step by step across the stage.
Part 4 – Student Activities
1. JavaScript Activity:
o Create two buttons: one makes text appear, the other hides it.
o Challenge: Add a background color change when clicking.
2. ActionScript Activity:
o Create a simple interactive game in Adobe Animate: a circle that “jumps” upward
when clicked.
o Use:
o myCircle.y -= 20; // Move circle up
o Challenge: Make it fall back down automatically.
Part 5 – Summary
JavaScript and ActionScript both allow us to add interactivity and animation.
JavaScript → Web-based interactivity (still widely used today).
ActionScript → Adobe Animate interactivity (useful for learning animation scripting).
Both share similar syntax, making it easier to learn one if you know the other.
Mini Project 1: Click the Target (JavaScript)
Goal: Create a simple web game where players click a moving target (a red circle) to earn points.
Set up the HTML file
Open your text editor, create a new file, and save it as [Link].
<!DOCTYPE html>
<html>
<head>
<title>Click the Target Game</title>
<style>
body {
text-align: center;
font-family: Arial;
}
#gameArea {
width: 400px;
height: 400px;
border: 2px solid black;
margin: auto;
position: relative;
background: #f0f0f0;
}
#target {
width: 50px;
height: 50px;
border-radius: 50%;
background: red;
position: absolute;
}
</style>
</head>
<body>
<h1>Click the Target!</h1>
<h2>Score: <span id="score">0</span></h2>
<div id="gameArea">
<div id="target"></div>
</div>
<script src="[Link]"></script>
</body>
</html>
Step 2 – Add JavaScript logic ([Link])
Create a new file named [Link] in the same folder.
let target = [Link]("target");
let scoreDisplay = [Link]("score");
let score = 0;
// Function: Move target to a random position
function moveTarget() {
let gameArea = [Link]("gameArea");
let maxX = [Link] - [Link];
let maxY = [Link] - [Link];
let randomX = [Link]([Link]() * maxX);
let randomY = [Link]([Link]() * maxY);
[Link] = randomX + "px";
[Link] = randomY + "px";
}
// Function: When target is clicked
[Link]("click", function() {
score++;
[Link] = score;
moveTarget(); // Move target again
});
// Move the target every 2 seconds automatically
setInterval(moveTarget, 2000);
// Start position
moveTarget();
Step 3 – How It Works
Target (red circle) moves randomly every 2 seconds.
Clicking the target increases the score by 1.
Students can expand it by adding timers, sounds, or multiple targets.
🎮 Mini Project 2: Click the Target
(ActionScript 3.0 in Adobe Animate)
Goal: Same concept, but inside Adobe Animate using ActionScript.
Step 1 – Create the Stage
1. Open Adobe Animate → New ActionScript 3.0 file.
2. Set stage size: 400x400 px.
3. Draw a red circle → Convert to Movie Clip Symbol (right-click → Convert to Symbol
→ Movie Clip). Name it target.
4. Select it and set Instance Name in the Properties panel: target_mc.
5. Add a Text Field (Dynamic Text) for the score → give it Instance Name: score_txt.
Step 2 – Add ActionScript Code
Open the Actions Panel (F9) on Frame 1 and type:
stop();
// Variables
var score:int = 0;
score_txt.text = "Score: 0";
// Move target randomly on stage
function moveTarget():void {
var maxX:Number = [Link] - target_mc.width;
var maxY:Number = [Link] - target_mc.height;
target_mc.x = [Link]() * maxX;
target_mc.y = [Link]() * maxY;
}
// When target is clicked
target_mc.addEventListener([Link], hitTarget);
function hitTarget(e:MouseEvent):void {
score++;
score_txt.text = "Score: " + score;
moveTarget();
}
// Auto-move every 2 seconds
var timer:Timer = new Timer(2000);
[Link]([Link], autoMove);
[Link]();
function autoMove(e:TimerEvent):void {
moveTarget();
}
// Start position
moveTarget();
Step 3 – How It Works
target_mc (circle) jumps to a new random position every 2 seconds.
Clicking the target increases the score counter.
score_txt updates dynamically.
✅ Student Challenge Ideas
1. Add a Timer – Make the game last only 30 seconds. Show “Game Over!” at the end.
2. Add Multiple Targets – One gives points, another removes points.
3. Change Difficulty – Make the target smaller every time it’s clicked.
4. Animation – Make the target “pop” or flash when clicked.