Work

Description:

The "Odyssey" project took several months to complete because we pushed the concept much further than we had initially planned.

At Graphikconcept, we strive to find the right balance between Design, technical implementation, and Accessibility, which is not always straightforward and adds extra challenges.

Each section includes numerous interactive elements to be discovered as the user navigates.
The site's content is almost entirely dynamic. It is stored in JSON files that are interpreted by Animate via Javascript.

But can we truly create an "old school" Flash-style website in 2025... without using Flash technology? We conducted several tests with different softwares before finally deciding to use the tool that allowed us to create many sites in the past: Adobe Animate (formerly Flash).

Animate benefits from many years of existence, and even if it has numerous bugs, we did not encounter any critical issues during the process.

Once the graphic mock-up was finalized in Photoshop, we imported all the elements into Animate, where we rebuilt and animated the interface.

The site was almost entirely coded within Animate's first keyframe. The animation for each section is located within a movieclip, placed over a certain number of keyframes on the main timeline. Each section therefore has its own movieclip (Home / About / Services / Portfolio / Contact) which contains all its elements.

We chose Animate partly because it has a library of components (based on Jquery UI) that creates native html tags in the DOM such as labels, buttons, checkboxes, etc. Unfortunately, this is very basic, and we had to transform certain tags via Javascript. For instance, for the titles and subtitles, we replaced the labels tags with heading tags (h1, h2, etc.).

Ultimately, this still required us to produce a significant amount of additional code.

Thanks to JavaScript, we were also able to update just one part of the page—like a specific section linked to an animation but without reloading the whole site. This means that when new content needs to appear, such as switching to another category or loading new information, the rest of the animation keeps running smoothly and doesn't start over. This makes everything faster and more comfortable for the user.

We also improved the site's accessibility. Since Animate by default generates an empty "canvas" tag without "readable" content, in addition to Animate's JQuery UI components, we used Javascript to inject specific readable content for each category.

We then modified the HTML document generated by Animate according to our specific needs.

We also set up a small process that automatically copies, renames, and moves the Javascript file generated by Animate to minimally automate the task when publishing the animation from Animate.

The site's preloader, which was the one generated by Animate and was displaying an animated GIF, was replaced by a custom CSS animation.

The site is adaptive rather than "responsive," meaning it resizes while maintaining its proportional width/height ratio and does not reposition its elements like a classic website. This is, of course, an immersive site with animation and sound, best viewed on a large screen to achieve the optimal experience.

Feel free to leave us your questions and/or comments if you have any, and we will get back to you as soon as possible.

Enjoy the website and.. as we used to say back in the day: "best experience on large screen with sound enabled"!