Seeking Advice about Using Screens or Layers

[verticalpoint]

I am trying to create a dynamic section where the user can click on an object in one freely scrollable area and trigger changes in two other dynamic areas but I am a bit confused about the best way to go about coding it effectively.

Attached is an outline I drew out that might help to explain my idea more clearly.
In the page outline, area (a) is a freely scrollable/draggable area full of objects arranged in a chart.
When the user clicks on an object in (a), the object will call for area (b) and (c) to change according to data attached to that object.
The areas (b) and (c) will display new content if the user chooses another object in (a).
Area (b) will call for an AVL animation or video clip that has option (b.1) to repeat or (b.2) to continually loop the animation/video.
Also, (d) would ideally be hoverable like an imagemap.
Lastly, the renpy.say text box at the bottom should be hidden.

Any advice would be very much appreciated.
Thank you!

[SundownKid]

A would be a viewport with a grid of imagebuttons inside it and a vertical scroll bar. This would all go in one screen, e.g. screen A.

B and C would be other screens that would be tagged to replace each other. The imagebuttons in A would open the screen(s).

D could just be a textbutton or imagebutton on the same screen as A.

[verticalpoint]

Thank you Sundown Kid for the outline
However, I haven't been able to figure out how to get the connection between the first viewport and the others to work as of yet...

Here's what I've got so far:
In Screens.rpy

Code: Select all

screen exsent:
    side "c b r":
         area (350, 400, 500, 200)
         add "reibun.jpg"
         viewport id "vp":
             draggable True
             text "Example Sentence"
         vbar value YScrollValue("vp") xpos 1.0  
         
screen k_animation:
    side "c b r":
         area (100, 100, 300, 300)
         add "bg.jpg"
         viewport id "vp":
             draggable True
             text "Kanji Animation" 
             textbutton "Sentence Examples" action ui.jumps("reibun") xpos 0.20 ypos 0.80
         vbar value YScrollValue("vp") xpos 1.0     
         
screen screenplay:
    side "c b r":
         area (650, 100, 300, 300)
         add "bg.jpg"
         viewport id "vp":
             draggable True
             grid 1 1:
                 imagebutton auto "001_%s.png" action ui.jumps("open_sesame")
             
         vbar value YScrollValue("vp") xpos 1.0

In Script.rpy

Code: Select all

label start:
        jump specialscreen
label specialscreen:
        window hide
        show screen screenplay
label open_sesame:
        window hide
        show screen k_animation
label reibun:
        window hide
        show screen exsent
    
label end:
    window show
    e "k"    

How can I use the imagebutton in specialscreen to reset the data in the other two screens? It seems like I might need to use some sort of call to specific related data, in this case, the area B(open_sesame) will have an associated video and C(reibun) will have specific text associated with the imagebutton. When I tried to add in video to the B viewport, it wouldn't take the normal language (show/play), but is there some way to signal change in the script to alter the contents of the viewport?

Also, I can't seem to hide the say window or keep the viewports open without it. Is there a way to hide it and keep the viewports open?