I have an paperscript and I need to call a function in this paperscript from my Javascript to change some values.
I know that I can write it some way, that I dont need paperscript but only javascript.
but I dont get it work.
Are there some other ways I can just export a paperscript function to javascript? or there are some other ways
I also saw something like this: but it also didnt work :-(
https://github.com/paperjs/paper.js/issues/17
--------- my current try to solve it --------
my javascript:
var paperscript = {};
my paperscript code till now:
this.someFunction = function(){ /*doSomething*/ };
//...
paper.install(window.paperscript);
the call outside of paperscript:
paperscript.someFunction(); //error, object doesnt have that function :-(
In this code (jsbin here), javascript is used to call someFunction in the paperscript, turning the rectangle red:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<script type="text/javascript" src="https://raw.github.com/paperjs/paper.js/master/dist/paper.js"></script>
<script type="text/javascript">
var paperscript = {};
window.onload = function(){
paperscript.someFunction();
}
</script>
<script type="text/paperscript" canvas="p">
this.someFunction = function(){
rect1.fillColor = new Color('red');
};
var rect1 = new Path.Rectangle({
point: [0, 10],
size: [100, 100],
strokeColor: 'black'
});
paper.install(window.paperscript);
</script>
</head>
<body>
<canvas id="p" resize></canvas>
</body>
</html>
My guess is that you have not been waiting until the paperscript loads before trying to access it with your javascript. Paperscript does not (normally) load until after images have loaded; that's why this code uses window.onload to call the paperscript function.
Related
The image will load when I open the page locally, but when i go to the ip the image is not loaded. the image is in the same directory as the html file.
<!DOCTYPE html>
<html>
<head>
<script type="text/JavaScript">
var img = new Image;
img.onload = function(){
var canvas = document.getElementById("can");
var context = canvas.getContext("2d");
context.drawImage(img, 0, 0);
setTimeout(loadImage, 1000);
};
function loadImage(){
img.src = 'image.jpg';
}
</script>
<title>Page</title>
</head>
<body onload="JavaScript:loadImage();">
<canvas id="can" width="1280" height="720" />
</body>
</html>
I really hope this solution will work for you i just edited the root of the image by adding slash symbol and changed onload="loadImage();" function
<!DOCTYPE html>
<html>
<head>
<script type="text/JavaScript">
var img = new Image;
img.onload = function(){
var canvas = document.getElementById("can");
var context = canvas.getContext("2d");
context.drawImage(img, 0, 0);
setTimeout(loadImage, 1000);
};
function loadImage(){
img.src = '/image.jpg';
}
</script>
<title>Page</title>
</head>
<body onload="loadImage();">
<canvas id="can" width="1280" height="720" />
</body>
</html>
Relative path in javascript usually had unexpected results for me and if it worked in one browser it was much likely to don't work in one another browser. I found that it is much convenient to store root address in a config file and make absolute path instead of relative paths.
const contentsBaseAddress = 'http://localhost:80/contents/'
function loadImage(){
img.src = contentsBaseAddress + 'images/myImage.jpg';
}
How to observe property changes if I use dom-bind? The change in property is updated inside curly brackets, so I assume that there is some event related to change, but I don't know it's name.
Example:
<!doctype html>
<html lang="">
<head >
<link rel="import" href="bower_components/polymer/polymer.html">
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<style>
</style>
</head>
<body>
<template is="dom-bind" id="app2">
<p>test: <span>{{test}}</span></p>
<input type="button" value="Change" on-click="chTest">
</template>
<script>
(function (document) {
'use strict';
var app = document.querySelector('#app2');
app.test = "original value";
app.addEventListener('test-changed', function () {
console.log('change listener fired');
});
app.addEventListener('dom-change', function () {
console.log("dom-change");
});
app.chTest = function () {
console.log('click');
app.test = "new value";
// notifyPath-setter will fire "test-changed"-event
// app.notifyPath("test", "notify value");
};
})(document);
</script>
</body>
</html>
EDIT:
There is a need to clarify my question: I want to invoke some function, when app.test changes.
You have the answer commented out. Comment the line app.test and uncomment the app.notifyPath
// app.test = "new value";
// notifyPath-setter will fire "test-changed"-event
app.notifyPath("test", "notify value");
Working jsbin below:
http://jsbin.com/vaqosi/edit?html,console,output
Edit: One workaround is to two way bind it into a child element and listen for its changes. I have updated the jsbin.
I want to update page for keyboard event.
I wired the keyboard event through $window.document.onkeydown. (I know this is not good but it is supposed to work)
However, I find that the page is not updating even the model is changed!
Where am I missing ?
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script>
function Main ($scope, $window) {
$scope.keyCode = 0;
$window.document.onkeydown = function (event) {
$scope.keyCode = event.keyCode;
console.log($scope.keyCode); //the model is changed here
};
}
</script>
</head>
<body ng-app>
<div ng-controller="Main">
{{keyCode}}
</div>
<script type="text/javascript" src="bower_components/angular/angular.js"></script>
</body>
</html>
---Edit---
Here is the code snippet you can try
http://plnkr.co/edit/DFUfHzQPla031IEDdCo3?p=preview
Whenever you want to execute an expression that is outside Angular's scope you need to let Angular know that a change has been made so it can perform a proper digest cycle. You can do this using the $scope.$apply() method. So your example becomes:
function Main ($scope, $window) {
$scope.keyCode = 0;
$window.document.onkeydown = function (event) {
$scope.$apply(function () {
$scope.keyCode = event.keyCode;
console.log($scope.keyCode);
});
};
}
Please see updated plunker here
I have an html5 basic presentation that was generated using Flash 6 and CreateJS.
The presentation is basically a bunch of flash keyframes with stop(); commands.
Now, here come my questions:
1. How do I target a specific frame on this presentation, using a link, located on a different page (something like the html anchor) ?
2. is there an easy way to add some cool frames transitions between those frames, using some kind of an open source library?
I'm a designer, not a programmer, so I have only little knowledge in coding.
Any help will be appreciate.
Thanks
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CreateJS export from main</title>
<script src="easeljs-0.6.0.min.js"></script>
<script src="tweenjs-0.4.0.min.js"></script>
<script src="movieclip-0.6.0.min.js"></script>
<script src="preloadjs-0.3.0.min.js"></script>
<script src="main.js"></script>
<script>
var canvas, stage, exportRoot;
function init() {
canvas = document.getElementById("canvas");
images = images||{};
var manifest = [
{src:"images/bg_b.jpg", id:"bg_b"},
];
var loader = new createjs.LoadQueue(false);
loader.addEventListener("fileload", handleFileLoad);
loader.addEventListener("complete", handleComplete);
loader.loadManifest(manifest);
}
function handleFileLoad(evt) {
if (evt.item.type == "image") { images[evt.item.id] = evt.result; }
}
function handleComplete() {
exportRoot = new lib.main();
stage = new createjs.Stage(canvas);
stage.addChild(exportRoot);
stage.update();
createjs.Ticker.setFPS(30);
createjs.Ticker.addEventListener("tick", stage);
}
</script>
</head>
<body onload="init();" style="background-color:#D4D4D4">
<canvas id="canvas" width="1024" height="768" style="background-color:#FFFFFF"></canvas>
</body>
</html>
CreateJS supports the use of basic actionscript by way of providing direct translations in javascript. For example, if you add the following bit of code to your timeline, the CreateJS publisher is smart enough to add a javascript call to stop the timeline at that position.
/* js
this.stop();
*/
To have a link skip to a location in the main timeline, you would need to use gotoAndPlay, or gotoAndStop depending on whether you want playback to continue. When CreateJS publishes your .fla, it creates a javascript instance of the main timeline movieclip called exportRoot. You can use this instance to manipulate the timeline via javascript.
Question 1: Changing location from another page
Using your code as an example now, notice the index.html page links to your Flash exported page (which I am calling target.html) with different hash tag locations for the frames. Also notice I have added the jquery library to your exported page, and a couple lines after the createjs.Ticker.addEventListener("tick", stage); to gotoAndStop based on the current hash, and to listen to future hash changes to gotoAndStop.
index.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
Goto frame 5
Goto frame 10
Goto frame 15
Goto frame 20
</body>
</html>
target.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CreateJS export from main</title>
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="easeljs-0.6.0.min.js"></script>
<script src="tweenjs-0.4.0.min.js"></script>
<script src="movieclip-0.6.0.min.js"></script>
<script src="preloadjs-0.3.0.min.js"></script>
<script src="main.js"></script>
<script>
var canvas, stage, exportRoot;
function init() {
canvas = document.getElementById("canvas");
images = images||{};
var manifest = [
{src:"images/bg_b.jpg", id:"bg_b"},
];
var loader = new createjs.LoadQueue(false);
loader.addEventListener("fileload", handleFileLoad);
loader.addEventListener("complete", handleComplete);
loader.loadManifest(manifest);
}
function handleFileLoad(evt) {
if (evt.item.type == "image") { images[evt.item.id] = evt.result; }
}
function handleComplete() {
exportRoot = new lib.main();
stage = new createjs.Stage(canvas);
stage.addChild(exportRoot);
stage.update();
createjs.Ticker.setFPS(30);
createjs.Ticker.addEventListener("tick", stage);
//When doc loads, check if there is a hash and gotoAndStop if there is
if(document.location.hash)
exportRoot.gotoAndStop(document.location.hash.replace('#', ''));
//Use jQUery to listen to the hash change event and gotoAndStop to new location when event fires
$(window).on('hashchange', function() {
exportRoot.gotoAndStop(document.location.hash.replace('#', ''));
});
}
</script>
</head>
<body onload="init();" style="background-color:#D4D4D4">
<canvas id="canvas" width="1024" height="768" style="background-color:#FFFFFF"></canvas>
</body>
</html>
Question 2: Transitions
As far as page transitions go, I would suggest either creating them in the timeline, and calling gotoAndPlay(FRAME_OF_THE_TRANSITION) until you start to get more comfortable with the CreateJS library to take a more object oriented approach.
What is wrong with this code? :S.. My canvas stays empty. Image URL is correct and image loads.
This is my engine.js file:
var canvas;
var stage;
function init()
{
canvas = document.getElementById("canvas");
stage = new Stage(canvas);
playerImg = new Image();
playerImg.src = 'img/player/walkingbl.png';
playerImg.onload = onPlayerLoaded;
Ticker.setFPS(30);
Ticker.addListener(window);
}
function tick()
{
stage.update();
}
function onPlayerLoaded()
{
console.log(playerImg);
player = new Bitmap(playerImg);
player.x = 300;
player.y = 450;
stage.addChild(player);
console.log('Player added to stage');
}
$(document).ready(function(){
init();
});
And this is my index.html file:
<!DOCTYPE html>
<html>
<head>
<title>Game Engine</title>
<link rel="stylesheet" href="css/main.css" />
</head>
<body>
<div id='container'>
<canvas id='#canvas' width='1000' height='350'></canvas>
</div>
<script src="js/jquery.js"></script>
<script src="js/easel.js"></script>
<script src='js/engine.js'></script>
</body>
I'm new to the whole easel.js and never did anything with Flash or actionscript. I'm an PHP developer by heart, so this is a pretty big transition for me. The lack of documentation / tutorials / examples, make it very hard for me to learn how to use easel.js. So if you have any pointers or resources for me to check out. Please share!
This line is wrong:
<canvas id='#canvas' width='1000' height='350'></canvas>
The ID doesnt need a #. the right line is:
<canvas id='canvas' width='1000' height='350'></canvas>
but I wouldnt use the word "canvas" as an identifier, as it could be confused with the tag. Better use:
<canvas id='mycanvas' width='1000' height='350'></canvas>
and change the JS code:
canvas = document.getElementById("mycanvas");