In the first two lessons we discussed using html to design web pages. Now let's take a look at online animation.
We want to create an object, for example an "EHMS" text object, and have it suddenly jump on to an image on our web page. The image on our web page, a photo of EHMS students, has a width of 295 pixels and a height of 320 pixels as shown below.
Let's name the object t1. (We can name it most anything we want. We have chosen the name t1 to indicate that it is our first animated "text" object.) Now we need to give it the properties and behaviors needed to meet our objective.
To keep track of the location of the EHMS text object, we use an x,y-coordinate system similar to what you have used in math class. The only difference is that the postive y-axis will point down instead of up.
Are you ready? OK, Let's give our text object some properties and behavior:
t1 = new TextField(); // This line creates t1 as a new TextField object.
t1.x = 400; // This places t1's initial x-position to the right of the image so that it can't be seen.
// Remember that the image is only 295 pixels wide. Therefore, by picking a number such as 400,
// we have placed t1 out of view and to the right of the image.
t1.y = 100; // This places t1's initial y-position at 100 pixels.
// Remember that the positive direction for y is down, not up.
Shown below is what we have so far. It shows that t1 is out of view, off to the right of the image.
t1.width = 100; // 100 pixels should be wide enough to hold EHMS.
t1.border = false; // Let's not put a border around t1.
t1.background = false; // t1 does not need its own background. The image will be the background
t1.text = "EHMS"; // This important line says that t1 will be the text EHMS.
myFontFormat1 = new TextFormat(); // Let's call t1's "format" properties "myFontFormat1"
// We can call it most anything we want.
myFontFormat1.color = 0x00bbff; // This formats the text EHMS to have a blue color. More on this later.
myFontFormat1.font = "Arial"; // We want t1's font to be Arial.
myFontFormat1.size = 24; // We want t1's font size to be 24.
myFontFormat1.bold = true; // Let's make t1's font bold.
t1.setTextFormat(myFontFormat1);
addChild(t1); // This very important line place t1 "on the stage" of our animation.
// It displays t1 and gives it visibility whenever it becomes located over the image
// Remember that, since t1's x-position is 400, it is currently outside of the image.
OK, this is a good start. We have given t1, which is the text EHMS, some properties. In the next lesson we will give t1 its behavior. (we want "EHMS" to suddenly jump on to an image on our web page.)