flying bug on adobe animate


  On Adobe Animate using HTML5 canvas I picked landscape (960 x 640)px, frame rate: 30. Then named the document Bug Example, so on the label layer I clicked a new layer in the timeline; Animation, button, label, actions. I selected frame 10 of each layer then under insert ( at the upper left hand side)- timeline- keyframe, Then inserted a new symbol called it Bug with the type movie clip.
 In the Bug symbol I opened three timeline (Body, leg, wings), on the body timeline I clicked the rectangle key and made a rectangle for the body and the head then filled it with the orange colour then used a smaller rectangle  for the eyes, nose with different colours desires then for the mouth I used rectangle tool then adjusted it.
For the legs I used pen tool to draw one then duplicated it thrice then modified it using transform- flip horizontally and placed the legs under the body. Then the wings using open tool to draw out one pair then duplicated it and filled it with the right colour and  flipped it. I put my layers to frame four then to frame 6 and while at frame four I selected the wing layer and rotated it a little and also adjusted the legs a little .
For the button, I inserted a new symbol called it button then on the button layer created three  layers ( text, button top, button back) On the button top layer I used the oval too to draw a circle then using text tool to insert the Go texts  and adjusted the size and fonts then aligned it properly. For the button back I made an oval then split it in half then use the pen tool to complete the split oval.our
Align window (select it in the top dropdown Window > Align), centre your button t stage. In the Text layer use your Text Tool to type the word ‘GO!’, use the properties windto choose your text size and font our Align window (select it in the top dropdown Window > Align), centre your button toMade new keyframes in over frame and adjusted the colour of the button, on the main layer I dragged the bug symbol and the button into the animation layer. Then on  the 10th frame to 60th I used the classic tween then dragged the bug over to the other side on the 60th frame.
I also put in the code and test controlled itstage. In the Text layer use your Text Tool to type the word ‘GO!’, use the properties windowto choose your text size and f

Comments

Post a Comment

Popular posts from this blog

Coding on Adobe Dreamweaver

Image
    This is a web coding I did on Adobe Dream weaver and the procedures and steps used where very fun, I saved the web activity files first then extracted them all and opened the index file from web activity then opened it in my Adobe Dream weaver then I clicked on view at the top left corner - split - split vertically then my screen would be on two sides showing my coding at the right then the code results at the right side. Firstly I had my heading changed at the <h1> text<h1> I changed the heading to Down The Rabbit Hole. Then my font- family: courier, serif, also changed my border radius from 0px to 20px and my width which is under button  to 25%. The font size was set to large then font family : courier, serif. While going through the options in my coding I changed my text colours and background colour, my background colour- transparent and border radius- 20px, border- 4px solid magenta, colour- cyan. I put my background image under body from URL( "xx.jpg...
Read more

Animate keyboard and City example

Image
On Adobe Animate I opened the new document and named it CityExample (W-960, H-640, Frame rate-30, on platform HTML5 Canvas). Then created seven different layers( sky_day, sky_night, city_day, city_night, buttons,labels, actions), next I clicked on the city day layer and used the rectangle tool to draw out my style of skyscrappers in the city with different colours then selected the whole drawings and modify-convert to symbol (movie clip)then named it city_ day then on the symbol page i added new layers for the building and the windows as well, on windows layer i put in my windows and duplicated and fixed in a few windows(pink) then on buildings layer i selected the frames to 30 and right clicked to add in frames, while for windows i selected frame 10, 20 and 30 and added keyframes on each keyframes moved I took out and adjusted some windows and duplicated the cityday simbol under layer and renamed it to city night then double clicek the symbol - tapped the windows layer then select the...
Read more