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.
Related
I am new in Canvas of HTML5. What I want to do. I want a microphone audio visualizer just like windows Sound visualizer of microphone (control panel => hardware and sound => Sound => recording)
Can anybody tell me Please how I will create it in canvas and adjust with web audio API ?
An other problem is My visualizer is more sensitive. How i will adjust it. I want blank spectrum if no sound is there.
I am sharing a picture what I exactly want.
Img url: http://phillihp.com/wp-content/uploads/2011/12/winamp-step-pre-step-1.png
Please help me out to solve this problem.
Untitled Document
<body>
<canvas id="test"></canvas>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
navigator.webkitGetUserMedia({audio:true}, function(stream){
audioContext = new AudioContext();
analyser = audioContext.createAnalyser();
microphone = audioContext.createMediaStreamSource(stream);
javascriptNode = audioContext.createScriptProcessor(1024, 1, 1);
analyser.smoothingTimeConstant = 0.0;
analyser.fftSize = 512;
microphone.connect(analyser);
analyser.connect(javascriptNode);
javascriptNode.connect(audioContext.destination);
//canvasContext = $("#canvas")[0].getContext("2d");
canvasContext = document.getElementById("test");
canvasContext= canvasContext.getContext("2d");
javascriptNode.onaudioprocess = function() {
var array = new Uint8Array(analyser.frequencyBinCount);
analyser.getByteFrequencyData(array);
var values = 0;
var length = array.length;
for (var i = 0; i < length; i++) {
values += array[i];
}
var average = values / length;
canvasContext.clearRect(0, 0, 150, 300);
canvasContext.fillStyle = '#00ff00';
canvasContext.fillRect(0,130-average,25,140);
}
}, function(e){ console.log(e); }
);
</script>
</body>
Check out this code sample: https://github.com/cwilso/volume-meter/.
Based on cwilso answer. Fixed the problem with mobile devices. "StartNow" is the main JS function in main.js (originallt called by window.onload):
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Volume Meter</title>
<script src="volume-meter.js"></script>
<script src="main.js"></script>
</head>
<body onload="javascript:StartNow()"> >
<p>uses audioContext.createScriptProcessor(buffer size) Web Audio API. Use https://webaudio.github.io/web-audio-api/#audioworklet</p>
<canvas id="meter" width="1100" height="60"></canvas>
<p>On Android press button to start (fixes new security requirement added in the new Android OS version)</p>
<button onclick="javascript:StartNow()">Start</button>
</body>
</html>
On Android you need to press the button to start.
This is necessary because of a NEW security requirement added in the new Android OS.
I'm trying to use canvas object on iPad; the user need to draw a free curve with the finger and when he releases the finger the system must close the curve and fill it.
Actually I wrote down the following code but the problem is that it draws but it does not close the path on finger release.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=768px, maximum-scale=1.0" />
<title>sketchpad</title>
<script type="text/javascript" charset="utf-8">
window.addEventListener('load',function(){
// get the canvas element and its context
var canvas = document.getElementById('sketchpad');
var context = canvas.getContext('2d');
var img = new Image();
img.src = 'imp_02.jpg';
context.drawImage(img,0,0,600,600);
var colorPurple = "#cb3594";
context.strokeStyle=colorPurple;
context.lineWidth = 5;
context.fillStyle = "red";
// create a drawer which tracks touch movements
var drawer = {
isDrawing: false,
touchstart: function(coors){
context.beginPath();
context.moveTo(coors.x, coors.y);
this.isDrawing = true;
},
touchmove: function(coors){
if (this.isDrawing) {
context.lineTo(coors.x, coors.y);
context.stroke();
}
},
touchend: function(coors){
if (this.isDrawing) {
context.touchmove(coors);
context.closePath();
this.isDrawing = false;
}
}
};
// create a function to pass touch events and coordinates to drawer
function draw(event){
// get the touch coordinates
var coors = {
x: event.targetTouches[0].pageX,
y: event.targetTouches[0].pageY
};
// pass the coordinates to the appropriate handler
drawer[event.type](coors);
}
// attach the touchstart, touchmove, touchend event listeners.
canvas.addEventListener('touchstart',draw, false);
canvas.addEventListener('touchmove',draw, false);
canvas.addEventListener('touchend',draw, false);
// prevent elastic scrolling
document.body.addEventListener('touchmove',function(event){
event.preventDefault();
},false); // end body.onTouchMove
},false); // end window.onLoad
</script>
<style type="text/css"><!--
body{margin:0;padding:0; font-family:Arial;}
#container{position:relative;}
#sketchpad{ border: 1px solid #000;}
--></style>
</head>
<body>
<div id="container">
<canvas id="sketchpad" width="766" height="944">
Sorry, your browser is not supported.
</canvas>
</div>
</body>
</html>
I don't understand what I missed.
Is there anyone who can help me..... I would appreciate a lot!!
You are fetching the touch end co-ordinates from a wrong array.
event object has one more array called changedTouches where you can find the co-ordinates of the point where the touch ended. These end co-ordinates are not in targetTouches array.
So you need
endCoordX = event.changedTouches[0].pageX;
endCoordY = event.changedTouches[0].pageY;
[modify the above code to fit into your scenario. hope you got the concept.... And seriuosly i too got stuck on the same point in the past and wasted more than an hour to know this fact....]
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.
I was performing some tests with the WebAudio API in iOS6. It seems that when you click on a button, the AudioBufferSourceNode will be created correctly and connected to the Contexts destination.
I was simply wondering if there was any way of playing a sound automatically when a page is loaded, as iOS6 devices seem to build the SourceNode correctly, but no sound comes out.
I have posted my code below:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML 5 WebAudio API Tests</title>
<script type="text/javascript">
var audioContext,
audioBuffer;
function init() {
try {
audioContext = new webkitAudioContext();
initBuffer('resources/dogBarking.mp3');
} catch(e) {
console.error('webkitAudioContext is not supported in this browser');
}
}
function initBuffer(desiredUrl) {
var url = desiredUrl || '';
var request = new XMLHttpRequest();
request.open("GET", url, true);
request.responseType = "arraybuffer";
request.onload = function() {
audioContext.decodeAudioData(request.response, function(buffer) {
audioBuffer = buffer;
}, onError);
}
request.send();
}
function playSound(startTime, endTime) {
var audioSource = audioContext.createBufferSource();
audioSource.buffer = audioBuffer;
audioSource.connect(audioContext.destination);
audioSource.noteOn(0);
audioSource.noteOff(10);
}
</script>
</head>
<body onload="init()">
<script type="text/javascript">
(function() {
var buttonNode = document.createElement('input');
buttonNode.setAttribute('type', 'button');
buttonNode.setAttribute('name', 'playButton');
buttonNode.setAttribute('onclick', 'playSound(0, 1)')
buttonNode.setAttribute('value', 'playSound()');
document.body.appendChild(buttonNode);
document.write('<a id="test" onclick="playSound(0, 2)">hello</a>');
var testLink = document.getElementById('test');
var dispatch = document.createEvent('HTMLEvents');
dispatch.initEvent("click", true, true);
testLink.dispatchEvent(dispatch);
}());
</script>
</body>
</html>
I hope this makes sense.
Kind regards,
Jamie.
This question is very similar to No sound on iOS 6 Web Audio API . WebAudio API needs user input to be initialized and after first sound plays in this way WebAudioAPI works greatly without any actions needed during current session.
You can initialize API by adding listener to first window touchstart event, like this:
w.addEventListener('touchstart', myFunctionThatPlaysAnyWebAudioSound);
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");