Scrolling text -- like movie credits

[marksmithhfx]

I ended up using Jacque's suggestion which was the closest to what I had in mind. Jacque, I'll settle up when the app is released

[richmond62]

Impressive indeed!

It is wonderful.

BUT, I still wonder why it is not possible to run something as SMOOTH as that up in LiveCode.

[Klaus]

Animations of any kind has always been one of the weak points in LC.

[richmond62]

Animations of any kind has always been one of the weak points in LC

I'm going to become like a 4 year old child and keep asking Why.

If the HTML engine in LiveCode can turn LiveCode code into HTML 5 code, surely it should be possible to turn HTML code
into LiveCode in the same sort of way?
---
Warning: HTML
---

Code: Select all

#target{
    position:absolute;
    top:-3500px;
    bottom:0;
    left:0;
    right:0;
    overflow:hidden;
    font-size:30px;
    text-align:center;
    font-family:sans-serif;
}
#target>div{
    padding-top:3500px;
    animation:autoscroll 1000s linear;
}
html:after{
    content:'';
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background:linear-gradient(top,rgba(0,0,0,1),rgba(0,0,0,0) 100%);
    background:linear-gradient(to bottom,rgba(0,0,0,1),rgba(0,0,0,0) 100%);
    pointer-events:none;
}

body{
    
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    transform-origin:50% 100%;
    transform:perspective(300px) rotateX(20deg);
}
html{
    color:yellow;
    background:black;
}
@keyframes autoscroll{
    to{
        margin-top:-50000px;
    }    
}

Or, at the very least, maybe we should start badgering the LiveCode team for implementation of

autoscroll

and

perspective

in LiveCode.

[Klaus]

Did you also stomp your foot?
Well, ask the scots-men and -women...

[richmond62]

Did you also stomp your foot?

If I knew how to do that in the Forums or on the Use-List I probably would.

Hmm: https://quality.livecode.com/show_bug.cgi?id=7664

[richmond62]

Of course you could do this sort of thing:

Code: Select all

put 1 into KOUNT
repeat until KOUNT > 500
set the scroll of fld "whereYourTextIs" to KOUNT
add 1 to KOUNT
end repeat

not entirely sure how you would square that with messing around with textSize of lines
(which would probably make the thing jerk).

Ouch: just tried that (without text resizing), and it is as jerky as a jerky thing.

I don't think that LiveCode's 'problem' is with animation qua animation, I think it has something to do with
how long it takes for each instruction to get from the stack to the CPU of the machine the code is running on.

[jacque]

Richmond, your last example is identical to my suggestion only mine doesn't lock up the computer. Repeat loops have their place but aren't practical for very long operations unless they yield time to the CPU.

[SparkOut]

Part of the problem with rendering in a field is that every single change of any sort in a field then has to be processed to rerender the current visible contents, even if it it just one character or one pixel scroll. A whole shedload of messages are created and/or handled each time. When unicode auto-handling was introduced it caused a big overhead because each char (codepoint) had to deal with a second byte being processed every time. This makes the engine work hard, whereas I believe with a browser instance the work is palmed off to the browser's own implementation framework.
But as jacque says, any loop in LiveCode also needs to allow the engine time to deal with normal housekeeping and redraw events, or else it will choke.

[jacque]

I just tested my contribution and it seems pretty smooth to me. (I also corrected my original post where auto-correct changed "doScroll" to "do Scroll".)

I set up the field with 22-point text and 62 pt textheight to give enough space between lines. My original post works for me as-is without any other adjustments. Changing the scroll amount from 2 to 1 would give slightly slower scrolling. Interestingly, reducing the send time from 10 milliseconds to 5 introduces some slightly noticeable jerkiness, and reducing it to 2 milliseconds makes it worse. I think this is the LC engine struggling to keep up with the redraw, as SparkOut talked about.

For me, the most ideal settings are 1 to 2 pixel increments and 8-20 milliseconds between calls.

[dunbarx]

The problem is that LC has no lineSize property that can be applied to individual lines, as opposed to the field as a whole. One can change the textSize on a line by line basis, but to eliminate jerkiness, both are required.

To scroll smoothly is straightforward. To reduce the text of individual lines as one scrolls upward is straightforward. But to decrease the lineSize so the whole visual looks as smooth as Star Wars has escaped me.

My approach was to delete line 1 as it "exited" out the top, all along sequentially reducing the textsize of the "next" dozen or so lines, all while scrolling.

Still jerky. But I see everyone is partying. Where is this perfect solution?

Scroller.livecode.zip

(1.66 KiB) Downloaded 246 times

Craig

[FourthWorld]

Animations of any kind has always been one of the weak points in LC

I'm going to become like a 4 year old child and keep asking Why.

If the HTML engine in LiveCode can turn LiveCode code into HTML 5 code, surely it should be possible to turn HTML code
into LiveCode in the same sort of way?

Review the source for LiveCode and Firefox and the reasons they handle rendering differently will become clearer.

[bn]

Hi Mark,

I looked up some old stuff and "repurposed" it to scrolling text.

Put the text you want into the field. Then click button "fill data in". It populates the scroller. (it actually puts the text twice into the scroller for endless scrolling.)

Then you can click checkbox "advance scroll" and it will start to scroll.
If you change the size of the scroller via button "resize" the scroller, which is a rather complicated assembly of graphics and a field, will move a bit choppy when hitting "advance scroll". To make scrolling smooth again click button "make iOSready(creates image)". This will take a snapshot of the grapics and overlay the field with the same look as the graphics but a lot less straing on rendering because only the field is moving behind the static image with transparencies.

You can also click on the display field and move the mouse and the text will scroll and snap to the middle.

Please feel free to ask if something should be changed in case you want to use this thing.

ScrollingText_Credits.livecode.zip

let the credits roll

(18.98 KiB) Downloaded 250 times

Kind regards
Bernd

[marksmithhfx]

Hi Mark,

I looked up some old stuff and "repurposed" it to scrolling text.

Put the text you want into the field. Then click button "fill data in". It populates the scroller. (it actually puts the text twice into the scroller for endless scrolling.)
Bernd

WOW! Impressive, and rivals the smoothness of the HTML5 solution Richmond has been talking about. I didn't break into the code, but you've obviously come up with a very clever solution. I'll probably still use Jacques simpler solution for this situation... but there are some great lessons in your example I am going to have to go spend some time thinking about.

Impressive as usual, Bernd. Thanks

Mark

[jacque]

Bernd's stuff is always beautiful and clever.