pxt-calliope/docs/reference/images/scroll-image.md

74 lines
1.8 KiB
Markdown
Raw Normal View History

2016-03-26 00:47:20 +01:00
# Scroll Image
2016-04-02 01:22:47 +02:00
The scroll image function.
2016-03-26 00:47:20 +01:00
2016-04-16 00:02:26 +02:00
Scrolls the frames within an [Image](/reference/images/image) on the [LED screen](/device/screen).
2016-03-26 00:47:20 +01:00
### Block Editor
![](/static/mb/scroll-image-0.png)
2016-04-18 17:33:09 +02:00
### JavaScript
2016-03-26 00:47:20 +01:00
```
export function scrollImage(_this: micro_bit.Image, xOffsetPerStep: number, interval: number)
```
### Parameters
2016-04-13 17:27:45 +02:00
* x offset per step : [Number](/reference/types/number) - the number of columns to scroll at a time (horizontal offset). Use a positive number to scroll an image to the right and a negative number to scroll left. To jump from one image frame to the next, use an offset of 5 or -5.
* interval (ms) : [Number](/reference/types/number) - the time (in milliseconds) before scrolling by `x offset per step`; the larger the number, the slower the scroll.
2016-03-26 00:47:20 +01:00
### ~hide
```
let img = images.createImage(`
. . # . . . # # # . . # # # .
. . # . . . . . # . . . . # .
. . # . . . . # . . . # # # .
. . # . . . # . . . . . . # .
. . # . . . # # # . . # # # .
`)
```
### ~
To scroll an image 1 column at a time to the right:
```
img.scrollImage(1, 1000)
```
To scroll an image 5 columns at a time (skip from frame to frame):
```
img.scrollImage(5, 1000)
```
To scroll an image 1 column at a time to the left:
```
img.scrollImage(-1, 500)
```
### Example: scroll through frames
This example creates an image with 3 frames, then scrolls through the 3 frames:
```
img = images.createImage(`
. . # . . . # # # . . # # # .
. . # . . . . . # . . . . # .
. . # . . . . # . . . # # # .
. . # . . . # . . . . . . # .
. . # . . . # # # . . # # # .
`)
img.showImage(0)
img.scrollImage(5, 1000)
```
### See also
2016-04-16 00:02:26 +02:00
[show image](/reference/images/show-image), [image](/reference/images/image), [create image](/reference/images/create-image), [show animation](/reference/basic/show-animation)
2016-03-26 00:47:20 +01:00