Adobe Muse - How to Horizontal Scroll

hey there in this tutorial I'm going to cover how to set up a website in other reviews that it will scroll horizontally so in this example that I set up here you can see that there's only one scrolling bar which is vertical but the website scroll horizontally and there's no more there's no more scrolling Mars a horizontally it's only one one score but that's the way to do it professionally today days and in other venues and also it will be responsive it will be it'll adapt from tablet screen size of a tablet and up to beep in IMAX screen or even TV screen it's responsive if you see here if you if you make if you are smaller the content stays in the middle this would be the size of a tablet and it will be the size I'm b-wing I'm doing it right now from my laptop so it will adapt to screen sizes from a tablet and to and my screen is not very big but it will it would adapt a to I monk very big screens or even TV screen see little other perfectly and so the way that you do this in other way meals if you wanted to build responsive first thing you do you start an inside and you gotta you gotta set the page width as big as a tablet tablet screen in pixels we which is seven six eight this is the width of that of a tablet screen and you have to center horizontally so all the content and backgrounds and everything you do we are we centered in the middle and the rest it's totally up to you but I like I like to put the top and bottom at zero and the margins at zero as well very this is not important for this tutorial and then we can start now open the whole page next thing we have to do is create the sections so in this case because I want to do it quick I'm going to make only three sections but you can make as many sections as you want hey I'm going to remove the stroke of the browser because I don't like it and to create the sections that will scroll horizontally we have to create squares like you just rub the rectangle to create a rectangle here change the color so that so that you can see it remove the stroke because it looks ugly and with a rectangle selected what I do is I go to the transform panel and I set the white of this rectangle to be as big as them as because you wonder what's a to go so I know that the smallest that is gonna do it when I go is a tablet a tablet screen size which is from here to here and now the biggest that I wanted to adapt to go it'll be a I'll make it seventeen seventeen hundred pixels with width which is a TV so it'll all up from tablets to TVs and first thing I do after I created this first section I set the Y position at zero means it's going to start right at zero pixels it's started it's starting right at the top of the browser and we set at zero I go to align and I say a line content area and centered so it will be in the middle now I'll zoom out to see and here I have the first section okay now what I do for the second section I just duplicate this this rectangle so I'll duplicate them and put it has to be exactly touching one one another and the second one I'll change the color to see where the section start and finish and I'll do the same again for the third section just duplicate this this rectangle and put it touching the other one and I'll change the color to see where it where it's a starting and finishing this section okay now we have the three section set and you can you can make as many sections as you want but for this tutorial I'll do it only with three and next thing you want to do is you want to create some content for your website so this is up to you how you're going to design it in this case I'm just going to drop one image here as example like this piece of I'll make these are grounded this would be probably this would be the home page and put some dummy text so some text here I'll make two lights so that we can see it and I'll make it big and I'll make it a lobster okay and center it in the middle now the important thing here to remember is there anything any Content that you put on your website it's gotta be within these two lines here this this line and this line you don't go beyond the lines because these lines determine the determine the size of a tablet so if someone is viewing this from a tablet it means they won't see this further it's beyond the lines because their screen it's this is more in a tablet so everything all the content in the middle you can go beyond the lines that's how you make it responsive now for the second section I'm just going to duplicate this text here and I'll do the same for the third section I'll just duplicate the text here but as I said you can you know you'll design you put all the content a you afterwards it's good to design visually first so first thing you want to do is you design your website visually from here before you before you actually start setting up the scroll effects or anything you design visually and when you're happy with these then is when you said the the scroll effects to spell horizontally but first this would be for example the home page this would be I don't know the about page and this would be the contact page for example so I'll just drop a contact form here I'll just put the simple contact form line mode was in the middle not very important for this tutorial but just for you to have an idea this would be the website all your content your content would be put in place visually now you select every single thing all the backgrounds and all the content everything you go to the scroll effects and you turn on motion and now because you want it to scroll horizontally you will set the initial motion going up zero because you don't want it to move up and down you just want to scroll horizontal so and the second option scroll horizontally usually a to the left it usually little more either move to the left but it's totally up to you if you wanted to scroll to the other side it'll look with this wealth in this case I'll put it moving to the left one time and for the final motion exactly the same zero moving up and one moving to the left if you start if you put the initial motion moving to the left you want to put the final motion moving to the left as well and if you wanted to move to the right you put both of them moving to the right that you have the initial motion and in final motion is going to be exactly the same settings now except for the last section in my case is the third section I have only three but if you have seven section or ten sections the last one the last section you don't want it to fly out so zero final motion in end both options you don't want it to move any more because it's a little final section you don't want it to be going away flying on so the last section always zero for the final motion and now the last thing is you have to set the key position individually for every section so the first section you select everything in it background and all the content for the first section and you set the key position at zero everything in the first section has the key position is going to be zero which is where they where the first section starts starts at zero pixels at the top of the browser so that what you want to do and the second section everything will have to start where the where the section starts now we know that because we did the rectangles to be 1700 pixels by 1700 pixels I know that this is the exact number so I select everything and I put it and I put the key position at 1700 but if I can't remember what the number all you have to do is you select the background which is the you know the square and the second and the second section and you to the transform panel and you look at the Y position the Y position always tells you where where starts where the object starts and what you want to know it's starting at 1,700 pixels so you know that everything within this section the key position has to start at 1,700 pixels and the same for the third section you select everything and everything has to start the key position for everything has to start where the background starts which is in this case it's telling you here the Y position 3400 so select everything and set the key position at 3400 and that is basically all that you have to know if we preview this now in the browser you'll see that you scroll down but it's close to the side second section and third section and see even though you keep scrolling down it'll it won't move the last section it's not going to move any more because we didn't put any final motion for this section because it's the last section I don't want it to be flying out I don't want it to be keep moving to the to the left if I do if I if I did put this like moving to the left one time like the rest of the sections this is what happens it will fly out like the rest of the things and you would see part of the footer and part of the browser so if you wanna if you want to avoid this you don't have to you don't have to care about the footer about the browser or anything all you do is to select everything within the last section and remove the final motion set it to zero and it won't move and so I think that was all for this tutorial I hope you learned and I'll see you in the next video thanks

Channel: internetsquid.com

Views: 39,796

Keywords: Adobe Muse, Scroll, parallax, horizontal scroll, muse tutorial, how to, responsive, muse cc, tutorial

Id: x5YMbB1jMdY

Length: 10min 29sec (629 seconds)

Published: Sun Mar 30 2014