Weekly learning

Week 9

This week’s class focused on creating a multi-page web project in Adobe Animate and linking different HTML pages together. The lecturer demonstrated a new method for managing project files and explained how to create smoother navigation and improve the user experience.

Separating the Project into Multiple Files

Instead of putting everything into one Adobe Animate file, the lecturer suggested separating the project into different files. For example:

• Index page
• Intro page
• Home page
• About page
• News page
• Services page

This method makes the project more organized and easier to manage and edit in the future.

Improving Navigation and User Experience

The lecturer explained that the introduction page and the home page should be separated. After the intro animation finishes, the project automatically goes to the home page.

When users return from other pages, they should go directly to the home page instead of watching the introduction again. This helps create a better user experience.

A Skip Intro button was also added, allowing users to enter the homepage immediately without waiting for the animation to finish.

Publishing HTML Files

Before connecting all pages together, every Adobe Animate file must be published as an HTML file.

The lecturer reminded us to make sure that:

• The stage size is set to 1280 × 720.
• The document type is HTML5 Canvas.
• Responsive settings are enabled.
• The stage is centered.
• “Scale to Fill Visible Area” and “Stretch to Fit” are selected.
• A preloader can be included.
• The image folder option is checked.

These settings need to be applied to every page before publishing.

Using “Go to Web Page” for Navigation

Besides using labels, the lecturer introduced another way to connect pages by using the Go to Web Page action.

When creating the action, it is necessary to:

1. Enter the target HTML file name.

2. Set the target to Parent so that the page opens in the same tab.

3. Choose Mouse Click as the trigger.

4. Apply the action to the correct button.

This method allows different pages to be connected like a website.

Setting Up the Skip and Enter Buttons

The lecturer demonstrated how to create two important buttons:

• Skip Intro Button

This button allows users to skip the introduction and go directly to home. HTML.

• Enter Button

This button leads to intro_home.html, and after the transition animation is completed, the project automatically enters home.html.

These functions help make the navigation smoother and more user-friendly.

Adding Instance Names to Buttons

The lecturer emphasized the importance of assigning instance names to buttons.

Instance names are required when adding actions. Without them, the buttons will not work properly, and page navigation cannot be achieved.

Connecting All Pages

Finally, the lecturer showed how to connect the homepage to other pages such as About and News.

He reminded us that：

• Every button needs an action.
• All pages should follow the same settings.
• Existing symbols should not be deleted accidentally.
• The whole project should be tested after all links are completed.

Week 9 Exercise Document