The assignment file is attached below. It is called Scrolling Timeline Illustration_01.fla. This is an Adobe Animate File. When it is published it creates an HTML5 webpage with a supporting JS file. It also exports a folder of images.
What did you want students to be able to do by completing this assignment?
Expand our idea of illustration and storytelling to an interactive space and create a short interactive story using Adobe Photoshop and Adobe Animate.
Work with rough sketches and ideas before the final illustrations are complete to see what the affordances are in the interactive space.
Practice developing illustrated components in isolation from each other.
Learn how to research a client and justify design choices based on the client.
Practice integrating text and pictorial illustrations.
Learn how to develop storyboards for interaction design.
Technology-Dependent Learning Outcomes
Was there anything this assignment taught students that you felt they wouldn't have been able to learn through other types of class assignments?
One of the interesting outcomes from this project is the idea that working on an interactive (game-like) project is very different from a linear project. Interactive spaces are storyboarded, designed, and built in different ways.
Because of the way this project’s platform is built, the students needed to work with rough ideas and sketches in the interactive environment if they want to experiment and discover some of the affordances of this interactive space.
Skill Level
What is the course title and level?
Design Studio - Second Semester Sophomore Art and Design Majors
What kinds of prior knowledge is necessary to complete this assignment? How do students gain this knowledge?
The students need to have experience illustrating in a digital application (like Adobe Photoshop) or scanning work and manipulating it digitally.
I have used this platform with students in two studios. Both times the students were studio majors in art+design. While it is clear that being an art and design major was helpful to the students, I do not think that it is necessary.
The steps of the project start from a simple place:
Take the 6 word novel and break the story into three moments.
Do a rough illustration of each moment.
Look at the moments and break them into visual layers. What is in the extreme foreground, foreground, middle ground, and background?
Finally, still in rough form, connect the three moments together with some interstitial moments on each layer.
The illustrations can be finalized here on their four layers, or the professor could consider opening up the option to add animation or even sound.
Assignment Description
Objective
To expand our idea of illustration and storytelling to an interactive space and to introduce the idea of working for a client.
Discussion
“We'll be brief: Hemingway once wrote a story in just six words ("For sale: baby shoes, never worn.") and he is said to have called it his best work. So, we asked sci-fi, fantasy, and horror writers from the realms of books, TV, movies, and games to take a shot themselves. Dozens of our favorite auteurs put their words to paper…. Sure, Arthur C. Clarke refused to trim his ("God said, 'Cancel Program GENESIS.' The universe ceased to exist."), but the rest are concise masterpieces.”1
The 6-word novel is a very, very short story, but it is still a story with a beginning, middle, and end. One could also think of it as in narrative terms: ordinary world, rising actions and climax, and a resolution.
The story of the first 6-word novel being written by Hemingway is an urban legend, but the pieces of fiction that this legend has inspired are wonderful to read, consider, and work with.
Take the your selected very short novel and illustrate it in three moments (or more) that are connected together in a multi-layer timeline. This illustrated story timeline will be interactive, so you will need to consider the moment, how the moments are connected, and what happens to the storytelling when you let the viewer control the timeline (they can go forward and backward any point and at their own pace).
Take a look at the following interactive timeline examples from Google Doodle:
The illustrated timeline walks the viewer/user through the story. Or should we say that the viewer walks through your illustrated timeline? You have three or more moments to work with and the added benefit of parallax, as well as information between the moments to add to the story or to transition between moments.
You can work in any program that you like to develop the illustrations: Adobe Photoshop, Adobe Illustrator, Clip Studio, etc. You can even develop them by traditionally and scan them. Once the images are put together on their separate layers they should exported as PNGs with background transparency. The images are then imported into the Animate template and published from there. All of the code is built into the Animate template.
The results can be shared on the web. The final published file builds a folder structure with an HTML and JS file at the top and three possible folders in support of those files: images, sound, and libraries. Sharing them on the web gives everyone the chance to go through the stories at their own pace.
It is also possible to just share them on a single computer.
Time Needed
How much time did you allot to this project?
3 weeks.
This project was completed over a course of several weeks:
Week 1: Choose a 6-Word Novel and do some research on the author. Then come up with some initial ideas.
Week 2: Work out some rough ideas and put those rough ideas into the working template and see how they play out.
Week 3: Complete a single moment of the illustration in the style that you have pitched.
Week 4: Complete the illustrations and put them into the Project Platform in Animate to publish.
Class time was mostly spent giving one-on-one feedback and doing small group critiques. Students worked during this time too. A large part of the work was done as homework.
Support & Training
What kinds of support or training did you provide to help students learn to use new techniques or specialized tools?
A understanding of illustrating in layers and working with text is important for this project. Students already understood these concepts when we started the project. However, I had to give them some pointers when it came to illustrating for an interactive project. In painting or making a static illustration you do not need to consider what happens when the camera moves. There is only one point to view the illustration from, so if you cannot see it, you do not need to create it.
When the camera moves, when there is parallax, or there is a moving camera like in a game, then the whole asset needs to be created. In this case, just because there is something that is not visible in the scene’s first moment does not mean that we will not be able to see it when moving from moment one to moment two. So we need to paint in everything that we want the viewer to see.
Resources
Did you need any specialized equipment, tools, or human resources to make this assignment feasible? If so, please describe.
The students need access to Adobe Animate. There is a Project Platform for the students to use. The students need to know very little about animated to make their project come to life. All of the code is already built into the platform.
There are three video tutorials that I have created. The first helps students make a working timeline quickly and easily. The second goes a little deeper and addresses how to include animation. The third talks about the code base.
The students were assessed on their process, how they engaged with the each of the steps of the process, and the creativity of their final design.
Rubric
Initial Ideas and Research - 20% Rough Storyboards - 20% Rough Interaction - 20% Complete a single interaction with Final Art - 10% Final Work - 30%
I provided feedback to each of the students individually at each stage of the process and through group final critique.
Students who had prior digital painting and illustrating experience and experience with Adobe Animate were able to take the project further. For instance, students that were well versed in illustration explored ambient animation, and students with some coding or Adobe Animate experience changed or built other interactions in the template. One student changed the scroll from horizontal to vertical, because their story was about sinking, and another added a layer of hunting for objects into each of the moments.
Adding animation or more complex interaction into the project did not factor into the final grade. Most of the grading structure is focused on how much they engaged in the process. The final work grade (30%) was based on how far a student pushed themselves.
Challenges & Opportunities
If you assigned this project again, would you change anything? If so, what?
I would model how to work through the whole process with an example. The example would be something very rough, but it would help to show the importance of the process.
The most difficult thing for students is to take the illustrated moments and break it apart into layers that do not line up in Photoshop. Because of the parallax, the foreground needs to move faster than the background when moving from moment to moment, only the first moment lines up when the illustrations are broken into layers. This complication can be addressed by modeling the whole process.
Describe any trouble spots or complications someone else might want to be aware of before trying a similar assignment in a course of their own.
When most students think of illustration, they tend to think of classical children's book illustration or something from a comic or graphic novel. Sharing lots of examples of other more experimental illustration styles made the project more interesting and exciting on a class level. The styles gave students “permission” to use photography and be more experimental in their approach.
Creative Commons Attribution 4.0 International License (CC-BY 4.0)