all! Experienced animator, but very new to programming, so every baby step is an exciting new roadblock. I've been hired to create/animate some HTML web banners, and am using Adobe Animate.
In order to keep my file sizes down, I have my publishing settings set to combine images into a sprite sheet. This seems to work fine when I test the HTML in Firefox, but when I test it in any other browser, I just see a blank background. Forgoing the sprite sheet solves the problem, but bloats my k-weight. I've tried setting the sprite sheet to PNG-8, PNG-24, and PNG-32, and the error persists.
I'm not sure if this additional info makes a difference, but clicking in the blank background doesn't activate the link, so the images aren't simply "invisible".
Thank you in advance, everyone!
Edit 1: Here is the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>File_Camper2_size300x250_v6</title>
<!-- write your code here -->
<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
<script src="File_Camper2_size300x250_v6.js?1466448165331"></script>
<script>
var canvas, stage, exportRoot;
function init() {
// --- write your JS code here ---
canvas = document.getElementById("canvas");
images = images||{};
ss = ss||{};
var loader = new createjs.LoadQueue(false);
loader.addEventListener("fileload", handleFileLoad);
loader.addEventListener("complete", handleComplete);
loader.loadFile({src:"images/File_Camper2_size300x250_v6_atlas_.json?1466448165331", type:"spritesheet", id:"File_Camper2_size300x250_v6_atlas_"}, true);
loader.loadManifest(lib.properties.manifest);
}
function handleFileLoad(evt) {
if (evt.item.type == "image") { images[evt.item.id] = evt.result; }
}
function handleComplete(evt) {
var queue = evt.target;
ss["File_Camper2_size300x250_v6_atlas_"] = queue.getResult("File_Camper2_size300x250_v6_atlas_");
exportRoot = new lib.File_Camper2_size300x250_v6();
stage = new createjs.Stage(canvas);
stage.addChild(exportRoot);
stage.update();
stage.enableMouseOver();
createjs.Ticker.setFPS(lib.properties.fps);
createjs.Ticker.addEventListener("tick", stage);
}
</script>
<!-- write your code here -->
</head>
<body onload="init();" style="background-color:#D4D4D4;margin:0px;">
<canvas id="canvas" width="300" height="250" style="background-color:#FFFFFF"></canvas>
</body>
</html>
Edit 2: The following console errors appear in Google Chrome, indicating the json error mentioned below.
XMLHttpRequest cannot load file:///Users/jonron2000/Documents/Company%20Name/Ice%20Cream%20Summer/Revamped/v6/images/File_size300x250_v6_atlas_.json?1466448165331. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.b.load # createjs-2015.11.26.min.js:15
createjs-2015.11.26.min.js:13
Uncaught TypeError: Cannot read property 'getNumFrames' of undefinedb.load # createjs-2015.11.26.min.js:15
Related
*I tried to create circle using createjs for initial html game development
Here in this code the drawing API or create.js allow object draw dynamically
*
enter code here
<html>
<head>
<title>HTML5 Course</title>
<script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
</head>
<body onload="init();">
<canvas id="testCanvas" width="500" height="500"></canvas>
<script>
function init()
{
var stage = new createjs.stage("testCanvas");
var circle = new createjs.Shape();
circle.graphics.beginFill("Red").dreawCircle(0,0,90);**
circle.x=250;**changing x axis**
circle.y=250;**changing y axis**
stage.addChild(circle); **Placing X,Y on the stage**
stage.update();
}
</script>
</body>
</html>
I don't exactly understand what you mean. If you are trying to capture console output, here is a simple example:
var output = [];
var saved = console.log;
console.log = function(arg) {
output.push(arg);
saved(arg);
};
console.log('Hello, world!');
What this does is replace the inbuilt console.log method with a new one that captures console output.
Why we have a variable called saved is a backup of the old console.log before we relaced it, so it'll still be able to write to the console.
I have built a library of custom elements using the webcomponents polyfills provided by Polymer. It works in Firefox and Safari. But it doesn't work in Chrome 48 with native component support. I can make it work if I use the polyfill code hacked to not use the native implementation...
Here is an example:
<!DOCTYPE html>
<html>
<head>
<script>
var myComp = Object.create(HTMLElement.prototype);
document.registerElement('my-comp', {prototype: myComp});
myComp.attachedCallback = function () {
console.log('my-comp attached');
}
</script>
</head>
<body>
<my-comp></my-comp>
<p> Just to check that page is loaded</p>
</body>
</html>
I should see the message in the console, but nothing is displayed. Support is enabled in Chrome (I can see that document.registerElement is native), my code is loaded and executed (the element is registered, I get a warning if I try to register it again in the console), and the callback is valid (I can call it by hand in the console).
What happens? How can I make it work?
You will make it work by attaching event handlers before registering element:
var myComp = Object.create(HTMLElement.prototype);
myComp.attachedCallback = function ()
{
console.log('my-comp attached');
}
document.registerElement('my-comp', {prototype: myComp});
This question already has answers here:
Using HTML5/Canvas/JavaScript to take in-browser screenshots
(7 answers)
Closed 9 years ago.
My user need to screen shot their error message throw my website. They should directly paste from clipboard in my website instead convert the jpeg. Preferable browser is Firefox. I try to use ZeroClipBoard but it works for words not images. Appreciated if anyone could advice and share any links for references.
Simple answer: you can't. There is no web-standards way to read binary data from the clipboard, I also do not believe that Flash or Silverlight does this either (Flash can expose bitmap data from the clipboard, but only under AIR, i.e. not in a browser context).
You could write a small desktop utility program that your users download and run, which will take a screenshot and upload it for them, but without that your users will have to paste the image into Paint, save to disk, and upload with an <input type="file">.
I'm not sure of the compatibility with mozilla but you should look at the onpaste event
https://developer.mozilla.org/en-US/docs/Web/API/element.onpaste
and event.clipboarddata
http://www.w3.org/TR/clipboard-apis/
Cross compatibility is probably is probably going to be an issue.
You can look at the source for wordpress plugin Image Elevator http://wordpress.org/plugins/image-elevator/
Look at admin/assests/js/image-elevator-global.js for ideas.
After looking at the plugin I got the following code to work. It reloads the page image with whatever you paste. Works on chrome but not firefox.
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
document.onpaste = function (e) {
var items = e.clipboardData.items;
for (var i = 0; i < items.length; ++i) {
// uploads image on a server
var img = items[i].getAsFile();
var oData = new FormData();
oData.append('file', img);
var req = new XMLHttpRequest();
req.open("POST", "test-pastup.php");
req.onreadystatechange = function() {
setTimeout(function() {
var img = $('img').clone();
$('img').remove();
$('body').prepend(img);
}, 100);
}
req.send(oData);
return;
}
}
</script>
</head>
<body>
<img src="aaa.png" />
<input/>
</body>
</html>
for the server side - test-pastup.php
<?php
$source = $_FILES['file']['tmp_name'];
move_uploaded_file( $source, 'aaa.png' );
?>
I have been trying to write a small Google App Script which has the Google+ badge as shown here. For this I have a plain HTML file where I have included the HTML as shown on that page. The HTML page is as follows :
<html>
<body>
<div class="g-plus" data-href="{Page-Link}" data-rel="publisher"></div>
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
alert("Added Badge!");
})();
</script>
</body>
</html>
The result is a blank page. There is no badge added to the page . I assume this is because the javascript function is not being run( I added an alert and there wasnt any pop-up ).I am not able to figure out why the function is not being run.
Any help is appreciated.
Unfortunately I'm not too experienced with Javascript so I'm guessing here. I've programmed in coffeescript a while ago and its compiler automatically wraps the generated code in an anonimous function just as in your code. This function is called so:
(function() {//...}).call(this);
Maybe this works.
Alternatively you might want to move the alert test above the badge generation. This would show if the javascript is run at all. Maybe the error lies in your badge creation code.
My final idea would be to name your function and register it as a callback on body.onload . It's always a good idea to let the browser load the page before accessing the dom
I have been attempting to use the example given on a Soundcloud Blog page so I can set the volume lower.
I only changed the iframe size and src= to my playlist and set volume to 10 so I could notice the difference if it worked. So far I observe no change, volume is still at 100%.
I have tried it with and without placing the following in the head of my template. It doesn't seem to matter.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
Here is the code that I adjusted from the Soundcloud example:
<iframe id="sc-widget" width="350" height="332" scrolling="no" frameborder="no" src="http://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Fplaylists%2F1417174&auto_play=true&show_artwork=false&color=37415f"></iframe>
<script src="http://w.soundcloud.com/player/api.js" type="text/javascript"></script>
<script type="text/javascript">
(function(){
var widgetIframe = document.getElementById('sc-widget'),
widget = SC.Widget(widgetIframe);
widget.bind(SC.Widget.Events.READY, function() {
widget.bind(SC.Widget.Events.PLAY, function() {
// get information about currently playing sound
widget.getCurrentSound(function(currentSound) {
console.log('sound ' + currentSound.get('') + 'began to play');
});
});
// get current level of volume
widget.getVolume(function(volume) {
console.log('current volume value is ' + volume);
});
// set new volume level
widget.setVolume(10);
});
}());
</script>
This code is live on a Joomla site.
Can someone please help me understand what I'm lacking to control the volume?
Is it a jquery conflict? If so, any thoughts on how to resolve it?
the volume range is actually from 0 to 1, this is stated wrongly in the documentation. So if you would like to set the volume to 10%, you would need this:
var widgetIframe = document.getElementById('sc-widget'),
widget = SC.Widget(widgetIframe);
widget.setVolume(0.1);
The previous answer is no longer accurate. The setVolume() api has been fixed/changed to take in an int between 0 and 100.
I stumbled upon this question trying to quickly change the volume of an embedded SoundCloud iframe using the chrome console. I created a quick gist for myself.
https://gist.github.com/propagated/78aaedfbc0c23add7691bb975b51a3ff
//load soundcloud js api if needed
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'http://w.soundcloud.com/player/api.js';
document.head.appendChild(script);
//get the id of the player iframe or inject it using chrome
var id = 'scplayer',
widgetIframe = document.getElementById(id),
fixWidget = SC.Widget(widgetIframe);
fixWidget.setVolume(50); //% between 1 and 100