Skip to main content
DigitalDesignDude
Inspiring
May 27, 2024
Answered

Set Custom Registration Point with JSFL?

  • May 27, 2024
  • 2 replies
  • 971 views

I would like to make my own JSFL script for converting selected art into a symbol with a custom registration point using inputted X and Y coordinates.

Though it seems the JSFL method for converting symbols: document.convertToSymbol() only allows for registration point positions of: "top left", "top center", "top right", "center", etc instead of specific X and Y coordinates. 

 

I know of some workarounds like using EDAPT Tools' "Set Reg Point To Transform Point" feature, or creating a symbol from a shape that's positioned where I want the registration point to be, and then copying and pasting main timeline art into that symbol, but that requires some re-alignment work.

Is this even possible with JSFL alone? Thank you for any input on this.

Correct answer Vladin M. Mitov

Here is a quick example. The coordinates for offsetting the registration point are measured from the top left corner of the content that will be converted into a symbol.

	function convertToSymbolWithOffset( atype, aname, xoffset, yoffset ){
		
		var doc = fl.getDocumentDOM();
		if( doc.selection.length === 0 ) return;

		 // Calculate custom offset from the top left
		doc.convertToSymbol( atype, aname, "top left" );
		xoffset *= -1;
		yoffset *= -1;
		
		doc.enterEditMode();

			doc.selectAll();
				doc.moveSelectionBy( { x:xoffset, y:yoffset } );
			doc.selectNone();
			
		doc.exitEditMode();

		xoffset *= -1;
		yoffset *= -1;
		doc.moveSelectionBy( { x:xoffset, y:yoffset } );		
		
		doc.setTransformationPoint( { x:0, y:0 } );
	}
	
	
	convertToSymbolWithOffset( "graphic", "TEST 1", 32, 32 );




2 replies

eytanrose
Inspiring
January 19, 2025

Here is a command that changes the registration point of a selected symbol to the trasformation point (that was set manually in Free Transform Tool by dragging the pivot), while keeping the symbol in the same place on the stage. The command adjusts the position of all the elements inside the symbol, on all the layers and in all the keyfames:

var doc = an.getDocumentDOM();
var tl = doc.getTimeline();
var lib = doc.library;
var sel = doc.selection;
var cl = tl.currentLayer;
var cf = tl.currentFrame;

if (sel.length > 0) {
	for (s = 0; s < sel.length; s++) {
		if (sel[s].elementType == "instance" && sel[s].instanceType == "symbol") {
			var sym = sel[s];
			var symsel = 1;
			break;
		}
	}
	if (symsel == 1) {
		doc.selectNone();
		sym.selected = true;
		var tp = doc.getTransformationPoint();
		var tpx = tp.x;
		var tpy = tp.y;
		var mat = sym.matrix;
		var sx = sym.x;
		var sy = sym.y;
		var rnd = Math.floor(Math.random() * 1000);
		doc.selectNone();
		tl.addNewLayer("REFREC", "normal", false);
		doc.setFillColor("#FF0000");
		doc.addNewRectangle({
			left: sx - 50,
			top: sy - 50,
			right: sx + 50,
			bottom: sy + 50
		}, 0);
		var recnm = "REC_" + rnd;
		var refnm = "REF_" + rnd;
		tl.setSelectedFrames(cf, cf + 1);
		doc.convertToSymbol('graphic', recnm, 'center');
		doc.convertToSymbol('graphic', refnm, 'center');
		var ref = tl.layers[cl + 1].frames[cf].elements[0];
		doc.enterEditMode('inPlace');
		var reftl = doc.getTimeline();
		var refrec = reftl.layers[0].frames[0].elements[0];
		refrec.x = tpx;
		refrec.y = tpy;
		doc.exitEditMode();
		ref.matrix = mat;
		doc.selectNone();
		ref.selected = true;
		doc.breakApart();
		var rec = tl.layers[cl + 1].frames[cf].elements[0];
		var newx = rec.x;
		var newy = rec.y;
		doc.deleteSelection();
		tl.deleteLayer(cl + 1);
		sym.selected = true;
		doc.setTransformationPoint({
			x: 0,
			y: 0
		});
		sym.x = newx;
		sym.y = newy;
		doc.enterEditMode();
		var stl = doc.getTimeline();
		stl.expandFolder(true, true, -1);
		var lz = stl.layerCount;
		stl.setLayerProperty('locked', false, 'all');
		for (i = 0; i < lz; i++) {
			var lay = stl.layers[i];
			if (lay.layerType == "folder") {
				continue;
			}
			var fc = lay.frameCount;
			for (f = fc - 1; f > -1; f--) {
				var kf = lay.frames[f].startFrame;
				f = kf;
				var fe = lay.frames[kf].elements[0];
				if (fe) {
					fe.x -= tpx;
					fe.y -= tpy;
				}
			}
		}
		doc.exitEditMode();
	}
} else {
	alert("No Symbol Selected");
}
Vladin M. Mitov
Inspiring
May 27, 2024

>>... Is this even possible with JSFL alone?

If your question is whether it is possible for the registration point to have custom coordinates set with X and Y during the creation of the symbol, the answer is no, it is not possible. The method document.convertToSymbol() only accepts some of these predefined strings as arguments. However, you can change the registration point of the symbol immediately after its creation, which is entirely within the capabilities of JSFL.

To do this, open the symbol for editing after creating it and move its content to align with the registration point as desired. Use document.enterEditMode() and document.exitEditMode().


 

- Vlad: UX and graphic design, Flash user since 1998Member of Flanimate Power Tools team - extensions for character animation
DigitalDesignDude
Inspiring
May 27, 2024

Thank you for your answer, Vlad!

It sounds like moving the registration point after the symbol is created is what I'll be working on. All the best to you.

Vladin M. Mitov
Vladin M. MitovCorrect answer
Inspiring
May 28, 2024

Here is a quick example. The coordinates for offsetting the registration point are measured from the top left corner of the content that will be converted into a symbol.

	function convertToSymbolWithOffset( atype, aname, xoffset, yoffset ){
		
		var doc = fl.getDocumentDOM();
		if( doc.selection.length === 0 ) return;

		 // Calculate custom offset from the top left
		doc.convertToSymbol( atype, aname, "top left" );
		xoffset *= -1;
		yoffset *= -1;
		
		doc.enterEditMode();

			doc.selectAll();
				doc.moveSelectionBy( { x:xoffset, y:yoffset } );
			doc.selectNone();
			
		doc.exitEditMode();

		xoffset *= -1;
		yoffset *= -1;
		doc.moveSelectionBy( { x:xoffset, y:yoffset } );		
		
		doc.setTransformationPoint( { x:0, y:0 } );
	}
	
	
	convertToSymbolWithOffset( "graphic", "TEST 1", 32, 32 );




- Vlad: UX and graphic design, Flash user since 1998Member of Flanimate Power Tools team - extensions for character animation