#7 Use Edge Animation in Adobe Muse

This is the process how I import Adobe Edge Animate's element (.oam) into Adobe Muse.

First I created the animation I wanted in Adobe Edge Animate. Then I need to save it as a .html so that I can publish it as .oam file. If did not save, it would not allow the users to publish it. In Publish Settings, I ticked the Animate Development Package, chose the Target Directory folder and typed in the Publish Name, and finally publish it as .oam file. After that, in Adobe Muse, I Place the .oam file on the interface of webpage. The animation works well in Adobe Muse. The video below is a go-through progress of the using of Edge Animate Deploment Package (.oam) in Adobe Muse:

#6 Adobe Muse: Fade Effect Scrolling

In this section, I tried to explore on fade effect when scrolling the page. It is quite complicated because it may need to count to get the exactly perfect effect.

First I created a PNG image in Adobe Photoshop. The image is a gradient which transparent at above and white colour at bottom. In Adobe Muse, I overlaid this PNG image to the image that I want to have fade effect. I setted up the scroll motion for the image in speed 0.5 to move up. Yet for the PNG, I turned on it's scroll motion effect and setted it up in high speed, around 7, to move up both in before key and after key. Yet after some adjustments, finally the fade effect work well with well-speed-and-positioned-transparent-image.

The video below shows the result of the fade effect I have explored.

#5 Adobe Muse: Header & Footer + Title of Page

I am quite confused with the header and footer in Adobe Muse.

First, I studied on the tips displayed in Adobe Muse first:

1. First above horizontal guide line: Top of Page - drag to adjust padding above page.
2. Second above horizontal guide line: Header - drag to adjust position. Items in the header appear at the top of the page above the page content.
3. First bottom guide line: Footer - drag to adjust position. Items in the footer appear at the bottom of the page below the page content.
4. Second bottom guide line: Bottom of Page - Drag to adjust minimum page size.
5. Third bottom guide line: Bottom of Browser, Drag to adjust padding below page.

Then I looked into some references online and explored it myself and finally understand what they actually do. The Top of Page determine how much browser the designer want to see in the page, as same as the Bottom of the Browser too. Bottom of Page used to set up how much for the minimum height the designer want to display. Header and Footer drag to adjust the column of content. Besides, the header and footer's shape need to be stick to the side to make sure it follow the size/duplicate images(work on Tiles only) of browser and would not leave blank space on it.

In addition, I did found out how to set up the title on each page of the site. I right click the Master and select Page Properties, under Metadata tab, I typed in the website name in Page Title Prefix's column since I want the title format become " Website | ?? Page".

For further understanding, I have recorded my go-through video in below:

References:

http://www.youtube.com/watch?v=zc3pMIHdPKM

http://tv.adobe.com/watch/muse-feature-tour/muse-define-headers-and-footers/

#4 Adobe Muse: Build A Site

In this report, I will recorded down the process or experiment I have did with Adobe Muse to build a demo site.

First, under Plan tab, I created several pages for the site including Home, About, Work, Blog and Contact. I also designed 2 different styles of Masters to apply to the pages. A-Master is for Home and Contact pages, while B-Master is applied to the rest pages. On A-Master, I want a picture to become the background of the page. I done it by clicking the Browser Fill and insert Image plus setted up the the Fitting to Scale to Fill to make the background look good. Besides images, the background also can fill up by solid colour and gradient followed the design by the designer. Then, I added the logo to the top of the site which is in PNG format. Although the size of the logo image is too big, but I can resize it by dragging. Actually at first, I thought the way to resize regularly is to press on Shift key and drag the image like other Adobe series software, but come out the opposite result which resize randomly, not followed the resolution size of the image. So I release the Shift key, and realised that in Adobe Muse, the image can resize well by just dragging it without pressing any keys. The Widgets Library contains several elements of website which the user can just simply add on and use it such as various types of Forms, Menus, Panels and Slideshows. I insert the navigation bar by selecting Widgets Library -Menus - Vertical since I want the vertical menu for this Master. I also changed the font and colour of the menu to the design I want. Besides, it got freedom to edit the design of menu when doing different tasks on it by applying different design to different stages like rollover and active. I used system font on the menu texts which Adobe Muse will convert it to image, so that the viewers can view the font styles on their screen too. Surprisingly, the Menu can be "auto-build-and-name" followed the Plan I have already arranged at first step. While for the B-Master's design, besides using the same logo image, I created a different style of menu which in horizontal way. In this Master, I just let the background to be in solid colour, but not with background image. With the different design of both Masters, I can see that the Home and Contact pages' design are different with the other pages which applied with B-Master.

Now I started to design the Home page. I double click on the Home page on Plan tab to go to the Design tab for that page. I created a button by clicked File - Place Photoshop Button. After the selected the PSD I want, it will popped out a little windows with state options on it which the user can control the button design by layers. It have normal state which the image/button in general view in website without any action on it. Besides, it have rollover state, mousedown state and active state. The design of button will change follow the layers action selected by the designer when rollover and mouse over it. Another very beneficent characteristic of Adobe Muse is the designer can insert the Edge Animate component (.OAM file) to the Muse design file. It means the Muse website can add on with animation and interactivity. For this demo site, I will add on an animated welcoming words which created by Adobe Edge Animate at early.

In the About page, I inserted an image (PSD image) and some texts on it. The user can straight away insert PSD file image on web design at Adobe Muse. After user edited the PSD image in Photoshop, the image in Adobe Muse also can be updated followed the latest design. For experiment, I tried to crop the image in Muse by pressing the Ctrl key and drag it. It works well and convenient. For the text part, I tried to experience its align style, font type and font size too. I highlighted the word "news" and link it to another website by typing the web address at the Hyperlink column and Enter it. When the user click the "news" word, it will bring them to the selected website. Besides, Adobe Muse allowed designer to attach the audio and PDF files inside. It created by the same way as hyperlink, yet just change to click on Link to File and selected the file the designer want to upload to the website.

For the Work page, I have tried another font's method by using web fonts on the text part. I also used the texts to created the new paragraph style, so next time I can just apply the paragraph style to texts but no need to take the editing steps again. Additionally, I insert the slideshow element from the Widgets Library by choosing the Blank template, so I can just add on my own images but no need to delete the already-have-images from the template. The designer can adjust the slideshow setting by clicking the play-alike-button on the side. It got several useful options like Auto play, Transition, Thumbnails and others all. I also doing a little changes on the design of slideshow by deleting the caption part and moving the left and right arrow the position I satisfied with.

I want to add a sub-menu/sub-page under Work page. So I went to the Plan tab again and added the Video page by clicking the plus sign at bottom of the Work page. I applied B-Master on it. I need to go to the both Masters to re-edit the menu of the site. It is because the Video menu would not show with the current setting now, I changed the Menu Type from Top Level Pages to All Page. Thus when the user rollovers the Work menu, it will showed its sub-menu, the Video menu. Adobe Muse do not have the function which the designer can just upload the video to it. So I copied the embedded codes from the Youtube video I want, and paste it under Object - Insert HTML... . The designer can paste in any HTML codes he/she want to fulfil the page.

Actually for the Blog page, I want the users go the other independent website rather than other page of the site. At the Plan's Blog section, I right clicked on it and select Menu Options - Include Page Without Hyperlink. After that, I went to the menu of both Masters again to insert the hyperlink of the website on Blog tab. That was all the steps for straight away link to site/page outside the website.

Furthermore, I also did some experiments by adding Tablet and Phone version on this site. The designer actually need to re-apply and re-arrange the interface because it will just copy the amount and name of the pages from desktop version only. For both tablet and phone version, it is better not to have sub-menu on it since the gadget normally do not have rollover function as desktop. So I pull out the Video page to make it same "level" as other pages. The Edge Animate file still can insert in both these versions. In Phone version, I tried another design of menu. First I applied Accordion Panel from Widgets Library to the Home page and deleted and leave just one tab on it. I named the tab Menu. Then I also deleted its texts part at bottom, yet inserted the vertical menu on the original text column. On setting part, I chose Can Close All and Overlap Items Below which the menu can be closed and just overlap the content below without making them move down after the menu collapsed. To make the menu just close once the page displayed, I need to make the menu close first in Design section. These steps made me the slide menu.

Rather than showing plain screen captures, I posted a go-through video for the experiencing above for a better and clear understanding.

#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

#2 Parallax Scrolling | Experiencing Parallax - Stellar.js

Nowadays, the parallax scrolling has become one of the biggest trend in web design field. Yet it is not a really new technique in the design industry. But because of the improvement of technology and lifestyles of human, the designers can and willing to develop the parallax scrolling effect much more easier and convenient than last time. Now, the designers can do more with the upgrowth of HTML5 and jQuery.

Parallax website is actually a single page website which arranged the images and background in different speed of movement on the screen. It created a different illusion for the users who in control on scrolling speed and way. 

One of the famous jQuery plugin to make parallax scrolling effects is Stellar.js. This plugin is developed by Mark Dalgleish to make the parallax get more easier on way to develop it. It not only supports parallax effect on the images and texts elements, but also the background of website. This plugin can let the iPhone and iPad users experienced the scrollable contents too since it supports on iOS devices.

So, now I have studied some basic uses or functions of Stellar.js by doing some basic tutorials and exploring. The images below show the results I have done in Adobe Dreamweaver by following the guides and tutorials of webdesign tuts+.

From the experiencing of Stellar.js, I feel that this plugin is really easy to use, yet it did not give much parallax designs on freedom of animating and layering the elements which probably provided by SuperScrollorama and Adobe Muse.

References:

Top 60 Best Examples of Parallax Scrolling on the Web

All you need to know about Parallax Scrolling in Web Design

35 Interactive Parallax Scrolling Website Designs

18 Websites that Take Scrolling to the Next Level

5 Reasons You Should Be Using Parallax Scrolling Web Design

6 of the Best and Worst Parallax Scrolling Websites for Design Agencies

Parallax Scrolling effects- What it is and if you should use it.

Tips on How to Smartly Use Parallax Scrolling for Your Website

Create a Parallax Scrolling Website Using Stellar.js
Best parallax scrolling tools & tutorials

#1 Interactive E-book or Parallax Scrolling?

I have two ideas in mind to make it as my project in Experiential Design module, one is interactive book and another one is parallax scrolling site which I am interested on both. So I did research and studies on both of the titles to find out which is more closer to my interest and ability.

Interactive book is an e-book which can display on the screen of computers or even portable devices such as iPhone and Samsung Galaxy Note II. It can be considered as a digital interactive book which support the go green theme. It can help human to save paper or the trees. Interactive book is not a plain normal book which just showing its content on the screen, but it creates interactive between the users and some other animated stuffs, such as pan and zoom and 360 degree views. We can also have some animated or interactive motion which can catch people's attention and give impression. For example, the children can play an interactive little game in the e-book to get memory/highlights points from the story they read through text. This kind of movement will totally attract the attentions of the readers. I would like to use Adobe InDesign to develop and publish it. I probably will pack it as an app that can be install both in the smartphone or tablet devices.

The next idea in my mind is the parallax scrolling site. This kind of website can be considered as an one-page-website which just display all the contents in only one page. But the way it display can be more fun and interactive compared to the general website we normally view online. I have done horizontal parallax website before which was a trend at last few years. So I would like to try to develop a parallax site(in vertical way) which will be showing more animated and interactivity to the users. For example, when the user is scrolling down the page, the text, images and background will moving up with some layering effect which will make the user feel new on it. I will use Adobe Dreamweaver to build up this website, and the parallax effect can be create by using some extra jQuery plugin like Stellar.js.

After some considerations, I decide to choose the parallax site as my project for this module. It is because I am more interested on developing a website compared to an e-book and since I want to be a web designer after graduate. So I think the parallax site is the better choice for me and to build up my portfolio in future.

Findings on Parallax Scrolling

     The designer can use jQuery plugin to design parallax scrolling on the website.

1. Stellar.js - one of the famous plugin to use in parallax scrolling
2. SuperScrollorama - plugin for supercool scroll animation
3. Scrolldeck - can make use of left/right arrows to change the slides
4. jQuery Scroll Path - can define custom path for scrolling
5. Cool Kitten - responsive framework for parallax scrolling

Below are some tutorials that I have explored.

Beside, parallax scrolling can also design with Adobe Edge Animate and Adobe Muse which showing in the videos below.

The examples or inspirations of parallax website:

1. http://boy-coy.com
2. http://www.theqcamera.com
3. http://www.soundscape.nl
4. http://iveo.se/
5. http://www.dfdsseaways.co.uk/Documents/smart-way-to-travel/index.html#.Ui16Y8bPH-o
6. http://www.knowthesign.in
7. http://waaac.co
8. http://foyachts.ru

Findings on InDesign to Create & Design Interactive E-book/Magazine

     Adobe InDesign can use to create interactive magazine/e-book. The video below shows the top 5 favourite features of  the InDesign CS5 and InDesign CS6 user.

The webpage below shows how InDesign can work on creating interactive document. It shows the keyboard shortcut of InDesign which make a lot of efficient when using this software, animation feature tools, connection between Adobe Digital Publishing Suite and etc..




Findings below explained how InDesign create and design an interactive "project".

Below is the ways of creating digital magazine which possibly take it as extra reference on designing interactive e-book/magazine.




Besides, the references below give extra knowledge on how to convert InDesign files to app.








The video below shows how Adobe Digital Publishing Suite helps on designing interactive content with using of InDesign.

On the other hand, the video below give information on how to create interactive forms with Adobe InDesign.

To design a book or magazine, it is important to know the process of developing it. So the webpage below guides the entire process of designing magazine.