Multimedia Production

Class 12: JavaScript

Topics

Manually Coding JavaScript
Interactive Area Assignment

Don’t be late for this class!

Manually Coding JavaScript

PSL (like ESL but Programming Second Language)

This is my goal for you. I am not expecting you at this point to just magically know how to code. I want you to know it like you know a second language from highschool. Not fluently, but enough to figure out what you need to get by.

A basic understanding to find and adjust code. This is what we are going to cover.

Code Breakdown Explanation Video

You may watch this to help you understand the code if you feel like you are struggling with it.

Code Breakdown

The code below is pretty much what we are going to be using for the lab this week.

this.button.addEventListener(“click”, fl_ClickToGoToAndPlayFromFrame.bind(this));
 
function fl_ClickToGoToAndPlayFromFrame()
{
this.play();
}

Variables: The same thing as variables in math. Its a box that holds a value. You create a name and assign a value which could be a whatever data type you want, (numbers, strings, booleans, etc.).; There are no examples in the original code so I added one to the example below.

var: This keyword let’s JavaScript know that it is a variable.
name: You may create any name you like for your variables so long as they follow certain rules and are not already used or are keywords. Variable names may not start with a number, special character, or capital letter.
value: When declaring a variable (creation) it is not necessary to give it data but you may. It may have an empty value but basically this is the data the variable holds.
;: The ; symbol is like a period at the end of a sentence. Each executable line of code is called a statement and computer knows when a line ends by the ;. Forgetting these is a really common coding error, so be careful!

var message = “you pressed the button!”;
 
this.button.addEventListener(“click”, fl_ClickToGoToAndPlayFromFrame.bind(this));
 
function fl_ClickToGoToAndPlayFromFrame()
{
this.play();
document.write(message);
}

In the example above I added a variable named message. I assigned it the value (using the = symbol) “you pressed the button! Towards the bottom of the code snippet you can see I call the write method inside of the document object and give it the message variable. This will write my message on the screen.

Functions

Functions are actions. They do things. Like a list of directions, functions are filled with lines of code (called statements) encapsulated by brackets { }. These functions may be called whenever you like by simply writing the function name. You may create your own custom functions or use the built in ones.

You will see examples of functions being declared (creating a custom function) and functions being called (told to run) in the code below.

Function Declaration (creation)

function: This keyword let’s JavaScript know you are declaring a new function.
name: Your functions may be named whatever you like so long as they follow certain rules and are not already used or are keywords. Variable names may not start with a number or special character.
(): These parenthesis represent the parameters of the function. They allow you to accept values when the function is ran. For instance if you had a function that found area you might have something like function area (width, height). This way when you called that function it would require you to send two values so it could calculate area. If these are blank it doesn’t require any values being sent when invoked.
{}: These braces encapsulate the lines of code that exist inside of the function. Anything inside these will be run anytime the function is invoked.

this.button.addEventListener(“click”, fl_ClickToGoToAndPlayFromFrame.bind(this));
function fl_ClickToGoToAndPlayFromFrame()
{
this.play();
}

A function called fl_ClickToGoToAndPlayFromFrame() is declared in the example below. It has a unique name (that Animated generated for me). The empty () means that it does not require any values being passed to it. There is only one line of code this.play(); inside it’s braces {}. So when this function is invoked (called) it will run the play method which is the same as pressing the play button on our timeline.

Function Invocation (call)

name: The name of the function you want to run. It may be a function you created or that is built in.
(arguments): Some functions require arguments when they are invoked. This is information you are passing to the function that it will use when it runs. These argument must correspond to the parameters on the function itself. In a nutshell stuff inside the () when the function is invoked are called arguments. Those line up with the stuff inside the () in the function itself which are called parameters.
;: Every statement (line of executable code) should end with the ;. Think of it like a period.

this.button.addEventListener(“click”, fl_ClickToGoToAndPlayFromFrame.bind(this));
 
function fl_ClickToGoToAndPlayFromFrame()
{
this.play();
}

There are a lot of examples of function invocation below.First you see the function addEventListener() being called inside of the button object. This is a built-in function as you can tell since we did not create it. In its parenthesis you see its arguments. We are passing it two items. The first is the word “click”. This function adds an event listener and so it needs to know what event it is listening for. In this case it is a user’s click. The second item tells the event listener what function should be run and what it is attached to. So when the user clicks it will run the fl_ClickToGoToAndPlayFromFrame function.Next the fl_ClickToGoToAndPlayFromFrame function is declared. You can see there is only one line of code, this.play() which is a function itself (a built-in one). This will play the timeline attached to this which in our case is the stage.

Objects: Objects in code are like objects in real life. They may be described with adjectives and verbs. In code we call these properties (which are variables inside an object) and methods (which are functions inside an object). Think of objects like fancier variabless. Like variables they are boxes but instead of just holding a single value they hold properties and methods.

Properties: Variables stored in an object are called properties. They function the same way simply holding values that may be extracted or updated.
Methods: Objects in real life can do things. For example a blender can blend food. You can give it different items to blend and you can choose how it blends those items. Objects in code have methods. These functions are bits of code that can complete math operations, compare variables, do whatever you write.

this.button.addEventListener(“click”, fl_ClickToGoToAndPlayFromFrame.bind(this));
 
function fl_ClickToGoToAndPlayFromFrame()
{
this.play();
}

You can see objects in the code to the right such as this and button. Button is a symbol I created on the stage that will listen for the user to click on it (symbols are inherently objects in Animate). This is a weird JavaScript object thing. Basically this represents the object the code is attached to. In Animate this is most often the stage. In the code to the right you can see we are running the method addEventListener() on the object button inside of the object this (stage)

dot notation: This acts like a file/folder structure. Instead of writing something like folder/folder/someFunction.exe or file.ext you are writing object.object.someMethod() or property

this.button.addEventListener(“click”, fl_ClickToGoToAndPlayFromFrame.bind(this));
 
function fl_ClickToGoToAndPlayFromFrame()
{
this.play();
}

You can see dot notation in the example on the right in many places such as this.button.addEventListener(…etc. This is saying to run the method addEventListener (this specific method will listen for the user to click) inside of the button object (the button is simply the button symbol I created on the stage) that is inside this (this, in this case stands for the stage).

Interactive Area Assignment

Interactive Area:

In this assignment you will create a composition that has interactive components present. This is pretty similar to the previous project but you will be able to interact with multiple objects.

You will be graded on the following:

Lab Requirements
- Techniques and processes covered in the instructional material is followed and implemented.
Creativity & Craftsmanship
- Excellent design choices, novel & appealing, and solid clean caliber work.

Resources:

Assignment Video Tutorials: You may watch these tutorial videos below to help you complete your assignment.
Assignment Lab Materials: You may download the lab materials here: here.

Assignment Video Tutorials

Wait! Before you go!

Did you remember to?

Read through this webpage
Watch the videos
Submit Interactive Area Assignment on Blackboard