How to Create an HTML Strike Effect in Actionscript 3

  • Sharebar

In HTML by using the <strike> tag you can create text with a line through it like this.

I wanted to create the same effect in a wordsearch game I was making, so that when a word was found, it would appear to be crossed off the list. Up until then, I had just been changing the colour the text was written in.

I wasn’t able to find an easy way of doing this, so I used the Flash Drawing API to do the effect. After creating the function, I decided it looked quite useful so decided to make it into an external function. Actionscript already comes with a number of external functions, such as getURL. They are essentially functions that are in their own .as file, but aren’t a full class.

Although the function was made to do a strike effect, it can be used to draw any line wanted.

Here’s an example of the effect from using the function.

Draw Line Function

package com.directorygold.games.utils
{
    import flash.display.DisplayObjectContainer;
    import flash.display.Shape;
    import flash.geom.Point;
 
    public function drawLine(doc:DisplayObjectContainer, startX:Number, startY:Number, lineLength:Number, lineThickness:Number, lineColour:uint, offsetX:Number = 0, offsetY:Number = 0):void {
        var drawingCanvas:Shape = new Shape();
 
        drawingCanvas.graphics.clear();
        drawingCanvas.graphics.lineStyle(lineThickness, lineColour);
        drawingCanvas.graphics.moveTo(0, 0);
        drawingCanvas.graphics.lineTo(lineLength, 0);
 
        doc.addChildAt(drawingCanvas, doc.numChildren);
        drawingCanvas.x = startX + offsetX;
        drawingCanvas.y = startY + offsetY;
    }
}

doc: This is the DisplayObjectContainer the line will be attached to. If making a line through text, this would be the desired TextField.

startX: The x co-ordinate to start drawing the line at.

startY: The y co-ordinate to start drawing the line at.

lineLength: How long, in pixels, to draw the line.

lineThickness: What thickness, in pixels, to draw the line.

lineColour: The hex colour of the line.

offsetX: If you want the line to start at a different x to the x co-ordinate passed earlier, this is the pixel offset, either positive or negative, to change it by.

offsetY: If you want the line to start at a different y to the y co-ordinate passed earlier, this is the pixel offset, either positive or negative, to change it by.

offsetX and offsetY are used if for some reason the x and y co-ordinates you pass aren’t quite where you want the line to begin.

For example, if passing the x and y co-ordinates of a TextField, you might actually want the line to begin before the TextField does. This difference can be passed in the offsetX and offsetY.

This entry was posted in ActionScript and tagged , . Bookmark the permalink.