Made more progress & finally Finished my Lesson 8 (Restaurant Guide) animation

40

1

2

2.1

2.2

41

42

43

44

45

3

3.5

46

Screen Shot 2020-05-14 at 3.39.38 PM

47In this post I had to add computer coding and create a layer that contained it in order to allow my restaurant Guide animation to play with all the changes I made in my previous blog post.But before I added this code I had to first label each keyframe in my content layer so I can distinguish between them easily without getting them mixed up.In order to do this I had to select each individual keyframe on the content layer I created last time and go to my projects properties panel so I can pick the frame option from the panel and title it label with a number at the end which automatically appears on the keyframe I wanted to change.For example If I decided to rename the keyframe thats present on frame 10 all I would need to do is select it and use my selection tool to pick my properties panel that appears to the left of my project workspace and select the Frame option so I can type label1 which suddenly appears on frame 10 once I press enter on my keyboard.I then made sure to add the main menu to my restaurant guide by selecting my library panel from the left side of my project workspace and taking the notion to unlock/open the buttons folder so Im then able to click and drag the main menu button from the library panel onto my stage where my restaurant guide wallpaper and buttons are placed.The moment I dragged it onto my stage I had to take the time to reposition the button to hover over my first button and rename it from my properties panel under button with the name mainmenu_btn. The next thing I had to do is create a new layer by selecting the create newer layer icon which is just a plus sign in the middle of a square and renamed it actions after doing this simple task I then made sure to move it to the very top of all my layers in my timeline panel.Once I did this I was then able to focus on applying or adding some computer coding to my actions layer by making selecting the actions layer with my selection tool and opening the actions panel and following the directions the book instructed about what button to press and what to type for the code whether its a .this Stop (): code or so forth.The next and last thing I had to do for this blogpost is create 4 or 6 new layers under my actions panel and rename place the coding I just created to each one by creating a new keyframe and placing the code individuals for each section which a certain directive or function.I also made sure to test my movie once I finished everything from the book to see if I made any mistakes with my coding and to test each button of my finished restaurant guide animation.

Even more Progress on Lesson 8 (Restaurant Guide)

28 copy

29

30

31

32

33

34353637

The moment I finished aligning and spacing each of my restaurant buttons and tested each on of them I then focused on adding the restaurant content for each button by first  selecting each button one at a time and clicking on the properties panel so Im able to use my selection tool to pick the object option and rename each button the title thats on each one.For example I selected my first button classified as Gabel Loffel and made sure to  rename it in my properties panel under button name gabelloffel_btn. In other words I made sure that in the properties panel under objects that each button had is own name so Im able to distinguish between them.The next thing I did in this blog post is add or insert a new set of keyframes for all three of my layers in my projects timeline at frame 50 by selecting all three frames on frame 50 and right clicking on my cursor so Im able to select the insert frame option which automatically adds a new set of frames that range from frame 1 to from 50 on all the layers visible in my projects timeline.I then focused on adding a new layer to my projects timeline and renaming it Content by selecting the new layer icon which is basically a plus sign in the middle of a square box.The final thing I did is took the notion to insert keyframes along the layer by right clicking on frames 10, 20, 30, & 40 and adding the restaurant content info to each single frame by clicking each one and dragging it onto the stage at each frame.For example for frame 20 in my contents layer I made sure to select it was selected and used my selection tool to open the restaurant content layer in my library panel and then took the notion to click and drag the content onto my stage which allows it to appear at frame 20.

More Progress on Lesson 8 (Restaurant Guide)

20

21

22

23

24

The moment I finished creating all four of my restaurant buttons and placed them into a single folder called restaurant buttons I then had to focus on actually adding them to the stage of my projects workspace.In order to do this I had to first create a new layer by using my selection tool to select the new layer icon which looks like a plus sign in the middle of a rectangle.By doing this I was then a new layer was able to instantly appear in timeline panel of my project workspace which permitted me to drag it to the very top of my timeline panel so its above all my other layers and rename it buttons.The next thing i had to do is open my restaurant button folder  from my library panel so Im then able to use my selection tool to click and drag each individual button symbol onto the center of projects stage.I then took the notion to reposition each image of the button symbols to appear almost exactly how it should look in the animate lesson eight book.After doing this I then had to change the X value for my first image to 100 and the X value of my last image to 680 so their some space between each button symbol.The next and last thing I had to do in this blogpost is realign each image once again by first making sure to select all the button images with my selection tool and picking the align and spacing icons from the properties panel of my projects workspace to instantly align each button symbol evenly with each other on my projects stage.I also had to test each button after realigning them by selecting the control option at the top of my projects workspace and clicking the test movie button which allows me to select each button and test the sound of each one as well.

Progress on Lesson 8 (Restaurant Guide)

11

12

13

14

15

16

17

18

19

The first thing I did in this post is duplicate the button I just created last time by right clicking on the Gabel loffel button and selecting the duplicate option from the pop up menu that suddenly appears on stage.The next thing I had to do is rename the new button Gary gari and change the Gabel loffel image I placed on my stage last time to the Gary Gari image by dragging the thumbnail called Gary Gari from my libary panel onto my stage which instantly replaces my old image.I then had to focus on replacing the info caption I added for my last symbol with the info for the Gary Gari symbol by using my selection tool to click and drag the caption box onto the image I placed earlier which instantly gets rid off the old caption box.The last thing I did is repeat all the steps I did earlier in this blog post whether its duplicating my original symbol to rename it whatever button I need or adding a new caption to to any button I duplicate.Since I kept duplicating each button I actually need to add two more layers to my timeline or add the sound file since all the things I needed to add to my original button was already duplicated and placed on whatever button I created later on.I also made sure to create a file folder for all 4 of the buttons I just created by selecting the new folder icon in my library panel and renaming it restaurant button and taking the notion to place each button into that file.

Starting Lesson 8 (Restaurant Guide)

1

2

3

4

5

6

8

9

10Before I started the restaurant guide animation in lesson eight I had to first open the 08_start file so I can open the actual lesson in my animate program and rename the lesson template I plan on 08_working so Im able to reopen the original 08_start file anytime I make a mistake with the one I just created.The first thing I actually did in the lesson after renaming the template is great a new symbol by selecting the file option at the top of my project workspace and picking the create symbol option.Once I did this I was then able to rename the symbol Gabel loffel button from the pop up menu and select the save button which immediately opened the symbol into its own scene on my project workspace.The next thing I had to do is add an image called Gabel loffel by using my selection tool to select the Gabel loffel thumbnail from my library panel and dragging it to the center of my stage.I then had to make sure to add 2 more layers called layer two and layer three and place 2 more keyframes to all three of my layers in order to stretch over on the down and hit functions on my projects timeline.I also made sure to add a keyframe for my down button on layer three and also my over button on layer two in order to add certain symbols or objects onto the stage at different times.For example by adding a keyframe for the down function on layer 3 I was then able to add the sound for the click sound file into that layer without affecting any other layer.The next and final thing I did after adding sound to my button is add the info caption to the over option in layer 2 so a caption with words on it appears on top of my Gabel loffel image.

Finished Animating Shapes & Using Masks assignment (Lesson 7)

Flame 63

07_finished-flame-animationOnce I finished adjusting the animation tween I added between frames 20 and 40 of my fire effect layer I then had to test my animation to see if I made any mistakes as I followed the steps for lesson 7 by clicking the control option at the top of my projects workspace and selecting the test movie option with my selection tool which allows me to see the progress I made in my animation.After correcting any mistakes I made in my animation I was finally ready to export my animation into a video in order to to this I had to first select the file button at the top of my workspace and select the export button and choose the export animation option from my project workspace.By doing this simple step I basically allowed a pop up menu to appear called export image which will allow me to make any final touches to the formate or appearance of my animation before I finalize it.Once I reached this step I then had to look at my animate book and follow the instructions it gave me for exporting it.The first thing i did once the panel appeared was change my background from transparent to non transparent by clicking the check box next to the transparent option and I also picked the perceptual and interlaced option from the pop up menu.The last thing I made sure to do is change my width and height of my animations stage to 400 and also the colors value to 256 so my animation will appear at a reasonable size with all my transitions in it.Once I clicked save on the export image panel I then had to save the project as 07 finished flame animation and upload to my blog as an animated gif that play’s in a continuous loop.

Even More Progress on Animating Shapes & Using Masks assignment (Lesson 7)

Flame 54

Flame 55

Flame 56

Flame 57.0

Flame 57

Flame 59

Flame 60

Flame 61

Flame 62

Once I finished adding my red and yellow rectangle to my stage I then had to focus on creating a transition for its red and yellow colors to move behind or along my text layer as the animation is played.In order to pull this off I had to first select my gradient tool and click on the rectangle I just created using my selection tool which allows eight free transform boxes to appear at every corner of my rectangle which is a great indication that I will be able to move it in any direction I want with my selection tool.The next thing I had to do is move my gradient rectangle to the far left so only a small portion of the yellow color appears on the stage by using my selection tool to click and drag my shape to the far left.I then had to move my blue playhead to frame 20 and 40 by right clicking on those frames with my selection tool and clicking the add a new keyframe option frame the pop up menu that appears on my stage which allows my gradient rectangle from frame 1 to suddenly appear at frame 20 and frame 40.The next and last thing I made sure to do is add animation tween between frames 20 and 40 by using my selection tool to right click on a random frame between frames 20 and 40 and selecting the create shape tween from the pop up menu which allows frames 21 to 39 to appear with an orange color which indicates that a animation tween was applied to all those frames.I also had to adjust the animation tween I just applied between frames 20 and 40 by going to the to my properties panel and changing the ease to properties together and the effect to classic ease-in with a negative one hundred capacity.

More Progress on Animating Shapes & Using Masks assignment (Lesson 7)

Flame 47

Flame 48

Flame 50

Flame 51Flame 52

Flame 53

The first thing I made sure to do in this post is to unlock my fiery text layer by selecting my selection tool and clicking the lock icon on that layer so I am able to delete the fire image that appears on frame one of the layer.The next thing I focused on was creating a  orange and yellow rectangle shape that will cover the spot where my fire image was overlapping by first using my selection tool to pick the gradient tool from my tools panel which allows a new panel to appear to the right of my projects workspace titled color.I then had to convert the color box to a gradient type of color by selecting solid color from the color menu and choosing the Linear gradient option.By doing this simple step I was then able to reset the color swatches in the color menu to red on both sides of the rectangle and yellow in the center of the shape by clicking and dragging my color watches or typing the color values listed as red and yellow in the animate book I’m using into the color panel.The next and last thing I had to do is select the rectangle tool from my tools panel to the right of my project workspace and use my selection tool to click and drag the shape onto the entire stage which allowed a red and yellow gradient shape to overlap my text layer in my projects workspace.

Continued Progress on Animating Shapes & Using Masks assignment (Lesson 7)

Flame 39

Flame 40

Flame 41

Flame 42

Flame 43

Flame 44

Flame 45

Flame 46Once I finished adjusting the shape or transition of my flame graphic in my library panel I to then focus on my text layer and to do that I had to use my selection tool to click the lock icon on my layer to unlock my text which allows me to then edit or adjust the text however I see fit.The next thing I had to do after completing this step is change the property of my text layer to a mask by selecting the modify option at the top of my projects workspace and picking timeline and finally choosing layer properties, which allows a panel to appear titled layer properties and picking the mask option from the type option in the project panel.I then focused on creating a new layer by picking the create new layer icon and renaming this layer fiery_effect and moving this new layer underneath my text layer so I can add my fire image underneath my underneath my text.The next thing I did is add a image of fire to my projects stage by selecting file, import and import to stage option and double clicking on my fire image.The final thing I made sure to do is lock my text and fire effect layers which allows me to adjust another part of my stage without effecting the text or fire layer and it automatically allows my fire image to appear underneath my text layer instead of overlapping the entire stage.I also made sure to test my movie by selecting the control option at the top of my stage and picking the test movie button which plays my entire animation with all the new changes I made seamlessly.

Even more Progress on Animating Shapes & Using Masks assignment (Lesson 7)

Flame 34

Flame 35

Flame 36

Flame 37

Flame 38The moment I finished creating the points a and b for my flame image on frame 6 I then had to make sure my playhead is either on frame 6 or 17 and then use my selection tool to click the onion skin option button at the top of my timeline panel in my project workspace.By doing this simple step I basically allowed the animate program Im using to reveal several outlines of my flame image to appear on my projects stage which looks like some kind of blur or fade affect as I moved my blue playhead back and forth from frames 1, 6 and 17.The next thing thing I had to focus on is adjusting the inner color of my flame on frame 6 by using my selection tool to select the gradient tool from my tools panel which appears to be a rectangle with a grayish black tint texture.I then made sure to adjust the position of the orangish red color by either using my selection tool too click and drag the flame texture within my flame image or moving the color swatches in the color panel of my projects workspace.The next and final thing I had to do after adjusting the flame image on frame 6 is change the yellow color on frame 17 to a light pink by wither moving the color swatches once again or typing the color code FF33CC in the color panel which automatically changes the flames inner color to pink.

Design a site like this with WordPress.com
Get started