Animating with the Flipbook Node in Roadmaps

Students will:

• Successfully log in and navigate a designated learning roadmap.

• Identify and use the standard drawing and editing tools within the Flipbook node.

• Create a sequence of frame-by-frame digital drawings to form a cohesive animation loop.

Vocabulary Words:

1. Roadmap: A roadmap is a digital, visual learning pathway containing nodes that guide students through lessons, resources, and activities.

2. Node: A node is an individual interactive bubble or element within a roadmap that links to specific applications, tasks, or tools (like Flipbook).

3. Flipbook: A Flipbook is a digital drawing application inside a roadmap node that allows users to create frame-by-frame animations.

4. Frame: A frame is a single static image or drawing in a sequence of images that make up an animation.

5. Animation Loop: An animation loop is a continuous cycle of sequential frames played repeatedly to simulate movement.

To prepare for this lesson:

• Teacher Setup: Set up your class within the Center for Digital Curricula dashboard and assign or distribute the target Roadmap to your student group. 

• Permissions Check: Ensure students have Google account access or appropriate permission tokens ready for login.

• Instructional Framework: Determine whether the animation task will be open-ended (e.g., a bouncing ball) or tied to an academic subject (e.g., demonstrating a stage of the water cycle).

Check out the resources to learn more about how to use the Roadmaps. 

• Videos & Platform Resources

  • Roadmaps Center Main Link

  • Flipbook Working Example Workspace

  • Introduction to Roadmaps Video 1

  • Introduction to Roadmaps Video 2

• Teacher Resource Videos

  • How to Start?

  • How to Sign in giving Google Permissions

  • How to Share Roadmaps?

  • How to Collaborate on Roadmaps?

  • Collabrify Flipbook Node Tutorial

• Student Resource Videos

  • How to Use a Roadmap

  • How to use the tools in Flipbook in your Roadmap

  • How to make animations in Flipbook in your Roadmap?

Extending the Process to Other Road Maps Nodes

The scaffolded process used to introduce students to the Flipbook Node can seamlessly serve as a baseline model for introducing all other application nodes within the Collabrify Roadmap Platform. Once students understand how to locate a node, open it, navigate the workspace, and log completion, they can independently transition to the platform's other integrated tools.

The primary suite of complementary Collabrify nodes and their educational functions includes:

• Writer Node: A collaborative, multimedia writing tool where students can type, format text, and add media to answer prompts, write stories, or log journal entries.

• SketchNode: A canvas tool built for drawing, creating graphic organizers, and sketching visual diagrams to demonstrate conceptual understanding.

• PDF Node (Reader): An interactive document viewer that allows students to read texts, highlight key passages, and annotate directly onto documents or worksheets.

• WeMap Node: A collaborative concept-mapping tool designed to help students brainstorm, link ideas, and build visual mind maps.

• Question Node: A built-in formative assessment bubble where students respond to multiple-choice, short-answer, or open-ended poll questions designated by the teacher.

Supporting Virtual and Hybrid Learners

Because the Road Maps Center and Center for Digital Curricula are entirely web-based and device-agnostic, these nodes provide a uniform learning space that is well-suited for virtual, remote, or hybrid environments.

• Seamless Transitions: If a student transitions between working at school and at home, their exact progress, drawings, and writings are saved in real-time to the cloud.

• Embedded Collaboration: Virtual students do not have to feel isolated; multiple students can access and co-author the exact same node concurrently (e.g., co-drawing a background in Flipbook or co-writing in Writer), mimicking side-by-side classroom collaboration.

• Real-Time Teacher Visibility: From the teacher dashboard, educators can see exactly which node a remote student is working inside and offer synchronous guidance or intervention without needing a third-party screen-sharing application.

Using Nodes for Feedback, Reflection, and Creative Practice

The multi-modal environment of Roadmaps directly addresses ISTE Standard 1.1 (Empowered Learner) by transforming passive screen time into an active, iterative cycle of reflection and practice.

Examples of how these nodes assist students in reflecting and improving include:

• Iterative Design in Flipbook: The frame-by-frame nature of the Flipbook node naturally prompts students to review their previous work (using features like onion-skinning ghost frames) to self-correct positioning, adjust pacing, and visually refine their animation loops until they achieve their desired creative output.

• Real-Time Peer/Teacher Feedback in Writer: Because workspaces can be shared, a teacher or peer can look inside a student’s Writer or WeMap node to leave live commentary. Students can immediately see this input, adjust their arguments, correct typos, or broaden their concept maps based on live feedback.

Self-Paced Progress Monitoring: The visual nature of the roadmap gives students instant feedback on their own progress. Checking off a completed node acts as a cognitive milestone, helping students manage their learning autonomy, track what tasks are left, and actively reflect on their personal mastery of the learning pathway.

• See Accommodations Page and Charts on the 21things4student website in the Teacher Resources. 
  
  

• Provide visual cards or simplified printed logins for students who struggle with authentication. 

• For students experiencing fine motor difficulties, allow the use of styluses, touchscreens, or simplified shapes instead of freehand drawings.

Directions for this activity:

1. Launch & Log In: Direct students to navigate to the designated Roadmap using their Google account credentials or assignment link. (If needed, share any of the student tutorial resources with them.)

2. Locate the Node: Have students read their roadmap path and click directly on the assigned Flipbook Node to expand the application.

3. Explore the Workspace: Spend 3–5 minutes exploring the drawing brush, colors, erasure tool, and the "Add Frame" button at the bottom of the workspace.

4. Create Frame 1: Draw the starting state of your object (e.g., a plant sprout or a character's starting position).

5. Animate across Sequences: Click the + sign to add a new frame. Draw the slight movement progression, using the onion-skinning preview feature if needed. Repeat for at least 5–10 frames.

6. Preview and Play: Hit the "Play" icon to review the looping animation and adjust frame speed as desired.

7. Submit/Save: Save or close out the node inside the platform so the teacher can access and assess the digital artifact from their dashboard. 

Different options for assessing the students:

• Observations
• Check for understanding
  
  

• Formative Checklist: Check student roadmaps dynamically from the teacher panel to verify successful node opening and active frame generation.

• Rubric-Based Evaluation: Assess the completed flipbook loop based on completion (minimum frame count), clarity of movement sequence, and alignment with the lesson topic.

• Peer Reflection: Have students project or pass their screens around for a mini "Animation Film Festival" in small groups, gathering verbal or sticky-note feedback.