In this recipe, we'll replace the random data that we added to the keyboard object with the actual data taken from:
http://en.wikipedia.org/wiki/Letter_frequency.
We will only add three languages, but you'll see that you can add as many as you want.
To display a combobox that lets the user pick the language to show, we will use the minimalcomps library. It can be downloaded from https://github.com/minimalcomps/minimalcomps/downloads. This library is, as the name implies, an extremely basic implementation of many graphical components. Due to its simplicity, it is also very easy to use in any ActionScript program.
To use it in your project, download it and place the SWC file in the lib directory of the project. Inside FlashDevelop, right-click on the file and choose Add to library. This will make all the classes inside the file available to your programs.
We'll, of course, continue from the previous recipe.
In the previous recipe we constructed the model; this recipe is about applying the data to it:
- In the main program, add the letter frequencies:
private var _letterFrequencies:Object = { "English" : [163.34,29.84,55.6,85.06,254.04,45.76,40.44,121.88,139.46,3,14.94,80.5,50.34,134.98,150.14,38.58,1.96,119.74,126.66,181.12,55.16,20.74,49.3,3.06,39.42,1.48], "French" : [152.72,18.02,65.2,73.38,294.3,21.32,17.32,14.74,150.58,10.9,0.98,109.12,59.36,141.9,107.56,60.42,27.24,131.06,158.96,144.88,126.22,32.56,2.28,7.74,6.16,2.72], "Dutch" : [149.8,31.6,24.8,118.6,378.2,16.2,68,47.6,130,29.2,45,71.4,44.2,200.6,121.2,31.4,0.18,128.2,74.6,135.8,39.8,57,30.4,0.8,0.7,38.6] } - In the constructor, add a default language that is shown when the program starts up:
_keyboard.data = _letterFrequencies["English"];
- Add a combobox from the minimal components library:
var choice:ComboBox = new ComboBox(this, 10, 10, "English"); choice.addItem("English"); choice.addItem("French"); choice.addItem("Dutch"); choice.addEventListener(Event.SELECT, onSelect);The final piece of code in the main program is the
onSelectlistener:private function onSelect(ev: Event):void { _keyboard.data = _letterFrequencies[ev.target.selectedItem]; } - Now we still need to implement the setting of data inside the
Keyboard3Dclass. Start by removing the random data that we set and replace the starting height with1:_keyMeshes.push(addKey(key[1], key[2], 1));
- And then add the data setter:
public function set data(value:Array):void { for (var i:int = 0; i < value.length; i++) { var key:Mesh = _keyMeshes[i]; key.scaleY = value[i]; key.y = value[i] / 2 + 3; } }The resulting code will now generate the image that was shown at the start of the previous recipe, Mapping keyboard usage in 3D, part 1: The model.
The letter frequency data is not the raw data from Wikipedia, but a bit of preprocessing was done in Excel. We converted the percentage values to absolute values that fit and show up nicely for the size of the keyboard that we used.
If you want to make this part of the code more reusable, there's nothing that says this operation must be done in Excel. It can just as well be done in ActionScript code.
The constructor of the combobox immediately adds it to the stage (the this reference in the argument list) so that there's no need to add an extra addChild call.
Because our View3D class is just as well a part of the (2D) display list, there's nothing holding us back from mixing and matching it with any other ActionScript components, such as, in this case, the combobox.
Selection of an item in the combobox follows the traditional ActionScript model. You attach an event listener to the select event. Inside the listener, you can use the event itself to see what exactly was selected.
By setting the height of the keys to 1, we can use the scale value to easily change the height. Another more complicated option would be changing the geometry itself, but this would involve a lot more code.
The end result is already a great and engaging graph, but there are still a few more things that you can do to improve it.
Currently the keys are just plain gray. It would be very nice if they showed the actual key on top.
We've skipped this step because it is a little more complicated than you might think at first. In the previous recipe, we've shown how to use materials on cubes. If you'd like to use this option, you would have to create a different image for each and every key. Although it's not impossible, it's a pretty time-consuming process.
A different option is to re-use the existing keyboard image and use the UV coordinates to map just the right part of the image on top of the key. However, here you'll run into the limits of the default cube, which make it pretty hard to address only the top face of the cube. If you want to go this route, you'll probably be better off creating two meshes for every key, one plane for the top and one cube for the rest of the body.
A good test of everything you've learned in this book is to obtain the data directly from the Wikipedia page. You can use the data-importing techniques discussed in the Loading data with XML in Chapter 2, Working with Data, to read the XHTML file and use the XML processing capabilities of ActionScript to extract the data.
This will also allow you to quickly add many more languages to the display.
Similar to what we have shown in the Making the points interactive: Hovering recipe in Chapter 5, Adding Interaction, it is also possible to show additional information when the user hovers over a certain key.
If you want to receive mouse events on any 3D object, you first need to enable the mouse events. You do this by setting the mouseEnabled property to true on the mesh.
Next you can add listeners to the mesh that listen to the various MouseEvent3D events. And finally, see the note in the previous chapter on displaying text.