#8 Scrolling in Adobe Muse

Today I will focus my experiences on scrolling in Adobe Muse which I will use a lot in my project.

I start from the easiest first which the background of the page will scrolled slower compared to the content. I putted texts as the content and filled the browser with a background image which fitting with Tile. Then I ticked on the Scroll Motion of the Browser Fill and set the scrolling speed as 0.4 which will make it scroll slower than the contents.

The second exploration is how to make the content keep scrolling down without disappear on the screen. I used the sky image as background (browser filled) which fitting with Tile style. I also turned on its scroll motion and made it scroll up at 0.4 speed. Then I placed a rocket as content element which will followed the scrolling along. Next I ticked on its Scroll Motion and selected "move object down" rather than the typical "move object up". It is because "move object up" is the typical scrolling screen we have seen always that the content will go up after we scroll down. Yet the "move object down" will make the element keep moving down followed the scrolling of the users. I setted the speed as 0.2 on "move down" and others on 0. I locked sync both Motion Before Key and Motion After Key, so the element will go with the same speed a whole time. To make the rocket disappear first and just come in when the users scroll, I setted the Key Position as 328 pixel. I will explained this situation clearer in the recorded video at bottom of this report article.

It was really amazing that I found a way to design a timeline in Adobe Muse. Yet I need to create the timeline PNG file first in Adobe Photoshop. I made the path which want to fill in the colour become transparent and then Place it into Adobe Muse. I just simply did a demo/prototype on the timeline. So, in case, the webpage have a header image first, then come to the timeline. Behind the header image, there is a dark red rectangle which I want the colour to fill in into the timeline. I pinned the rectangle on top of the browser, so that it would not move along with scrolling but just stay at above. So when the user scrolling, with the dark red rectangle at behind, the colour will fill in to the timeline.

It is quite confusing showing my progress without images or evidences, yet I have a prepared a video for these three scrolling functions for better understanding.