Lesson Details

Author: Trevor DeVore
Last Updated: 15 Apr 11:08

Tags

Revolution, Fields
0 comments for this lesson

Alternating Line Colors in a List Field

This lesson will demonstrate how to create alternating line colors in a Revolution list field. This technique requires version 2.8.1 or later of Revolution.

Create an Image

Drag an image from the Tools Palette onto a stack.

Paste CreateFieldAlternatingColors Handler Into Stack Script

Paste the following script into the stack script. This will put the handler in the message path. This handler is used to create the image that will be used for the alternating colors in the field.

command CreateFieldAlternatingColors pDestImg, pColor1, pColor2, pRowHeight, pWidth, pOffset
    local theColor1Pixel,theColor1Row,theColor1RowImgData,theColor2Pixel
    local theColor2Row,theColor2RowImgData,theOffsetRow,thePixel
    local theRect,theRow

    if pRowHeight is empty then put 18 into pRowHeight
    if pWidth is empty then put 500 into pWidth
    put max(0, pOffset) into pOffset

    ## turn strings into arrays
    split pColor1 by comma
    split pColor2 by comma

    ## Create a pixel for color 1 and 2
    put numtochar(0) into theColor1Pixel
    put numtochar(pColor1[1]) after theColor1Pixel
    put numtochar(pColor1[2]) after theColor1Pixel
    put numtochar(pColor1[3]) after theColor1Pixel

    put numtochar(0) into theColor2Pixel
    put numtochar(pColor2[1]) after theColor2Pixel
    put numtochar(pColor2[2]) after theColor2Pixel
    put numtochar(pColor2[3]) after theColor2Pixel

    ## build 1 complete row of using pixel
    repeat with thePixel = 1 to pWidth
        put theColor1Pixel after theColor1RowImgData
        put theColor2Pixel after theColor2RowImgData
    end REPEAT

    ## if pOffset is set then build sliver of row 2 color
    repeat with theRow = 1 to pOffset
        put theColor2RowImgData after theOffsetRow
    end repeat

    ## build color 1 row
    repeat with theRow = 1 to pRowHeight
        put theColor1RowImgData after theColor1Row
    end REPEAT

    ## finish building row 2 color
    repeat with theRow = 1 to pRowHeight - pOffset
        put theColor2RowImgData after theColor2Row
    end repeat

    put the rect of pDestImg into theRect
    put item 1 of theRect + pWidth into item 3 of theRect
    put item 2 of theRect + pRowHeight * 2 into item 4 of theRect

    lock screen
    set the rect of pDestImg to theRect
    set the imagedata of pDestImg to theOffsetRow & theColor1Row & theColor2Row
    unlock screen
end CreateFieldAlternatingColors

Call CreateFieldAlternatingColors

Pay particular attention to the 4th (1) and 6th (2) parameters. The 4th parameter will match the height of each line in your list field. The 6th parameter is an offset value. We pass in 2 for the offset which means there will be 2 rows of color 2 (parameter 3), 18 rows of color 1 (parameter 2) and then 16 rows of color 2. This is necessary in order for the highlighted color of the selected line to match up with the alternating background colors.

This is what the image looks like afterwards.

Make Note of the Image ID

We need this value when setting the backgroundPattern of the list field.

Create a List Field

Drag a list field from the tools palette to the card.

Edit "Colors & Patterns"

Click on the Fill pattern swatch.

Enter the Image ID

Manually enter the id of the image. Press OK.

Your field should now look something like this.

Change Margins

In order for the alternating line colors to match up with the lines correctly you will most likely need to change the margins. I get good results by setting the margins to 8,6,8,5. Since this stack is running on OS X I also changed the font size to 13. On Windows I would use Tahoma with a font size of 12.

Change textHeight Property

The final step is to set the textHeight property. In the Basic Properties pane change the textHeight property to 18. This value matches the height of each row in the image.

Comments (0)

Add your comment

Are you human?