Flying Objects Instruction

Recreating the flying toasters from the After Dark screensaver that was very popular in the '90s will help you to learn a lot about CSS classes and more specifically CSS animation as well as some Object Oriented Programming (OOP) concepts. However, it is important to note that CSS is NOT programming.

Download Resource Images

Gather Components

Most objects are composed of other objects. For example, all computer systems are composed of a desktop/laptop, a monitor, and a keyboard in order for most people to use them.

As a result, before you can create most objects, you will need to gather the components that you will need to create a complete object.

Create a folder and give it a name (e.g., CSS Animation) and then create another folder INSIDE of it and give it a name of images
Copy and paste the images that you need into the images folder (or use the resource images provided for you,

NOTE: We will be using the two images that are provided for you; however, after completing this tutorial, you can substitute whatever images you want. Just make sure they are of the right types (e.g., images with transparent backgrounds) and the right size.

The ABCs of Programming (Theory)

As with all OOP programming languages, there are three things that you always do:

Create an object
Give it a name
Tell it to do something

NOTE: Because we want to make the code generic, we will be using GENERIC names (e.g., object) instead of SPECIFIC names (e.g., Toaster) when referencing the headings and writing the code. This is helpful because it allows you to "switch" out the graphic with any other graphics that you want without much fuss.

Create An Object

The first thing you always do when using an OOP language is to create the object and position it where you want it to start.

Create a new HTML framework file in your favorite HTML editor (e.g., Dreamweaver) or Notepad and save it. (e.g., css_animation.html):
```
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Flying Objects</title>
</head>
<body>
</body>
</html>
```
Now, write the following highlighted lines in the head and body elements to add another object to the empty div object container.
```
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Flying Toasters</title>
<style>
body{ background:black; }
/*---------------------------ADD FIRST OBJECT -----------------------*/
.display_object {
position: absolute;
background: url(images/toaster-sprite.gif);
width:264px;
height:64px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
```
CODE EXPLANATION:
- The position property is set to absolute to take the element out of the normal document structure and "float" it above the page.
- The background property is used to set an image within the div element. The image that we are using has a width of 264px and a height of 64px and contain four "sprites" or frames against a transparent background that will be used to create the animation later. Notice that the image is ONE picture but with FOUR images SIDE-BY-SIDE in it that will represents the four "frames" of the animation later.
- However, notice that both the height and width properties of the div container MATCHES the height and width of the image so that you can currently "see" all four frames.

Give Object A Name

Typically, you would give a div element an ID name to, well, IDentify it; however, since we will eventually create more than one object, we need to give it a class name so that we can target multiple objects with the same class name.

Give the div element a name by adding an id to it.

NOTE: Every element should be treated as an object and given a name if you want to refer (talk) to it via CSS or other code (e.g., JavaScript).
```
<body>
<div class="display_object"></div>
</body>
```
NOTE: It is helpful to give a class (e.g., display_object) a name that describes its intended purpose (e.g., to display an object).

Change the width property from 264px to 64 px:
```
width:64px;
```
CHECKPOINT: Save the file and preview it in a browser. You should now see only the first frame of the sprite even though the other frames are still there—they are just hidden from view. Also, note the the image is displayed in the upper top/left corner of the browser (e.g., 0,0). That's because that is its default position in the absence of any positioning properties. Since, the div element was given a position property of absolute, you are able to click on it and move it anywhere you want on the page, which will be done in the next step.
In Dreamweaver's Design View, hover over the image until the cursor turns to a double arrow icon and then click on it and drag it to the upper top/right corner of the screen. If you are using Notepad, enter the values in the next steps for the top and left properties.
CHECK POINT: Save the file and preview it in a browser. You should see that the image is now on the right side of the screen. Also, note the if you used Dreamweaver to drag the image to the right side of the screen, it automatically created the top and left properties for you.
```
.display_object {
	position: absolute;
	background: url(images/toaster-sprite.gif);
	width: 64px;
	height: 64px;
 left: 631px;
	top: 30px;
}
```

Tell Object To Do Something

Now that we have created an object and have given it a name and set its position, it's time to tell the object to do something. There are two parts to create an animation with CSS:

Create an animation class that will tell the div element HOW to animate.
Set animation keyframes to the the div element WHERE to animate.

Write the following highlighted lines within the style element:
```
<style>
/*---------------------------ADD FIRST OBJECT -----------------------*/
.display_object {
	position: absolute;
	background: url(images/toaster-sprite.gif);
	width: 64px;
	height: 64px;
	left: 631px;
	top: 30px;
}
/* Create an animation called "flap" using four steps (frames) over 0.4 seconds */
.animate_object1 {animation: flap 0.4s steps(4) infinite;
}
@keyframes flap {
  from { background-position:  0px; }
  to { background-position: 256px; }
}
</style>
```
CODE EXPLANATION:
- The .animate_object1 class uses the animation property with the following values:
- The @keyframe flap with the SAME name as the animation class sets the from and to (start and stop) points for the background-position property of the image that is inside of the div element. This causes each image inside of the single image to "slide" into view from the right starting point of zero to the left ending point of 256:

Now, APPLY the animation class to the div element:.

<body>
<div class="display_object animate_object1"></div>
</body>

CHECK POINT: Save the file and preview it in a browser. You should see that the image now animates "in place" at the top right of the screen. (See example above)

Write the following highlighted lines to animate the already animated object:

<style>
/*---------------------------ADD FIRST OBJECT -----------------------*/
.display_object {
	position: absolute;
	background: url(images/toaster-sprite.gif);
	width: 64px;
	height: 64px;
	left: 631px;
	top: 30px;
}
/* Create an animation called "flap" using four steps (frames) over 0.4 seconds */
.animate_object1 {animation: flap 0.4s steps(4) infinite, fly 10s linear infinite;}
@keyframes flap {
  from { background-position:  0px; }
  to { background-position: -256px; }
}

@keyframes fly {
  from { transform: translate(0, 0); }
  to { transform: translate(-1600px, 1600px); }
}
</style>

CODE EXPLANATION:

Notice that you can add MULTIPLE animations to the same animation property if you separate them by commas.
The fly animation has the following values:
- fly—name of animation
- 10s—duration of animation
- linear—animation easing type
- infinite—repeat animation
The @keyframe fly with the SAME name as the animation sets the from and to (start and stop) points for the transform property of the of the div element. This cause the object to "fly" across the screen.

CHECK POINT: Save the file and preview it in a browser. You should see that the object "flap" its wings AND "fly" across the screen from its initial position and after awhile it repeats the animation over and over again. However, because the object has a FIXED position, it is not suitable for various screen sizes. To fix this problem, we will make the initial position relative to the screen size by using percentage values instead of pixel values and at the same time we will move it OFF the screen so that it is not shown when the page first load.

Write the following highlighted lines in the style element:

/* Position object off the screen 10% from the top and right so that it is responsive to various screen sizes. */
.object_position1 { right: 10%; top: -10%; }
/* Create an animation called "flap" using four steps (frames) over 0.4 seconds */
.animate_object1 {animation: flap 0.4s steps(4) infinite, fly 10s linear infinite;}

Delete the highlighted lines from the display_object class:
```
.display_object {
	position: absolute;
	background: url(images/toaster-sprite.gif);
	width: 64px; 
 height: 64px;
  left: 631px;
  top: 30px;
}
```
NOTE: Since we defined a relative position using percentage, the fixed values are no longer needed.
Add the object_position1 class to the div tag in the body element to force the initial position of the object "off" the screen when the page loads.
```
<body>
<div class="display_object object_position1 animate_object1"></div>
</body>            
```
CHECK POINT: Save the file and preview it in a browser. You should see that the object now animates ONTO the screen from the top corner. Scale the browser size to see that it will still animate from the top corner regardless of the screen size.

Add additional objects within the body element:

<body>
<div class="display_object object_position1 animate_object1"></div>
<div class="display_object object_position2 animate_object2"></div>
<div class="display_object object_position3 animate_object3"></div>
<div class="display_object object_position4 animate_object4"></div>
<div class="display_object object_position5 animate_object5"></div>
</body>

Add the following to the CSS style below the first .object_position1 class:

/* Position object off the screen 10% from the top and right so that it is responsive to various screen sizes. */
.object_position1 { right: 10%; top: -10%; }
.object_position2 { right: 20%; top: -15%; }
.object_position3 { right: 5%; top: -11%;   }
.object_position4 { right: 15%; top: -12%; }
.object_position5 { right: 12%; top: -13%; }

Add additional animations to the CSS style element:

/* Create an animation called "flap" using four steps (frames) over 0.4 seconds */
.animate_object1 {
  animation: flap 0.4s steps(4) infinite, fly 10s linear infinite; }
.animate_object2 {animation: flap 0.2s steps(4) infinite, fly 8s linear infinite;   }
.animate_object3 {animation: flap 0.2s steps(4) infinite, fly 16s linear infinite; }
.animate_object4 {animation: flap 0.4s steps(4) infinite, fly 11s linear infinite; }
.animate_object5 {animation: flap 0.2s steps(4) infinite, fly 7s linear infinite;   }

@keyframes fly {
  from { transform: translate(0, 0); }
  to { transform: translate(-1600px, 1600px); }
}
</style>

CHECK POINT: Save the file and preview it in a browser. You should see multiple objects fly onto the screen. Notice that the animation with 0.2 seconds flaps its wings faster AND that their speed value is smaller so they move faster to complete the "illusion" of the flying faster and thus moving faster.

(BONUS) Create Other Objects

Now that you have a handle on how to create an animated object and then move it across the screen, let's create another object but this time simply move it across the screen.

Write the following highlighted lines to the body element:

<body>
<div class="display_object object_position1 animate_object1"></div>
<div class="display_object object_position2 animate_object2"></div>
<div class="display_object object_position3 animate_object3"></div>
<div class="display_object object_position4 animate_object4"></div>
<div class="display_object object_position5 animate_object5"></div>
<div class="display_object2 object2_position1 object2_animation1"></div>
<div class="display_object2 object2_position2 object2_animation2"></div>
<div class="display_object2 object2_position3 object2_animation3"></div>
<div class="display_object2 object2_position4 object2_animation4"></div>
<div class="display_object2 object2_position5 object2_animation5"></div>
</body>

Write the following highlighted lines ABOVE the closing style element:

/*______________________TOAST _______________________________*/
.display_object2 {
  position: absolute;
  background: url(images/toast1.gif);
  width:  64px;
  height: 64px;
}
/* Position our toaster just off the screen at the upper right */
.object2_position1 { right: 10%; top: -10%; }
.object2_position2 { right: -2%; top: -10%; }
.object2_position3 { right: 10%; top: -12%; }
.object2_position4 { right: 20%; top: -18%; }
.object2_position5 { right: 30%; top: -13%; }
/* Animate toast */
.object2_animation1 {animation: fly 10s 2s linear infinite alternate-reverse;}
.object2_animation2 {animation: fly 10s 4s linear infinite;}
.object2_animation3 {animation: fly 10s 6s linear infinite;}
.object2_animation4 {animation: fly 10s 1s linear infinite;}
.object2_animation5 {animation: fly 10s 3s linear infinite;}
</style>

CHECK POINT: Save the file and preview it in a browser. You should see a host of flying toasters and toasts flap their wings and fly down the screen at various speed.

NOTE: Notice that one of the animation has a value of alternate-reverse. This will cause that object to go in the REVERSE direction from the others. It is important to note that the second object is using the same @keyframe fly as the first object because they both perform the same task.
(BONUS) To change the entire animation to use different objects, update the .display_object and .display_object2 classes and update the background properties for both.