• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

HTML5 Canvas resizing between frames

New Here ,
Aug 12, 2024 Aug 12, 2024

Copy link to clipboard

Copied

Hi, I'm trying to make a simple interactive animation to be embedded in a website. 

 

The content is an interactive timeline, displayed vertically.  We're optimising the content for phones, since that's how we expect most users to access it.  The first frame will effectively be a menu screen, showing the timeline divided into sections.  Each section on this menu screen is a button, and clicking on one will zoom into a more detailed version of that section of the timeline, with clickable buttons for information on each date.  The zoomed-in sections will each be quite long (i.e. more than one screen tall) so need to be scrollable. 

 

The height of the display application that will be used to embed the interactive in the web page can be adjusted, so I can make the animation as tall as it needs to be to hold the tallest of the zoomed-in sections, and users can then scroll down it by scrolling the webpage.  Except if I make the stage tall enough to do that, it'll be that size on the menu screen, and it'll be possible to scroll past the menu into masses of empty space.

 

Looking for a simple way to resolve this within Animate.  I should add that I'm reasonably experienced with the basics of Animate, but a complete novice at HTML/javascript!  

 

I think the possible options might be:
- Change the height of the canvas between frames, e.g. on frame 1 the canvas is, say 1280px high, but on frame 13 it's 5000px.  Is this possible?  As far as I can tell it's not, but it would be the simplest fix.
-  Keep the canvas at the correct height to display the menu, add something to the javascript on subsequent frames to make the taller content scrollable, and have the content extend off the stage on the taller frames.
- Make the canvas the maximum height it needs to be on all frames, but add something to the javascript on the shorter frames so the content fixes in place.

 

Hope I've explained that clearly enough!  Thanks

TOPICS
Code , How to

Views

193

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Aug 12, 2024 Aug 12, 2024

Copy link to clipboard

Copied

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Aug 12, 2024 Aug 12, 2024

Copy link to clipboard

Copied

Hi.

 

Do you mind providing some images to help us understand better what you want to do?

Also please make sure to test your content on mobile devices from the beginning because the performance of content generated by the HTML5 Canvas document tends to not be great on mobile browsers since there is no support for GPU acceleration (StageGL).

Regards,
JC

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Aug 15, 2024 Aug 15, 2024

Copy link to clipboard

Copied

Hi JC,


I don't have any real images yet, we're still at the proof-of-concept stage, but I've added some sketches below that hopefully explain the situation...

1. and 2. are two frames within the animation.  The red outlines represent the edge of the Animate stage in each case.  On both frames, each black rectangle shown is a clickable button, with each button on frame 1. taking you to a screen similar to frame 2. 

 

The first pair of frames represents a version where all frames are the maximum height needed - this could be embedded in a web page at the full height, allowing the user to scroll the length of both frames, so you could scroll the entirety of frame 2, but you'd also be able to scroll way past the content on frame 1.  Could I add something to the code for frame 1 to prevent it from scrolling past the end of the content.

 

The second pair of frames solves the problem by making the stage a different size on different frames.  Is this possible?

 

The third pair of frames restricts the dimensions of the stage to the approximate size of a smartphone screen.  In this case, could I add something to the code to allow the content extending outside the stage to be scrolled?

 

Hope that makes more sense!  Thanks!

defaulti9c3lxkqdx9l_0-1723729550092.png

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Aug 15, 2024 Aug 15, 2024

Copy link to clipboard

Copied

LATEST

And thanks for the tip about testing on mobile devices.  Is testing using device emulation in a web browser a realistic test, or are there issues that will only come up on a real device?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines