Aesop's Fable : Video Content Capture

For my fable i used video as part of the interactive content.

When I started this project, i had intentions of using college HD cameras and booking out a studio, unfortunately I was given notice to quit my current property while doing this project, and finding somewhere else to live took main priority.

This left me with less time than I had originally anticipated to complete the project, meaning I had to work around some of my original intentions.

Capturing video using one of colleges cameras is one things i ran out of time to do. In order to work around this I used my mini dv video camera, hooked it up to my MacBook and used PhotoBooth as the capture program.

Not the most professional way to do things, but under the circumstances it was the only way I could get things done, also goes to show with the right tools and knowledge most things are possible

Take a look at the pictures below to see my set-up

Aesop's Fable : Video Up Date

I like documenting the progression of my work. I always find it interesting when finished to look back and see how the piece progressed.

I have used an app called ScreenFlow in order to record the videos below. The video below details me creating my audio button and my next scene button

Audio Button Creation




Next Scene Button Creation

Aesops Fable Further Research : Brainstorming and Ideas Development

Today i decided that to push my work forward with the Aesop's Fable Brief

I need to have a solid idea of what direction I was planning on taking the interactive book.

For weeks (since we got the breif,) I have been racking my brain trying to think of a good idea of how and why i may create an interactive book

The only think that keeps springing in to my brain is; to create an iteractive reading aid (not very imaginative i know, but i know i will be able to work with that idea)

Working along the lines of "interactive reading aid" i began to brain storm what interactive elements i could include



Taking the three ideas of Video, Sound, and Animation I began to further investigate how i could include these elements into an "interactive reading aid"

1.) Story teller mode (Video)

The "Story Teller Mode" utilizes video. The picture below explains what I am aiming for in more detail



2.) Read With Me (Audio)

The "Read With Me Mode" utilizes audio. The picture below explains what I am aiming for in more detail



3.) Unassisted (Animation)

The "Unassisted Mode" utilizes animation. The picture below explains what I am aiming for in more detail



After quickly making the above notes in my sketchbook/notepad I knew I had a solid idea that would meet the criteria for the brief. I liked the idea so to develop it further i created a PowerPoint demo to enable me to get a better feel of what i am thinking about achiveing

Below is the PowerPoint Presentation I created

Read this doc on Scribd: Proposal for Aesops Fable Breif

_{*Note Clicking the square in the top right hand corner of the embedded powerpoint will take you into fullscreen mode so you can see more clearly*,}

Finally I talked to Annabeth, showing her my PowerPoint presentation and talking her through the direction in which i plan on taking this brief.

She told me that taking the brief in this direction is a good approach to take. Annabeth told me to see more examples of this kind of work I should head over to the Cbeebies Website

While on the cbeebies website i noted a few web addresses that i plan on revisiting or that maybe useful for me to learn from



My aims for the next time I approach this breif are;

Short Term Goal

1) Continue researching how the Cbeebies website present there interactive stories what interactive elements are they using to engage the user with the stories being told?

Mid Term Goals

2) Create some characters in illustrator that I can import into flash

3. Create a "test" Scene in Flash using the characters created in illustrator. Make sure they are suitable for animating

Aesops Fable Flash Tutorials Fundamentals of Interactive Design

Today at uni we had a flash tutorial

I have used Flash quite a lot before (but would not consider my self to be a pro by an means) so some of the stuff we covered was just a refresher for me, which was good as I havent used flash extensivly since june last year.


We covered how to motion tween something i am very familiar with (for a very simple guide to tweening CLICK HERE)

We also looked at animating to a path, this again was something I have done prviously in flash. I find being able to animate to a path a useful technique, and was defiantly in need of a refresher to remember how to do it.

Below is my example of my path animation



For a simple guide to path animation CLICK HERE

The final and most important thing that i learnt to day was how to animate a walk cycle (something i have not done before)

As you can see below I have the very basics of a walk cycle begining to take shape, I know if i take what i have learnt to day, with more time and attention to detail i would be able to create a more realistic looking walk cycle



I have often thought about making small animations in flash before (generally for my own and friends entertainment) Not knowing how to create a walking character often prevented me from doing so. Now I have this skill under my belt i feel it will open new avenues for me and help me to take my ideas and flash creations in many different directions :)

Aesops Fable Intial Reseach for Fundamentals of Interactive Design

I commented on my tumblr that i was going to try and work 1 or two hours a day on the Aesops Fables brief.

Unfortunately i haven't quite stuck to that plan, but tonight i have commenced researching.

In this brief i am hoping to concentrate a lot of the work in to researching and prototyping, as from previous briefs i have found that if i research, then prototype, i provide loads of work that contributes to the marking scheme, if i just set out and create something i have less work to hand in at then end of the brief. Also in previous briefs where i have research then prototyped i have been happy with the final piece of work and i also think it has been of a better standard. So for this brief i am hoping to get a lot of research done, then blog my findings

Tonight I looked on wikipedia to refresh my memory about each fable. wikipedia only had brief outlines of each story so i am planning on visiting my local library to get out a book of Aesop Fables as although i know the outline of each fable when i am creating my piece of work i went something i can reference back to to make sure i am on the right track.

I have used flash before and am aware that you can create a page turning effect where the user, use's there mouse pointer to 'grab' the edge of the page and turn it over to reveal the next page.

Having not used flash for a while i set out to look at some examples of this, and came across this



In the above video* you can see an interactive book made in flash where as well as being text and pictures there is also video embedded (see 24 seconds in) also on one page you can choose the characters to view in more detail all on one page (see 1 minute in)

For this brief (this is not set in concrete and is just an initial idea) i am considering using the flip page method using The Tortoise and The Hare story. I am considering telling the story from the perspective of the hare and from the perspective of the tortoise. I am considering Using the dual character selection method shown in the video above, to let the user select who's perspective they wish to read from.

To achieve this method i would use externally loading pictures so when the user chose the tortoise it would external load a jpeg and clicking a next button would take the user to the story starting from the tortoise perspective

I would use the action script event handler

On (press)
{
Goto and play;

or take it to a new scene using

on(release){
gotoAndPlay("Scene 2", 1);
}

My aims for my next pieces of research are to

1) Get out the book Aseops Fables from the library
2) use youtube to look at video's of Aseops fables
3) Continue to gather and research flash techniques which may be useful for this brief

* Just a quick note regarding the video above. It is showing a .swf embedded on a web page. I used the screen capture program ScreenFlow. ScreenFlow is a powerful screen capturing program that lets you resize and edit the video aswell as using various techniques and methods of highlighting what you are doing. For my video above after capturing i have zoomed the video in two areas that I wanted to highlight to people reading this blog. The first is at 24 seconds I have zoomed in to show that there is video embedded into the page. The second zoom is at 1m 10sec to show the selecting of different characters from multiple pages. This is my first time using a screen capture program, and it proved to be very useful, as it was not possible to place the .swf into the blog (i couldn't find the url in the source code to embed, nor could i download it and upload it to my blog page)

I feel the video makes the page more media rich with out having to click an external link to go and view another page. I hope i will get more use from ScreenFlow as it seems to be a very neat and handy program