Animate: Bug
Today we learnt how to make buttons in animate. We first set up a 960x640, 30fps, HTML5 Canvas document and saved it in a folder.
We added 4 layers to the main scene with the names: Actions, Labels, Buttons and Animation.We then added Key frames at frame 10 and 60 for all the layers.
After this we added labels to the labels layer, by adding names in the properties. We labeled frame 1 and 10 'Intro' and 'Main' respectively. This would prove helpful later on when we are coding the function of the button.
We then inserted a symbol(button) and created the button shape. We then created a second and third frame in the time line so that the button changes colour when hovered over (2nd frame) and appears pressed when clicked (3rd frame). In order to make the pressed frame we removed the bottom part of the button (The part that makes it look 3D) and used onion skin mode to line the bottom of the top part with where the base of the button used to be.
We then went on to create another symbol (movie clip) for the bug, which would be flying and fly away when the button is pressed. I made a dragonfly and used seperate layers for the body, wings and legs. I animated the wings to move as well as the body and legs very slightly.
Once I was done I could then add the bug and button to the scene. I added the button to the buttons layer (In both the intro and main sections, making sure it was in the same place for both). I then did the same for the bug but in the animations layer. I also used a motion tween to make the bug fly off the screen during the main part of the sequence.
To make the button work we needed to add an action in the actions layer. With the first frame of the action layer selected we went to window>code snippets and added the 'stop at this frame' function for HTML5. This would make the bug stay in the same place until the button is pressed. The code for this was: 'this.stop();' . We then gave the button an instance name in properties, the name used was 'go_btn'.
We then added a 'click to go frame and play' code snippet to the button and changed the frame to stop on (which was originally 5) to "Main". This made it so that when the button is pressed the animation would go to the first frame of the "Main" section and play from there. We could also simplify the code for this slightly by changing the text after "Click", to ClickBug.bind (this)); and changing the function line so that the function is ClickBug(). Essentially we renamed the function to ClickBug.
Once done with the animation we could test it out. We could also add a background (I think I could have done a better job on the background, but I think it serves its purpose) and a sound when the button is pressed.
To add the sound I found one from Download Free Insect Sound Effects | Mixkit and downloaded it, then I dragged it into the library and added the sound to the button through Properties>Frame>Sound in the main section of the timeline. Once done a sound wave should appear in the second part of the button layer.
If the sound was too long we could add the code "createjs.Sound.stop();" to the last frame of the actions layer, this would stop the sound at the last frame.
Examples of Iconic Tech:
5 examples of iconic technology today’s kids may not recognise – 7dayshop Blog
https://blog.udemy.com/innovation-examples/
 |
| Posters of iconic inventions |
This is one of the toys I can remember from my childhood, I think it was quite interesting because of the interactivity aspects. The toy was essentially a plastic house with a screen that you could flip. You could interact with the character on the screen with the buttons at the bottom and also there were able to connect the house to other houses (Perhaps a friends house) and I think the character would be able to visit the other places. I think a modern equivalent would perhaps be games on a Nintendo switch or on a kids tablet. An older equivelent of this might be a dolls house, an iconic example being Barbie dolls. Link to information about the toy: Pixel Chix (house) | Mattel Wiki | Fandom.
Another example of an iconic tech would be MP3 players, which allowed you to listen to music wherever you want to. Other musical devices are also quite iconic like Vinyls, Gramophones, Jukeboxes Cassettes, Radios, Cds/Cd players and more modern equivelents like IPods, apps like Spotify and prehaps even devices like Amazon Echos. I think as a child the MP3 player was useful because I could listen to my own music (Without annoying my parents probably) and it gave a sort of independence since I could choose which song to listen to.
Comments
Post a Comment