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.
0 Comments
Add your comment