I am starting to use Adobe Animate CC to make a 300x250 banner. I added this code from the code snippet section to my movieclip EDIT using HTML5 Canvas option.
this.bg_clickTag.addEventListener("click", fl_ClickToGoToWebPage);
function fl_ClickToGoToWebPage() {
window.open("http://www.google.com", "_blank");
}
var frequency = 3;
stage.enableMouseOver(frequency);
this.bg_clickTag.addEventListener("mouseover", fl_MouseOverHandler);
function fl_MouseOverHandler()
{
//this.bg_clickTag.cursor = "pointer";
//bg_clickTag.cursor = "pointer";
//cursor = "pointer";
//alert("Moused over");
}
I get the click though just fine, the issue I am having is the the cursor/pointer is not changing once I mouse over.
I am able to get the cursor/pointer change if I change the movieclip to a button, but I would rather keep it a movieclip.
Seems like a easy fix just having trouble combining my previous flash experience and Javascript.
thanks!
Put the cursor = "pointer" line outside the mouseover handler. When you set the cursor it will only show the cursor when the mouse is over the object:
this.bg_clickTag.cursor = "pointer";
this.bg_clickTag.addEventListener("click", fl_ClickToGoToWebPage);
function fl_ClickToGoToWebPage() {
window.open("http://www.google.com", "_blank");
}
var frequency = 3;
stage.enableMouseOver(frequency);
Related
I'm implementing a chrome extension with javascript to take a screenshot of a full page, so far I've managed to take the screenshot and make it into a canvas in a new tab, it shows the content of a tweet perfectly, but as you can see, the sidebars repeat all the time (Ignore the red button, that's part of my extension and I know how to delete it from the screenshots) screenshot of a tweet
This is the code I'm using to take the screenshot:
async function capture(){
navigator.mediaDevices.getDisplayMedia({preferCurrentTab:true}).then(mediaStream=>{
scrollTo(0,0);
var defaultOverflow = document.body.style.overflow;
//document.body.style.overflow = 'hidden';
var totalHeight = document.body.scrollHeight;
var actualHeight = document.documentElement.clientHeight;
var leftHeight = totalHeight-actualHeight;
var scroll = 200;
var blob = new Blob([document.documentElement.innerHTML],{ type: "text/plain;charset=utf-8" });
console.log('total Height:'+totalHeight+'client height:'+actualHeight+'Left Height:'+leftHeight);
var numScreenshots = Math.ceil(leftHeight/scroll);
var arrayImg = new Array();
var i = 0;
function myLoop() {
setTimeout(function() {
var track = mediaStream.getVideoTracks()[0];
let imgCapture = new ImageCapture(track);
imgCapture.grabFrame().then(bitmap=>{
arrayImg[i] = bitmap;
window.scrollBy(0,scroll);
console.log(i);
i++;
});
if (i <= numScreenshots) {
myLoop();
}else{
document.body.style.overflow = defaultOverflow;
saveAs(blob, "static.txt");
printBitMaps(arrayImg, numScreenshots, totalHeight);
}
}, 250)
}
myLoop();
})
}
async function printBitMaps(arrayImg, numScreenshots, totalHeight){
var win = window.open('about:blank', '_blank');
win.document.write('<canvas id="myCanvas" width="'+arrayImg[0].width+'px" height="'+totalHeight+'px" style="border:5px solid #000000;"></canvas>');
var e = numScreenshots+1;
function printToCanvas(){
setTimeout(function(){
var canvas = win.document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.drawImage(arrayImg[e], 0, 200*e);
e--;
if(e>=0){
printToCanvas();
}
},10);
}
printToCanvas();
}
Do you know any way by CSS or javascript that I can use to make the sidebars stay at the top of the page so they don't keep coming down with the scroll?
It's not really a case of "the sidebars ... coming down with the scroll" - the code you're using is taking a first screenshot, scrolling the page, taking another screenshot and then stitching it onto the last one and iterating to the bottom of the page. Thus it's inevitable you're seeing what you see on the screen at the point you take the subsequent screenshots.
To resolve your issue, after your first screenshot you would need to set the div element for the side bar to be display=None by use of CSS. You can find details of the side bar by using the browser Dev Tools, right clicking an using "Inspect" in Chrome.
From what I can see, Twitter seems to use fairly cryptic class names, so it might be easiest and more robust to identify the div for the side bar with some other attribute. It appears they set data-testid="sidebarColumn" on it so give using that a go (but YMMV).
Hi im using Adobe Animate CC. I have a custom cursor, and my default cursor is hidden. The problem is, when i have a button symbol the mouse pointer still appears on top of the custom cursor.
var display = this;
display.mc_play_button.addEventListener("click", play_game.bind(this));
function play_game()
{
alert('Lets Play');
}
stage.cursor = 'none';
display.mc_cursor.mouseEnabled = false;
display.addEventListener("tick", custom_cursor.bind(this));
function custom_cursor() {
display.mc_cursor.x = stage.mouseX;
display.mc_cursor.y = stage.mouseY;
}
To summarize, I am changing what canvases are shown via ajax calls and what gets drawn on each as well. The main problem is that my main drawing function fails on getContext and there is other weird behavior like missing canvases (but they are definitely there).
Here is the function I use to draw on my canvases:
function PlotSet(plot_properties){
var p = plot_properties;
var canvas = document.getElementById(p.panel_name);
var spinner_target = document.getElementById(p.spinner_name);
if (!canvas) {
alert('Error: Cannot find the canvas element!');
return;
} else if (!canvas.getContext) {
alert('Error: Canvas context does not exist!');
return;
} else {
var ctx = canvas.getContext('2d');
/*Do the drawing*/
}
}
I have 3 buttons in a section of my page that determine how many and the arrangement of the panels/canvas. When someone clicks one, another php page with that arrangement is loaded.
<div id="panel_single" name="panel_control" class="xs-btn sm-btn-h-grp sm-btn-one-panel"></div>
<div id="panel_split" name="panel_control" class="xs-btn sm-btn-h-grp sm-btn-four-panel"></div>
<div id="panel_rows" name="panel_control" class="xs-btn sm-btn-h-grp sm-btn-list-panel"></div>
<script>
$("#panel_single_settings").hide();
$("div[name=panel_control]").click(function(event) {
var nav_id = $(this).attr("id");
if(nav_id == "panel_single"){
$("#panel_single_settings").show();
}else{
$("#panel_single_settings").hide();
}
//$("span[name=vnav-text]").removeClass("vnav-active");
//$("#" + nav_id).addClass('vnav-active');
refresh_content($(".widget-panel"), nav_id, function(){
side_panel_hide($(".side_panel"), "600px");
});
});
</script>
Everything works when I click on these after loading page. But I have two issues when changing the drawing properties/redrawning. (1) the PlotSet function fails on getContext for everything except the first canvas, when multiple canvases are shown, when this function is used to redraw an already drawn canvas (using a pop-up form with ajax to set what is redrawn). (2) When only one panel is shown, the settings can be changed and the panel can be redrawn, but then when I then load a page with multiple panels, all panels but the first are blank (i.e. this page functions as expected, except when I redrawn a canvas on another page).
Single Panel example:
<script>
var plot_properties = {
//Settings to draw
}
PlotSet(plot_properties);
</script>
example of multi panel configuration:
<canvas class="analytics-graph-medium" id="graph_send"></canvas>
<canvas class="analytics-graph-medium" id="graph_recv"></canvas>
<canvas class="analytics-graph-medium" id="graph_cpu"></canvas>
<canvas class="analytics-graph-medium" id="graph_ram"></canvas>
<script>
var split_send_plot_properties = {
//Settings to draw
}
PlotSet(split_send_plot_properties);
var split_recv_plot_properties = {
//Settings to draw
}
PlotSet(split_recv_plot_properties);
.
.
.
//**************************************************************
//Panel Settings Events
//**************************************************************
$("#cpu_panel_settings").on("click", function(){
var panel_name = $(this).attr('id');
set_side_panel_html($(".side_panel"), "/gui/pages/status/dialogs/panel_settings.php", split_cpu_plot_properties, function(){
side_panel_show($(".side_panel"), "500px");
});
});
.
.
.
</script>
And this is the submit button action for changing the settings:
$("#mod_panel").click(function(){
plot_properties = {
//lots of properties to be drawn
}
PlotSet(plot_properties);
side_panel_hide($(".side_panel"), "600px");
});
Well, I seem to have solved the problem. I still do not understand the problem, but the solution is to add a new canvas with the same name, remove the old canvas and them to re-grab the new canvas with the same old name with getElementById. But only do that when the canvas can be found, but the context does not exist... otherwise use the original context.
function PlotSet(plot_properties){
var p = plot_properties;
var spinner_target = document.getElementById(p.spinner_name);
var canvas = document.getElementById(p.panel_name);
if (!canvas) {
alert('Error: Cannot find the canvas element!');
return;
} else if (!canvas.getContext) {
var new_canvas = document.createElement(p.panel_name);
canvas.parentNode.insertBefore(new_canvas, canvas.nextSibling);
canvas.parentNode.removeChild(canvas);
canvas = document.getElementById(p.panel_name);
}
var ctx = canvas.getContext('2d');
//Draw Something
}
This makes everything work, all the dynamic page loading with multiple canvases on them, plus changing settings/drawing of any canvas, and switching pages after a chane is made.
If anyone has any futher insight into what caused the problem or why this solution worked, I'm eager ears.
I'm working on adding some interactivity to some buttons in an HTML5 canvas document in FLASH CC. The functionality works great, but I can't figure out how to add the JS to it for adding a rollover so that the handcursor/pointer appears when the buttons are rolled over.
I know how to do this in AS3 through the buttonMode, but I'm a total noob to JS.
Below is the code that I have currently for the buttons in the HTMl5 canvas doc, Thanks in advance for any help!
var frequency = 1;
stage.enableMouseOver(frequency);
this.btn_yes.addEventListener("click", clickYes.bind(this));
this.btn_no.addEventListener("click", clickNo.bind(this));
this.btn_yes.addEventListener("mouseover", MouseOverYes);
this.btn_yes.addEventListener("mouseout", MouseOutYes);
this.btn_no.addEventListener("mouseover", MouseOverNo);
this.btn_no.addEventListener("mouseout", MouseOutNo);
function clickYes()
{
this.gotoAndPlay("chooseYes");
}
function clickNo()
{
this.gotoAndPlay("no");
}
function MouseOverYes()
{
this.btn_yes.style.cursor = 'pointer';
}
function MouseOutYes()
{
this.btn_yes.style.cursor = 'default';
}
function MouseOverNo()
{
this.btn_no.style.cursor = 'pointer';
}
function MouseOutNo()
{
this.btn_no.style.cursor = 'default';
}
Maybe try this one.
stage.enableMouseOver();
var root = this;
root.theButtonName.cursor = "pointer";
stage.canvas.style.cursor = "default";
will set the mouse cursor to it's normal state.
stage.canvas.style.cursor = "none";
This will make the mouse cursor disappear, there's a serious lack of documentation on everything right now. Trying to find a good resource for coding in flash canvas as well. if you find one please let me know.
#user3570797
If you are using FlashCC, this can be done easily by creating button symbols. Try something like this: http://grab.by/Ktw2
Then reference these buttons by name via the 'ExportRoot' object and attach event handlers to those buttons.
Example:
function init() {
canvas = document.getElementById("canvas");
exportRoot = new lib.Button();
stage = new createjs.Stage(canvas);
stage.addChild(exportRoot);
stage.update();
stage.enableMouseOver();
var yesBtn = exportRoot.yesBtn;
var noBtn = exportRoot.noBtn;
yesBtn.addEventListener("click", handleClick);
noBtn.addEventListener("click", handleClick);
createjs.Ticker.setFPS(lib.properties.fps);
createjs.Ticker.addEventListener("tick", stage);
}
function handleClick(event) {
//doSomething...
}
I'm making a 3D game where the camera needs to be pretty much identical to the World of Warcraft one. That means, that once the screen is clicked, the cursor disappears, and when the mouse is moved, the camera rotates around a focus point (the player).
I made most of the code, the cursor does disappear when the screen is clicked, but the problem is that it is still moving, even though it isn't shown. That feels unnatural, and I'd like to have the cursor to stay at the same spot for the whole time.
So, how do I achieve this with Javascript?
The only support reqs are the latest versions of Chrome and Firefox.
You can't manipulate the position of the cursor like that in JavaScript because of the security implications that it incurs.
If I am getting your question right,
Not possible via javascript, you will need flash.
But yes, some progess is really going on,
Pointer lock api
Update: (I had free time, so I played with it)
You can try something like this, its not perfect,not recommended and it fails when original mouse reaches the screen borders (however you can restrict the mouse movements in a wrapper, that will solve the problem).
Html:
<body style='width:100%;min-height:800px;overflow:hidden'>
<img id='fakeCursor' src='http://i50.tinypic.com/359d3km.jpg' style='z-index:1000;position:absolute;display:none' />
<div href='javascript:void(0);' style='position:absolute;left:50px;top:10px;width:100px;height:100px;background:gray;' onclick='console.log("fake click 1");return false;'>Fake click 1</div>
<div href='javascript:void(0);' style='position:absolute;left:50px;top:130px;width:100px;height:100px;background:gray;' onclick='console.log("fake click 2");return false;'>Fake click 2</div>
</body>
Javascript:
var clientX,clientY;
var fakeCursor = document.getElementById('fakeCursor');
var isFakeMouse = false;
document.onclick = function(e){
if(isFakeMouse){
if(document.elementFromPoint(fakeCursor.style.left,fakeCursor.style.top)!=null){
document.elementFromPoint(fakeCursor.style.left,fakeCursor.style.top).click();
return false;
}
fakeCursor.style.display = 'inline';
fakeLeft = clientX;
fakeTop = clientY;
var mouseLastLeft = -1;
var mouseLastTop = -1;
document.onmousemove = function(e){
if(mouseLastLeft ===-1 && mouseLastTop ===-1){
mouseLastLeft = e.clientX;
mouseLastTop = e.clientY;
return;
}
fakeCursor.style.left = (parseInt(fakeCursor.style.left) + ((mouseLastLeft - e.clientX)*-1)) + 'px';
fakeCursor.style.top = (parseInt(fakeCursor.style.top) + ((mouseLastTop - e.clientY)*-1)) + 'px';
mouseLastLeft = e.clientX;
mouseLastTop = e.clientY;
}
}
else{
isFakeMouse = true;
document.body.style.cursor = "none";
fakeCursor.style.display = 'none';
fakeCursor.style.left = clientX = e.clientX;
fakeCursor.style.top = clientY = e.clientY;
document.onmousemove = null;
}
}
Here, at first click on document, the real mouse hides. When user clicks document again, real mouse would be still hidden and a new fake mouse (an image) will take its place. Position of the fake mouse would be the same where user has left the real mouse. fake mouse works (tries) to work like real mouse.
Sorry for inline css and javascrict