IAN LANG ELECTRONICS
It is a truth universally acknowledged that any man in possession of a device that can be made, on command, to produce a pre-recorded noise, or collection thereof, will quite soon make a fart machine.
The ladies amongst you find nothing whatsoever funny in farts. As men, farts become hilarious at the age of three, and are no less hilarious at the age of one-hundred-and-three. "Blaming the Dog" is in fact a riot of fun.
Not only that it's extremely easy to make a tablet or phone fart machine and so after the last one it comes as a nice rest. And in this tutorial you get to learn about buttons, media players, horizontal arrangements and labels. Plus you get a fart machine at the end. Winning all round, I'd say.
All the files I used are in a Dropbox folder which you can find here:
The apk, aia (project for AI2) and all the fart noises and image files are in there too. I drew the images but most of the sound files came from soundjay.com and others came from soundbible.com
The finished app from this tutorial is available for direct download from the Playstore
under the name Fartaway.
(It's a free download).
On the left there you can see the screenshot of the fart machine more or less life size as it appears on a Sony Experia E. There are in fact ten buttons, starting with "Classic Squeaker" and going down to "Trouser Flapper" (because half the fun in farting is classifying the sounds) and depending on which button you press, the relevant sound is played by the machine. In addition you don't want to have more than one sound playing at a time and so whilst one is issuing forth all the other buttons need to be prevented from playing. That's a coding issue and we'll get to that in a moment, but for now let's concentrate on the design.
When you start the project in the AI2 IDE you'll be confronted with a white screen, which will have no components on it. It'll be called Screen 1 and there's no need to change the name, but turn the background colour to black and set the orientation to portrait. Set the AlignHorizontal to centre.
Next, drag on a label, set the text to "Press a Button For Farting Fun!" and set the text colour to yellow. The background colour for the label should default to none, but if it doesn't, change it.
Now shove in a horizontal arrangement. Set the height to 20 pixels and leave everything else alone. The purpose of this is to pack it out a bit and leave a nice, aesthetically pleasing gap between the label and the buttons underneath. Soon we'll do the same with the buttons themselves.
Next step is to drag on another horizontal arrangement under the one we've just stuck on there. Set the width to fill parent, and the height to automatic (to which it should default) and leave everything else alone. This horizontal arrangement is going to contain our first two buttons, and in the case of the screenshot up there, they are labelled "Classic Squeaker" and "Let it Out".
Drag and drop two buttons INSIDE the horizontal arrangement. It's tricky and needs a bit of practice but when you've got it you'll find the two buttons sit side-by-side on the screen. One will say "Text for Button1" and the other "Text for Button 2" and that's fine, we'll change it later.
Underneath the horizontal arrangement containing the first two buttons, put another horizontal arrangement and give it a height of 10 pixels. This spaces out the buttons in the vertical plane; without the spacing things just look a big splodgy mess.
Repeat the steps above for the second, third, fourth and fifth row of buttons except that underneath the fifth row no horizontal arrangement for spacing is necessary because there's nothing under the fifth row to space.
Splendid. Now, you'll notice that in the screenshot above, I've made the buttons look like press-down-rubber ones. This is done by putting a background image on them. This is blankbutton.png and which is in the Dropbox folder I gave a link to at the start of the article on the sidebar to the left. Use it if you want to, or leave the buttons as standard; the background has no effect on the workings. If you want to use the background image, here's the easiest way to work it:
Click on your first button. Look in the properties window on the right and it will say Image and in the drop-down box underneath "None". In the next step I'm assuming you've either downloaded blankbutton.png but it works if you've made or otherwise acquired a drawing of your own, so click on the drop-down box and it gives you the option to use a file you've already uploaded (if you have) or to upload a file. Click on upload, and in the pop-up dialog box, browse to the file location, click blankbutton.png (or whatever your drawing is called) and OK. The file will upload and appear in your new button. It will probably not correspond to the height and width. Set the height of the button to 50 pixels. Next type in the text of the button. In the case of the screenshot above it would be Classic Squeaker. Now we need to set the width of the button to be aesthetically pleasing and fit the text of the button. This was a case of trial and error; using AI2 and the AI2 companion on a wirless network is a boon here because it updates in real time and you can see straightaway what's going on. It turned out that the best width for the first button was 200 pixels.
Tres bien, as they say in Calais, so now go round and repeat the above process for the other nine buttons.
When you're happy with the look of the thing, it's time to upload the sounds. All your sounds should in MP3 format as it's a common parsing format and Android won't handle the wilder excesses that Windows will. Just underneath your components' properties window is the media window. This is one of the few places AI2 falls down, because you have to load files one at a time, which is a pain. Click on upload file, browse to your file, select it and click OK. Do this until all of your files are uploaded; in the case of this it's ten of them.
So now it's time to start shoving in the code blocks from the blocks editor windows. There are ten event handlers here, all relating to the buttons. Here are the ten with the blocks collapsed:
As you can see, I've named the handlers with a name that reflects the button they handle. Every one of them works exactly the same way, and in fact all I did was duplicate the first handler, dragged all the blocks out of the duplicate and put them in the next handler, changing the details as necessary and discarding the now empty duplicate. So let's look at one of them and we've seen them all.
So, the event handler that contains the active code blocks here is when Buttontrouserflapper.Click and that will only run the enclosed blocks when that button has been pressed.
With regard to that code, I've gone a bit convoluted here because I've put if not player1.IsPlaying = true when I could I just have put if player1. IsPlaying = false which would have worked just as well; it's because I'm a bit old school and tend to think in double negatives with logic arguments which sometimes pays off and sometimes just makes you look antiquated as is the case here.
So, if the button's been pressed and the player's not doing anything, we tell it firstly what to play:
set Player1.Source to TrouserFlapper.MP3
Notice how the full filename is given, and it's put in a text block dragged from the blocks window on the left and the filename is typed in. Now it knows what to play, we tell it to play it:
It's that simple. Really. As I said, all the blocks work the same way. Here's pantsripper:
And so all one has to do is the change the name of the MP3 file that is requested to be played.
A nice and simple app that can be created inside of an hour. That's what we like! Now let's look at something a bit more complicated; the electronic dice machine.