Monday, September 16, 2013

#3 Adobe Muse: Parallax

Recently, I have gone through some articles and tutorials on how Adobe Muse used to develop parallax scrolling effect. I also view some other users' works (parallax) which done with Muse. Yet actually there are not much references on this topic.

So, here I am to start some basic simple explorations on Adobe Muse since I never used it before. First, I start with the "flying text" effect which the words will be coming in one by one in motion. I types in 3 "Heys" as the navigate button to the next section. Then on next section at bottom I typed each word with different text boxes and then go tick on "scroll motion" on the effects section to all the text boxes. The column in "Motion Before Key" is the speed that the designer want the word to come in to the page. By setting both "0" on "Motion After Key", it means the word will be freeze at place right after it reached to the key. Then, I added an anchor at the motion texts page to make it as a virtual hyperlink. After that, I linked the "Heys" words to the animated text pages. So the result is when I clicked on "Hey! Hey! Hey!", it will linked me to the "Play with Adobe Muse" page with motion flow. But the problem is I wonder why the "Adobe Muse" will be in overlapping on "Play with" at above. I have try several times yet the result is still same. I should go in to this problem by finding some other sources on it next time.

The next thing I tried is the scrolling images masking effect. The images will masking each other to create a smooth effect between the images. First, I needed to create multiple boxes vertically and then fill in with different pictures. One thing to remind, I must choose "tile" as the fitting style, so that I just can turn on the scroll motion on next tab. Otherwise, it will not allowed the users to turn on the scroll motion effect. Then I made all the strokes of the pictures to become "0" because I did not want to have border on each picture. After confirm all the scroll motions are in 0, then end my works on scrolling images masking.

The experiment I done last is the scrolling sliding texts which I loved it most. I prepared a long vertical image as background, then I added in two words on the screen, "support" and "TEAM A". Then I turned on the scroll motion on each text boxes then set the number value to the ways I designed. I purposely made the number value small to make it moving slow. So, the when the page in scrolled, the words will go right and left and moving a little follow the flow of scrolling.

The video below go through the experiment works I have done.



After these trying, I found myself is confused of the size that I want to set up on my site by using Adobe Muse. I will solve this problem in my next writing by finding more article references on it.




References:
Parallax Scrolling with Adobe Muse CC
Adobe Muse: Parallax Scrolling June 2013
Adobe Muse: the new features

1 comment: