Make sure you have your speakers on, and click the round circles to see and hear the marvelous animals.
Here at Passy World, we recently saw a very popular free app on the IPad, where infants can tap a thumbnail clipart of an animal, and then the screen can go full size, showing a photo of the animal and making the sound the animal makes. We decided we would make a similar game in Adobe Flash using Actionscript 3.0 .
We built the project up gradually in steps, using videos from YouTube to find out the technical bits we needed to include in our project. Step by Step building and testing is always a great approach to creating new apps, and we thoroughly recommend this methodology.
First we needed a project where we can click a thumbnail and then have the picture go full size. We found the following YouTube project that fitted this requirement.
So our first stage of building the project was to make some small 70x70 pixel button images with animal names written on them like Cat, Dog, Pig, Cow, Bird, etc, as well as find some good pictures of these animals on Google Images. The pictures can be resized in Flash, however for file size optimisation we resized them first using Photoshop to around 450x450 Pixels.
We got some nice button template backgrounds off the web, and then used Fireworks to make our buttons. It is important to make the button edges smooth by making the background transparent, and then painting around the button edge (use soft rounded brush) in the same hex color as the Flash background is.
We made our Flash project 540x360 pixels, so that it would easily fit on our blog page, and made a heading and changed the background color.
Next we followed the YouTube video and got our project going to that we could click a button, and have the image of that animal displayed on the stage.
Note that we found in CS3 we do not have the "chain link" resize option in properties, and so had to use the Flash resize tool (3rd down on tools side bar).
However, we later realized that CS3 has this same function when you have the size padlock undone in the properties.
It is also important to remember on the pictures layer in Flash to label the frame in the properties as pic1, pic2, pic3, etc.
This completed Step 1 of our Project. We tested it and our buttons and pitures worked well.
Step 2 of the Project
The next task was to get some MP3 animal sounds from the web. We found the following great websites with free sounds. If they fail to downlaod, then just use right click "Save Target As" on the download icon for each one.
http://www.freesound.org (have to join up using an email address, but it's totally free) and http://www.freeinfosociety.com .
We used Roxio Media Creator to edit and convert WAV and FLAC sounds into MP3's where required. (Flash works best with MP3s).
The mp3 sound files do NOT go into the Flash Library. Instead, they have to be stored in the same location as the Flash SWF file. This can be a folder on the PC for testing, and later on at our website on the Internet.
There is a PDF document later in this blog post which has the Actionscript Code for importing in the sounds, and making them play when buttons are pressed.
Here is our Step 2 Flash Project that contains Fireworks buttons in it, and our animal sounds.
Step 3 of the Project
The third and final step that could be done to this project would be to make our buttons a bit fancier. However to do this, we found that we needed to replace the buttons we made in Fireworks, with some Flash buttons, so that we could introduce lighter colored rollover states and so on.
Here is a Video that shows how to make these type of Flash buttons. Click on the 360p bottom right hand controller and watch it in HD as Full Screen.
However, we found that we could edit our Fireworks buttons in our existing project. All we have to do is double click the "btn1" object in the Library, and this will take us into button editing mode, just like in the YouTube movie.
We copy into the "Over" state frame, and then we click on the button, and in the Properties, change the color box to be "brightness" and set the slider up to 30%. This will make a lighter color button as our rollover button.
However, because we colored in around our round buttons in blue, our buttons now become squares when moused over and don't look so good. We therefore decided to abandon the Fireworks buttons.
So we really need to modify our project, and remake the buttons in Flash. (Font used in Flash was a simple Century Gothic size 22).
The approach was to remake the buttons in Frame 1 of the buttons layer, get them working, and then F6 Insert keyframe copy them into frames 2 and 3.
Now that we had new Flash buttons, we went in as per the YouTube Video and made them go darker when moused over, by clicking on the rectangle**, and changing it to a darker blue, like the guy did in the video. Note that we can click the button on the stage, or in the library to get into edit mode on it.
**We found we had to click off the button and then back onto it while in the button editor to get to the rectangle. Note that we made our "rectangles" so rounded that they became circles, we did this by setting the roundness to 34, back when we drew them.
This third version of the Project is the one that is actually at the start of this blog post.
Here is a PDF document showing the Actionscript Code:
If you would like to have your own full size copy of this PDF, then simply click the save disk icon button on the PDF viewer, and you should be able to save it to your own hard disk.
Alternatively, you can view or save the full size PDF by clicking the link below:
If you would like to download a zip file of the final version of our project, then click here.
Choose the save option in your web browser, and save this to your hard drive.
http://www.passyworld.com/AS3Animals/Animals.rar
Winrar is a free download that can then be used to extract the .FLA flash project file. Get "Winrar" for free at http://www.cnet.com/topic-software/winrar.html
So that's enough Doctor Doolittle-ing with the talking animals for now.
Enjoy,
Big Passy Wasabi
No comments:
Post a Comment