Tuesday, July 8, 2014

Parallax scrolling tutorial.

I had decided to create a parallax scrolling website similar to my website. Although i am able to code the website easily with jquery, css and dreamweaver but the time the spend in coding may over the time limit that are giving by the project requirement with is 40 hours of working time. Beside that i need to make the website able to access on desktop, tablet and mobile devices.

So i start to research on what are the other way to code faster or tutorial of shortcut tutorial to help me speed up the time. And this had remind me of Adobe Muse, a software that able to create simple parallax scrolling website or simple layout website. So i do some research on the tutorial of Adobe Muse.


The video above is a tutorial on what can muse do.

Then i found this youtuber that is specialist in adobe muse tutorial. Most of the tutorial are straight to the point which able to let save more time of going to unnecessary discussion .


Beside that in the tutorial it also share some of the free sources like grid layout and color template for the viewer. 

But after giving some test and understand on muse, i scare that it may use quite amount of time if the animation i want will need to create of step and measurement for the design. Luckily, Adobe CC have release the latest version, the Adobe CC 2014. The application are more flexible and user friendly. Now it allowed muse to communicate with adobe edge animation. So i am able to use adobe edge animation to create the animation i want then bring over to muse to create the website which allow me to save even more time.

Adobe Edge is very similar to Adobe Effect and Abobe Flash but user are able to export the animation into html format and the coding will export into detail folder for future editing. It allow user to code in this software which come in very handy for user.







base on this two tutorial i am able to create the effect i want and save me more time for design.

References

References

Museresources.com, (2014). MUSE RESOURCES™ | Home. [online] Available at: http://www.museresources.com/ [Accessed 6 Aug. 2014].
YouTube, (2014). Adobe Muse Scroll Effect Edge Animate. [online] Available at: https://www.youtube.com/watch?v=75tPMsI0d8k [Accessed 6 Aug. 2014].
YouTube, (2014). How To Get Started with Adobe Muse - 10 Things Beginners Want to Know How To Do. [online] Available at: https://www.youtube.com/watch?v=8eDuupJ9Uus [Accessed 6 Aug. 2014].
YouTube, (2014). Joseph Angelo Todaro. [online] Available at: http://www.youtube.com/channel/UCzL1KzojWsxrEDBfo7-4StA [Accessed 6 Aug. 2014].
YouTube, (2014). Muse tutorial: Integrating Adobe Edge Animate graphics | lynda.com. [online] Available at: https://www.youtube.com/watch?v=fps_oeMmywA [Accessed 6 Aug. 2014].

No comments:

Post a Comment