Utilizing the native cursor feature in Adobe AIR JavaScript using MouseCursorData

I have been exploring the content of this article: which details how to create a native cursor in AIR without resorting to using a sprite to mimic the functionality.

However, my project is based on HTML/JavaScript rather than ActionScript.

Here is the code I have so far:

function nativeCursor(){

    // load in a bitmap
    var loader = new air.Loader();
    loader.load(new air.URLRequest('./assets/cursor.png'));

    var bitmaps = new air.Vector["<String>"]();

    var bmd = new air.BitmapData(32, 32, true, 0x00000000);

    var p = new window.runtime.flash.geom.Point(0, 0);
    var r = new window.runtime.flash.geom.Rectangle(32 , 0, 32, 32);

    var image = new window.runtime.flash.display.Bitmap(loader.content);

    bmd.copyPixels([image.bitmapData], r, p);

    bitmaps.push(bmd);

    var mcd = new window.runtime.flash.ui.MouseCursorData();

    mcd.data = bitmaps;
    mcd.hotSpot = new Point(0, 0);
    mcd.frameRate = 24;

    window.runtime.flash.ui.Mouse.registerCursor("defaultCursor", mcd);
    window.runtime.flash.ui.Mouse.cursor = "defaultCursor";

}

However, I encounter an error 

TypeError: Error #1034: Type Coercion failed: cannot convert []@2b9d1f1 to flash.display.BitmapData.
when reaching this line: 
bmd.copyPixels([image.bitmapData], r, p);

If I remove the brackets from that line so it reads: 

bmd.copyPixels(image.bitmapData, r, p);
, the error changes to 
TypeError: Error #2007: Parameter sourceBitmapData must be non-null.

I suspect that the issue lies in the bitmap data being null, but why is this happening? The image loads successfully, so perhaps my approach to accessing the bitmap data is incorrect?

javascriptactionscript-3air

Answer №1

Using BitmapData Instead of String

Make sure the vector is set to use BitmapData type instead of String, like this:

air.Vector["<flash.display.BitmapData>"]

If you need more information, check out the HTML Developer’s Guide for Adobe AIR - Working with Vectors.

Loader and Asynchronous Loading

It seems that the Loader class works asynchronously in JavaScript as well. Though not well-documented in the HTML API reference, consulting the AS3 reference might provide missing information. Examples are also available.

http://help.adobe.com/.../html/flash/display/BitmapData.html#includeExamplesSummary

Understanding Loader.bitmapData Property

Note that there is no bitmapData property in the Loader class. Instead, it has a content property holding a DisplayObject. This object may contain a Bitmap which does have a bitmapData property.

An Example Code Snippet

Here's an untested code snippet to help you get started:

var mcd = new window.runtime.flash.ui.MouseCursorData();
mcd.hotSpot = new air.Point(0, 0);
mcd.frameRate = 24;

var loader = new air.Loader();
loader.contentLoaderInfo.addEventListener(air.Event.COMPLETE, function(event)
{       
    var image = air.Bitmap(loader.content);     

    var bitmaps = new air.Vector["<flash.display.BitmapData>"]();
    bitmaps.push(image.bitmapData);

    mcd.data = bitmaps;

    air.Mouse.registerCursor('defaultCursor', mcd);
    air.Mouse.cursor = 'defaultCursor';
});

var request = new air.URLRequest('./assets/cursor.png');
loader.load(request);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for aligning ticks to the left on a d3 bar chart

i recently finished creating a stacked bar graph with varying tick lengths on the y-axis side. my goal is to align the text within the ticks to the left, similar to this example: http://jsfiddle.net/2khbceut/2/ here is the HTML: <title>Diverging Sta ...

javascripthtmlcssd3.js

Fire an event following the execution of $state.go()

Is there a way to activate an event once the state has been modified in ui.router? Specifically, I am utilizing the ionic framework alongside angularJS which incorporates angular-ui-router. Note: Below is the pseudo code I am hoping to implement. $state. ...

javascriptangularjsionic-frameworkangular-ui-routerangular-ui

Encountered an error while reloading the page: "Unable to read property 'ArtisanID' of undefined."

Every time I refresh the page, an error pops up saying: Cannot read property 'ArtisanID' of undefined. Any suggestions on how to troubleshoot this issue? I'm relatively new to this framework and my intuition tells me that the component ins ...

javascriptreactjsfrontendreload

Display PickerIOS when a button is clicked in a React Native application

I am a beginner with the react framework and I'm trying to implement a PickerIOS component on button click. However, I'm having trouble understanding how to call other classes upon an event. I found this code snippet on the React Native site: v ...

javascriptjqueryreactjsreact-native

The bidirectional data binding feature is malfunctioning following an XMLHttpRequest request

When watching a property from Vuex, I use the following approach: computed: { ticket() { return this.$store.getters['order/reservation'].offer_id } }, watch: { ticket(newTicketId) { console.log('Caught change of ...

javascriptvue.jsvuejs2vuexnuxt.js

Steps for inserting a video into a new div upon selecting a hyperlink

Looking for a way to link menu elements to corresponding videos in adjacent divs? I have two divs set up - one with the menu list and another right next to it where the videos should be loaded. Forms seem like a potential solution, but I lack expertise i ...

javascriptjqueryhtmlvideovideo-streaming

Image carousel with interactive buttons

I've taken over management of my company's website, which was initially created by someone else at a cost of $24,000. We recently made some edits to the slideshow feature on the site, adding buttons that allow users to navigate to corresponding p ...

javascriptjqueryhtmlcssinternet-explorer

Retrieve the expansive offset label for a time zone utilizing moment-timezone

The luxon library enhances the ability to retrieve the offsetNameLong based on the timezone ianaName, which gives a localized translated zone name. For example: DateTime.local().setLocale("en-US").setZone("America/Los_Angeles").offsetNa ...

javascriptreactjsmomentjsmoment-timezoneluxon

Utilize Ajax and Nodejs to inject dynamic content into your webpage

Seeking assistance in implementing a project where a navigation bar on the page contains various items, and I aim to display the content of each tab without reloading the entire page. Utilizing Nodejs with the ejs template engine, my research hasn't l ...

javascriptjquerynode.jsajaxexpress

Fetch data using Ajax without the need for a hash signal

My current goal is to load content through Ajax on a website. Let's say our main page is example.com/blankpage (I've eliminated the .html extension using htaccess). At the moment, I have it set up so that when a link on the page directs to mysite ...

javascripthtmlajax

Having trouble loading a React component

I've been working on breaking down modules from a monolithic React project to store them separately in my npm registry. However, I'm encountering issues with exporting and importing them correctly. Previously, I was using the following code: con ...

javascriptreactjsnpm

unable to access the object3D within the current scene

Currently facing an issue where I am unable to retrieve Object3D from the scene, despite the mesh objects being displayed within the scene. Strangely, the scene.children array does not reflect this. Take a look at the screenshot here Here is the code sni ...

javascriptthree.js

A step-by-step guide to moving Vue .prototype to its own file

I have a couple of functions that I need to add to Vue's .prototype. However, I don't want to clutter up the main.js file. I attempted to move the prototypes like this: //main.js import "./vue-extensions/prototypes"; ...

javascriptvue.js

What is the process of integrating Bootstrap into a Node project?

I recently set up a MEAN stack project using npm and am currently including Bootstrap via CDN: link(rel='stylesheet', href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css') However, I want to add Bootstrap using ...

javascriptnode.jstwitter-bootstrapnpmnpm-install

Is it possible to apply styles to the body of a document using styled-components?

Is it possible to apply styles from styled-components to a parent element, such as the <body> tag, in a way that resembles the following: const PageWrapper = styled.div` body { font-size: 62.5%; } ` ...

javascriptreactjsstyled-components

Issue Detected at a Precise Line Number - Android Studio

Despite my numerous attempts to modify the specific line in question, including leaving it empty, turning it into a comment, or removing it entirely, the error message persists. I even went as far as deleting the class and creating a new one, but the same ...

javascriptjavaandroidandroid-studio

Sending data from a React application to a Node.js server using Axios

Hello, I am facing an issue with an axios request to post data to a Node.js server. When trying to access this data on the server, it is showing as undefined. Below is the function for posting data: function Submit() { let params={ firstName: ...

javascriptnode.jsreactjspostroutes

Typography Addition on Flexslider

I am currently working with flexslider and trying to incorporate a unique text overlay on each individual slide, but so far I have been unsuccessful. <div class="flexslider"> <ul class="slides"> <li> <img src ...

javascripthtmlflexslider

preserving the current state even after refreshing the page

Currently, I am teaching myself React. When I click on the favorites button, which is represented by a heart symbol, it changes color. However, upon refreshing the page, the color change disappears. To address this issue, I came across the following helpfu ...

javascripthtmlreactjsreduxmaterial-ui

Discover the pixel width of a Bootstrap grid row or container using JavaScript

How can I calculate the width of a Bootstrap grid row or container in pixels using JavaScript? I am working with Aurelia for my JavaScript project, but I'm open to solutions in standard JS (no jQuery, please). Looking at the Bootstrap documentation, ...

javascriptreactjsangularbootstrap-4aurelia