• Content Count

  • Joined

  • Last visited

Everything posted by trial

  1. I see, perhaps a delay would be a good idea. Using this? setTimeout(function(){ <code here> }, 5000); Should I put it inside function resizeCanvas()? With the rest of it's code inside the setTimeout function? Update: You were right, mattstyles. After putting a setTimeout function to delay the resizeCanvas function, the canvas is now scaling properly. Instead of 5000, I put 20, because it seems to work instantaneously at that lower value. If anyone has a better idea how to implement it, please let me know. Thanks so much!
  2. Anyone has any ideas why the responsive code doesn't work?
  3. This code worked for me to change the movieclip to the frame label that I wanted: stage.on("goToFrameLabel", initAllFrameMCs, this, true); function initAllFrameMCs() { this.movieClip_mc.gotoAndStop("start"); }
  4. Strangely enough, when I added this code, and my iOS device has that blue header (for personal hotspot), the standalone web app scales back bigger as normal when the screen orientation changes. It only works in hotspot mode though. window.addEventListener("orientationchange", function () { document.width = window.screen.width; });
  5. Using Animate CC, with publish settings set to make responsive = both, center = both, scale to fill visible area = fit in view, like this: In mobile Safari, everything works out well, the canvas resizes as normal when screen orientation changes. When saved to Home Screen as standalone web app though, the canvas isn't resizing after changing to a smaller size, like this: Here's the full html code generated by Animate CC: <!DOCTYPE html> <!-- NOTES: 1. All tokens are represented by '$' sign in the template. 2. You can write your code only wherever mentioned. 3. All occurrences of existing tokens will be replaced by their appropriate values. 4. Blank lines will be removed automatically. 5. Remove unnecessary comments before creating your template. --> <html> <head> <meta charset="UTF-8"> <meta name = "viewport" content = "width=device-width,initial-scale=1" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> <meta name="authoring-tool" content="Adobe_Animate_CC"> <title>testView</title> <!-- write your code here --> <style> #animation_container { position:absolute; margin:auto; left:0;right:0; top:0;bottom:0; } </style> <script src=""></script> <script> (function (cjs, an) { var p; // shortcut to reference prototypes var lib={};var ss={};var img={}; lib.ssMetadata = []; // symbols: // stage content: (lib.testView = function(mode,startPosition,loop) { this.initialize(mode,startPosition,loop,{}); }).prototype = p = new cjs.MovieClip(); p.nominalBounds = null; // library properties: = { id: '035086AC98814BD6A0BA64225202ABA0', width: 400, height: 550, fps: 24, color: "#3366FF", opacity: 1.00, manifest: [], preloads: [] }; // bootstrap callback support: (lib.Stage = function(canvas) {, canvas); }).prototype = p = new createjs.Stage(); p.setAutoPlay = function(autoPlay) { this.tickEnabled = autoPlay; } = function() { this.tickEnabled = true; this.getChildAt(0).gotoAndPlay(this.getTimelinePosition()) } p.stop = function(ms) { if(ms); this.tickEnabled = false; } = function(ms) { this.tickEnabled = true; this.getChildAt(0).gotoAndStop( * ms / 1000); } p.getDuration = function() { return this.getChildAt(0).totalFrames / * 1000; } p.getTimelinePosition = function() { return this.getChildAt(0).currentFrame / * 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['035086AC98814BD6A0BA64225202ABA0'] = { getStage: function() { return exportRoot.getStage(); }, 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]; } })(createjs = createjs||{}, AdobeAn = AdobeAn||{}); var createjs, AdobeAn; </script> <script> var canvas, stage, exportRoot, anim_container, dom_overlay_container, fnStartAnimation; function init() { canvas = document.getElementById("canvas"); anim_container = document.getElementById("animation_container"); dom_overlay_container = document.getElementById("dom_overlay_container"); var comp=AdobeAn.getComposition("035086AC98814BD6A0BA64225202ABA0"); var lib=comp.getLibrary(); handleComplete({},comp); } 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.testView(); stage = new lib.Stage(canvas); //Registers the "tick" event listener. fnStartAnimation = function() { stage.addChild(exportRoot); createjs.Ticker.setFPS(; createjs.Ticker.addEventListener("tick", stage); } //Code to support hidpi screens and responsive scaling. function makeResponsive(isResp, respDim, isScale, scaleType) { var lastW, lastH, lastS=1; window.addEventListener('resize', resizeCanvas); resizeCanvas(); function resizeCanvas() { var w =, h =; 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); } } canvas.width = w*pRatio*sRatio; canvas.height = h*pRatio*sRatio; = = = w*sRatio+'px'; = = = 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; } } makeResponsive(true,'both',true,1); AdobeAn.compositionLoaded(; fnStartAnimation(); } </script> <!-- write your code here --> </head> <body onload="init();" style="margin:0px;"> <div id="animation_container" style="background-color:rgba(51, 102, 255, 1.00); width:400px; height:550px"> <canvas id="canvas" width="400" height="550" style="position: absolute; display: block; background-color:rgba(51, 102, 255, 1.00);"></canvas> <div id="dom_overlay_container" style="pointer-events:none; overflow:hidden; width:400px; height:550px; position: absolute; left: 0px; top: 0px; display: block;"> </div> </div> </body> </html> On an iOS9 device, it seems to be working well. How to do update Animate CC's rescaling code so that it works in iOS10 (and above)?
  6. Hello, I'm using Animate CC. I'm trying to get a movieclip placed in the beginning of the timeline to load to a frame label. I used this code but it doesn't seem to work: this.movieClip_mc.gotoAndStop("start"); I was thinking maybe the code loads first before the movieclip, that's why it's not being fired?
  7. Thank you so much. You've been a very big help! I've managed to get audio to pause when viewed on Safari browser. It's working very well, but another obstacle cropped up. When saved as a standalone web app on the home screen for ios, the sound still plays, even after the screen is locked. I found a way to detect if the page is opened as a standalone home screen app, but I can't seem to find any codes that will detect if the screen is locked. document.hidden doesn't seem to work. Does anyone know a way to detect when screen is locked?
  8. With your tips, I managed to get it to work well by doing: - using ogg with m4a as alternative format. - followed preloadjs tutorial I found on the web. - added "touch to start" button for mobile. But now, the sound still plays even after I close the web browser or lock phone. I notice your car racing game pauses even after closing the phone browser. What codes do I need to do this to pause all sounds/animations?
  9. Hi, I manage to figure out how to tween a button's alpha from 1 to 0.5, using tweenjs. Now I can't seem to get it to jump to a certain location after the alpha is 0.5: this.coverBtn.addEventListener("click", coverBtnfadeOutClick.bind(this)); function coverBtnfadeOutClick() { createjs.Tween.get(this.coverBtn) .to({ alpha: 0.5 }, 100, createjs.Ease.none); if (this.coverBtn.alpha == 0.5) { this.coverBtn.x += 100; } } I usually just use onEnterFrame for AS2 in Flash era. How do I do that for html5?
  10. in Animate CC, how do I make a global fadeOut function? In my canvas I have a Square and a Circle movieclip acting as buttons. I want to be able to click on each and have them fadeOut. Instead of writing the fadeOut code individually, is it possible to just usea global function? I don't really know what I'm doing. Found Adobe's page about Convert your ActionScript code to HTML5. I tried my hand at it, but I'm stuck at this: //Square btn this.square_mc.addEventListener("click", square_mcClick.bind(this)); function square_mcClick() { fadeOut(); } // Circle btn this.circle_mc.addEventListener("click", circle_mcClick.bind(this)); function circle_mcClick() { fadeOut(); } // Global fadeOut function function fadeOut() { this.addEventListener('tick', fl_FadeSymbolOut.bind(this)); this.alpha = 1; function fl_FadeSymbolOut() { this.alpha -= 0.01; if (this.alpha <= 1) { this.removeEventListener('tick', fl_FadeSymbolOut.bind(this)); } }
  11. Thank you, this worked perfectly!
  12. I was using locathost. I tried putting it up on github, used m4a & ogg sounds. Now all desktop browsers are playing it seamlessly! iOS sometimes seamless, sometimes not. I notice your stockcarhero game's menu theme loops seamlessly in mobile. What's the code you use for it to get it that way?
  13. I tried ogg and m4a. ogg seems to work best in firefox, with barely any gaps. but when i use m4a, there's still gaps in safari. chrome seems to still have gaps no matter which format i use. The only way is to not use music that loops, or no music at all?
  14. Hello, I'm trying to translate this gotoAndPlay/array framelabel code from as2 into html5, but I'm not having much luck: frameLabel = new Array() frameLabel[0] = "repeat"; frameLabel[1] = "dontrepeat"; rand = random(frameLabel.length); gotoAndPlay(frameLabel[rand]); I got this html5 random array code from somewhere but couldn't make it work: var frameLabel = ["repeat", "dontrepeat"]; var rand = frameLabel[(Math.random() * frameLabel.length) | 0]; this.gotoAndPlay(frameLabel[rand]); Anyone can help?
  15. Hi, after browsing the web for hours, I managed to find a code that sort of works: createjs.Sound.on("fileload", handleLoad); createjs.Sound.registerSound("", "bgmLoop"); function handleLoad(event) { var bgmLoopInstance ="bgmLoop", { interrupt: createjs.Sound.INTERRUPT_ANY, loop: -1 }); } The problems are: 1. The music doesn't loop seamlessly, there's a gap before it starts back again. 2. The music doesn't start in desktop Firefox and Chrome. Anyone have any ideas how to fix? I heard howler.js does loops seamlessly, but I have no idea how to use it together with createjs in Animate CC.