Finished Product

Strengths
Visual Style. I feel one of my products strengths is the visual style, I am very pleased with how the images all turned out and I think they look effective. All the images fit in with the diary theme, I made sure that all the images looked hand-drawn, and if not (for example, the photographs) I made them have the effect of being 'stuck' in the diary with tape. I really like the use of minimal colour in my piece too, I think it fits in with the theme, with colour finally being shown at the end, in the form of a rainbow, to symbolise hope.

Interactivity. Another strength I feel my product has is the use of interactivity, I made sure that most pages had interactive elements to keep audience interest and excitement. I particularly like the click-away page with the birds and the painting page where the paintbrush follows the users mouse, I feel these pages are appealing and fun for the user.

Consistency. I am particularly happy with the consistency of my piece. I made sure that all pages and images followed the same theme and fit together correctly. I also feel that the colour scheme is consistent on every page, I used the same blue colour (#1D74C2) throughout.

Weaknesses
Story. One weakness of my piece I feel is the over-all story line, I had to cut down some of the slides due to time constraints which meant my story needed to be condensed. I do feel that the end of the story is slightly rushed and could have been developed a lot more. If i had more time I would have definitely added more diary entries to develop the story further.

Sound. Another weakness of my piece I feel is the sound. As I added the sound at the end, again I found I rushed it slightly. If I had more time I would add more ambient sound and mix them together to make it sound more natural. I would also add sound to every frame instead of just a selective few.

If I had more time...
Scrollable Frames. If I had more time I would have added a diary entry where the user could scroll through animations / various frames using their mouse. This is something I looked into yet found that due to limited time it was not possible as the coding and learning was quite extensive.

Allow the user to draw. This is something else I would have liked to add yet found very difficult to do, I followed various tutorials yet with no luck. If I had more time I would definitely look into this and try and find a tutorial that would allow the user to draw on the frames themselves, an interactive sketchpad.

What i've learnt…
Overall I've learnt a lot during this assignment, I've learnt a number of tips and techniques which will benefit me in future projects. I used a number of sources (see here) to help me with my learning and I feel I have created a product that I am not only proud of but which also demonstrates my new learning.

Improvements

Following my last tutorial I have made some improvements to my piece.

1. I changed the homepage button from a 'location' symbol to an ink splatter. I feel a ink splatter is more appropriate and fits in with my diary theme more than the location symbol did.

2. After the comments I received from my tutorial I also decided to get rid of the arrow images I had in my piece. I felt that the arrows looked very computerised and didn't fit in with the hand-drawn / style I was going for.

3. I also made my piece look more consistent by changing some of the frames. As you can see from the images below I tried to make the frames look more 'scrapbook' and less computerised, I did this by re-arranging some of the photographs and adding 'lines' to make the text look as if it was handwritten.

4. I made sure all the font was the same colour and style, I went through my piece correcting any different style font to make my piece consistant.

Tutorial / Code Sources

1. YouTube, (2014). Flash Tutorial - Mouse Drag and Drop. [online] Available at: https://www.youtube.com/watch?v=A-A3RKyg4Cg [Accessed 3rd Apr. 2014].
The first tutorial I used was for the drag and drop objects on the diary homepage and also on numerous other pages. I used this walk-through YouTube video to help me understand and code my objects.

2. Flashkit.com, (2014). Tutorials >> Actionscripting >> Basic: Making a MC follow the mouse - Flash Kit. [online] Available at: http://www.flashkit.com/tutorials/Actionscripting/Basic/Making_a-Alexande-735/index.php [Accessed 10th Apr. 2014].
This online tutorial helped me to code a movie clip so that it followed the users mouse. I used this piece of code a number of times within my narrative piece.

3. Florio, C. (2009). Actionscript 3.0 for Adobe Flash CS4 professional. 1st ed. Berkeley, Calif.: Adobe Press.
This book helped me a lot when completing my project, I found it useful to quickly look at when coding my project and it reminded me how to do certain things in Flash, such as create roll-over buttons and quickly editing images within Flash itself.

4. ActiveDen, (2014). MovieClip Visibility Show/Hide OnClick! | ActiveDen Community Forums. [online] Available at: http://activeden.net/forums/thread/movieclip-visibility-showhide-onclick/2632 [Accessed 4th Apr. 2014].
I found this forum that provided me with code and help on how to create click and hide images in Flash. I used this technique on the 20th March diary entry with the birds.

5. Dummies.com, (2014). How to Animate along a Path in Adobe Flash CS6 - For Dummies. [online] Available at: http://www.dummies.com/how-to/content/how-to-animate-along-a-path-in-adobe-flash-cs6.html [Accessed 20th Apr. 2014].
I used this tutorial to help me to animate using a path, I used this within my butterfly diary entry. I found this way of animating looked a lot smoother and I was pleased with how it turned out.

6. Help.adobe.com, (2014). Adobe Flash Professional * Sound and ActionScript. [online] Available at: http://help.adobe.com/en_US/flash/cs/using/WSd60f23110762d6b883b18f10cb1fe1af6-7cdfa.html [Accessed 19th Apr. 2014].
I found this above website very useful when it came to adding sound. I found lots of helpful code and tips on the official Adobe help site on how to stop and start sounds.

7. photoshopbuzz.com, (2010). How to change a photo into a pencil line drawing in Photoshop. [online] Available at: http://www.photoshopbuzz.com/change-photo-to-line-drawing/ [Accessed 3rd Apr. 2014].
I used this step-by-step guide to edit photographs in photoshop. I used this technique to turn photographs into line drawings to give them the effect of being hand-drawn.

8. Jenkins, S. (2010). Smashing Photoshop CS5. 1st ed. Chichester, West Sussex, U.K.: Wiley.
I looked at this book for help on how to edit images in Photoshop, I found lots of useful tutorials and tips in this book on how to edit images in certain styles.

Tutorial Notes

Most Thursdays either via email or in person I had a tutorial with my project supervisor to help me with my project. Below I have written up some notes about the information I wanted to find out / information and guidance I received during these tutorials.

4th March
My first tutorial. Ran through the idea of the diary and character with my tutor. Feedback received was that more development needed to be made to my character Joy. I then went about creating a detailed character profile to help me visualise my character and narrative.

13th March
This tutorial we looked at visual style. My tutor recommended that I look at graphic novels, particularly ones involving teenagers. After this tutorial I went to the library and found three books with different visual styles I then analysed them and this helped me come up with a visual style for my piece.

20th March
This tutorial was done over email. I showed my tutor my blog and comments recieved were too develop graphics and my visual style in Photoshop, I was also told to map out my story on paper and put on my blog.

27th March
Today I showed my visual style work and my the story mapping I had done so far to my tutor. Feedback recieved was possitive and I was told to start contentrating on the actual making of my piece in Flash.

3rd April
Today we talked about use of colour and I was told to look at an illustrator called Isabelle Arsenault. This helped me to develop a clear idea of the colours I wanted to include in my piece. In this tutorial we also talked about sound. I then set myself a to-do list for my project to complete over the Easter break.

24th April
My last tutorial. I showed my tutor the work I had completed so far, comments received were that my piece wasn't consistent enough, some of the colours and images didn't match together. I also received some more ideas as what to do for my final three pages. After this tutorial all criticisms and ideas were noted and implemented.

Research: Isabelle Arsenault

Virginia Wolf

Jane, Fox and Me

Isabella Arsenault is a illustrator from Montreal, Canada. Her visual style is very striking, she particularly works with colour, many of her illustrations are simple black and white drawings with a hint of colour. For Example, her 'Jane, Fox and Me' illustrations are black and white when the character is in her normal life, however when she dreams the illustrations are in colour, with the prominent colour of orange coming through the most. 

I found Arsenault's illustrations very influential as I want to create a narrative piece which focuses on colour, the colour I want to use is blue. I will have mostly black and white images to symbolise my characters battle with her real life, however I will also have the colour blue present throughout to symbolise hope and freedom. 

Visual Style

Colour
I want my narrative piece to mainly be black and white, this is to symbolise the dark themes within my story. I do however want to include the colour light blue, I want this colour to represent freedom and happiness within the narrative and I also want to use it to highlight and/or emphasise certain points within the story. I have chosen the colour blue because it is my character Joy's favourite colour, it reminds her of the sky.

Example Images

Font: I am going to use a font I downloaded on the website Dafont.com for my story. I have chosen the font 'Miss Brooks' because it looks handwritten, this makes it fit in nicely with the themes and visual style of my piece.

I use a lot of silhouettes in my piece. Above I have edited a few photographs in Photoshop. To create these images I firstly cropped away the background, I then changed the brightness and saturation of the image to turn it into a silhouette, I really like the way this image turned out. The use of silhouetted images is to add mystery and darkness to my piece.

Above is another image I used Photoshop to edit, as you can see I took a photograph and transformed it into a line drawing, to give it the effect that it had been hand-drawn.

Above is the image I have chosen as the homepage button, I chose an ink splatter as I feel it fit in well with my theme.

Target Audience

The target audience for my project is teenagers, as my narrative is based upon a teenaged girl and the troubles she faces I feel that teenagers will be able to connect most with my character and my piece as a whole.

Chloe Maxwell, 16, Newcastle

Chloe is an example of my target audience. 

Profile

Chloe is in her first year of sixth form at Dane Court grammar school, she studies English, Geography, Business and Art and is predicted ABBC. She listens to pop music, her favourite artist being Ellie Goulding. Chloe enjoys reading and contemporary art, she loves visiting the galleries in London. When she grows up she wants to be an English teacher. Chloe's favourite colour is orange and she enjoys watching thriller films, her favourite being Shutter Island. 

I feel that Chloe would enjoy my narrative piece as she is the same age as my character Joy, Chloe has probably experienced similar situations and experiences to Joy which means she can emphasise with the character and storyline.

Basic Storyboard

Key Words

Research: Fun Home, Alison Bechdel

"Fun Home (subtitled A Family Tragicomic) is a 2006 graphic memoir by American writer Alison Bechdel. It chronicles the author's childhood and youth in rural Pennsylvania, United States, focusing on her complex relationship with her father."

The narrative of Fun Home is non-linear and recursive. Incidents are told and re-told in the light of new information or themes. The illustrations within Fun Home are quite simple, black and white line drawings with speech bubbles and a short extract of text explaining what's going on at the top. 

"The book interweaves incidents from family and individual lives with Alison's childhood journal entries, her father's photographs, and scenes from the books she and her father share as a form of personal communication and analysis." The comic goes back and forwards between past and present, this is something I feel is really effective and keeps the audience interested and engaged with the narrative.

Research: Dreamingmethods, Inside

On the website Dreamingmethods is a piece of work called 'Inside: A Journal of Dreams'. Inside is an online interactive diary. It's a similar idea to my concept. 

When you first enter 'Inside' the cover of a diary appears, when hovering over the cover the words 'open the diary' pop-up. Clicking on the cover causes the diary opens and you can then start reading the contents. The diary entries start on September 13 and on each page there is a short text extract describing what the owner has dreamt about that night. On some pages there are words highlighted in black, when you click on these words videos appear and engulf the whole screen, these links literally take the audience into the dream and the only way you can get out of these videos is if you click a link saying 'wake me up'. I really like the use of video within this piece and I think the visual style is very striking, the use of minimal colour makes the story dark, mysterious and very eerie. The structure of Inside is very linear, you either have the option to go 'next' or 'back', within my story I want the option for the audience to click on any diary entry they like, I want my structure to be non-linear. My piece will also differ to Inside as I want to include more content & and interactive options, within my story I want to include elements such as images and stop-motion animation and not just rely on text and video to tell the story like Inside has.

Research: Graphic Novels

I have done some research into graphic novels as I felt it would be beneficial to look at different visual styles to help influence and develop my own narrative.

The Dementia Diaries: Matthew Snyman

This book by Matthew Synman talks about young people and Dementia. It was wrriten to change peoples' understanding of Dementia and the raise awereness.

The Synposis: "This book follows four young people dealing with dementia in their grandparents, we follow their diaries as they hear of the diagnosis, all the way through to the end. The book looks at dementia from the perspective of a young person, and as such is full of hope and fun and deep understanding."

This graphic novel is set out in a diary format, each page tells you who's diary it is and the time and date. The typography within the book simulates a hand-written style and on each diary entry little hand-written drawings/doodles are displayed. On some pages images and pictures look to be 'stuck' on with sellotape, simulating a real diary. I really like the typography within this graphic novel and want to use a similar style within my own narrative peice.

Father Thames: Robin Price

This book by Robin Price is half book, half graphic novel, it is laid out in normal book format but after every paragraph or so images are displayed to help the audience understand what's going on.

The synopsis: "Rebellious teen Jemima Mallard has done the unthinkable. She’s joined the Youth Police Department. Is she serious, or is she spying for the criminal Father Thames? Fellow YPD officer Nick Mallard isn’t sure. Before he can test her loyalty, the two must go to war. Their city is under attack. From the Thames Barrier Reef to the Sink estates, strange ships have breached the defences. London hasn’t seen anything like these raiders – adults and kids sailing and working together."

I really like the visual style of this book, the illustrations are simple but effective. The drawings are all cartoons and often the same images are used again, just in a different format (zoomed in, mirrored, etc.). I feel that the drawings do add to the story and allow the user to visualise what's going on in the story. Within my narrative story I will be using a few manipulated images as well as text just like this graphic novel.

"The Power of Fire" (Raven's Gate): Anthony Horowitz

The power of fire by Anthony Hororwitz is part of the series Raven's Gate.

The synopsis: "Sent to Yorkshire on a rehabilitation programme, Matt finds himself in the midst of a conspiracy of witchcraft and murder. The Old Ones – monstrous godlike beings once banished from our world – are trying to return. Matt is about to discover that he alone stands between the forces of evil and the annihilation of humanity... Featuring striking, high-contrast black-and-white art, this distinctive graphic novel captures the brooding atmosphere of the bestselling book."

This novel uses pictures and text in speech bubbles to tell the story. The images within this book are very striking and displayed in a very easy-to-read and understand format, within my narrative piece I need to think about the format of my text/images and ensure that the layout is easy for audiences to grasp and follow.

 

Show More

Show Less

Planning the idea

My narrative piece starts with a stop-motion video of an unknown figure finding a diary under a tree in a field, the piece then zooms into the diary and the user will be able to click through the different pages and discover who the diary belongs to. When the user has finished looking through the diary another stop-motion video will be available to watch, this video is of the unknown character then putting back the diary and walking away. I want the opening and ending sequences to be left to audience interpretation, who is this character? is she just a spectator reading the diary or is there more to it?

Diary
Inside the diary will be 13 explorable pages, these pages will make-up a month of Joy's life. Each page will include some type of interactive content and a short text extract.

Diary Page Content
3rd March 2014
Silhouetted image of a tree (characters favourite location), black and white outline of birds. Lyrics of a poem which will the user will be able to click back and forward. Sound of birds.

5th March 2014
Photograph of Joy. In the background when hovered over the word 'safe' will display.
Text: *Hi Diary, I'm Joy. You are my safe place*

8th March 2014
Image of a canvas & paint brushes. I will also make a paintbrush follow the users mouse.
Text: *Today I spent all day drawing*

9th March 2014
This page is where people in Joy's life are introduced. On this page will be her best-friend and two girls who bully her. When the user scrolls over the photographs of the girls they will be able to read some background about who they are.

12th March 2014
Image of a computer, when clicked a link will externally take the user to a bullying website. Also on this page will be a short animation of Joy and the words 'alone' 'scared' and 'upset'.
Text: *Mum doesn't understand, she thinks I'm overreacting* Implying that Joy feels all alone and has no support in her life.

18th March 2014
Text: *Sorry diary. I haven't written in so long. Last week was hard.*
Animations & sound of storm.

20th March 2014
Text: *This is my favourite place in the world, away from all the danger*
Landscape photo of field/tree. Images of clouds / butterflies which the user can click and move around on the page.

21st March 2014
Text: *I wish Louise was still my best friend*
Slide show images of Joy & Louise when they were friends. Image of a forget-me-not flower for symbolism.

22nd March 2014
Text: *I don't know how much more of this I can take*
Image of Joy looking sad underneath three birds, when clicked these birds disappear and the text/image is displayed.

23rd March 2014
Text: *Today I saw the most beautiful butterfly*
Animation of butterfly flying on screen. Sound of butterfly flittering.

25th March 2014
Text: *I think its telling me not to give up*
Butterfly follows users path, animation of rain.

28th March 2014
Text: *I think its telling me not to give up*
Image of tree / landscape again, but instead of scary birds its butterflies. Silthoutte of Joy looking happier. Butterfly still follows users path.

29th March 2014
Text: *I'm trying not to lose hope, you never know what tomorrow will bring*
Animation of rainbow, the only colour the user will see in the story. Symbolising hope.

Character Profile

Joy Victoria Johnson

Nickname: JJ
Age: 15
Birthday: 20th June
Location: Derngate, Northamptonshire
Favourite Place: A quiet park/grass area near her house, she writes her diary here under a huge tree.
Personality: Quite shy, keeps a lot of things bottled up, uses her diary as a form of escapism
Appearance: Long light brown hair which she normally straightens everyday, Glasses (short sighted), Pale, Dark brown eyes, 5'4, Average weight
Hobbies: Enjoys reading, listening to pop music, she also used to be on the Hockey team but left because of the bullying from the other girls and she is very good at drawing. She likes to draw landscape pictures the most, she draws in coloured pencils
Diary: She uses her diary as a form of story-telling. Its a thick grey book which has a hard cover with her initials in silver in the bottom right. She keeps it under her bed and writes in it here and there, mostly when she's had a tough day. Nobody knows about her diary, she keeps it a secret
Ambitions: When she leaves school she wants to become an artist
Habits: She chews her hair when she's nervous
Favourite book: The Hunger Games, she aspires to be like the lead character, strong and unafraid
Favourite Music Artist: Katy Perry, her favourite song is Roar. She likes Katy Perry as she thinks she's beautiful and wants to look like her
Favourite Colour: Light Blue, reminds her of the sky/freedom
Favourite Food: Pizza
Favourite Time of Day: Early morning, sunrise
Favourite Memory: Her family holiday to Devon, just before her parents split up
Three things she would take to a desert island: Her diary, A never-ending pen and coloured pencils
Parents: Rachel Johnson (Mother, 43, works as a Nurse), Mark Johnson (Father, 46, works as a business manager). They have been divorced for five years, they split up because they just fell out of love. JJ was hurt about the separation and still is effected by it as she never sees her dad anymore
Siblings: One older brother named Connor, 19 who studies sport science at Bath university
Relationship with family: She cares about her mother a lot but never shows affection towards her. She never see's her father and isn't close with her brother who moved away to university as she barely sees him anymore either
Pets: One black & white cat named Fleur
Best Friend: Louise Chapman, also 15, met at school. Lousie Chapman has naturally blonde hair and green eyes. JJ has always been jealous of her appearance and wishes she looked more like Louise.
Room: Her room at home is painted her favourite colour, with white furniture and minimal belongings Her favourite part of her room is her easel which faces the window
School: Public School, Abbeyfield Grove, Northamptonshire
School Life: Joy suffered minor bullying for her looks when she was younger, the bullying got more intense when she fell out with her best friend Louise, who joined in with the bullies
Bullies: Carla Philips & Chelsea Knowler. They spread rumours about Joy & laugh at her 'geeky' appearance. All the bullies share a similar appearance, they all have dyed blonde hair and blue eyes, they wear lots of make-up
Favourite Subject: Art
Worst Subject: Maths
Things she wish she could say if she had the guts: She wishes she could stand up to the bullies
If she had three wishes they would be: For her parents to get back together, for the bullying to stop and for a better relationship with her brother

Character Moodboard

Project Description

My project idea is to create an interactive narrative piece that focuses on telling the story of a troubled teenaged girl. The way I want to tell my story is in the form of day-by-day interactive diary, the user will be able to look through and explore this diary by clicking, swiping and scrolling through various interactive options. The piece itself will contain video, images, sounds and text that will all help to tell the story of Joy Johnson.