This document describes the process an artist went through to develop an interactive digital story called "The Light Princess" using parallax scrolling techniques. The artist started with ideas like interactive postcards and a science fiction story set in cyberspace before settling on retelling the fairytale "The Light Princess" using digital paintings and parallax layers. The artist worked through technical problems of constraining the parallax images and completed several storyboard pages, but noted there was more artwork and refinement needed to finish the 10-page story. Potential next steps mentioned were connecting other fairytales or redesigning the webpage presentation.

1. The Light Princess
Process Work, Practice,
and Discovery

2. Ideas – Starting the Process
• Thinking about
Choose Your Own
Adventure
• Started with the Idea
of Postcards
– This picture started
my ideas
What’s more adventurous than an Adventure?
From http://memorelli.wordpress.com/
2011/05/09/true-to-content-context/

3. Idea Forming – Writing it Down
• Clicking on words in the postcard would lead to images.
• Clicking on names of places would take you to another
postcard, clicking on people names would take you to a
photograph/illustration
• I decided a fantasy story would be more interesting.

4. Idea Forming – Fantasy Inspiration
• Idea based off of
Frankenstein, but set
in space instead of in
the Arctic.
• I’ve done Space
themed work before
and wanted to do
something new

5. Idea Forming - Cyberspace
• Problems in
Cyberspace
• A scientist goes into
cyberspace to rescue
the Princess Helvetica
• All characters were
going to be named
after computer things

6. Idea Forming - Cyberspace
• Decided to have
Easter Egg words and
have everything
change as you click on
new things
• It got too complicated
– too fast, but led me
to my next idea

7. Idea Forming – Change It!
• Use a very simple story line, with up to 5 images
• Change a single thing in that story line and
change the whole story
• For instance -> Change a simple potted plant into
a monster plant. The ending changes to everyone
being eaten.

8. Idea Forming – Change It!

9. Idea Forming – Fairytale Change It
• I couldn’t come up
with a simple enough
story.
• I asked myself if there
were simple stories
that I could take and
piece together
• My mind landed on
Fairytales
• But piecing together
Fairytales got very
complicated – very
quickly

10. Idea Forming – Fairytale Change It

11. Idea Forming - Parallax
• The new idea was to
focus on one fairytale
and work with new
and interesting ideas
of javascript
• I designed the layout
of the page

12. Idea Forming – The Light Princess
• And I chose the story
“The Light Princess”
as my Fairytale
• I sketched out the
story and picked the
storyboards I liked
• I ended up with 10
story boards to create
with parallax

13. Idea Forming –
The Light
Princess

14. Starting the Imagery
• Digital Painting was
first
• I had a style in mind
before starting
• I’ve been digitally
painting for about 6
years with my tablet
• Painted in Photoshop

15. Creating Layers for Parallax
• Parallax requires
layers so I turned
on/off the layers
that I needed
before saving each
as a png file

16. Initial Problems in Parallax
• There were 2
problems that I could
not figure out with
parallax
• The first was getting
the files larger than
the window so that
the edges didn’t show
in the browser

17. Initial Problems in Parallax
• The other problem was keeping
the imagery constrained within
the window properly regardless
of window width/height

18. Constraining Parallax to a Box
• The magic of jparallax!

19. Making it Work
• Finally making it work
the way I want it to

20. Finishing up the Artwork
• 10 pages is a lot of
work…

22. Where Next?
• Connecting other fairytales would be an
interesting option
• I want to finish up all 10 pages of Artwork
• I want to redesign the way the pages look
– Adding borders, a title page, changing the colors of the
webpage, etc.
• I’d also love to go back to my previous ideas and
explore those