Structured Canvas Language™ - Writing Clock Cheese

Start - animated title graphics

Two speech bubbles will now animated into view. Since each of these sprites have only this single purpose we will define their animation in the definitions. This uses alteration chaining where the first alteration is a 'wait'. When the wait is completed, the sprite moves into view with a translation alteration.
Chaining is further explained here.

New code in red


create sprite from title.png as TitleImg
	where x=0 y=0
end

create sprite as Ring
	where
		center=340,340
end

create sprite from clockFace.png as ClockFace
	where center=270,260 x=330 y=310
end
create sprite from bigHand.png as BigHand
	where center=77,34 x=321 y=500
end
create sprite from smallHand.png as SmallHand
	where center=90,26 x=254 y=509
end


create sprite from title-speech-1.png as TitleSpeech1
	where center=350,0 x=0 y=445
	having alt=(sub
		create wait where delay=1000 completion=(sub
		create translation where x=368 easeout=30 speed=1200
		end) end)
end

create sprite from title-speech-2.png as TitleSpeech2
	where center=0,0 x=601 y=600
	having alt=(sub
		create wait where delay=3000 completion=(sub
		create translation where x=235 easeout=30 speed=1200
		end) end)
end

create routine as Start
	launch TitleImg

	clone from Ring using original
	update sprite _clone where size=.5 and image="blueRing.png" and x=170 and y=120
	insert into _clone where alt=(sub
		create rotation where speed=-40
		end)

	clone from Ring using original
	update sprite _clone where size=.7 and image="redRing.png" and x=160 and y=590
	insert into _clone where alt=(sub
		create rotation where speed=40
		end)

	clone from Ring using original
	update sprite _clone where size=.6 and image="greenRing.png" and x=550 and y=350
	insert into _clone where alt=(sub
		create rotation where speed=40
		end)

	clone from Ring using original
	update sprite _clone where size=.2 and image="barRing.png" and x=500 and y=100
	insert into _clone where alt=(sub
		create rotation where speed=-40
		end)

	clone from Ring using original
	update sprite _clone where size=.35 and image="redRing.png" and x=200 and y=390
	insert into _clone where alt=(sub
		create rotation where speed=40
		end)

	clone from Ring using original
	update sprite _clone where size=.4 and image="greenRing.png" and x=550 and y=750
	insert into _clone where alt=(sub
		create rotation where speed=40
		end)

	launch ClockFace
	launch SmallHand
	launch BigHand


	launch TitleSpeech1
	launch TitleSpeech2

end

We launched the speech bubbles at the same time as the other title sprites, but because of the 'wait' alteration applied to each of them, we don't see them immediately.

Notice that the translation alterations have an "easeout" property. This tells the translation to gradually slow down as approaching the destination. The value of "easeout" is the distance from the destination where to start slowing.

There is also an "easein" property that functions similarly.

Check back soon for the next part or follow on us Twitter

March 10, 2016