Bits & Bytes

Posts Tagged ‘display’

Using Arrays in JavaScript

Arrays are containers that hold a sequence of objects that can be accessed via the bracket operator [] and an integer index. Since JavaScript is not a strongly-typed language, JavaScript arrays are very versatile and can hold objects of different types. In this post, I will focus on the basic syntax and usage.

Below, we have the code for an HTML file and a JavaScript file. The HTML file is essentially blank; it is simply used to call the JavaScript file, “Arrays.js,” and execute the code. The rest is boilerplate code that I reuse for all of my JavaScript posts.

The JavaScript code file, “Arrays.js,” contains the entire JavaScript program. In it, I first declare the variable, qaPaintings, and assign it the value [], which makes the variable an Array object with zero elements in it. Then the first entry at index 0 is set to hold a new Image object and its source is set to be the Michelangelo’s painting of the creation of the Sun and the Moon from the Sistene Chapel that was painted in 1511 AD. The call to appendChild() adds the image to the document so that it is displayed.

The same thing is then done for the entries at 1 and 2 in the array. These are assigned the source images of the painting The Descent of the Holy Ghost by Titian circa 1545 AD and the painting of The Last Judgment from the Sistene Chapel by Michelangelo that was completed between 1536 AD and 1541 AD.

All of this shows how to create an array and assign values to its elements. Notice that when we first created the array, it had zero elements. By assigning values to the entries at 0, 1, and 2, we caused the array to be extended each time. Automatic array resizing is a convenient property of JavaScript arrays that differs from other languages like C++. In fact, JavaScript arrays

Arrays.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  <title>XoaX.net</title>
</head>
<body>
  <script type="text/javascript" src="Arrays.js"></script>
</body>
</html>

Arrays.js

var qaPaintings = [];

qaPaintings[0] = new Image();
qaPaintings[0].src = "SisteneChapel_Michelangelo_1511_1.jpg"
document.body.appendChild(qaPaintings[0]);

qaPaintings[1] = new Image();
qaPaintings[1].src = "TheDescentOfTheHolyGhost_Titian_2.jpg"
document.body.appendChild(qaPaintings[1]);

qaPaintings[2] = new Image();
qaPaintings[2].src = "TheLastJudgment_Michelangelo_3.jpg"
document.body.appendChild(qaPaintings[2]);

Capturing and Playing Video From a Camera in Actionscript 3.0

This program gives a simple demonstration of how to display video that is captured by a camera. If you have a camera attached to your computer (most laptops do), then you can click the box above to display the video capture from your camera. Note that you will need click the “Allow” button to see the video. To stop the video, refresh the page.

The code for this program is simple and is listed below. The first three lines display the message “Click To Play.” The next line, sets the function CaptureVideo() as a callback to respond to mouse clicks.

After that, we have the CaptureVideo() function, which attempts to get access to a camera and checks whether the attempt was successful. If there is a camera, a Video object is created, attached to the camera, and added to the stage for display.

// Output the initial instructions to user
var qInstructions:TextField = new TextField();
qInstructions.text = "Click To Play";
addChild(qInstructions);

stage.addEventListener(MouseEvent.CLICK, CaptureVideo);

function CaptureVideo(e:Event):void {
	var qCamera:Camera = Camera.getCamera();
	if (qCamera != null) {
		var qVideo:Video = new Video(320, 240);
		qVideo.attachCamera(qCamera);
		addChild(qVideo);
	}
}

How to Import an Image to the Library and Display it in Actionscript 3.0

In this post, I demonstrate how to import an image to the library and display it in Actionscript 3.0. Displaying an image that imported to the stage is automatic, but displaying an image that is imported to the library requires creating a class for the image. This is an important step toward using images in programs.

1. Open Flash and create an Actionscript 3.0 project by left-clicking “Flash File (Actionscript 3)” under “Create New” at the start up screen.

2. Next, we want to import an image to the library. To do this, Left-click “File” in the menubar, mouse over “Import” and left-click “Import To Library” in the submenu.

3. Select an image and left-click the “Open” button to import the image.

4. Right-click the image in the “Library” pane and left-click “Properties…” to open the “Bitmap Properties” dialog.

5. Click the box “Export for Actionscript” and we will change the “Class:” to “XoaXLogo” in this case, but you can use whatever name is appropriate. Finally, left-click the “OK” button.

6. Now you will see this warning dialog. Left-click the “OK” button in the dialog to create the new class.

7. Make sure that the “Actions” pane open by left-clicking “Window” in the menubar and left-clicking “Actions” in the submenu if it is not checked.

addChild(new Bitmap(new XoaXLogo(480, 360)));

8. Add the line of code above to the “Actions” Pane. Here, the “Actions” pane is shown docked in the left of the window.

9. Then left-click “Control” and “Test Movie” in the submenu to run the program and you should see you image displayed, just as we showed at the top of this post.

10. The line of code that we added creates an instance of our image class ”XoaXLogo’ with the same size as our original image and stores that in a Bitmap class instance, which we add to the stage via a call to addChild(). Displayable objects that are added to the stage are automatically displayed.

11. At this point, the project is not saved. To save it, select “File” and “Save As…” in the submenu. Then find a location, enter the a filename into the “File name:” box, like “DrawBitmap.fla” and left-click the “Save” button to save the .fla file.