Advanced Interactive Design: Final Website

on

Advanced Interactive Design: Final Website
06/06/2026——31/07/2026
GeXianjing / 0377636


Kids’ Safety Guardian

Final Website Process Documentation

1. Project Overview


Kids’ Safety Guardian is an educational interactive website designed to help children learn basic home-safety knowledge through exploration, animation and simple decision-making activities.

The idea came from my Task 1 proposal. I noticed that children are often taught safety through repeated verbal warnings, posters or text-heavy materials. These methods may explain what is dangerous, but they do not always help children understand what might happen after an unsafe action.

Therefore, I wanted to transform home-safety education into a small digital adventure. Instead of reading a long list of rules, children enter a virtual house, explore different rooms, discover hazards and receive immediate animated feedback.

The primary users are children between approximately five and thirteen years old. Parents are the secondary users because they can explore the activities with their children and reinforce the same safety habits at home.

The final website includes:

  • Opening and loading pages

  • Main homepage

  • Explore House page

  • Kitchen safety activity

  • Bathroom safety activity

  • Living-room safety activity

  • Safety Tips page

  • Parent Guide page

The website was developed in Adobe Animate using the HTML5 Canvas format and exported as connected HTML and JavaScript pages.


KIDS' SAFETY GUARDIAN，作者 GE XIANJING

https://www.canva.com/design/DAHLziTXcnE/YERJP25tzoDfEhc6OGE8IA/view


2. From Task 1 Proposal to a Detailed Production Plan

My Task 1 proposal established the main concept, target audience, visual style, colour palette and possible interaction ideas. However, many of the animations were still described broadly.

Before starting the final production, I reviewed each page and created detailed handwritten notes over my interface designs. I used arrows, circles and short descriptions to identify:

  • Which objects should move

  • Which areas should be clickable

  • Where the animation should stop

  • What should happen after a click

  • How the user moves to another page

  • How correct and unsafe actions should be shown

  • When warnings, cards or buttons should appear

This planning stage helped me turn the website into one connected journey:

Enter the website → meet the characters → explore the house → identify hazards → watch the consequence → learn the correct behaviour

At first, I imagined many decorative animations. When I began planning the timing more carefully, I realised that too much movement could distract children. I therefore divided the animation into three purposes.

Environmental movement creates atmosphere, such as moving clouds, floating circles and small character loops.

Interaction guidance shows the child what can be clicked, such as bouncing arrows, pulsing buttons, hover changes and shaking danger objects.

Learning feedback explains the result of an action, such as steam from a kettle, a child slipping on water or falling from a sofa.

This made the final experience more organised. Every important movement needed to support the story, guide the user or communicate a safety message.








Figure 1. Hand-drawn interaction planning , clickable objects and animation timing.

3. Visual Asset Preparation

After finalising the website flow, I began preparing the visual assets.

Rather than importing each character as one complete image, I separated the child and dog into smaller movable parts. These included:

  • Head and hair

  • Facial expressions

  • Body and clothing

  • Arms and hands

  • Legs and shoes

  • Different walking, waving, sitting, jumping and falling poses

This process took longer than expected because even a short movement required several carefully organised parts. For example, the child needed different arm positions for waving and falling, while the face needed separate versions for blinking, smiling and reacting to danger.

I also prepared multiple dog poses to create walking, blinking and tail-wagging loops.

The backgrounds and interface elements were separated as well. Trees, grass, bushes, clouds, the sun, navigation text, dialogue panels and buttons were kept as reusable assets. This allowed me to animate or revise one element without rebuilding the entire page.

The final artwork continued the pastel visual direction from Task 1. I used soft pink, green, yellow and blue colours to create a friendly learning environment. Stronger orange and red accents were mainly reserved for hazards and warning feedback.


Figure 2. Character sprite sheets and interface assets separated into expressions, body parts, buttons and environmental elements.

4. Building the Website in Adobe Animate

I built each major section as a separate Adobe Animate HTML5 Canvas file.

Inside each file, I organised the content into layers for:

  • Background

  • Characters

  • Navigation

  • Dialogue and information cards

  • Interactive buttons

  • Sound

  • Action code

  • Invisible clickable areas

Repeated elements were converted into symbols and Movie Clips. I used a combination of motion tweens, frame-by-frame changes and JavaScript-controlled timeline movement.

After publishing, Adobe Animate generated HTML pages, JavaScript files and sprite-sheet atlases. The files use CreateJS structures such as MovieClip, Tween, ButtonHelper, canvas scaling and event listeners. The exported pages also contain responsive canvas functions that resize the stage proportionally when the browser window changes.

One important lesson was that every interactive object needed a clear instance name. If the code referred to an incorrect name, the button would not react. During development, I gradually replaced unclear default names with more recognisable names connected to their functions.

Because each major section was created as a separate HTML5 Canvas file, I needed to connect the pages using JavaScript.

I added clickable navigation elements that open:

  • openingpage.html
  • loading.html
  • mainhomepage.html
  • housepage.html
  • safetytip.html
  • parentguide.html

5. Opening, Loading and Homepage Development

The opening sequence introduces the playful personality of the website.

The pink circles move around the background while the title enters the screen and briefly changes scale. The title then becomes an interactive button. After it is clicked, the timeline continues and reveals the downward arrow that leads to the loading page.

The exported opening-page file shows that the title and arrow were created as separate button symbols. The arrow remains hidden during the early frames and becomes visible later in the timeline. The page also connects the arrow button to loadingpage.html.

The loading page contains a rotating house icon, moving circles and animated loading text. The final entry control appears after the loading sequence and opens the main homepage. I also added a click sound to make the transition feel more responsive. The loading page contains a dedicated animated button sequence and code for sound and page navigation.

On the homepage, the child and Max the dog introduce the experience. The environmental animations remain gentle, while the introduction card and Start Adventure button guide the user towards the main activity.

Compared with my original proposal, I simplified the permanent navigation so that the most important sections remained easy to understand:

Home · Explore House · Safety Tip · Parent Guide

This reduced visual crowding and made the page clearer for younger users.


Figure 3. Development of the opening, loading and homepage sequence from separated assets to the final animated pages.

. Kitchen Interaction Development

The kitchen page uses hidden danger points placed over objects such as the kettle, stove and knife.

The initial scene asks:

“Can you find the hidden dangers around the room?”

I added warning icons to suggest which areas might contain danger, while still allowing the child to explore the scene.

When the user selects an object, the interface changes to a larger warning panel. For example, the stove-fire section presents a stronger red warning, a visual demonstration and short safety advice. I kept the instructions brief so that children could connect the animation and the message quickly.

During development, I adjusted the size of the kitchen image and warning panel several times. In the original sketch, the animated card occupied a larger area, but in the final version I needed to keep enough space for the characters, navigation and instruction box.

The final recorded demonstration shows that the kitchen page combines object recognition, warning animation and short written guidance rather than presenting all safety information at once.

Suggested caption:
Figure 12. Development of the kitchen hazard interaction from the original annotated plan to the final warning-card layout.

. Bathroom Interaction Development

The bathroom was one of the more complicated pages because it needed to communicate movement, water and electrical danger.

I created separate invisible clickable areas for two main interactions. When a user clicks the first area, the timeline moves to one animation sequence. Clicking the second area moves the timeline to another sequence. In the exported code, these interactions use gotoAndPlay(165) and gotoAndPlay(218). 

this.gotowindcard.addEventListener("click", function () {
    this.gotoAndPlay(165);
}.bind(this));

this.gotowater.addEventListener("click", function () {
    this.gotoAndPlay(218);
}.bind(this));

For the wet-floor interaction, I created multiple movement frames showing the child moving, slipping and falling. I also added water-droplet elements and a warning message explaining that children should not run or jump on a slippery bathroom floor.

The second hazard uses visual warning symbols to communicate the danger of water near electrical equipment.

I wanted the consequence to be clear, but I did not want the scene to become frightening. I therefore used exaggerated cartoon movement and immediately followed it with Max’s safety message.

The bathroom code also includes sound registration and a check for a suspended audio context. This was added because the click sound sometimes stopped working after moving from one HTML page to another. Before playing the sound, the code attempts to resume the browser audio context.

Suggested caption:
Figure 13. Bathroom timeline showing the clickable hazard areas, slip sequence, warning feedback and sound-control code.

. Living-Room Choice and Consequence Animation

The living room contains more decision-based interaction than the other rooms.

The first hazard involves medicine placed on the table. When the user clicks it, the child approaches the object and the website displays a clear medicine warning.

The sofa activity gives the user two options. I created separate button symbols for the different decisions and connected each choice to a different timeline section.

The exported code connects:

  • newlef to frame 253
  • keepin to frame 157
  • the medicine warning to frame 73
  • the character warning to frame 132 

bindWithSound.call(_this, "newlef", function () {
    _this.gotoAndPlay(253);
});

bindWithSound.call(_this, "keepin", function () {
    _this.gotoAndPlay(157);
});

The unsafe result shows the child jumping and falling from the sofa. The safer result changes the character into a sitting position and displays positive feedback.

To create these animations, I used different body poses and combined them into short Movie Clips. The living-room file contains sequences for sofa jumping, sitting, running, falling and feedback messages.

This page was useful because it changed the user from an observer into a decision-maker. Instead of only discovering an object, the child chooses what the character should do and then sees the result.

Suggested caption:
Figure 14. Living-room choice buttons and separate timeline paths for the safe and unsafe outcomes.

. Safety Tip and Parent Guide Pages

The Safety Tip page collects the information introduced in the room activities.

I organised the content into a card-based layout. The cards are arranged like a carousel, with left and right arrows framing the information. The exported safety-tip file includes the card animation, arrow symbols, navigation buttons and looping timeline structure.

The final page includes safety advice for the kitchen, bathroom and living room. Rather than repeating the full room animations, it presents the most important lessons in shorter sections.

The Parent Guide uses a different visual tone. I kept the pastel style, but the page contains more text and larger information cards. The content explains the mission of the website, how children learn and how parents can continue practising safety habits at home.

In the final website, the Parent Guide visually appears as overlapping cards. This helps separate the information into smaller sections and avoids presenting the parent with one long paragraph.

Suggested caption:
Figure 15. Final Safety Tip card layout and Parent Guide information-card design.

8. JavaScript and Page Interaction

The visual animation was mainly created in Adobe Animate, but JavaScript was needed to make the website interactive.

The code was used for:

  • Click events

  • Timeline control

  • Page navigation

  • Button sound effects

  • Hover and button states

  • Reusable button-binding functions

  • Browser audio handling

  • Responsive canvas scaling

For the living-room page, I used a shared function to combine the button action with the click sound. This was more organised than writing separate sound and navigation listeners for every button.

function bindWithSound(btnName, action) {
    var btn = this[btnName];

    btn.addEventListener("click", function () {
        playClickSound();
        action.call(this);
    });
}

The same structure was then applied to different decisions and page-navigation buttons. The living-room file confirms that multiple actions were connected through this approach.

The navigation currently opens several pages with window.open(..., "_blank"). This helped me test different pages without losing the previous screen, but it can create multiple browser tabs. In a future version, I would change the navigation so the pages open in the same tab and feel like one continuous website.

9. Testing and Revision

After connecting the pages, I tested the full website journey and recorded the final result.

I checked:

  • Opening and loading transitions

  • Character animation

  • Button hover and click feedback

  • Navigation between pages

  • Kitchen hazard cards

  • Bathroom consequence animations

  • Living-room choices

  • Safety Tips cards

  • Parent Guide content

  • Sound playback

  • Return and home buttons

  • Browser resizing

Some problems only appeared after exporting the project. For example, a button could work inside Adobe Animate but fail in the browser because its instance name was different, the event listener was placed on the wrong frame or the sound had not been activated by user input.

I repeatedly checked the code, renamed elements, adjusted frame positions and republished the pages. This debugging stage was frustrating at times, but it helped me understand the connection between the Adobe Animate timeline and the exported JavaScript.

The final website includes proportional canvas scaling, but it is still mainly designed for a desktop screen. A future version could use a more flexible mobile layout instead of only reducing the complete canvas.

Suggested image caption:
Figure 5. Browser testing and final website recording used to check navigation, sound, animation and clickable interactions.

10. Final Reflection

The biggest change from Task 1 to the final website was that the project moved from an attractive idea into a real technical system.

During the proposal stage, it was easy to imagine a child clicking an object and watching an animation. During production, I needed to decide exactly where the button was placed, which frame should play, when the timeline should stop, how the user could return and what would happen if the sound or page link failed.

Preparing the characters as separate assets was repetitive, but it gave me more control over the movement. The most difficult part was managing many pages, timelines, symbols, instance names and JavaScript actions at the same time.

I also learned that movement should not be added only because it looks interesting. When too many elements move together, the page becomes confusing. In the final website, I tried to keep environmental animations soft and make important buttons, hazards and consequences more noticeable.

The result is not perfect. Some animation transitions could be smoother, the navigation could be more continuous, and the website could have a stronger mobile version. However, the final project successfully turns my original proposal into a working interactive educational website.

This project helped me improve not only my animation skills, but also my understanding of interface hierarchy, user guidance, timeline logic, page navigation, debugging and interaction design.

11. AI Disclosure

I used ChatGPT to generate JavaScript code during the development of this website.

At first, I added navigation functions and sound functions separately. This sometimes created repeated event listeners. In later pages, especially the living-room page, I improved the structure by creating one function that combines the click sound and the original button action.

function bindWithSound(btnName, action) {
    var btn = this[btnName];

    btn.addEventListener("click", function () {
        playClickSound();
        action.call(this);
    });
}

This made the code easier to check because every button followed the same structure. The living-room file also includes console messages to identify missing buttons and confirm successful binding, which helped during debugging.

ChatGPT was mainly used to help me create or revise code for:

  • Button click events

  • Timeline navigation using gotoAndPlay()

  • Links between separate HTML pages

  • Click-sound playback

  • Reusable button-binding functions

  • Browser audio-context problems

  • Debugging missing or unresponsive buttons

I did not use ChatGPT to automatically generate the complete website.

I created the project concept, user flow, visual direction, page layouts, characters, asset separation, animations and Adobe Animate timelines myself. After receiving code from ChatGPT, I manually inserted it into the correct timeline frames, changed the instance names and page links, tested the result in the browser and revised the code when it did not work correctly.

Some generated code did not work immediately because ChatGPT could not see the exact structure of my Adobe Animate file. I still needed to understand where the code should be placed and how it should connect with my symbols, frame numbers and instance names.

Therefore, ChatGPT supported the coding stage, but I remained responsible for the design decisions, website construction, animation production, code integration, testing and final outcome.


Comments

Post a Comment