• Home
• Mod_1
• Mod_2
• Mod_3
• Mod_4
• A1
• A2
• A3

Assignment 3

3.7: Five Little Sea Creatures (999kb)(FLA file)
http://clewett.net.au/usq/FET5622/html/seacreatures.html

The fifth item for my portfolio has been totally designed and constructed by me. It has taken many hours to create. The majority of time was spent in the ideation stage and began several months ago when I began the course. It changed as I developed knowledge and skills using both Flash CS4 and Actionscript 3. The idea only came together during my September vacation when I found a suitable audio to create the background loop.

Goal:

• to create an engaging interactive multimedia activity for preschoolers which introduces them to early computer skills using the mouse.
• to provide a fun interactive addition and subtraction activity for the numbers 1-5.
• to create a simple drag and drop interactive word game.
• to provide a stimulus activity to introduce sea creatures.

Media:

• Several months ago while teaching students how to use Paint.NET I experimented with the Ink Sketch effect on a coral reef photo and loved the result. This effect turns any photo into a drawing. To create my background image I used Fireworks lassoo tool to isolate areas from a few different underwater images and I superimposed them to make the image for the activity. I used the clone tool in Fireworks to add some more seaweed to the image and then used the Ink Sketch Paint.NET effect to make it look like a drawing. I saved the image in JPG to reduce the file size.
• I originally wanted to create a fish interactive game that added scores and gave a final result however although I searched on the internet for weeks and I couldn't find the actionscript 3 I needed to create this type of activity. I finally decided to change the concept to something that was achievable using the knowledge and skills I had already developed. I think now I am closer to being able to create that initial game concept.
• Before the September school holidays I found a poem on the internet about "Five Little Sea Creatures" and the idea developed from there.
• Over the past few weeks I developed an eye for vector art and realised by using vector graphics in Flash the quality of the final product improved. Flash movie can easily be increased in size and by using vector art the quality of the images doesn't degrade. I downloaded a trial version of Adobe Illustrator and experimented with tracing images. This technique really enhances the final image for use in Flash.
• After much drawing and experimentation I decided to use clipart graphics for the sea creatures. I purchased four of the five creatures from clipart stores on the internet. They were relatively inexpensive vectors and added to the quality of the final product. I used the text tool in Flash to create the large numbers but found the quality of the number improved if I created them in Illustrator and then imported them as vectors into Flash. It may have been a lack of skills on my part that I couldn't create the same quality in Flash.
• I used a JPG image of a treasure chest for the navigation buttons.
• Finally I found the music I needed for the background. I chose a few bars from a track off an Album by "We Kids Rock" and created the wav loop which is used throughout the activity. During my experimenting with loops I found that wav was the best format for looping as MP3 has a couple of empty frames at the beginning that detracts from the quality of the final loop. Because the size of the loop was small - 22kb (11kHz Mono 16 bit), the total size of the swf was under the 1MB size limit. This could not have been achieved if I had used an MP3 track for the entire movie.
• My voice tracks were laid down in less than 10 minutes using Audacity. This was a real achievement. I only needed a second take on one section. (22kHz Mono 16bit)

Techniques used:

• The movie was created on a timeline at 24 FPS with total frames at 1981 and time duration of 1min 22.5 seconds using Flash CS4 and actionscript 3. This frame rate allows animation to appear smooth.
• In Fireworks I used "Fantastic" font to create "Five Little Sea Creatures" title and used an image mask to give it the colour. I imported this into Flash and used a gradient bevel, drop shadow and glow text effect to give the flattened appearance to each word. Then I animated each word to appear on stage using motion tweens.
• Each character was created using movie clips within movie clips. This allowed for programming actions either using the timeline within each clip or adding actionscript 3 to give movement. Further movement could be added to each character's root movie clip on the main timeline using a motion tween.
• I created an armature for the lobster, octopus and hermit crab using the bone tool. To do this I used Fireworks to chop the original clipart graphic into pieces, import to Illustrator and trace, before finally loading into Flash. Each part of the creature had to be converted to a movie clip before applying the bone tool to link them all together. This took time to understand and decide the best way to link each piece and then create the movement. The hermit crab and the lobster were more successful than the octopus. To make the octopus more exact I converted the armature into frame by frame animation to ensure there were no gaps between the body and the legs. This added to the quality of the final animation.
• I added a flip actionscript3 to the starfish which I applied within the movie clip timeline. I added a small motion tween to illustrate a rocking motion within the movie clip and a further motion tween applied on the main timeline.
• I imported some bubbles that I traced in Illustrator and created the bubble movie clip. This gave a nice effect of under the sea.
• I created a blank movie clip for each button. I imported the vector numbers from an Illustrator file. These vectors were much clearer. Then I created the buttons using the graphics tools within Flash. I added simple tints and alpha effects to the mouseover and mouse down of each button. I placed each button within thier own movie clip. This enabled me to create an animation on each buttons time line for each buttons to appear on the stage. I used a fade in as well as a gradual enlargement to each classic tween.
• This same effect was used on the labels for the menu, the large numbers and the question.
• I wanted a navigation picture to guide children through the movie. At first I used a clam shell movie clip with a button inside however I thought that could confuse children so I changed it to a treasure chest. I added some glow effects to the chest as well as a starburst behind the the text to make it stand out. The buttons had tints and alpha applied to the mousover and mousedown states.
• The most time consuming phase was adding the audio. FlashCS4 has an irritating bug that I didn't quite understand, nor could I overcome.. Four of the voice audio files imported without a problem however the last audio FlashCS4 would continually cut off the beginning. This was extremely frustrating and I couldn't solve the problem. Finally I copied the sound to a new file and it worked how it should. I used the same settings as the original. Also when loading the final voice file the audio settings within Flash changed unbeknown to me and I spent another day of frustration working out what settings I would need to ensure the voice quality would be acceptable.
• I created the soundloop using a three second loop of music from a track off "We Kids Rock" album. This wasn't too difficult to do and was very effective. I entered the voice separately and the same audio loop was used as background for the voice overs. The final loop had a drum sound effect applied in the middle to make it different. By creating this loop I reduced the file size very effectively.
• To finish the movie I added some speech bubbles with some identifying text attached.
• I needed to create a mask so the creatures off the screen could not be seen until they appeared on the stage. Any movie clip that was to be masked had to be linked under the mask layer.
• I wanted to add an interactive game to the movie. I found an actionscript drag and drop tutorial that showed how easily an interactive game could be made using Actionscript 3. I also found a matching game tutorial however I couldn't seem to adapt the code to the FLA file. I created the game in its own FLA but couldn't make the external swf load into the timeline. I will work on that over the next few months.
• I placed a music sound control button on the whole activity but then removed it. The whole movie relies on the sound to make it interactive for preschoolers so I rationalised that I didn't want them to press the button and remove the sound. However I added a music sound on/off button for the interactive game at the end. I purposefully did not want it to conrol the feedback sounds for the interactivity in the game.
• I added a simple preloader to the movie and uploaded to the internet.

Reflections

I am very proud of the interactive multimedia movie I have created. It took a week to create however it was the stumbling blocks and the reflections to deal with the audio problems that took so much time. Creating the animations using the bone tool was really enjoyable and making the little creatures come to life was fun. I have tested this activity on prep students at three of my schools and they loved it. They found the navigation easy to manage and loved the animations and the sounds. As far as I have tested everything is working as it should.

I would like to continue to refine my Flash CS4 skills and improve my understanding of Actionscript 3. I know I have just touched the surface of what can be created using these tools but I am encouraged to continue on my journey.

References: