Nightmare-ville

I have once more been trying all day to get the stickers to appear in the scrapbook when the appropriate button is clicked in the quotes scene, to no avail....
I am thoroughly sick of onEvent alpha = blablabla code speak.
Thankfully I am meeting Lyall tomorrow after the Reflect presentation (a presentation of one module's worth of work.. i'm going to show this one!) So all will be sorted by tomorrow night I hope :)

BTW

I had to download a trial of Flash CS6! and.. it solved all of my problems!
Was having a massive issue with the home button leading out of the map whisky spill movie clip but after wasting a million hours trying to fix this I then tried out CS6 and after just a few tweaks it works.. so thankful for this! May have to invest in CS6 soon....

Audio!

With special thanks to Steven Spence for recording these lovely sounds for me, they are perfect for what I needed.. tailor made.

Here they are:

Interactive book audio

Quotes pop up and buttons

To start off the work on the quotes scene I have added in the roll over aspect pof the stickers, so that the user can see a bigger version of them before deciding to add them to their scrapbook.
Here is a video of this:
I have also added buttons beside each sticker that will be used to peal off the sticker and place it in the scrapbook.

Scrapbook slide

As having a page turning animation would be a bit difficult and time consuming to impliment, along with the stickers appearing in the scrapbook (still to do!!) I have done a simple sliding animation instead.

Map Starting point

To make the map animation make a bit more sense I have added in this image and button sequence.
squint..again

Scenes slide

Completed animation of the glasses sliding across the table to show each scene (along with instructions panel)

Map merging into.. map

Finally got it to work! Ended up continuing the map spill animation until it fitted into the map image.

I have no idea what happened to this video! ...gets the point across though...?

Troubles

Major troubles trying to get the swfs to work merging the animation into the map jpeg... nightmare!

Base animation

Hmm

That video won't upload, after multiple tries. Will just have to leave it.

Animation is mostly done, some development pictures:

Step 1

The video wouldn't upload last night; here it is

...the base colour. I will add in highlights and shadow tomorrow.

Frame by frame drawn animation, 260 frames...

Just imagine it without the background, or the weird sparkly things...

Wow

It has taken hours to simply get the video I am using onto the timeline in Flash, what a ridiculous thing it is! I hate Flash!!

It involved about 20 different conversions and ended up with Flash 'unexpectedly quitting' about 50 times, but I now have the video in the timeline... now to animate, frame by frame... I can't wait!

Spill footage

..

 

The Map

I filmed the spill for making the map a couple of weeks ago, now I just need to look at it frame by frame and draw in the animation that will eventually turn into the whisky spill!

Here is some of the raw footage and how I did it. (drew out map, traced, waterproofed, glued outline, added white tac to outline, filmed)

Footnotes scene. fully finished!

Here it is in action:

Introducing..

New home button:
I have gone for a compass type symbol for the home button; I felt that it worked with the map theme a lot better.

New instructions button:
An arrow tab, that when the mouse is over brings
out a panel with instructions. The tab looks like this...

Enough for tonight...

Flash has started doing things for no reason, that make no sense. I am taking this as a clear sign to stop for the night. I have however got a much better home button in operation, all will be revealed; when I can stand to open Flash again...

Footnotes that I Gone and Done

Completed Footnotes scene, with background. Just need to add in some instructions and a new home button (that looks less revolting).

currently experimenting with the positioning of the text layer.
Think I'm going to end up putting it under the bottle as it doesn't look right like this.

Text

So, the text try-out below was no good, it didn't work and the animation I was trying out wasn't working either.
So tonight I'm working through turning all of the text sequences into PNG files and animating them. The animation involves yet more masking. But I think it works a bit better. Im making it in its own movie file so that I can easily add it into the footnotes scene and it will all work straight away (!).
So far it looks a bit like this (this has no pauses by the way, as the code to do so is in the footnotes scene already)

Textual Development

Phase one... testing out what works.

Footnotes? What footnotes? ..I can't even read them?

I know, I know.

As the bottle is fairly small I have lost all of that hard work I did into typing up the footnotes and making the labels work. I am now going to surround the bottle in the words from the footnote in a dictionary esque way (thanks for the suggestion Lyall). Now, to get on with this. But first, some research into animations of descriptive text.. or something along those lines.

Wow, that pretty garish.

simple..

Ahh, more or less decided.. a bit of kinetic typography would work nicely :)

I would be doing anything that complicated, but its nicely done.

Bringing some life to the bottle

So, the bottle functions but it doesn't really look as if it's really rotating, so tonight I spent (A VERY LONG) time bringing the bottle to life.


From looking at some real glass rotating I realised that all I really needed to do was make it appear that the light was shifting slightly as the bottle turns.

A bit like the glass here? But not really, a better representation would be to simply rotate the glass that is probably beside you right now...

Basically, I started with taking the bottle PNG image I already had, the largest section of glass area from the image and reducing the transparency, I then imported this to the Flash file and put it under the mask, so that it would not appear in the area surrounding the bottle. Following this I added in a few keyframes so that the layer moved slightly and tweened this.

This made the label fit in better but the bottle is still lacking.

 To tackle this I cut sections from the glass bottle, one of the main light area and one from the surroundings of this, altered the transparency and imported them to the Flash file. I added them into
the masked area, but behind the label layer, so that it was just the bottle being altered. I added some movement to the central light area to give the impression of the light moving across the glass a bit more.

The final step was to bring a little bit of light to the bottle top... Basically followed the same technique of a transparenlt layer of the area moving slightly...

The final product, at a more suitable speed (the HTML version, rather than slow in Flash version)

Buttons make the bottle go 'round

Today I staged an interrogation into how to make the bottle rotate at the click of a button.. Well, basically to play the animation and stop at a certain point (when the next label is lined up) and then play again to the next alignment when the button is clicked again.

Basically had to apply actions to stop the animation each time a label lined up by applying a stop function to certian frames; then added a go to and play fuction to the buttons and told them to play the next frame.

The result:

Footnotes

Now that the interface is more or less sorted; I am concentrating on the footnotes.

To give the impression of the labels being attached to the bottle as it rotates, I am creating an image with all of the labels in a logn row, so that I can tween them from right to left in one big animation. This way they will stay linked up and it will (hopefully) be a bit easier!

The next stage was to create a mask so that only the part of the label that was on the bottle could be seen.
To do this I had to draw around the outline of the bottle in flash and fill it in, it is then turned into a mask layer and the labels layer is the masked one. This then works! Hopefully... It didn't work for me straight away, a lot of tweaking occured.

Here they are!

All of the animations, finished... in a much better colour! The video is a bit jittery but you get the idea. :)

Aaah

Animated four out of five buttons tonight, whether I keep them or even like them? Well, that is debateable! Enough for one night :)

Map

Footnotes

These don't show up all that well with the white background on this blog...

Scrapbook animation

Scenes animations

Second attempt: Third attempt (and final?) :

Tonight

Commenced work on the interface symbol animations, tried out having the scene button - the glass - fill up, spill and spell out the word 'scenes'... it was a bit rubbish.
Tomorrow I hope to get more done, think i'll have the glass knock over to spell out scenes... we shall see :)

ANyway, I managed to get the hit button to work and play the movie clip, really struggled with trying to get it to change scene after but I will either resolve this or get help next week!

TO DO

Interface:

• Make animations for each symbol (button):

• footnotes - whisky pour
• scrapbook - page turn
• quotes - guitar strings move/musical notes
• scenes - glass fill
• map - roll up
• audio for each
• (home button)

Scenes:

• sliding animation between each scene
• audio for sliding noise
• next and back buttons

 Scrapbook:

• page turning animation (film actual page turn for reference)
• page turning audio
• next and back buttons

 Quotes:

• Peel off sticker animation
• peel off sticker audio
• add to scrabook interface (library?)
• inventory
• guitar strings animation and audio 

Map:

• waterproof paper and map outline
• video liquid pouring onto paper
• animate map image transparency from video
• audio of spill

Footnotes:

• make mask around bottle excluding label area
• animate chain of labels movement
• pause and stop animation
• audio of bottle turning
• animate bottle e.g bubbles
• next and back buttons

Flash demo.. showing the linked up scenes

Old news and Flash woes.

Had a nice wee test running of the labels tweened behind a mask, just a rectangle for now.
(The rectabgle will be the bottle and the background in the real deal, to simulate the bottle rotating)

and..

"adobe flash player has unexpectedly quit"

So, that's enough for tonight. It isn't good for the soul to carry on after Flash behaves in such a way.

So yes, I hate flash, old news. Woe.

TO DO. Tonight.

Having some awful trouble with buttons.. I have my flash file all linked up so that the interface takes you to each section (scene) but the home buttons won't work to return to the interface. Weird. Will abondon this for a few days until I can get some help with it.
SO tonight, some things I discovered need doing whilst assembling the flash document:
Resize the scrapbook files so that they work with the rest
Fix the footnote labels and compile them into a looong strip (this will make sense when I come to make the footnotes section and explin it all on this..)
Make a background for the footnotes and bottles



In the near future (but not tonight):
Research paper types and make liquid spill video (to be explained)
Work out how on earth to do the sticker thing..

Buttons/symbols

Okay, so every app has a means to return to the home screen and progress to the next screen... I forgot about this! SO... I will devote some more time to it that usual, as an apology to the world of buttons.
The previous symbols that I used on the interface didn't need to much research as they were relatively specific to my project, but home buttons etc are found everywhere. So I thought I'd give it a bit of research an dpost some of my findings here. I think the classic home button image-of-a-wee-house will actually link quite well, even though it is a little cheesy. When I have decided on the style I will draw out the symbols the same way as the interface ones (pencil, then fountain pen, then scan) to ensure continuity.

Examples:
Shiny ones. not what I'm going for.

These are a biut more like it, although I'd make them a bit more rustic looking.

The last one is my favourite, tkis kind of symbol but hand drawn is what I am going for.

Arrow/next examples:
This is the obvious style I would go there, but I am keen to check if there is anything out there that is a bit more inspiring. If not, this style is fine.

These are a bit more inspiring.. now to the sketchbook.

Watery experiments and tests

So, to create the whisky spill map I'm going to base the animation around a video of liquid opuring/spilling.
Here are some tests/investigations done using coloured water:

I started at first with water pouring over a ridged tinfoil surface, from this I moved on to coloured water, then coloured water thickened, to make it clearer and more whisky like. I then experimented with filming a plastic bottle being knocked over and finally a glass bottle being knocked over and spilling the contents. The videos have gone in the wrong order, annoyingly!

Oooops!

It was brought to my attention that I had never actually put up most of the interactive books/projects that I looked at originally.. trying to re-find some of them to out them up here!

 

This is a great TED talk showing an interactive book, it has a really nice interface and impressive interactive quality, especially the blowing into the microphone thing.

Simplistic, as it is for children (like most interactive books are). But really nice, and most aspects failry easily achievable.

A brilliant app, that we were shown in uni. It speaks for itsellf.

A bit of an odd one.. but nice animation, done in a fairly simple way with cut outs etc. But I like thie style.

Simple page turning styles, a bit basic but shows where interactive books have come from.

Another fairly achievable style with simple touch screen  buttons and simple animation.

A bit different from what I am going for as it is pop up but still really nice. I like the clean-cut visual style.


Basically, I want to take my book (The Stornoway Way) and turn it inot an impressive interactive piece, but simple at the same time - achievable. I am particularly interested in adding in the interactive qualities but keeping the theme of the book; it must not become childish, I therefore want to stay away from most of the aforementioned examples!

Researching water movement.

Not that great, the guy is annoying. But at least it shows some water movement.. I suppose.

This shows water pouring into water, not what I'm after but again, it shows the movement. It is also useful as it shows the water pouring from a small spout, similar to what I will need.

Really useful, having the water dyed red (not only made me want some cranberry juice, but also) made it very clear.

Haha, very cheesy, but actually very useful when they get to the pouring into the mold part.

Computer generated videos tend to show what I want a bit clearer than most of the real ones on YouTube..

Really useful video, shows the liquid pouring really clearly :)

Update

So, I have began the 'mkaing interactive' process, compile deveryhting in Flash, now just to get things moving by linking it all together e.g buttons working, roatating bottles etc.
The main feature I am going to work on, having discussed this with Lyall; is the whisky pour, hopefully if I can do this really well it will make the whole project look and feel really good.
I begin with researching water movement. I aim to film some water/liquid pouring out of a bottle and over a surface this week, or at least to do tests of this.

SEMESTER TWO

Storyboard