Thursday, 3 April 2014

Edge Skills upgrade!

There are three exercise done today in just three hours! Anyhow, the skill learned are basic but it was cool. We learned button, parallax scrolling and drag&drop.

In the button exercise, we learn by making three button and we separated them by pages; page 1, page 2 and page 3. To navigate, we added three circles, each represent one page.


We begin by adding the text, circles and rename most of the layer for a more organize arrangement.


I rearranged the circles as we are free to do so. For each buttons, we turned on its display mode and add in the keyframe. We switched off for the part where we didn't want to display.

the button and the page:
red - page 1
yellow - page 2
green - page 3


After that, I added in the background color.

Next is the parallax scrolling. To me, this is the most interesting one and I may consider to use this method for the assignment outcome. Maybe it would be a storybook in a parallax scrolling form. - Still considering and while reconfirm again after the other applications' tutorials. 

Adding some coding into the stage.

Here we can scroll the page while the text's opacity changed as I scroll more than half.


Add in image to make it more cool? Well, it certainly looked better than just plain text.

Trying it in fullscreen. Tried making the content to be centered but this is what I got. It's not as center as it seems…..


Lastly, drag and drop in a web using Edge.

Separated all the images in Illustrator and saved them in SVG (Scalable Vector Graphics) file. That way, the images can be edited in Edge and can be arranged.

After resizing them, I separated them in this manner.

This is how it looked online.


The coding to make the drag and drop mechanic.

1 comment: