Sunday, 29 September 2013

The 3 Little Pigs

I wanted to do Wicked for my interactive storybook, but I don't have the complete story of it, and it will take up alot of time in terms of illustrating the characters , background scene etc. So I decided to pick a simpler storybook since this course is mainly about experimenting a new software on your own rather than your idea.
So finally, I choose to do The 3 little pigs ! :)


To make the illustration more interesting, I like to add texture together with a matte background. but the characters will be a vector with shadings to make it look more 3D.
I will also use bright vibrant colors to attract better attention and to make my book more lively.
Below are the type of style design for my interactive storybook.










The traditional version of 3 Little Pigs : 
The Three Little Pigs was included in The Nursery Rhymes of England (London and New York, c.1886), by James Orchard Halliwell-Phillipps.[1] The story in its arguably best-known form appeared in English Fairy Tales by Joseph Jacobs, first published in 1890 and crediting Halliwell as his source.[2] The story begins with the title characters being sent out into the world by their mother, to "seek their fortune". The first little pig builds a house of straw, but a wolf blows it down and eats him. The second pig builds a house of furze sticks, which the wolf also blows down before eating the pig. Each exchange between wolf and pig features ringing proverbial phrases, namely:
"Little pig, little pig, let me come in."
"No, no, not by the hair on my chinny chin chin."
"Then I'll huff, and I'll puff, and I'll blow your house in."[3]
The third pig builds a house of bricks. The wolf fails to blow down the house. He then attempts to trick the pig out of the house by asking to meet him at various places, but is outwitted each time. Finally, the wolf resolves to come down the chimney, whereupon the pig catches the wolf in a cauldron of boiling water, slams the lid on, and cooks and eats him. In another version the first and second little pigs run to their brother's house and after the wolf goes down the chimney he runs away and never goes back to eat the three little pigs who all survive.
The story uses the literary rule of three, expressed in this case as a "contrasting three", as the third pig's brick house turns out to be the only one which is adequate to withstand the wolf.[4]
Variations of the tale appeared in Uncle Remus: His Songs and Sayings in 1881. The story also made an appearance in Nights with Uncle Remus in 1883, both by Joel Chandler Harris, in which the pigs were replaced by Brer RabbitAndrew Lang included it in "The Green Fairy Book", published in 1892, but did not cite his source. In contrast to Jacobs's version, which left the pigs nameless, Lang's retelling cast the pigs as Browny, Whitey, and Blacky. It also set itself apart by exploring each pig's character and detailing interaction between them. The antagonist of this version is a fox, not a wolf. Blacky, the third pig, rescues his brother and sister from the fox's den after killing the fox.

Saturday, 28 September 2013

Spotlight feat teddy

Hellows Saturday,

On this lovely weekend, I decided to try out a new tutorial which is Spotlight that i've found on EdgeCommons -EdgeDocks. Once you click on an icon, it can load up 3 different type of medias : images, animate and youtube videos, depending on which media you link the icon with.



I've also learned how to loop my animation :) 



Before you start, you have to download EdgeCommons library to get edgecommons.spotlight.js file. A more detail tutorial can be found here (note: Its in mandarin) : 
http://www.cnblogs.com/adobeedge/p/Adobe_Edge_Spotlight.html

After you download, put it together with your project folder, then copy this two codes.
*I'll be doing for image only. The other two media have different coding so be sure to copy and paste the right one from EdgeCommons.
yepnope({
         load: [ "lib/EdgeCommons.js",
                   "lib/EdgeCommons.Spotlight.js",
                   "lib/style.css",],
         complete: function(){
                   EC.centerStage(sym);
         }
});
  1. var config = {
  2. width: 700,
  3. height: 500,
  4. type: "image",
  5. source: "images/CHANGE_THIS.png"
  6. };
  7.  
  8. EC.Spotlight.open( config );



When you click on the teddy bear , the image you linked it with will pop up !




cool?


byebye!

Thursday, 26 September 2013

What should my content be?

I've found a few interesting folk tale interactive storybook on the net, some of them have really interesting interactive elements that i could use in my book.

1. Twelve dancing princess


2. little red riding hood
3. Ozbook

I'm still not sure about my content. Should I do something related to Malaysia , or should I just choose an english folk tale?

Maybe I could do the History of Melaka, about how Melaka got its name.


Or something dramatic like the Black Swan's story.


I quite like the story Wicked tho, I went to watch their play in Singapore last year.

Plot : Wicked tells the story of Elphaba, the future Wicked Witch of the West, and her relationship with Galinda, later Glinda, the Good Witch of the North. Their friendship struggles through their opposing personalities and viewpoints, rivalry over the same love-interest, their reactions to the Wizard's corrupt government, and, ultimately, Elphaba's public fall from grace. The plot is set before and during Dorothy's arrival from Kansas, and includes several references to well-known scenes and dialogue in the 1939 film The Wizard of Oz as a backstory.




I'm still in the mist of doing research for my storyline . till then.

Saturday, 21 September 2013

Drag and Drop !

Hellows,

So this time I'll be trying out on how to create Drag and Drop using Adobe Edge from this tutorial : http://www.youtube.com/watch?v=IxSj-fMfc_Q , since I'm sure I'm going to use most of it in my interactive book assignment.
I think that having drag and drop games in the best way to show the interaction between the users and the product.

Here it goes,
I'm using back the teddy bear I did for the last tryout, this time i'm going to style my teddy cause he looks so dull and boring and naked.



They don't provide a drag or drop coding in adobe edge unlike the play or stop codes, so i had to pick them up from the internet. So what i did was just copy them from the tutorial video i watched and changed them into my own symbol name.

So yeah it works !

I created another rectangular box name "targetTie" so that when I drag my tie it will sit comfortably in place on the teddy's neck. 
It bounces back into its original position when it is not on the rectangle box i created.
The only problem is , I couldn't pick it up again after it is being placed onto the "targetTie", I have to figure that one soon.




After that I duplicate the tie coding for my sunglasses.
The bad part about copying the entire coding off the net is that you sometimes get abit lost and duplicate the wrong thing. 
As you can see below : I have two function init(){
It is actually like the WRAP for the whole thing. thats is why when i put it in that way, only one my item could move.
silly me.
This is the correct one :



yay, succeed.

In the next tryout I'm going to add a little animation after I move the items in its correct position.
nights.





Thursday, 19 September 2013

Teddy bear feat Adobe Edge

Hellows,

Dreamweaver + After Effects + Flash = Edge.
Cool edge.

After some thought , i've finally figure out how to do the coding between 2 images. Its just as easy as you hide one element, after that show the other element. I guess i'm getting the hang of this.

I just created a simple mouse over and mouse down effect.



Say Hi to TEDDY!
Model of the post :D #motp



After doing the codes for mouse over and mouse down, i merge them together as one symbol, then use keyframes to make the teddy bear drop as its opening ceremony.






Punch the teddy with your mouse !


You can watch me play with teddy here :



Saturday, 14 September 2013

Testing Adobe Edge

Hellows fellows,

I've started trying out Adobe edge with the help of tutorials !
The tools were so familiar to me, I didin't have much problem with that. I feel it's so much easier than Flash omg Flash.
The only problem is it's hard to illustrate in Adobe Edge, well not much of a problem for me because I prefer using Adobe Illustrator anyway. :D
I've tried the coding too , but it didin't really do as i say, maybe i did it wrongly. :/






will update againnnnn on better progresssss.

Monday, 9 September 2013

#1 My Reflective Blog

Hello,

This semester is all about ideas, innovation, self learning, and visualizations. We are required to choose a field related topic to multimedia design, and from there on decide on the content you want.

So I decided to choose Interactive book. I've found a few software over the weekends that allows me to create my very own Interactive book from scratch. There's 
-Adobe Edge
-Stencyl
-InteractBuilder
and DemiBook that is more commercialize and user friendly. 

As a designer I decided to use a more fluid software interface to build my interactive book so that I have no constrains and limitations towards my design outcome.

I have downloaded Adobe Edge (free trial) over the weekends, but haven't tried it yet because it only allows me to use it for one month. So, I decided to go through all the video tutorial provided on youtube, and then after I've gotten a better understanding about Adobe Edge, I will start practicing.







From what I roughly learn through youtube tutorials, I've realize that the interface is a little bit like Adobe Flash and also Adobe After Effects, but the codings are somewhat different. Tho, I've mastered the basic skills of Flash last semester so I think that I am able to overcome this problem.