Adobe Muse Tutorial | Animated Back to Top Button

hey everyone its tutorial Tuesday and today we're gonna build something pretty simple pretty small but it's gonna allow us to take a look at a few different features of Adobe muse that are useful useful in this situation and useful in many other situations and what this is that we're building today is a back to top button that appears as we scroll down it's not there all the time it's only there once we've scrolled past a certain point which we get to decide and that remains pinned to the side of the browser so no matter how big my window is no matter how short it is how wide it is etc it remains available on the right-hand side you could put it on the left-hand side totally up to you but we just want to make sure that it can't accidentally hang off the bottom which it doesn't it automatically scoots up on the bottom of the window scoots up and most importantly when you click on it brings you back to the top so let's take a look at how to make that it's pretty easy we just have a few steps to do so I'm gonna go over to the blank version of this template here and I've got a little side note because in a previous tutorial I visited one of these new built-in templates that are built into Adobe muse CC as long as you've got the 2015 update installed and a lot of you said I don't get that welcome screen there's a welcome screen that appears when I open up Adobe muse but many of you have clicked the do not show again checkbox and what do you know it does not show it again when you check that box so in short it's your fault it's not coming up but I'll show you guys how to get it back you just go to help and there's a welcome button under help when you do so you get the welcome window you get the started designs which are on the create tab there are a few tabs across the top and at the bottom it says do not show welcome screen again which many of you have already checked you may have checked that screen before there was useful stuff here if you've been using muse long enough if we check it now it does say accessible under help welcome that appears briefly and then disappears but it just reiterates what I've told you here so I'm using this exposure template if you guys want to follow along and use the same template I am that is where I started with that exposure template so here we go so now that I've got it open I'm gonna scroll down to the very bottom of it I'm gonna go to the bottom right and what I want to be able to see is the very bottom of the page and the right edge of the page workers from white to gray now technically the page ends here at this guide this space between the edge of the page and the edge of our design area or a canvas in Muse represents the browser that's that's the browser that can be made larger or smaller by the viewer so normally I mean you can fill this with a color you can fill the browser with a pattern the design and image whatever you want we're not gonna be filling the browser but it's important to know that this edge represents the edge of the browser because we're about to create something and pin it relative to the edge of the browser and that means we have to position it relative to this edge right here so what we're gonna do now is create a text box I'm just gonna go to the T on the tool bar here and I'm gonna create a small little text box the size of the button that I want to make so I'm just gonna make it small like that 56 by 28 for those of you who care and now that I've got that established I'm gonna do shift 6 to give me that little up caret symbol and I'm gonna write top all caps and I'm gonna do this with one element I'm only going to use this text box I'm gonna fill the text box and design the text box to look the way I want it to I'm not going to make a separate rectangle just because we don't have to and I want to talk about some features and some settings things that you find on the panels on the right-hand side that can make this well I think it'll be useful for you guys because personally I didn't use to use the spacing panel and then it turns out that it's a pretty handy thing so I'm gonna touch on that in a moment cool so now that we've got this created I've got it up against the right edge here see that if I have it spaced out from the edge then once we're done there's gonna be a gap here if you want a gap then good that's how you get that gap but I don't want a gap I want this to stick out straight from the side of the browser so it's like borderless in a way it bleeds off the edge cool so now that I've got there I'm just gonna style that real quick I'm gonna go in and set the fill of this text box to be and I'm just gonna do this arbitrary baby blue color here sort of a CMYK blue more so and now that I've got that established I'm gonna click twice to get in my text box I'm gonna highlight the text just so I can work with the toolbar here and I'm gonna make the text white and I think I'm gonna bump it down to 12 I'm also gonna switch fonts here let's see what font did I have before I think I was using a phone called Abel these are web fonts you can go and head you can go ahead and add your own web fonts and when I say add your own I mean there there is a selection of over a thousand web fonts to choose from you add the ones that you want to use when you go to add web fonts you don't have to go and find them on your own it's gonna pop up with a dialog box where you can add them if you guys want to use the same font I'm going to use Abel perfect and now that I have that font selected you'll see that it's in the top left corner of the box as you would expect it's a text box now the reason for that is because text box read like paragraph text but in this case I want to kind of Center it up a little bit so what I'm gonna do is I'm gonna go to the spacing panel here and if you guys don't see the spacing panel you can go to window and you can turn on the spacing panel it's right here so I'm gonna go over here and I'm going to bump up the padding padding is the space between a box in this case a text box and the content that's inside it so six pixels of padding pushes down six pixels pushes to the right six pixels pushes around every side six pixels so now that I've got that pushed in that should be enough we can preview in the browser we can actually go and preview this in the browser but I don't want to do that just yet because the magic hasn't happened yet actually you know what I take that back let's preview this in the browser before the magic happens so when this opens up in the browser it is where I put it it's all the way down here which is not where it's gonna belong and see that gap there that gap is there because I haven't told it yet that I want it to be pinned and it's at the bottom because I haven't told it yet that I want it to be pinned it just thinks it's a regular element on the page just like every other element on the page so what I'm gonna do now I'm gonna go back to muse and let's get this part out of the way with this selected this text box this objects selected I'm gonna go up to the toolbar and it says pin and there are these different corners here that I have to choose from I'm gonna choose bottom right and what that means is wherever the browser goes this is gonna stay in the same position relative to the bottom and relative to the right however the user scales their browser however they whatever they whatever they do we're gonna see this locked in place in a position relative from here to here and relative from here to here which means it's gonna be against the right edge and meaning it's going to be this far from the bottom so that this little gap here the footer in this case represents the size of the gap I could go down further I mean I could lock it to the very the very very bottom edge but I don't want to do that I want a little bit of space so it's kind of in the middle so that way it's a little bit more prominent so now that I've got that there and I've got it pinned to the bottom right because it's in the bottom right I'm gonna preview it in the browser again and there you have it the space from the right edge is none and the space from the bottom is equal to the the visual space that I saw in Muse from the very very bottom of the page so one thing you'll notice though is when I scoot up see how it's covered it's covered up by that slideshow that's something you'll find with this theme this usually doesn't happen to you if you're building something on your own because you're managing your own layers but the reason that that happened is because there are layers to this document and this is on a layer on top of this that's kind of a problem now I could click with two fingers that were right click if you're on a PC on a Mac laptop here so a two finger click allows me to go to move to layer and I can switch layers on-the-fly now I could put it on the topmost layer and then move it to the to the top of the elements on that topmost layer or I can give it its own layer if I have floating elements that float on top of everything I usually like to give those their own layer you can even call that layer top if you just want to remember that the things that go on that layer on top of everything else so for those of you who haven't worked with layers before let's just touch on that real quick I'm gonna go to my layers panel if you don't see a layers panel again you can get to it from window at the top of the screen and we can hit this little it looks like a sticky note this little button here to create a new layer and I can double click to change the name of that layer I'm gonna call it top I'm gonna do all caps so it stands out and now when I go it's a coincidence that this button also says top that's not what I mean by top this is top because it's the top layer and you can drag to rearrange these two so if your if your top layer is named top pardon me if your top layer is named top but it's not actually on the top then you're going to have to drag it up to the top of the layers list the fact that this is up here means that it acts that way so now I want to click on this element I'm gonna do my two finger click or right click if you're if you're on a desktop computer or a pc and i'm gonna choose move to layer and i'm gonna put it on that layer which I call top now the fact that it's on that layer means it's above anything else that's on any other layer because top is on top but remember too if you put ten things in the top layer those ten things have their own order relative to one another which is why there's this little triangle that you can expand so if I expand menu there are a bunch of things on the menu layer which can be rearranged within that so just keep an eye on that keep an eye on your layers you can have layers in the wrong order you can have objects within one layer in the wrong order so keep an eye out for that and make sure you have things arranged the way you want them to be arranged cool so now that I've got this established I'm also going to round these two corners here on the side just a little bit maybe four pixels cool that adds a little bit of polish to it and now that I've got that I got a preview in the browser again make sure my layer order is cool before I go any further and there we go it is it's staying completely on top so good it looks like it needs to be moved in just a little bit more so what I'm gonna do I'm gonna get rid of this and on spacing I'm gonna go up to maybe eight pixels of padding and then I'm going to unlock all of these and add a little bit extra on the left because I don't want it to be I wanted to kind of almost be centered and I could Center the text in the box that's another way to do it if I want it to be centered I could just Center it but this allows me to drag it out a little further and have a nice amount of spacing on the left and still keep the text the left justified so just know that you can unlock the padding if you want different values in each of the separate boxes that's what that little lock link it's like a chain link in the middle there so you can click on that to have more freedom so I'm gonna preview that in the browser again make sure it looks good because sometimes spacing changes when you preview in the browser and it looks good looks like the spacing is all even and our button just doesn't do anything yet it also appears from the very top and why would you want to go to the top if you already at the top so that is coming next now that we've got our button all styled let's now make it disappear and appear when we need it to appear so this is pretty cool if if you haven't played with the scroll effects in Adobe muse this will be news to you but this is a really useful set of features we're gonna use one of four scroll effects by going to the scroll effects panel there are four different ways to use scroll effects the first of which is the most popular and that's squirrel motion having things move at different speeds and making the page look more three-dimensional we also have opacity which is what we're going to use right now and then after that you can control a slideshow or you can control an animation created in another application called adobe edge animate and you can have that animation move as you scroll so we're just going to stick with opacity this is very simple I'm gonna turn on opacity with the little checkbox and I'm gonna say for the middle box here this is called the key position this is the most important box here this is when does the change finish happening so in this case the change is going from being invisible to being visible when is it visible when is that done happening I'm gonna say after we've scrolled about 600 pixels down and I'll hit return and you'll notice it automatically changes the the start position the fade position one as they call it to 550 and fade position two which is sort of the end of the end to six hundred and fifty pixels so it subtracted 50 and added 50 so it's gonna go from zero to a hundred and then in this case back to zero which we don't want you can ignore the bottom because we're not having it fade in and then back out again but you do have to change it to a hundred so it goes from zero to a hundred and then just stays at 100 and you can ignore the rest of the values down here now the start position that's important because the start position determines when it begins to go from zero to a hundred percent so it's going to be at zero percent up and until five hundred fifty pixels and then it's going to begin to transition for the difference which there's a fifty pixel difference here and then it'll stay at one-hundred once it gets to a hundred so in this case fifty pixels I think that's enough if you want it to be more gradual you can increase the gap between these two numbers if this were 500 and then 600 there would be a hundred pixels of scrolling that takes place as it goes from zero to a hundred percent so it'd be slower and more smooth I want it to be somewhat smooth but I don't care so much for people to scroll slowly and watch it fade in that's not super practical so I'll just leave it the standard 50 pixel gap that's cool so I'm gonna leave it at that I'm gonna close it and let's now preview this in the browser and make sure that it fades in okay part one's good it's not there which we don't want it to be there it's at 0% opacity right now so as we scroll once we get to around the 600 pixel mark right about now there we go it starts just starts to fade in it starts to fade in here and then it's done fading in here so it happens pretty quickly and again you have all the control in the world over that I just want to keep it subtle and quick and as minimal as possible so it's doing what it is supposed to do and as people scroll quickly they'll just think that it appeared and that's just fine there's no way in Adobe muse currently to make it fade and slowly even if someone Scrolls quickly unfortunately it's kind of a bummer but the speed at which they scroll does determine how fast it fades in if you are an adobe edge animate user then you've got some other options but within Musil own are only choices to have it fade with the scroll speed so cool now that we've got this button established we need to make it do something because right now it's just a am old text box it's not actually doing anything so I'm gonna go to the top of the page and you'll see here I have this anchor called top I'm gonna delete that because yours won't have that that's something that you have to create and the way to create this there are a couple of ways to create this one is by clicking the little anchor button at the top which selects the anchor tool which they call the place gun because it allows you to shoot an anchor onto the page like a gun it the other way to get to it is just press the letter A on the keyboard a for anchor and then click the top edge of your page now the left-to-right position of this does not matter as long as it's at the top that's all that matters and I want the top edge of my anchor to be lined up at the top edge of the page it's the top edge of the little anchor icon that that's where it's gonna bring us to when we link to it so rename this anchor I'm gonna name it top there we go and I'm gonna go back down and I'm gonna find my box here my little text box which is my button and I'm going to hyperlink that to top it's like a page except it's a position on a page that's what an anchor is so now that that's hyperlinked to top when I click on that it's gonna shoot me up to the top of the page and it's gonna do so with a smooth scroll effect it's not just gonna suddenly jump like a normal hyperlink which is a JavaScript or jQuery feature that's built into Adobe means to make things look real nice so thank you Adobe muse team for thinking of that so now that I've got this selected just before I preview it in the browser I'm gonna click on the normal state and switch to the rollover state and I'm gonna make the fill color a little bit darker for the rollover state and you guys might be looking at this and thinking HSB mine does not say HSB and that's cool I want the brightness slider but I don't have a brightness slider if you don't have HSB if you have RGB all you have to do is hold shift on the keyboard and then click on the colors down here and it switches back and forth it's a really cool trick if I mean it's not the coolest trick but once you know it it's like ah wow that easy hold shift and click on the colors I like to spend most of my time in HSB mode which is hue saturation and brightness it's really easy to mix colors that way cool so now that I've done that I'll preview it in the browser again which for those of you who aren't familiar with that I know I've just been kind of doing it you can go to file and you can choose to preview page in browser I'm pressing shift command E which is shift control e on a PC cool so now that we're here I'm gonna scroll down there it is it has appeared when I mouse over it it does my darker color just like I did on that on that color window and when I click on it it jumps me straight to the top so something went wrong there something did go wrong there I probably didn't wait long enough for the page to load or something went wrong with the page loading I'm gonna go back and preview it in the browser again here we go scroll down click on it Oh something weirds going on something really weirds going on it's not doing my scroll effect the way it's supposed to and this is built into Adobe Muse so if you guys are having this problem it has thing to do with something you've done wrong this is a feature built into Adobe muse it looks like it's good now for some reason I just had to refresh the page my computer might be having a bad day might be having an off day the other thing is depending on the browser that you're using if you've done something and previewed it in the browser and then you go and make a change and you preview that in the browser again and you find that the browser is not behaving itself that something is going wrong that it's not doing what it's supposed to do rather than just clicking on the refresh button in certain browsers you can hold shift and click on the refresh button and it actually clears the cache and then refreshes the page so that way you can see what it looks like when it loads for the first time rather than what it looks like on a computer that's already tried to load it if that makes any sense some browsers let you do it some browsers don't with Safari I think you have to go and you have to manually clear out the cache which is annoying but that is the nature of safari lots of little annoyances in Safari alright guys so that is it that is the gist of it hopefully you don't have that same weird glitch that I just had with with it jumping to the top instead of smoothly scrolling to the top but that's actually the first time I've ever seen that and I used Adobe muse an awful lot so I don't think you guys will have the same problem cool all right hopefully you enjoyed this please subscribe if you haven't yet already I have more widgets coming they're coming hopefully this week I've got them built and tested so you guys can test them out even more for me and let me know if there's anything you want changed continue to send me messages and let me know what widgets you want me to build you guys have provided great feedback and I'm doing my best to crank out those widgets that you guys are requesting so subscribe stay tuned head over to Facebook find muse resources on Facebook I post a little updates and news and stuff like that and I'll see you guys soon

Channel: Joseph Angelo Todaro

Views: 31,145

Keywords: adobe, muse, cc, creative cloud, Adobe Photoshop (Software), Adobe Systems (Organization), Adobe Muse, Tutorial, Live, photoshop, adobe photoshop, mac, osx, finder, howto, editing, graphic design, web design, sliding, panels, parallax, scrolling, icons, png, graphics, composition, slideshow, layers, Windows, OS X (Operating System), Mac OS (Operating System), scroll effects, scroll motion, 8.0, muse 2014, new features, top features, navigation, update, Tips And Tricks, top, scroll

Id: 2BFONUQyaDw

Length: 19min 35sec (1175 seconds)

Published: Tue Jun 30 2015