Here is an example using the HTML5 Canvas document. It's just an idea to help you to get started. You can probably adapt to AS3 - if needed - without many problems.
Preview:
https://bit.ly/44v7LnG
JavaScript code (main timeline):
var wave;
function main()
{
wave = new createjs.Shape();
wave.counter = 0;
wave.step = 0.1;
wave.period = 100;
wave.amplitude = 60;
wave.width = lib.properties.width;
wave.color = "black";
wave.resolution = 0.1;
wave.y = lib.properties.height * 0.5;
root.addChild(wave);
createjs.Ticker.timingMode = createjs.Ticker.RAF_SYNCHED;
createjs.Ticker.on("tick", onTick);
}
function onTick()
{
wave.height = Math.sin(wave.counter) * wave.amplitude;
wave.counter += wave.step;
wave.graphics.clear();
renderSineWave
({
shape: wave,
period: wave.period,
width: wave.width,
height: wave.height,
resolution: wave.resolution,
color: wave.color
});
renderLine
({
shape: wave,
x0: 0,
y0: -wave.height,
x1: wave.width,
y1: -wave.height,
color: "red"
});
renderLine
({
shape: wave,
x0: 0,
y0: wave.height,
x1: wave.width,
y1: wave.height,
color: "blue"
});
}
function renderSineWave(props)
{
var angle;
props.shape.graphics.beginStroke(props.color);
for (angle = 0; angle < props.width; angle += props.resolution)
{
var x = angle * props.period;
var y = Math.sin(angle) * props.height;
props.shape.graphics.lineTo(x, y);
}
}
function renderLine(props)
{
props.shape.graphics.beginStroke(props.color);
props.shape.graphics.moveTo(props.x0, props.y0);
props.shape.graphics.lineTo(props.x1, props.y1);
}
window.root = this;
main();
Download / Code / FLA / source:
https://bit.ly/4blp9gL
I hope this helps.
Regards,
JC
... View more