Hende/Servespeed-SMARTGFX
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

initial

Browse Source
This commit is contained in:
William Henderson
2025-11-07 15:43:11 +00:00
commit 8973e5531d
4 changed files with 502 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
The Palace 2025/shells.zip
BIN
View File
Binary file not shown.
The Palace 2025/speedboard.html
+90
View File
@@ -0,0 +1,90 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="authoring-tool" content="Adobe_Animate_CC">
<title>speedboard</title>
<link href="/shells/tennis_wtt_2020_speedboard/assets/fonts.css" rel="stylesheet" type="text/css">
<div class="font_preload" style="opacity: 0">
<span style="font-family: 'Sharp Sans Display No1 Bold'"></span>
<span style="font-family: 'Sharp Sans Display No1 Medium'"></span>
<span style="font-family: 'Sharp Sans Display No1 Semi-Bold'"></span>
</div>
<script src='/shells/createjs/createjs-2018.03.15-V2.combined.js'></script>
<!-- write your code here -->
<script src="speedboard.js"></script>
<script>
// Global Scripts
var currentTimestamp = 0;
function KPHtoMPH(ms) {
return Math.floor(Number(ms || 0) * 0.62);
}
//const EasingFunctions = {
// // no easing, no acceleration
// linear: function (t) { return t },
// // accelerating from zero velocity
// easeInQuad: function (t) { return t*t },
// // decelerating to zero velocity
// easeOutQuad: function (t) { return t*(2-t) },
// // acceleration until halfway, then deceleration
// easeInOutQuad: function (t) { return t<.5 ? 2*t*t : -1+(4-2*t)*t },
// // accelerating from zero velocity
// easeInCubic: function (t) { return t*t*t },
// // decelerating to zero velocity
// easeOutCubic: function (t) { return (--t)*t*t+1 },
// // acceleration until halfway, then deceleration
// easeInOutCubic: function (t) { return t<.5 ? 4*t*t*t : (t-1)*(2*t-2)*(2*t-2)+1 },
// // accelerating from zero velocity
// easeInQuart: function (t) { return t*t*t*t },
// // decelerating to zero velocity
// easeOutQuart: function (t) { return 1-(--t)*t*t*t },
// // acceleration until halfway, then deceleration
// easeInOutQuart: function (t) { return t<.5 ? 8*t*t*t*t : 1-8*(--t)*t*t*t },
// // accelerating from zero velocity
// easeInQuint: function (t) { return t*t*t*t*t },
// // decelerating to zero velocity
// easeOutQuint: function (t) { return 1+(--t)*t*t*t*t },
// // acceleration until halfway, then deceleration
// easeInOutQuint: function (t) { return t<.5 ? 16*t*t*t*t*t : 1+16*(--t)*t*t*t*t }
//}</script>
<script>
var canvas, stage, exportRoot, anim_container, dom_overlay_container, fnStartAnimation, loader_handle;
function init() {
canvas = document.getElementById("canvas");
anim_container = document.getElementById("animation_container");
dom_overlay_container = document.getElementById("dom_overlay_container");
var comp=AdobeAn.getComposition("36D6E8BDDCB50B4D9681420AF6CA779E");
var lib=comp.getLibrary();
handleComplete({},comp);
if(typeof loader != "undefined") loader_handle = loader;
}
function handleComplete(evt,comp) {
//This function is always called, irrespective of the content. You can use the variable "stage" after it is created in token create_stage.
var lib=comp.getLibrary();
var ss=comp.getSpriteSheet();
exportRoot = new lib.speedboard();
stage = new lib.Stage(canvas);
//Registers the "tick" event listener.
fnStartAnimation = function() {
stage.addChild(exportRoot);
createjs.Ticker.framerate = lib.properties.fps;
createjs.Ticker.addEventListener("tick", stage);
}
//Code to support hidpi screens and responsive scaling.
AdobeAn.makeResponsive(false,'both',false,1,[canvas,anim_container,dom_overlay_container]);
AdobeAn.compositionLoaded(lib.properties.id);
fnStartAnimation();
}
</script>
<!-- write your code here -->
<script src="/lib/SMARTGraphicsLinkAnimate.js"></script>
<script src="/shells/createjs/linefix.js"></script>
</head>
<body onload="init();" style="margin:0px;">
<div id="animation_container" style="background-color:rgba(50, 50, 50, 0.00); width:1920px; height:1080px">
<canvas id="canvas" width="1920" height="1080" style="position: absolute; display: block; background-color:rgba(50, 50, 50, 0.00);"></canvas>
<div id="dom_overlay_container" style="pointer-events:none; overflow:hidden; width:1920px; height:1080px; position: absolute; left: 0px; top: 0px; display: block;">
</div>
</div>
</body>
</html>
The Palace 2025/speedboard.js
+352
View File
@@ -0,0 +1,352 @@
(function (cjs, an) {
var p; // shortcut to reference prototypes
var lib={};var ss={};var img={};
lib.ssMetadata = [];
(lib.AnMovieClip = function(){
this.actionFrames = [];
this.ignorePause = false;
this.gotoAndPlay = function(positionOrLabel){
cjs.MovieClip.prototype.gotoAndPlay.call(this,positionOrLabel);
}
this.play = function(){
cjs.MovieClip.prototype.play.call(this);
}
this.gotoAndStop = function(positionOrLabel){
cjs.MovieClip.prototype.gotoAndStop.call(this,positionOrLabel);
}
this.stop = function(){
cjs.MovieClip.prototype.stop.call(this);
}
}).prototype = p = new cjs.MovieClip();
// symbols:
// helper functions:
function mc_symbol_clone() {
var clone = this._cloneProps(new this.constructor(this.mode, this.startPosition, this.loop, this.reversed));
clone.gotoAndStop(this.currentFrame);
clone.paused = this.paused;
clone.framerate = this.framerate;
return clone;
}
function getMCSymbolPrototype(symbol, nominalBounds, frameBounds) {
var prototype = cjs.extend(symbol, cjs.MovieClip);
prototype.clone = mc_symbol_clone;
prototype.nominalBounds = nominalBounds;
prototype.frameBounds = frameBounds;
return prototype;
}
(lib.unit = function(mode,startPosition,loop,reversed) {
if (loop == null) { loop = false; }
if (reversed == null) { reversed = false; }
var props = new Object();
props.mode = mode;
props.startPosition = startPosition;
props.labels = {};
props.loop = loop;
props.reversed = reversed;
cjs.MovieClip.apply(this,[props]);
this.isSingleFrame = false;
// timeline functions:
this.frame_0 = function() {
if(this.isSingleFrame) {
return;
}
if(this.totalFrames == 1) {
this.isSingleFrame = true;
}
var data = SMARTGfxLink.data || {};
this.unitStyle.maxWidth = 1800;
this.unitStyle.lineWidth = null;
this.unitStyle.text = data.unitText;
}
// actions tween:
this.timeline.addTween(cjs.Tween.get(this).call(this.frame_0).wait(1));
// Layer_1
this.text = new cjs.Text("", "80px 'CodecPro-Bold'", "#2AB41F");
this.text.textAlign = "center";
this.text.lineHeight = 101;
this.text.lineWidth = 100;
this.text.parent = this;
this.text.setTransform(-1033.65,739.25);
this.unitStyle = new cjs.Text("km/h", "bold 50px 'Consolas'", "#FFFFFF");
this.unitStyle.name = "unitStyle";
this.unitStyle.textAlign = "center";
this.unitStyle.lineHeight = 61;
this.unitStyle.lineWidth = 280;
this.unitStyle.parent = this;
this.unitStyle.setTransform(-0.05,-135.9);
this.timeline.addTween(cjs.Tween.get({}).to({state:[{t:this.unitStyle},{t:this.text}]}).wait(1));
this._renderFirstFrame();
}).prototype = getMCSymbolPrototype(lib.unit, new cjs.Rectangle(-1085.6,-137.9,1227.5,977.8), null);
(lib.speed_clip = function(mode,startPosition,loop,reversed) {
if (loop == null) { loop = false; }
if (reversed == null) { reversed = false; }
var props = new Object();
props.mode = mode;
props.startPosition = startPosition;
props.labels = {};
props.loop = loop;
props.reversed = reversed;
cjs.MovieClip.apply(this,[props]);
// timeline functions:
this.frame_0 = function() {
var data = SMARTGfxLink.data || {};
var unit = data.unitType;
//var animationLength = 42;
//var startFrame = this.currentFrame;
if (unit == "KPH") {
var serveSpeed = data.serveSpeed;
this.speed.text = parseFloat(serveSpeed).toFixed(0) || "";
/*const countUpAnimation = () => {
var frameDifference = this.currentFrame - startFrame;
var progress = EasingFunctions.easeOutCubic(frameDifference/animationLength);
this.speed.text = Math.max(Math.min( (serveSpeed * (progress) ), serveSpeed), 0).toFixed(0);
}
this.addEventListener('tick', countUpAnimation);*/
} else if (unit == "MPH") {
var serveSpeed = KPHtoMPH(data.serveSpeed);
this.speed.text = parseFloat(serveSpeed).toFixed(0) || "";
/*const countUpAnimation = () => {
var frameDifference = this.currentFrame - startFrame;
var progress = EasingFunctions.easeOutCubic(frameDifference/animationLength);
this.speed.text = Math.max(Math.min( (serveSpeed * (progress) ), serveSpeed), 0).toFixed(0);
}
this.addEventListener('tick', countUpAnimation);*/
}
}
this.frame_1 = function() {
this.gotoAndPlay(0);
}
// actions tween:
this.timeline.addTween(cjs.Tween.get(this).call(this.frame_0).wait(1).call(this.frame_1).wait(1));
// Layer 1
this.speed = new cjs.Text("134", "bold 75px 'Consolas'", "#FFFFFF");
this.speed.name = "speed";
this.speed.textAlign = "center";
this.speed.lineHeight = 90;
this.speed.lineWidth = 354;
this.speed.parent = this;
this.speed.setTransform(-74.6,-100.35);
this.timeline.addTween(cjs.Tween.get(this.speed).wait(1).to({x:178,y:-138.65,font:"bold 200px 'Sharp Sans Display No1'",textAlign:NaN,lineHeight:265},0).wait(1));
this._renderFirstFrame();
}).prototype = p = new cjs.MovieClip();
p.nominalBounds = new cjs.Rectangle(-253.5,-140.6,433.5,305.29999999999995);
// stage content:
(lib.speedboard = function(mode,startPosition,loop,reversed) {
if (loop == null) { loop = true; }
if (reversed == null) { reversed = false; }
var props = new Object();
props.mode = mode;
props.startPosition = startPosition;
props.labels = {};
props.loop = loop;
props.reversed = reversed;
cjs.MovieClip.apply(this,[props]);
this.actionFrames = [5,13];
// timeline functions:
this.frame_5 = function() {
this.stop();
SMARTGfxLink.incrementKeyframe();
}
this.frame_13 = function() {
SMARTGfxLink.reset();
}
// actions tween:
this.timeline.addTween(cjs.Tween.get(this).wait(5).call(this.frame_5).wait(8).call(this.frame_13).wait(2));
// speed
this.speedClip = new lib.speed_clip();
this.speedClip.name = "speedClip";
this.speedClip.setTransform(882.25,1254.25,0.9387,0.9385,0,0,0,703.5,382.9);
this.speedClip._off = true;
this.timeline.addTween(cjs.Tween.get(this.speedClip).wait(1).to({_off:false},0).to({_off:true},12).wait(2));
// unit
this.unitClip = new lib.unit();
this.unitClip.name = "unitClip";
this.unitClip.setTransform(1170.65,1446.4,1.2363,1.2336,0,0,0,703.5,382.7);
this.unitClip._off = true;
this.timeline.addTween(cjs.Tween.get(this.unitClip).wait(1).to({_off:false},0).to({_off:true},12).wait(2));
// Layer_1
this.text = new cjs.Text("", "50px 'Consolas-Bold'", "#FFFFFF");
this.text.textAlign = "center";
this.text.lineHeight = 61;
this.text.lineWidth = 100;
this.text.parent = this;
this.text.setTransform(240.2,1227.05);
this.timeline.addTween(cjs.Tween.get(this.text).wait(15));
this._renderFirstFrame();
}).prototype = p = new lib.AnMovieClip();
p.nominalBounds = new cjs.Rectangle(-81.3,1338.9,557.6999999999999,671.5);
// library properties:
lib.properties = {
id: '36D6E8BDDCB50B4D9681420AF6CA779E',
width: 1920,
height: 1080,
fps: 50,
color: "#323232",
opacity: 0.00,
manifest: [],
preloads: []
};
// bootstrap callback support:
(lib.Stage = function(canvas) {
createjs.Stage.call(this, canvas);
}).prototype = p = new createjs.Stage();
p.setAutoPlay = function(autoPlay) {
this.tickEnabled = autoPlay;
}
p.play = function() { this.tickEnabled = true; this.getChildAt(0).gotoAndPlay(this.getTimelinePosition()) }
p.stop = function(ms) { if(ms) this.seek(ms); this.tickEnabled = false; }
p.seek = function(ms) { this.tickEnabled = true; this.getChildAt(0).gotoAndStop(lib.properties.fps * ms / 1000); }
p.getDuration = function() { return this.getChildAt(0).totalFrames / lib.properties.fps * 1000; }
p.getTimelinePosition = function() { return this.getChildAt(0).currentFrame / lib.properties.fps * 1000; }
an.bootcompsLoaded = an.bootcompsLoaded || [];
if(!an.bootstrapListeners) {
an.bootstrapListeners=[];
}
an.bootstrapCallback=function(fnCallback) {
an.bootstrapListeners.push(fnCallback);
if(an.bootcompsLoaded.length > 0) {
for(var i=0; i<an.bootcompsLoaded.length; ++i) {
fnCallback(an.bootcompsLoaded[i]);
}
}
};
an.compositions = an.compositions || {};
an.compositions['36D6E8BDDCB50B4D9681420AF6CA779E'] = {
getStage: function() { return exportRoot.stage; },
getLibrary: function() { return lib; },
getSpriteSheet: function() { return ss; },
getImages: function() { return img; }
};
an.compositionLoaded = function(id) {
an.bootcompsLoaded.push(id);
for(var j=0; j<an.bootstrapListeners.length; j++) {
an.bootstrapListeners[j](id);
}
}
an.getComposition = function(id) {
return an.compositions[id];
}
an.makeResponsive = function(isResp, respDim, isScale, scaleType, domContainers) {
var lastW, lastH, lastS=1;
window.addEventListener('resize', resizeCanvas);
resizeCanvas();
function resizeCanvas() {
var w = lib.properties.width, h = lib.properties.height;
var iw = window.innerWidth, ih=window.innerHeight;
var pRatio = window.devicePixelRatio || 1, xRatio=iw/w, yRatio=ih/h, sRatio=1;
if(isResp) {
if((respDim=='width'&&lastW==iw) || (respDim=='height'&&lastH==ih)) {
sRatio = lastS;
}
else if(!isScale) {
if(iw<w || ih<h)
sRatio = Math.min(xRatio, yRatio);
}
else if(scaleType==1) {
sRatio = Math.min(xRatio, yRatio);
}
else if(scaleType==2) {
sRatio = Math.max(xRatio, yRatio);
}
}
domContainers[0].width = w * pRatio * sRatio;
domContainers[0].height = h * pRatio * sRatio;
domContainers.forEach(function(container) {
container.style.width = w * sRatio + 'px';
container.style.height = h * sRatio + 'px';
});
stage.scaleX = pRatio*sRatio;
stage.scaleY = pRatio*sRatio;
lastW = iw; lastH = ih; lastS = sRatio;
stage.tickOnUpdate = false;
stage.update();
stage.tickOnUpdate = true;
}
}
an.handleSoundStreamOnTick = function(event) {
if(!event.paused){
var stageChild = stage.getChildAt(0);
if(!stageChild.paused || stageChild.ignorePause){
stageChild.syncStreamSounds();
}
}
}
an.handleFilterCache = function(event) {
if(!event.paused){
var target = event.target;
if(target){
if(target.filterCacheList){
for(var index = 0; index < target.filterCacheList.length ; index++){
var cacheInst = target.filterCacheList[index];
if((cacheInst.startFrame <= target.currentFrame) && (target.currentFrame <= cacheInst.endFrame)){
cacheInst.instance.cache(cacheInst.x, cacheInst.y, cacheInst.w, cacheInst.h);
}
}
}
}
}
}
})(createjs = createjs||{}, AdobeAn = AdobeAn||{});
var createjs, AdobeAn;