Simple Website Design in Animate CC

hello everyone I had a chance to visit in their restaurant and then I was so impressed by flavor and richness of the taste and atmosphere and the people in the restaurant they were so so kind the only menu I knew was before visiting the restaurant was curry but there are more and more and then the dish I ordered was there was a tangerine chicken it's a kind of a spiced chicken but it was so nice so good so I decided to make the a kind of simple in their restaurant website using it a cc so please download the file I provided in the link it's a kind of Photoshop files of basic layout of the page and then it will be tenable maybe a little bit complicated but if you follow me step by step it is not that hard it takes some time okay so let's get started so this is what we're going to make today it's a simple websites about Taj Mahal Indian restaurant I'm not sure if there's a real name of this restaurant but um this is the one I made up okay so let's take a look okay let me refresh background this feeling in top burners coming down and the five buttons and then first spot page is about page second page is ingredients menu dessert and beverages okay so let's get started so first please download the image I provided from the link which is this this is a kind of a basic layout I made for this webpage website and there are multiple layers so please download this ok and then now what we're gonna do is we're going to move copy and paste each layer into anime CC file onto each individual layer as well so open animate CC create new file ok we're gonna use this on your web category high resolution 960 by 640 and 24 framerate and just create it and we're not changing my during size 45 percent okay so it's ready now back to photoshop select all and then I'm choosing my background layer let me copy command C and then back to anime CC paste it I'm gonna rename it as a BG of background so same way back to photoshop let me select a top banner kind of circular banner things layer copy and animate let me create new layer this will be renamed as a top and paste it okay I will repeat the same steps for our next layer global layer copy back to animate new layer on top and this new layer will be named as a logo and paste it to set the position like that and next about button so on I have the five more buttons layer now copy animate this will be named as about paste it so set the position somewhere here for just for now it's okay now Photoshop next button ingredients copy new layer ingredients paste it snow mirror here next menu the third button copy a new layer menu layers buttons layer paste it somewhere here okay and Photoshop desserts copy make a new layer menu layer oh no I'm sorry it's a desert paste it and the last beverages copy and back to animate new layer beverages and paste it ok we're almost there and then let's do this select your DM of the menu the third one in the center I'm gonna open my alignment panel check your line to stage and let me just Center it over the center over an accurate and I'm going to reposition this logo so this Taj Mahal the logo can be lined up with my the center button so that's the center okay now I'm going to set the position so I think it looks ok yep looks fine okay and so on the basic layout is done background layer top banner logos and five buttons and each layer has each of our elements okay next step is before we apply any kind of a twinning for the animation we're going to convert each image as a button because for now as you can see there on your the properties panel this is not on any kind of an image for me at the bottom yet this is just image see that it's a bitmap so we're going to make this as a button so we can click on it so we can click on it and we can jump to another page okay so select your very first one this is supposed to be about button select it there are two different ways of converting your image or any into as a symbol first one is under modify and convert to symbol we can do this or from the animate CC 2020 version there's a button in your properties panel convert to symbol button so either way is fine so if you're using all your version then 2020 you can go to modify and convert to symbol okay but um since I'm using 2020 I'm going to use this convert to symbol name will be about make sure the type is but not movie clip or not graphic just a body okay now go to library panel you can see there about button double click so about so my plan is we're going to change them when I move my mom my mouse cursor over this image I want to ever just a text like about the ingredients menu dessert and beverage is something like that ok so as you can see that there are only four frames in the air a button symbol hop over down and hit up is original over when I go over it may change something down when I click it and hit is or something different route explain it later so on all frame over frame down I'm going to keep everything the same so select the down frame and insert the keyframe by clicking this okay now add a new layer as I told you I'm going to have a text when I move my mouse cursor over this image so on over frame please insert a keyframe by clicking this button and then let me just the type about just like LM is a century so it's about buffer so I'm that means we're gonna see this first on offering we only save image and whenever over we're gonna say the about okay so let me go back to main scene now this is a partner C and also there's one more thing before we go to the next button please assign the instance name in this properties panel instance is the copy of a symbol so we can have multiple instances from one symbol which is fine and the reason we are assigning the instance name is since we're going to assign some kind of a comment like the actions later so we can click on it and we can say something onto it so instance name will be for this time about underscore BTN button it doesn't have to be just like this but I'm the important thing is when you assign the name please do not use any punctuation mark any special character only special character or punctuation mark we can use is underscore because there are any other punctuation mark or special characters can be understood as a kind of part of a script or a comment so just to be safe using this okay so this is done now next this will be ingredients button so same thing select your image click on this convert to symbol button this time will be Julianne's as a button okay now open the library panel you can see the ingredients button double click on it same thing select the town frame insert the keyframe so we can keep the image and then insert add a new layer on top highlight the over frame insert a keyframe and then just a type of word second menu was ingredients I'm using this kind of a light gray because my background is kind of little dark so accentuate may be somewhere here should be okay so ingredient button is done okay also in your properties panel assign the instance name underscore button okay next button that's the menu click on the convert to symbol button again and name it as a menu make sure the type is a button okay and now open the library see that menu buttons here menu highlighted on frame insert a keyframe so we can keep the same image and add a new layer on top and on over frame insert the key frame and now type menu like this okay now back to this menu button properties panel instance name menu underscore BTN next that's the dessert convert to symbol as a button yes okay in the library open the bottom symbol down insert a keyframe add a new layer on so this is a kind of routine over frame may say insert a keyframe again I'm going to type the word desserts so they're here yep looks good and then properties panel make sure instance name underscore BTN and the last convert to symbol button there was beverages button okay library open beverages highlight the down frame insert a keyframe had a new layer on top highlight the over and insert the keyframe and type the word beverages yep properties panel instance name underscore BTN yeah so I'm I think now we're ready to move on I have a background layer five buttons tap and the noodle okay so from now we're going to animate it before we do that in your properties panel let's change your frame rate down to ten just a temporarily okay so my plan is I want to have as you as you sew it from preview we're gonna have fading in effect for the background but um since we're going to apply some kind of our tweening for each layer we can do all layers at a time so select all layers and the insert create classic tween this time classic way now you see that yeah there are kind of about 10 frames segment for each layer it's not completed yet you can see that kind of a little line here now insert a keyframe so other twin is completed even though we change it nothing yet so we can make some changes in between 1 and 10 anything we like okay so firstly I'm going to change in my frame rate up to 24 again so we can have a better speed and smoother animation so first my background I want to have a fading in effect so in order to do that make sure your playhead is on frame number 1 at the very beginning and click your image on your image on your stage now in the properties panel color effect I'm gonna change the Alpha value so from 0 so starting from the 0 percent of our value up to hundred so it's a fading in yep now tap mayor I can change the Alpha value again but I won't have a little bit different so I want to move it to the top out of stage from the beginning so it will be coming down so background is feeding in and this top banner is falling down okay now logo logo I want to make a change in some size and also change in the Alpha value as well so on frame number 1 using this free transform tool hold down the shift key make it smaller also I'm gonna change the Alpha value as well so as fading in and getting bigger okay now select all these the buttons at the very beginning make sure I'm chewing my playhead is on frame number one select all five buttons layer and then this time I'm gonna open the Edit transform panel let me make it smaller like a 20 percent smaller also at the same time gonna change the alpha value on frame number one down to zero so meaning will be fading in and scaling up like this okay okay so the plan is so this one is okay but everything happens at a time so we can give some kind of more dynamics on this so excuse me my background layers are fading in which is okay we need some kind of a beginning now excuse me I want to give some kind of a time gap for each layer so top layer I want to have it how once background is fading in then top banners can ever coming in I mean the falling down from the top so select the top mayor now grab your the entire segment by keep pressing this mouse button and drag it up to frame number 20 don't worry about this white so background layers are fading in and top banner is falling down toner bucket is missing our background we're gonna fix it now next logo I want to have it after that as well so select a logo layer grab the entire segment and drag it up to frame number 30 okay so now we have a button slapped five buttons my buttons about button I want to have that was my logos can ever completed so how about layer select the entire segment and drag it up to 40 now the next pot ingredients this time I'm going to drag it up to 45 instead of 15 because what I want to do is I want to have my first buttons kind of fading in and then second button is coming in like this like a domino game now menu drag it up to this time 15 oops desert drag it up to 55 beverages up to 60 let me hit the return again yep so everything's working fine as I planned but the problem is everything's gone so I only see that kind of my last button only so I need to keep all other elements so on the frame number 16 highlight of him number 16 on your DMV but desert layer and then hold down the shift and click on the a frame number 60 on your background layer so we're selecting all frame number 60 except the top layer and then insert the keyframe see isn't it cool so background layers are fading in top laners falling down and my logo is kind of coming in and then each buttons fading in and then our scaling up and setting the position again just like this okay I hope the alarm it is working as you can see that on my on your screen so far okay so next is how we're going to make the content for each menu content for about page content for ingredients menu desserts and beverages okay so let's create a new layer on top of everything so new layer on top and let me rename it as contents and then that can't the first content will be showing up automatically once it reaches this complete layout so on the frame number 60 let me insert a keyframe by clicking this insert keyframe button I'm going to draw kind of a panel I'm gonna use this there with contra primitive tool because he has a more control so it will be about maybe this size about this okay let me move it down and then a field color will be white and a stroke color my favorite orange and that's true wait maybe fight that fire is okay and then I can keep this as it is yeah right angle for all four corners or on the bottom of this properties panel we can see that you can have a rounded corner options so if I enter like a 30 pixel radius we can have this or it's up to you you can have you can control different kind of radius for each corner like 30 on top left corner and 30 on bottom right corner something like so it's up to you I'm going to select all four corners there are 30 various okay so we're gonna use this as a kind of a basic platform for each content kind of a background panel and then each panel will have different kind of images okay so I'm going to assign a button 10 frames per panel for each menu so from 60 to 69 there will be a kind of contents about about pages from 70 to 79 ingredients next next next ok so from 60 to 69 let me insert just a frame insert timeline and frame just like this okay then I'm going to have more of this so first let me make a copy of this rectangle rounded corner command C copy and from 70 let me insert blank a keyframe first and paste it in place so I have the same one okay when they are different so there are the kind of a two rounded corner rectangle same looking but they are different because I copied and pasted this is kind of just a copy okay and then from 7279 insert frame now insert blank a keyframe for the menu of the third one and paste in place again and 89 insert frame frame number 90 insert time-line blank keyframe edit paste in place and 99 insert frame so I have one two three four and we do one more the last one for the Beveridge insert time-line blank keyframe and 109 insert no I'm sorry and on the a hundred edit paste in place and insert frame okay so it looks the same what I did I just made some kind of background panel just like this for each panel I mean there for each menu okay so it looks kinda a little weird because we lose everything so I want to keep everything so I'm highlighting one online on your beverage menu layer and scroll down hold down the shift and select the 109 on background layer and insert a keyframe so we keep everything in the same spot okay so it looks good so far okay okay so first let's create the content for the about page which is this one okay and then now once we complete this other pages will be the same the process is the same we were just a change in the content so first select your rectangle this is the first panel first two rectangle okay then we're going to convert to this as a symbol as a movie clip symbol this time so we can animate our kind of us something about the on this panel okay so select it and then like we did for the buttons go to the properties panel there's the same button convert to symbol or you can go to modify and convert to symbol either way is okay so I'm gonna click this convert to symbol this will be as a movie clip symbol and then I will name it as about underscore content okay now topic like you see there hierarchy on top left corner this is the main stage scene number one when we double click it we are on about underscore content movie clip symbols editing window okay so I'm gonna make some changes first let me change the frame rate temporarily down to 10 like we did then insert create classic tween insert the keyframe at the very beginning I want to make it a little bit smaller maybe like this okay also at the same time I want to change it beyond the color effects alpha value from zero to hundred so this background pedal would be kind of expanding and fading in but a hundred percent is kind of too much let me change the Alpha value on second keyframe like forty percent so starting from zero and forty percent so we can see through the background and on frame number 15 I'm gonna keep it just as it is okay it's okay now now add new layer on top so once this background the panel is fading in and expanding on the frame number ten I want to have a text and the images so first highlighter from number 10 insert a keyframe then let me type about this is too small maybe thirty point type size of Erica of Erica is okay maybe bold and in black so this is about page okay and then let me import the image I said one image from Google for each menu I mean each page about that JPEG and it is here about okay about and I want to have some kind of a text this time let me use the EMA the Tommy text so I just you have found yet this lorem ipsum Tommy text I'm gonna copy this first paragraph copy and then back to animate cc and let me draw static text text box here it's too big and it's too bold just a regular maybe fourteen and let me paste it command V okay so the text is just a dummy text is a placeholder text but I which is okay and then what I'm gonna do is the background the panel is fading in and expanding and then I'm I about text and the images the earth kind of just pops up so which is not kill time we want to have some fading in effect so let me select all of them click on this keyframe where you have about title image and the paragraph and click on your stage insert create classic tween and on 15 insert the key frame and then at the very beginning click on your the 3 about and then about image and the paragraph I'm gonna change their color effect the Alpha value from 0 to 100 0 200 so background panels fading in expanding and once it says the size and the location and then your text and images fading in like this okay there's one more if we just keep live it as the rest what's gonna happen is this content will be just looping over and over and over and again forever just nature of this animation so we need to say stop on frame number 15 so on it doesn't repeat so select our place there your place our playhead on 15 here and then go to Windows menu open code snippets html5 canvas timeline navigation and the very first one stop at this frame we're gonna apply this by double clicking see so this stop now we're gonna see that kind of all lowercase a meaning there is an action so first one is done same way so you're not seeing that because then we change the Alpha value at the very beginning I'm going to repeat the same steps for Maya the second third fourth and the last one so this is my second one ingredients page select the image so I'm repeating the same steps it's a repetition repetition repetition yep there's my favorite kind of proverb repetition is the mother of knowledge okay so I'm convert to symbol this time this is in ingredients underscore content as a movie clip okay so now this is a movie clip as you can see here and then double click I repeat the same steps select the first keyframe insert create classic tween keyframe and let me change the size also let me change the Alpha value starting from oops I did the opposite I'm sorry changing the size on the very first keyframe also alpha value from zero to nothing from zero to forty percent that's what we did how far forty and then we added five more frames so it stays there insert another keyframe now add a new layer for the content main content so on the frame number ten insert the keyframe I'm going to type the title that was thirty point pipe size of vodka bold let me type ingredients so we're here you can't and then then import the image to the library which is this time ingredients touch it back this one so from the library panel ingredients touch it back so drag and drop so we're here and also I'm going to drill have that kind of the lorem ipsum the dummy text so Helvetica regular and 14-point type size that's what I said here and paste it so Lorien epson so this is just a place for the text also at the same time the very beginning of um I have a second top layer on the frame number ten insert create classic tween on fifteen insert a keyframe and then on frame number ten select your ingredients content and changing the alpha value starting from zero to hundred so the background is expanding and fading in and then my main content is fading next one yes inserting the actions go to window code the snippets make sure your playhead on the ax frame number 15 the last frame html5 canvas timeline navigation stop at this frame double-click so that's it back to this so to contents there's nothing because we start from the zero percent of alpha value so what is there now turned menu same way select your rectangle convert to symbol I'm gonna rename it as a menu underscore content menu content as a movie clip okay now double-click on it insert create classic tween insert the keyframe at the very beginning let me change the size and the Alpha value at the same time starting from 0% ending at 40% of our value and add one more hour five more frames insert a keyframe okay now insert the and I had a new layer on top on frame number 10 insert a keyframe now America bold again very pro in 30 point type size I'm going to type the menu somewhere here and then let me import damage to the library which is menu dot jpg this from the library when you touch a PG here okay now I need a Content back to regular Helvetica and 14-point type size and let me draw a text box and paste it also on frame number 10 on top frame insert classic tween insert the key frame and I want to have a fading in so click on your content from the stay on your stage color effect alpha starting from zero to hundred and add the action by opening via code snippets html5 canvas timeline and stop at this frame double click so number three is down now number four this which is the other dessert convert to symbol as dessert underscore content as a movie clip okay and double click so now you can see that it's a kind of a routine I'm repeating via the same steps over and over and again maybe five times for now okay now insert create classic tween insert a keyframe on frame number 1 using the end this free transform tool let me change it the size also changing the Alpha value from zero to forty percent of whatever value and add five more frames insert another keyframe now add a new layer for the content on frame number ten insert a keyframe I'm going to type the title over to bold and then a 30-point type size this time the tyro yes in this is a desert and let me import the image to the library there was dessert from the library dessert JPEG here now I need a dummy text back to regular vodka and 40 point a 14 point and let me show the text box and paste it on frame number 10 insert classic tween frame number 15 keyframe on frame number 10 select your content on your stage click on it and change the alpha value from 0 to 100 like this next one is on the windows menu open coda snippets make sure your playhead is on frame number 15 here so kudos snippets so we can stop on that frame html5 canvas timeline navigation stop at this frame double play okay now we have just one more to go which is beverages convert to symbol by clicking this beverages underscore content as a movie clip symbol then double click repeating the same steps insert create classic tween insert the keyframe back to the beginning choose the free transform tool make it smaller change the Alpha value down to 0 and up to 40% and add 5 more frames and insert a keyframe okay add a new layer on top on frame number 10 insert the keyframe now typed the title of this page of attica bold again and 30-point type size I'm gonna type averages and then let me import beverage images to library which is this from the library and beverage that there are you JPAC okay now we need a dummy text but a regular again a 14-point type size and let me draw text block and paste it okay now highlight the first key frame insert create classic tween key frame and back to frame number 10 click on your content then color effect alpha from 0 to hundred okay then we're gonna need to say stop on the windows menu code snippets html5 timeline navigation select a stop at this frame and double click yeah so it's done so let me test the movie it will look weird for now oh sorry let me change it the our frame rate back to 24 test the movie looks good five times and back to the beginning so this will keep happening so what we need to do is we need to say something now so first once my background and all five buttons fading in on 60 and then this will present my first about content and needs to stop on 16:9 frame number 69 right before the second content begins which is frame number 70 here so place there your playhead on 69 and go to insert now windows menu open code snippets html5 timeline and stop at this frame again double click ok so let's take a look preview see about it is working okay now what we need to do is we need to say stop on every and the frame of each category each page so meaning 69 79 89 99 and 109 so let's do that place your playhead on 79 which is the amount the last frame of my second ingredient page window code the snippets html5 canvas timeline navigation stop at this frame so double click it's done now the last frame of my third page which is many paste and a frame number 89 here window code snippets html5 timeline navigation stop at this frame and double click and 99 the last frame of my fourth page go to window go to snippets html5 timeline navigation and stop at this frame then double click and the last 109 window code snippets html5 canvas timeline stop at this frame yeah so it should have worked so let me test the movie it's beautiful but the problem is my buttons they do not have any function yet they are not linked yet so what we need to do is we just need to add more action five more actions on it button so that's one action per button so it's pretty simple so first before we add action we need to know where the each page begins so my about page begins on 16 my second page begins on 17 70 80 90 and 100 so place your playhead on frame number 60 select about button your first button and go to window open code snippets html5 canvas timeline navigation this time we're going to choose click to go to frame and play so double click so once we click on this this animates this will bring us to certain numbers of frame this case 60 because 60 frame number 60 is the first keyframe of my first about page go to and play and let me do the same thing for my second button this time we're going to aim frame number 17 because if that's the beginning of my second page go to window coda snippets html5 canvas timeline click to go to frame and play this time go to and play on 17 now third select your third menu button window code snippets html5 timeline collective go to frame and play and go to 80 fourth one this is being dessert window code snippets html5 timeline navigation we're going to jump to frame number 19 the last one window photo snippets html5 timeline navigation click to go to frame and play we need to jump to 100 so it's all done okay let's take a look come and return to preview your movie so this is frame number 69 we stopped here so when I click on this now ingredients it will jump to the beginning of my first and the second the page which is ingredients beginning on 70 frame number 70 and it will stop on at the end of 79 ingredients same way menu dessert and beverages back to about okay there's Nicole it's pretty simple website and then a text is just the end up dummy text just a placeholder but this is a kind of idea of making a really simple website using anime CC 2020 the process is I don't know it's that kind of a little bit you may feel kind of a little bit complicated but actually it is not we're repeating the same step it takes some time and labor okay so thanks for watching and then if you have any questions if it doesn't work please let me know and then also it will be appreciated if you can subscribe and then I like this page and then set the alarm so you can notify if I when I have any kind of new content new videos okay thank you and have a good night

Channel: Jong-Yoon Kim

Views: 12,533

Keywords: Animate CC, Website design, Indian food

Id: -Z5l6ebnztU

Length: 60min 17sec (3617 seconds)

Published: Fri Jan 10 2020