Project 6

Digital narratives

Project 6-Digital_Narratives.pdf

Timing: 20 to 28 hours

Project overview

In this project, students use Adobe Flash Professional CS6 to create a digital narrative for an existing website about a school club or sports team. Students discover how to use techniques in Flash to create various film effects and then apply those techniques to building a narrative. Students learn how rich media and animation they can create with Flash improves digital communication. They develop Flash skills through projects focused on a variety of filmmaking techniques and then apply those skills to planning and building a digital narrative.
The focus of this project is using interaction and animation for communication, taking a deeper look at audience and audience needs, and using Flash to enhance a visitor’s experience by using digital narratives.

Student product: Digital narrative

Note: Portions of the Digital narratives project align to the Adobe Certified Associate, Rich Media Communication objectives. Within the instruction steps and technical guides, the specific learning objectives for the exam are referenced with the following format: 1.1

Project objectives

At the completion of the project, students will have developed the following skills:

Project management skills

• Defining purpose, goal, and audience
• Assigning team roles and tasks
• Defining and prioritizing tasks
• Following a project plan
• Understanding roles and assigning roles and tasks
• Determining functional requirements of application
• Designing for a client
• Following up and following through on roles

Design skills

• Designing a custom experience
• Designing for audience(s)
• Providing multiple design ideas
• Applying principles of graphic design
• Developing thorough and accurate storyboards
• Designing for accessibility
• Creating designs that meet client requirements
• Synthesizing and displaying complex information
• Making sketches for interactive experiences

Research and communication skills

• Researching examples of rich media
• Understanding the role and purpose of digital narratives
• Analyzing effective use of digital narratives
• Creating a project plan
• Writing scripts for a digital narrative
• Conducting a review and redesign cycle
• Communicating with peers
• Researching audience and appropriate sites
• Using Flash effectively
• Connecting goals with user interaction

© 2012 Adobe Systems Incorporated Digital narratives 1

Technical skills

Flash

• Importing and compressing audio
• Optimizing file size
• Producing Flash video
• Working with text and text effects
• Using drawing tools
• Organizing layers and libraries
• Working with layers
• Working with bitmaps
• Publishing and testing movies
• Using animation methods
• Creating accessible Flash content
• Saving and using motion presets

Fireworks

• Creating a wireframe
• Creating design comps

Project materials

• Adobe Flash Professional CS6 installed on all machines
• Adobe Fireworks CS6 installed on all machines
• Worksheet: Examples of effects
• Presentation: Web project production phases
• Guide: Principles and rules of copyright
• Worksheet: Client interview
• Worksheet: Project plan
• Worksheet: Design document
• Worksheet: Digital narrative analysis and scripting
• Presentation: Introduction to design principles
• Presentation: Introduction to page design principles
• Guide: Design principles for Flash content
• Worksheet: Narrative summary and storyboard
• Electronic file: sf_fog.fla
• Electronic file: sf_fog.swf
• Fireworks guide: How to create a wireframe
• Fireworks guide: How to create a design comp
• Flash guide: How to maintain consistency
• Flash guide: How to organize content
• Flash guide: How to optimize Flash content
• Flash guide: How to import sound
• Flash guide: How to import images
• Flash guide: How to produce Flash video for the web
• Flash guide: How to apply colors and gradients
• Flash guide: How to work with text
• Flash guide: How to use filmmaking techniques
• Flash guide: How to create visual effects
• Flash guide: How to create transitions with motion tweens
• Flash guide: How to use a motion guide with a motion tween animation
• Electronic file: bounce_example.fla
• Electronic file: pan-zoom_example.fla
• Electronic file: fade_example.fla
• Flash guide: How to create animations
• Flash guide: How to ease tweens
• Flash guide: How to make Flash content accessible
• Flash guide: How to test a Flash project
• Worksheet: How to evaluate a digital narrative
• Flash guide: How to publish a Flash document

Background preparation resources

Technical and content information
Key terms
ISTE NETS*S Standard for Students
Adobe Certified Associate, Rich Media Communication objectives

2 Digital narratives © 2012 Adobe Systems Incorporated

Project steps

1. Introduce students to the goals of the project:

• Learn about digital stories, narratives, and filmmaking techniques.
• Learn and apply design principles for Flash.
• Work with and design for a client.
• Build a home page and one or two content pages of an accessible, Flash-enabled, rich media website that tells a story or narrative of the client.
• Publish a Flash website.
2. Discuss how Flash allows designers and developers to deliver filmmaking and traditional animation techniques over the web by offering media-rich effects and animation with support for video and audio content, smaller file sizes, and easier authoring.1.2 Questions to guide the discussion around these effects might include the following:
• How do filmmaking and animation techniques enhance a website?
• Why might the developer have used Flash instead of HTML?

3. Introduce the concept of digital stories and narratives. Explain that a digital narrative is usually a short narrative created by combining still and moving images and music or other sounds. You might look at several types of online narratives: documentaries, personal opinions, cartoons, and animations. You might also look at non-web narratives such as commercials. As you view the examples, focus on how digital narratives usually have one or two types of actions: the content moves or movement within the content and instances when users must perform an action to access the content. Some places to find online narratives:

• Computer History Museum’s website tells the story of the 2000-year history of computing in both linear and nonlinear ways: www.computerhistory.org/revolution/
• Waterlife is a preview for a documentary film similar to the cinematography and storytelling from the film. Especially interesting are the navigations, which mimic the motion of water: http://waterlife.nfb.ca/
• We Choose The Moon was designed to celebrate the fortieth anniversary of the Apollo 11 Lunar landing by developing an interactive re-creation of the event: www.wechoosethemoon.org/
• Arizona State University and the Institute of Human Origins created this documentary:
www.becominghuman.org/node/interactive-documentary

4. Ask students to analyze and discuss each narrative you present. You might structure their analysis with the following questions:

• What type of narrative is it (such as documentary, cartoon, or personal opinion)? Describe how the words and visuals are used to make it this type of narrative.
• What is the primary audience? Describe how the words and visuals target this specific audience.1.1
• How relevant is the narrative content to the overall purpose of the site? 1.1, 1.2
• What is the message of the narrative? (Summarize in one sentence.)
• How long is the narrative piece? Does it seem too long for the amount of visual action? Does it seem too short? Why or why not?
• How does the narrative meet the site purpose, address the target audience, and enhance the overall goals of the site? 1.1, 1.2

© 2012 Adobe Systems Incorporated Digital narratives 3

5. As you present the example narratives, point out some of the following: 2.1

• Including effective audio and video
• Showing continuity and transitions
• Indicating multiple-levels of information in transitions
• Illustrating change over time
• Getting layers of information from one area of the screen
• Enriching graphics
• Visualizing three-dimensional structures
• Attracting attention
• Creating interaction

6. Finally, discuss the sites the students viewed that used filmmaking techniques such as transition and visual effects. Explain that certain filmmaking techniques can be incorporated into classic, motion, shape, and text tweens to enhance the narrative capabilities of Flash. 4.10 Discuss the following as a class; then ask pairs of students to review the sites you showed and complete the Examples of effects worksheet to understand how filmmaking techniques enhance websites:

• Pan, tilt, and zoom effect: Moving the camera horizontally across a scene is called a pan. Moving the camera up or down across a scene is called a tilt. Moving the camera away from or toward a subject in a scene is called a zoom.
• Camera angles: The rule of thirds and adjusting the viewing angle can help emphasize a certain aspect of the subject.
• Cross fades: A transitional effect for moving from one image to another. With this technique, one image appears to fade in while another fades out. Another version of the cross fade is a color fade: dissolving between multiple color instances of the same object.
• Bounce effect: A moving object rebounds before stopping. This technique grabs attention and can focus the visitor on an area of the screen.
• Transitions: Multiple techniques (such as flipping, fading, and color fading) used to move from one section of a digital narrative to another.

Worksheet: Examples of effects

Defining a digital narrative

(Suggested time: 100–150 minutes)

7. Introduce your students to the design and development process, and briefly discuss and define the phases of a web project:

• Defining the project
• Structuring the narrative
• Designing the narrative
• Building and testing the narrative
• Publishing or launching the narrative

Presentation: Web product production phases 1.5

Note: Be sure to discuss common problems and issues in project management, such as scope creep (when the project gets bigger than originally planned) and overly ambitious design plans within time constraints.1.5

4 Digital narratives © 2012 Adobe Systems Incorporated

8. Have a class discussion to identify criteria for deciding if content should be implemented by using rich media.2.1, 4.1 Discuss using Flash video and how to introduce it into the project. Review copyright considerations when using video and images in the project.

Guide: Principles and rules of copyright 1.4

9. Break students into teams and discuss ways to select an element for which they might create a narrative. Explain that they will look at their client’s site and identify two or three ways they can incorporate a digital narrative. As they conduct their review, ask them to take notes summarizing the client’s audience, purpose, and goals. 1.1 Additionally, suggest that they find sections of a website for which a narrative would enhance the visitor’s experience on that site, such as:

• Giving the history of a client
• Presenting an opinion on a specific issue related to the site
• Promoting an event or product described on the site
• Providing a visual explanation of a particularly complex topic mentioned on the site
• Entertaining site visitors as they look for information on the site
• Educating or training site visitors

Note: You may wish to have a selection of clients who work well with this exercise. Students will benefit from having clients with websites where a digital narrative could be included in a way that aligns with the design principles for Flash content.

10. Allow students time to come up with two or three ideas from the previous list with rationales for each idea. Ask them to prepare their ideas so they can present them to their clients.1.6

11. Ask students to interview their clients, specifically asking them how they would like to use rich media.

Remind students that in addition to interviewing, they will present their digital narrative ideas and rationales and agree with the client on the type of digital narrative to create.

Worksheet: Client interview 1.6

Structuring a digital narrative

(Suggested time: 50–100 minutes)

12. Once the client interview has been completed and they have their approved approach, ask students to create a project plan and design a solution document. Explain to students that there is a section of the design solution document for flowcharts but they will fill in that part when they learn about flowcharts later in the project.

Worksheet: Project plan 1.5

Worksheet: Design document 1.5, 2.4

13. Ask students to write a short narrative for their client websites, indicating the goals, audience, and message of the narrative, the length of time it will take to view the narrative, and the delivery requirements for the narrative (such as download speed, screen resolution, and Internet connection speed).4.1 You might present the following criteria to help contain the project:
• The audio recording for the narrative does not exceed 45 seconds.
• The length of the movie does not exceed one minute.

© 2012 Adobe Systems Incorporated Digital narratives 5

• The number of written and spoken words is not more than 50.
• The narrative contains at least one transition effect.
• The narrative contains at least one filmmaking technique.
• The narrative contains no more than five different filmmaking and transition techniques.
You might also suggest that students consider using one of the techniques they learned in Project 5, such as creating masks or path animations.

Worksheet: Digital narrative analysis and scripting

Designing a digital narrative

(Suggested time: 450–550 minutes)

14. Review design principles and page design principles and introduce design principles specifically for creating Flash content, specifically how the user and technical requirements can impact a design.

Presentation: Introduction to design principles 2.2

Presentation: Introduction to page design principles 2.2

Guide: Design principles for Flash content 1.1, 1.2, 4.1

15. Introduce animation storyboards and flowcharts by showing students examples of storyboards used to create cartoons, films, or other narratives. 2.4 You might highlight the following ideas:

• Flowcharts describe the overall information architecture or flow of the movie, and storyboards are detailed versions of the flowchart.
• Storyboards do not need great drawings, just rough sketches to visually represent the scenes.
• Although detailed drawings are not necessary in these storyboards, they all contain detailed descriptions of animations, interactions (such as dialog boxes), and sounds.
• Flash storyboards are similar to cartoon animation storyboards but give details about text, images (drawn and imported), video, audio, and effects (such as fading, color changing, rotation, and zooming).
• Designers make storyboards for each section of a narrative. Sections occur when there is a logical break or transition in the script (when a new image is displayed or an action happens). Often you create a storyboard for another designer or programmer; keep this in mind when you decide what level of detail to include in your instructions.
16. Go through the narrative summary and storyboard elements while highlighting and explaining these elements in a completed summary and storyboard. (You could use sf_fog.swf to show students a produced version of the narrative that is illustrated in the Narrative summary and storyboard worksheet.)

Narrative summary elements:

• Flowchart
• General movie settings
◦ Main project folder, together with image, video, and audio subfolders
◦ Frame rate, background color, and movie dimensions

Storyboard elements:

6 Digital narratives © 2012 Adobe Systems Incorporated

• Sketches of each section, indicating objects or images and their placement on the Stage at the beginning of the section (initial state) and at the end of the section (final state)
• Section descriptions for both the initial state and the final state of the section
◦ Displayed text
◦ Description of images drawn in Flash
◦ Filenames for imported images, video clips, and sounds
◦ Description of imported images
◦ Text of any voice recording
◦ Any other general color or setting descriptions for the section, such as background, transparency, or object size
• Transition description
◦ Description of any effects (such as fading, movement, or color change) that can be created with text effects, motion tweens, classic tweens, or shape tweens

Worksheet: Narrative summary and storyboard 2.4

Electronic file: sf_fog.fla

Electronic file: sf_fog.swf

17. Ask students to create digital narrative flowcharts (reminding them to use their design documents) and storyboards based on their scripts, using the worksheet.2.4 Some items for students to keep in mind as they build their flowcharts and storyboards include the following:
• The narrative look and feel should be consistent with the site into which it will be placed.2.2
• The narrative should exemplify effective design principles.2.2
• Elements included in the narrative should be accessible. Discuss why accessibility is important to website sponsors as well as site visitors. Identify elements of a SWF file that can be read by screen readers.1.3, 2.3
• Text should be formatted to enhance readability. Discuss minimum font sizes, use of screen fonts, when to use serif and sans serif fonts, use of font color, use of alignment and text placement, line spacing, and indentation.2.3
• The delivery requirements should influence the rich media elements related to the narrative
(colors, Stage size, accessibility features, file size, use of audio or video).4.1

18. Using their narratives, flowcharts, and storyboards, ask students to create wireframes and design comps of the various screens of their digital narratives. You can give the students the choice of hand- drawing them or producing them in Fireworks.

Fireworks guide: How to create a wireframe

Fireworks guide: How to create a design comp

19. Ask students to prepare a presentation for the client showcasing their narrative summary and storyboard, wireframes, and design comps. Remind them to take notes of their client meeting, especially requested changes. Ask each team to get approval for color and font samples, layout, and navigation designs. The presentation could include the following:1.6

• Introduction that highlights how the narrative meets the site’s goals and audience
• Narrative summary and storyboard

© 2012 Adobe Systems Incorporated Digital narratives 7

• Wireframes and design comps of the home page and content pages
• Question-and-answer session in which the client gives feedback

20. Ask students to make changes in the design document that reflect the understanding reached with the client.

Building a digital narrative

(Suggested time: 400–500 minutes)

21. Explain they will now create a homepage and one or two content pages based on the narrative summary and storyboard, wireframe, and design comps. Discuss how to design rich media with consistency.

Flash guide: How to maintain consistency 2.1

Flash guide: How to organize content 2.5, 3.3, 4.7, 4.10

22. Ask students to collect or develop assets for their narratives.

• Record audio if there is to be a spoken narrative.
• Gather images, sound loops, and video.

23. Before teams begin production, review optimal asset use and file management in Flash. Techniques include the following:

• Optimize images in Fireworks before importing them into Flash. This step reduces image file size before creating effects in Flash.
• Apply appropriate audio compression settings to the document.
• Name layers and organize layers into folders.
• Organize items such as buttons, graphics, movie clips, and imported images into folders in the
Library.
• Label frames to organize sections of the document.
• Set appropriate JPEG quality when publishing.

Flash guide: How to optimize Flash content 3.8, 4.14

24. To help the teams prepare to build their digital narratives in Flash, demonstrate the following: importing images, importing sound, producing Flash videos for the web, the benefits of making FLV files for Adobe AIR.

Flash guide: How to import sound 4.12

Flash guide: How to import images 4.3

Flash guide: How to produce Flash video for the web 3.7, 4.13

25. Introduce the Text Layout Framework (TLF) in Flash and show how students can use this robust text engine to work with complex text. Demonstrate some of the features for working with text, such as adjusting leading and tracking, applying anti-aliasing, and managing multicolumn text flow with TLF text. Briefly demonstrate how students can use graphic filters to create text effects.

Flash guide: How to work with text 4.4, 4.5

8 Digital narratives © 2012 Adobe Systems Incorporated

Note: If students are preparing for the Rich Media Communication certification exam, take time to outline the extensive feature set of the Text Layout Framework. Features to explain include using multilingual typography, right-to-left scripts, using XML to dynamically style text, using the rich typographic controls (ligatures, typographic case, digit case, digit width, advanced kerning, tracking, leading, super- and subscript, discretionary hyphens, hypertext, and baseline shift), using threaded text

blocks, inline graphics, support for tabs, and embedded font support.4.4

26. Refer to the sites the students viewed earlier and remind them that certain filmmaking techniques can be incorporated into classic, motion, shape, and text tweens to enhance the narrative capabilities of Flash. Discuss the differences between the classic and motion tweening methods and explain why classic tweening is advantageous for certain animations. Using the “I do, we do, you do” method and the electronic files, demonstrate the following:

• Pan, tilt, and zoom effect
• Camera angles
• Cross fades
• Bounce effect
• Transitions
• Using classic tweens to create a filmmaking technique

Flash guide: How to use filmmaking techniques 4.10

Flash guide: How to create visual effects 4.2, 4.6, 4.8

Flash guide: How to create transitions with motion tweens 3.6, 4.10

Flash guide: How to use a motion guide with a motion tween animation 4.10

Flash guide: How to create animations 3.6, 4.10

Flash guide: How to ease tweens 4.10

Electronic file: bounce_example.fla Electronic file: pan-zoom_example.fla Electronic file: fade_example.fla

27. Discuss the use of motion presets to save and reuse animations. Discuss the benefits of saving custom animations and being able to reuse them by easily applying them to objects. Demonstrate how to save and apply a motion preset.2.1, 4.10

28. You might highlight some technical aspects of Flash you are asking students to use when creating the effects:

• Frame rate and how it affects playback, timing, and published movie size 3.3
• Frame labels and the benefits of using them when transitioning to a new scene 4.10

29. Review accessibility and discuss how to make Flash content accessible. Discuss the following:

• Importance of including accessible content in rich media elements 1.3
• Elements of a SWF that can be read by screen readers, such as alternative text on images and buttons 1.3, 2.3

© 2012 Adobe Systems Incorporated Digital narratives 9

• Accessibility requirements when producing rich media: 1.3, 2.3
◦ Creating text equivalent for graphic elements
◦ Enabling user control over reading order of Flash content
◦ Captioning audio content
◦ Making looping elements inaccessible
◦ Allowing users to control motion
◦ Enabling keyboard access for all controls
◦ Enabling tabbing

Flash guide: How to make Flash content accessible 1.3, 2.3, 4.15

30. Allow time for your students to build their digital narratives, reminding them of the project constraints and the requirement to only build a home page and one or two content pages. Discuss the following steps as a guide to their production process:

• Set up the document.
◦ Create a new document in Flash and set document properties.3.4
◦ Import images, audio, and video.4.3, 4.12, 4.13
◦ Organize the Library.2.5, 4.7
◦ Save the document file.
• Build the narrative. (These steps are not sequential but provide a checklist of tasks to complete, as indicated on the storyboard.)
◦ Create new assets, such as drawings and text. Format text to enhance readability. 2.3, 4.2
◦ Convert objects to symbols as appropriate. 4.6
◦ Create layers for different elements and organize the layers into folders. (Usually a good idea is to get all elements into the Flash document and then go back and animate them.) 3.3
◦ Set audio compression options. 4.14
◦ Insert and label keyframes at appropriate points in the narrative, including the beginning of each section. 4.10
◦ Add effects. 4.10
◦ Make the content accessible. 4.15

Note: You may want to tell your students to use additional technical guides from Project 5 to help them build their digital narratives.

Testing a digital narrative

(Suggested time: 100–150 minutes)

31. As teams finish their narratives, have them do the following:

• Test and publish the document.
• Test and refine each section and transition.
• Test the completed movie.
• Check spelling.

Flash guide: How to test a Flash project 5.1

10 Digital narratives © 2012 Adobe Systems Incorporated

32. Explain that teams will conduct a review and redesign of each other’s narratives that includes feedback on usability and accessibility. Ask students to swap narratives with another team, briefly explaining the intended message, goals, and audience of the narrative. Then allow teams time to review each other’s digital narratives. Questions to guide their review might include the following:

• Does the narrative convey the intended message and address the stated goals?
• How do the effects and visual content enhance or detract from the overall message and goals of the narrative?
• How does the text and audio content of the narrative enhance or detract from the overall message and goals of the narrative?
• How well do the effects and visual content reach the intended audience?
• How relevant is the content to the overall site into which it is placed?
• How well does the text and audio content of the narrative reach the intended audience?
• Does the narrative fall within the required time and word limits?
• How accessible is the content to visitors with disabilities?

Worksheet: How to evaluate a digital narrative 1.6, 5.2

33. At the end, have one evaluating team member summarize the project’s strengths. After both teams have reviewed the designs of the other team, ask teams to implement any changes based on comments during the design review.1.6

Publishing a digital narrative

(Suggested time: 50–100 minutes)

34. Ask students to publish their final digital narratives. Discuss additional options for publishing Flash documents, such as:

• Explore alternative publication destination options, such as mobile devices or Adobe AIR, and consider adding metadata to SWF files with Extensible Metadata Platform (XMP) labeling technology.2.1
• Test the published movie before and after it is uploaded to the web.

Flash guide: How to publish a Flash document 4.14

35. Have students create a presentation to the client to deliver the digital narrative, identifying the following:1.6

• How the narrative is designed for their audience 1.1
• How rich media supports the site’s goals and message 1.1, 1.2
• How the effects and techniques work to reach the intended audience 1.1, 1.2

© 2012 Adobe Systems Incorporated Digital narratives 11

Extension activities

You can extend the project in the following ways:
Understanding narratives and scripts: If students need an additional activity for understanding how to connect a script with its visual elements, have them choose a narrative from one of the sites discussed at the beginning of the activity. Ask students to transcribe the first 30 seconds (including all screen text and spoken dialog). Then ask students to analyze the transcription and visual narrative by explaining how effectively the word choice and visual detail work together to create a coherent message.
Non-website narratives: If you do not have a website for which students can create a narrative, you might have them create a digital narrative for a site they select or for an issue that is important to them.
Real scripts: To reinforce the concept that the script is the key to a good narrative, ask students to look at a movie screenplay online at www.simplyscripts.com/movie.html. Then ask students to compare the screenplay to scenes from the actual movie (video).
◦ How is the scene set?
◦ How are characters introduced?
◦ How are effects implied or stated in the script?

Assessment

Project rubric

Background preparation resources

• Review the student step-by-step guides referenced in this project.
• To view video tutorials aligned with the skills required to complete this project, visit the Digital Design
CS6 show on Adobe TV: http://tv.adobe.com/show/digital-design-cs6/
• For more teaching and learning resources on digital narratives, Flash, and other topics in this project, search for resources from the community on the Adobe Education Exchange: http://edexchange.adobe.com
• For an overview of the interface and for more information on the technical aspects of Flash, see Flash
Help.

Digital narratives

• Examples of effects created in Flash:
◦ Pan: www.wechoosethemoon.org/
◦ Zoom: http://waterlife.nfb.ca/
◦ Camera angle: www.wechoosethemoon.org/
◦ Cross fade transition: http://waterlife.nfb.ca/
◦ Simple fade transition: www.computerhistory.org/revolution/
• Second Story’s site contains links to a variety of websites with interactive features on subjects ranging from the visual arts, architecture, and music to history, geography, and the sciences: www.secondstory.com
• Waterlife is a preview for a documentary film similar to the cinematography and storytelling from the film. Especially interesting are the navigations, which mimic the motion of water: http://waterlife.nfb.ca/

12 Digital narratives © 2012 Adobe Systems Incorporated

• We Choose The Moon was designed to celebrate the fortieth anniversary of the Apollo 11 Lunar landing by developing an interactive re-creation of the event: www.wechoosethemoon.org/
• Arizona State University and the Institute of Human Origins created this documentary:
www.becominghuman.org/node/interactive-documentary
• Computer History Museum’s website tells the story of the 2,000-year history of computing in both linear and nonlinear ways: www.computerhistory.org/revolution/
• 30 Second Bunny Theater, a Flash-based narrative lesson plan on the Adobe Education Exchange:
http://edexchange.adobe.com/posts/ce3eae923d

Storyboards

• Sample cartoon storyboard: www.brianlemay.com/storyboards/storyboard1.html
• Information on creating storyboards for digital stories from the University of Houston, The Educational Uses of Digital Storytelling website: http://digitalstorytelling.coe.uh.edu/storyboarding.html
• Information on use of storyboards for multimedia storytelling:
http://multimedia.journalism.berkeley.edu/tutorials/starttofinish/storyboarding/
• Organizing Flash animations with storyboards:
www.peachpit.com/guides/content.aspx?g=flash&seqNum=381

Key terms

• accessibility
• animation storyboard
• bounce effect
• color fade
• compression
• cross fade
• emphasizing subject
• filmmaking technique
• flowchart
• gradient
• graphic filter
• logical divisions of a narrative
• message
• narrative
• optimize (file size)
• panning
• readability
• script
• Text Layout Framework (TLF), TLF text
• tilting
• time frame
• transition
• zooming in and out

© 2012 Adobe Systems Incorporated Digital narratives 13

ISTE NETS*S Standard for Students

This project is aligned to the ISTE NETS*S Technology Standards. Depending on the subject and content area the student selects you may research your own state content standards to see how this project aligns to your state requirements.
ISTE NETS*S: Curriculum and Content Area Standards – NETS for Students
1. Creativity and Innovation
Students demonstrate creative thinking, construct knowledge, and develop innovative products and processes using technology. Students:
a. apply existing knowledge to generate new ideas, products, or processes. b. create original works as a means of personal or group expression.
c. use models and simulations to explore complex systems and issues.
2. Communication and Collaboration
Students use digital media and environments to communicate and work collaboratively, including at a distance, to support individual learning and contribute to the learning of others. Students:
a. interact, collaborate, and publish with peers, experts or others employing a variety of digital environments and media.
b. communicate information and ideas effectively to multiple audiences using a variety of media and formats
d. contribute to project teams to produce original works or solve problems.
3. Research and Information Retrieval
Students apply digital tools to gather, evaluate, and use information. Students:
a. plan strategies to guide inquiry.
b. locate, organize, analyze, evaluate, synthesize, and ethically use information from a variety of sources and media.
c. evaluate and select information sources and digital tools based on the appropriateness to specific tasks.
4. Critical Thinking and Problem Solving
Students use critical thinking skills to plan and conduct research, manage projects, solve problems and make informed decisions using appropriate digital tools and resources. Students::
b. plan and manage activities to develop a solution or complete a project.
d. use multiple processes and diverse perspectives to explore alternative solutions.
5. Digital Citizenship
Students understand human, cultural, and societal issues related to technology and practice legal and ethical behavior. Students:
a. advocate and practice safe, legal, and responsible use of information and technology.
b. exhibit a positive attitude toward using technology that supports collaboration, learning, and productivity.
6. Technology Operations and Concepts
Students demonstrate a sound understanding of technology concepts, systems, and operations. Students:
a. understand and use technology systems.

14 Digital narratives © 2012 Adobe Systems Incorporated

b. select and use applications effectively and productively. c. troubleshoot systems and applications.
d. transfer current knowledge to learning of new technologies.

Adobe Certified Associate, Rich Media Communication objectives

1.1 Identify the purpose, audience, and audience needs for rich media content.
1.2 Identify rich media content that is relevant to the purpose of the media in which it will be used
(websites, mobile devices, and so on).
1.3 Understand options for producing accessible rich media content.
1.4 Demonstrate knowledge of standard copyright rules (related terms, obtaining permission, and citing copyrighted material).
1.5 Understand project management tasks and responsibilities.
1.6 Communicate with others (such as peers and clients) about design and content plans.
2.1 Identify general and Flash-specific best practices for designing rich media content for the web, mobile apps, and AIR applications.
2.2 Demonstrate knowledge of design elements and principles.
2.3 Identify general and Flash-specific techniques to create rich media elements that are accessible and readable.
2.4 Use a storyboard to design rich media elements.
2.5 Organize a Flash document.
3.3 Use the Timeline.
3.4 Adjust document properties.
3.6 Use the Motion Editor.
3.7 Understand Flash file types.
3.8 Identify best practices for managing the file size of a published Flash document.
4.1 Make rich media content development decisions based on your analysis and interpretation of design specifications.
4.2 Use tools on the Tools panel to select, create, and manipulate graphics and text.
4.3 Import and modify graphics.
4.4 Create text.
4.5 Adjust text properties.
4.6 Create objects and convert them to symbols, including graphics, movie clips, and buttons.
4.7 Understand symbols and the library.
4.8 Edit symbols and instances.
4.10 Create animations (changes in shape, position, size, color, and transparency).
4.12 Import and use sound.

© 2012 Adobe Systems Incorporated Digital narratives 15

4.13 Add and export video.
4.14 Publish and export Flash documents.
4.15 Make a Flash document accessible.
5.1 Conduct basic technical tests.
5.2 Identify techniques for basic usability tests.

Assessment

0 - Does not meet expectations

3 - Meets expectations

5 - Exceeds expectations

Examples of effects

Absent or incomplete.

Students can identify filmmaking effects and transition effects. Students can articulate where each effect is used and share examples of the technique.

Students can successfully identify filmmaking effects and transition effects. Students can clearly articulate where each

effect is best used and share examples that would

be appropriate for the

technique.

Client interview

Absent or incomplete.

The interview identifies

the client’s goals, the target

audience, and the intended

purpose of the digital

narrative. The interview

identifies the content and

information crucial to the

narrative. The interview

identifies the client’s

preferred design

requirements and includes

any additional relevant

questions.

The interview clearly identifies the client’s goals, the target audience, and the intended purpose of the digital narrative. The interview clearly identifies the content (both original and repurposed) and information crucial to the narrative. The interview clearly identifies the client’s preferred design requirements and documents specific examples. The interview includes additional

relevant and thorough questions to get or clarify

specific information.

Project plan

Absent or incomplete.

Students plan and set reasonable milestones for their narrative project and set final deadlines to plan each phase of the project. The tasks reflect equal workload among team members.

Students plan and set reasonable milestones for their narrative project and set final deadlines to plan each phase of the project. Milestones include detailed descriptions of each task, and the tasks reflect equal workload among team members.

16 Digital narratives © 2012 Adobe Systems Incorporated

0 - Does not meet expectations

3 - Meets expectations

5 - Exceeds expectations

Design solution document

Absent or incomplete.

Students create design documents that include narrative goals, objectives, and messages; audience; delivery requirements; content overview; flowchart; font and color samples; and visual design mocks.

Students create design documents that include detailed analysis on the narrative goals, objectives, and messages; audience; delivery requirements; content overview; flowchart; font and color samples; and visual design mocks.

Digital narrative script

Absent or incomplete.

Students write a script that meets the narrative’s criteria.

Students produce a coherent and well-written script that meets the narrative’s criteria and enhances the goals of the overall site.

Digital narrative summar y and storyboard

Absent or incomplete.

Students identify the necessary elements of animation storyboards and flowcharts. Students create a detailed animation flowchart and storyboard for their narrative project.

Students analyze and evaluate the elements of animation storyboards and flowcharts and articulate the purposes they serve. Students create a detailed animation flowchart and storyboard for their narrative project, including specific design principles that will be employed.

Wireframes

Absent or incomplete.

Students create wireframes based on design principles and delivery requirements to organize content and navigation for the digital narrative.

Students create wireframes based on design principles and delivery requirements to organize content and navigation for the digital narrative. Students support each decision on elements in the wireframes with data and information gathered from research and clients.

Design comps

Absent or incomplete.

Students create design comps that accurately reflect audience, goals, color choices, mood, images, text, and navigation choices. The selected comps reflect a variety of approaches to the design.

Students create design comps that accurately reflect audience, goals, color choices, mood, images, text, and navigation choices. The selected comps reflect a variety of approaches to the design. Students can clearly articulate the ways design principles are implemented to impact the audience.

© 2012 Adobe Systems Incorporated Digital narratives 17

0 - Does not meet expectations

3 - Meets expectations

5 - Exceeds expectations

Digital narrative evaluation

Absent or incomplete.

Student’s evaluation details how the narrative content meets intended goals, audience, and purpose; ways the techniques employed contribute to the overall message of the narrative; and how the content is accessible to all audiences.

Student’s evaluation details how the narrative content meets intended goals, audience, and purpose; ways the techniques employed contribute to the overall message of the narrative, and how the content is accessible to all audiences. Student evaluations also include a design evaluation identifying which design principles help achieve the intended goals of the project.

Testing digital narratives

Absent or incomplete.

Student teams evaluate and articulate technical and user issues for the producers to fix in the final production.

Student teams evaluate and clearly articulate technical and user issues for the producers to fix in the final production.

Final digital narratives

Absent or incomplete.

Student teams create necessary assets and successfully build a narrative based on the design comps, flowchart, and storyboard. The narrative includes a home page and at least one content page. The narrative has clear goals, audience, and purpose. Student teams improve the narratives based on peer reviews and present final version to clients clearly and concisely.

Student teams create necessary assets and successfully build a narrative based on the design comps, flowchart, and storyboard. The narrative includes a home page and two or more content pages and clearly employs design principles. The narrative is clearly designed for a specific audience and through its design clearly displays its goals and purpose. Student teams improve the narratives based on peer reviews and present final version to clients clearly and concisely. Students lead final presentation meeting and connect original design proposal to finished product.

18 Digital narratives © 2012 Adobe Systems Incorporated

0 - Does not meet expectations

3 - Meets expectations

5 - Exceeds expectations

Teamwork

N/A

Student collaborates with other students as required to provide feedback or assistance. Fulfills assigned team roles and contributes equally to project work. Sometimes consults with other team members on major project decisions but makes minimal effort to help others build skills.

Student collaborates freely with other students to provide feedback or assistance. Fulfills

assigned team roles and contributes equally to

project work. Consults with other team members on major project decisions

and voluntarily helps others build skills to complete the project.

© 2012 Adobe Systems Incorporated Digital narratives 19