My preloader works fine with previous version of createjs
but latest version of createjs it does not work. so what the update needed ?
loader.onProgress = handleProgress;
stage = new createjs.Stage(canvas);
createjs.Ticker.setFPS(22);
createjs.Ticker.addEventListener("tick", stage);
var progress = new createjs.Shape();
var progressBellow = new createjs.Shape();
var txt = new createjs.Text();
progress.graphics.beginStroke("#280000").drawRect(115,112,400,40);
progressBellow.graphics.beginStroke("#280000").drawRect(115,112,400,40);
txt.x = 150;
txt.y = 190;
txt.font = ("25px Verdana");
txt.color = ("#f11c35");
function handleProgress(event) {
progress.graphics.clear();
// Draw the progress bar
progress.graphics.beginFill("#92ba17").drawRect(115,112,400*(event.loaded / event.total),40);
txt.text = ("Loading " + 100*(event.loaded / event.total) + "%");
}
stage.addChild(progress,progressBellow,txt);
stage.update();
There is no onProgress callback. Callbacks were removed a few versions ago (2013?) when bubbling events were added (the two methods aren't compatible).
Use an event instead:
loader.on("progress", handleProgress);
// OR
loader.addEventListener("progress", handleProgress);
Hope that solves your issue.
Related
While creating a script that would automate all the different tasks I do when I start working on a new picture on Photoshop, I encountered the following problem.
I want to create different groups and different layers inside these groups. Everything goes perfectly fine until this :
#target photoshop
app.bringToFront();
var doc = app.activeDocument;
newCurve();
var clippingHelpLayerLight = doc.activeLayer;
clippingHelpLayerLight.blendMode = BlendMode.SCREEN;
clippingHelpLayerLight.name = "Clipping Help Layer - Light";
clippingHelpLayerLight.visible = false;
clippingHelpLayerLight.duplicate();
var clippingHelpLayerLighter = doc.activeLayer;
clippingHelpLayerLighter.name = "Clipping Help Layer - Lighter";
clippingHelpLayerLighter.visible = false;
function newCurve() {
var c_ADJ_LAYER = charIDToTypeID("AdjL");
var c_ADJUSTMENT = charIDToTypeID("Adjs");
var c_CHANNEL = charIDToTypeID("Chnl");
var c_COMPOSITE = charIDToTypeID("Cmps");
var c_CURVE = charIDToTypeID("Crv ");
var c_CURVE_A = charIDToTypeID("CrvA");
var c_CURVES = charIDToTypeID("Crvs");
var c_HORIZONTAL = charIDToTypeID("Hrzn");
var c_MAKE = charIDToTypeID("Mk ");
var c_NULL = charIDToTypeID("null");
var c_POINT = charIDToTypeID("Pnt ");
var c_TYPE = charIDToTypeID("Type");
var c_USING = charIDToTypeID("Usng");
var c_VERTICAL = charIDToTypeID("Vrtc");
var d_CURVES_LAYER = new ActionDescriptor();
// Contains all the information necessary to perform the "MAKE" action
var r_CLASS = new ActionReference();
r_CLASS.putClass(c_ADJ_LAYER);
d_CURVES_LAYER.putReference(c_NULL, r_CLASS);
// Class of make action is of an ajdustment layer
var d_TYPE_CURVES = new ActionDescriptor();
// Contains all the information about all the curves
var d_CHANNEL_CURVES = new ActionDescriptor();
var l_CHANNEL_CURVES = new ActionList();
// Contains a list of channel curves
var d_CHANNEL_CURVE = new ActionDescriptor();
// Information for 1 channel curve
var r_CHANNEL = new ActionReference();
r_CHANNEL.putEnumerated(c_CHANNEL, c_CHANNEL, c_COMPOSITE);
// This curve is for the composite channel - VARIES
d_CHANNEL_CURVE.putReference(c_CHANNEL, r_CHANNEL);
// Contains the point list
var l_POINTS = new ActionList();
// List of points for this channel - LENGTH VARIES
var d_POINT = new ActionDescriptor();
// One point on the curve, has INPUT and OUTPUT value
d_POINT.putDouble(c_HORIZONTAL, 0.000000);
d_POINT.putDouble(c_VERTICAL, 0.000000);
l_POINTS.putObject(c_POINT, d_POINT);
//var d_POINT3 = new ActionDescriptor();
d_POINT.putDouble(c_HORIZONTAL, 255.000000);
d_POINT.putDouble(c_VERTICAL, 255.000000);
l_POINTS.putObject(c_POINT, d_POINT);
// Made the list of points
d_CHANNEL_CURVE.putList(c_CURVE, l_POINTS);
// Now have a list of points for a specific channel
l_CHANNEL_CURVES.putObject(c_CURVE_A, d_CHANNEL_CURVE);
// Add to the list of channel curves
d_CHANNEL_CURVES.putList(c_ADJUSTMENT, l_CHANNEL_CURVES);
// All the channel curves are inside here
d_TYPE_CURVES.putObject(c_TYPE, c_CURVES, d_CHANNEL_CURVES);
// .....
d_CURVES_LAYER.putObject(c_USING, c_ADJ_LAYER, d_TYPE_CURVES);
// package the curves and definition of the adjustment layer type
executeAction(c_MAKE, d_CURVES_LAYER, DialogModes.NO);
}
I actually want to create a first layer called "Clipping Help Layer - Light", blend mode : screen and turn it off. Then duplicate it, change the name of the new layer as "Clipping Help Layer - Lighter" and turn it off too.
Like this : Screenshot of what I would like to do
It does create the 2 layers, but the first one has " copy" at the end of its name and it stays turned on.
Screenshot of the actual result
Why ?
I can't understand why it doesn't work as expected and can't manage to fix it.
Any help would be greatly appreciated !
I believe the problem you are encountering has to do with doc.activeLayer. After you duplicate "Clipping Help Layer - Light," the script does not seem to change what doc.activeLayer is pointing to so when you then try to assign it to clippingHelpLayerLighter, you are then pointing at an undefined layer. While I don't know exactly what is happening behind the scenes when you do that, I do believe this will fix your problem:
#target photoshop
app.bringToFront();
var doc = app.documents.add( 4, 4 );
doc = app.activeDocument;
var clippingHelpLayerLight = doc.activeLayer;
clippingHelpLayerLight.blendMode = BlendMode.SCREEN;
clippingHelpLayerLight.name = "Clipping Help Layer - Light";
clippingHelpLayerLight.visible = false;
clippingHelpLayerLight.duplicate();
doc.activeLayer = doc.layers[ "Clipping Help Layer - Light copy" ];
doc.activeLayer.name = "Clipping Help Layer - Lighter";
doc.activeLayer.visible = false;
//I am not sure if you need this pointer to be called upon later in your
//code. If you do not, just leave this line out.
var clippingHelpLayerLighter = doc.activeLayer;
Hope this helps! Let me know if you have any questions, I'm by no means an expert but I use scripts fairly often.
I created this jsfiddle.
A line i connecting two elements, and I want the line to stay connected to both elements no matter where they go.
I've sort of succeeded, but with one pretty obvious error. It keeps drawing new lines instead of redrawing the existing line. Please help me on how to make it update the line position instead.
var stage = new createjs.Stage("canvas");
createjs.Ticker.setFPS(60);
createjs.Ticker.addEventListener("tick", tick);
var arrDots = [];
var arrLines = [];
var circle1 = new createjs.Shape().set({
x: stage.canvas.width/2,
y: 50,
cursor: "pointer",
name:"target"
});
circle1.graphics.f(createjs.Graphics.getRGB(Math.random()*0xFFFFFF))
.dc(0,0,20);
stage.addChild(circle1);
arrDots.push(circle1);
var circle2 = new createjs.Shape().set({
x: stage.canvas.width/2,
y: stage.canvas.height - 50,
cursor: "pointer",
name:"target"
});
circle2.graphics.f(createjs.Graphics.getRGB(Math.random()*0xFFFFFF))
.dc(0,0,20);
stage.addChild(circle2);
arrDots.push(circle2);
var line = new createjs.Shape().set({
graphics: new createjs.Graphics().s("#00f").mt(arrDots[0].x,
arrDots[0].y).lt(arrDots[1].x, arrDots[1].y)
});
stage.addChild(line);
arrLines.push([arrDots[0], arrDots[1], line]);
createjs.Tween.get(circle1, {loop: true}).to({x:50},
3000).to({x:stage.canvas.width/2}, 3000);
function tick(event) {
keepLineConnection();
stage.update();
}
function keepLineConnection() {
for(var i = 0; i < arrLines.length; i++) {
arrLines[i][2].graphics.mt(arrLines[i][0].x, arrLines[i][0].y).lt(arrLines[i][1].x, arrLines[i][1].y);
}
}
The reason it keeps drawing is because you keep adding commmands to the graphics. Basically, you are doing this:
graphics.mt().lt().mt().lt().mt().lt().mt().etc();
Since you are just adding new instrucitons, they will pile up over time,
and will eventually kill your processor.
An easy fix for that is to clear the graphics first before adding new ones:
graphics.clear().mt().lt();
A better approach is to use commands. Since EaselJS 0.7.0, all graphics commands are objects, and at any time you can update properties of those objects directly. For example, the MoveTo and LineTo commands both have an x and y property. Here is more info on Commands: http://blog.createjs.com/update-width-height-in-easeljs/
Here is a modified fiddle that stores of commands on the line, and then updates them on tick. I also made a few other updates, such as changing the timing mode to RAF, which is smoother than using interval-based timers at 60FPS.
https://jsfiddle.net/tck7x8u2/
// Store commands:
line.cmd1 = line.graphics.mt(0,0).command;
line.cmd2 = line.graphics.lt(0,0).command;
// Update commands:
var instr = arrLines[i],
line = instr[2];
line.cmd1.x = instr[0].x;
line.cmd1.y = instr[0].y;
line.cmd2.x = instr[1].x;
line.cmd2.y = instr[1].y;
Cheers!
Edit: Here is are some demos using that idea that I made a while back:
https://lab.gskinner.com/connections
http://jsfiddle.net/lannymcnie/2xoL08bx/
http://jsfiddle.net/lannymcnie/6rh7P/
I have a game with a preloader in scene 1, with the following code on the time line.
stop();
loadingBar._xscale = 1;
var loadingCall:Number = setInterval(preloadSite, 50);
function preloadSite():Void {
var siteLoaded:Number = _root.getBytesLoaded();
var siteTotal:Number = _root.getBytesTotal();
var percentage:Number = Math.round(siteLoaded/siteTotal*100);
loadingBar._xscale = percentage;
bytesDisplay.text = percentage + "%";
if (siteLoaded >= siteTotal) {
clearInterval(loadingCall);
gotoAndPlay("StartMenu", 1);
}
}
The code works fine when there are no music files linked to frame 1. If there are music files linked, then everything loads before the preloader shows up.
I found this great webpage about preloaders, which speaks about the linkage issue, and suggests I put all the big files on frame 2, after the preloader, then skip them. I put my large files on frame 2 as suggested and the preloader worked again.
My question is, is there a better way to do this. This solution seems like a hack.
The only better option I can think of, is to NOT store the MP3 file in your Flash file, but rather load it in your preloader with your flash file's content. This is provided that you're storing your MP3 file somewhere else online (like on a server).
stop();
loadingBar._xscale = 1;
var sound:Sound = new Sound();
sound.loadSound("http://www.example.com/sound.mp3", false);
var loadingCall:Number = setInterval(preloadSite, 50);
function preloadSite():Void {
var siteLoaded:Number = _root.getBytesLoaded()+sound.getBytesLoaded();
var siteTotal:Number = _root.getBytesTotal()+sound.getBytesTotal();
var percentage:Number = Math.round(siteLoaded / siteTotal * 100);
loadingBar._xscale = percentage;
bytesDisplay.text = percentage + "%";
if (siteLoaded >= siteTotal) {
clearInterval(loadingCall);
gotoAndPlay("StartMenu", 1);
sound.start();
}
}
I creating a report in rdlc in winforms. This is working properly. But after i add the page settings to the report viewer the print layout view not showing properly. Only black dots showing. When i comment the page settings it is working properly.
My report binding coding are below
this.reportViewer1.Width = this.Width - 15;
this.reportViewer1.Height = this.Height - 15;
this.reportViewer1.LocalReport.DataSources.Clear();
this.reportViewer1.LocalReport.ReportEmbeddedResource = "Report1.rdlc";
ReportDataSource rds = new ReportDataSource("DataSet1", CustomerList);
rds.Value = _deliveryNote.CustomerList;
this.reportViewer1.LocalReport.DataSources.Add(rds);
System.Drawing.Printing.PageSettings pg = new System.Drawing.Printing.PageSettings();
pg.Margins.Top = 100;
pg.Margins.Bottom = 100;
pg.Margins.Left = 100;
pg.Margins.Right = 100;
pg.Landscape = false;
System.Drawing.Printing.PaperSize size = new PaperSize();
size.RawKind = (int)PaperKind.A4;
pg.PaperSize = size;
this.reportViewer1.SetPageSettings(pg);
this.reportViewer1.LocalReport.Refresh();
this.reportViewer1.RefreshReport();
This is because you have not specified the height and width of the paper. Changing your code as follows will solve your problem:
System.Drawing.Printing.PageSettings pg = new PageSettings();
// Set margins
pg.Margins = new System.Drawing.Printing.Margins(100, 100, 100, 100);
// Set paper size
pg.PaperSize = new PaperSize("A4", 827, 1169); // 8.27 in x 11.69 in
pg.RawKind = (int)PaperKind.A4; // Before .NET Framework 4.5
// Update report and refresh
this.reportViewer1.SetPageSettings(pg);
this.reportViewer1.RefreshReport();
// Switch to print Layout (optional)
this.reportViewer1.SetDisplayMode(DisplayMode.PrintLayout);
For .NET Framework 4.5 and newer, the RawKind needs to be set as follows. Thanks for pointing out #Tyler Durden.
pg.PaperSize.RawKind = (int)PaperKind.A4;
Hope this helps someone in the future.
I am trying to automate the process of scanning/cropping photos in Photoshop. I need to scan 3 photos at a time, then use Photoshop's Crop and Straighten Photos command, which creates 3 separate images. After that I'd like to save each of the newly created images as a PNG.
I looked at the JSX scripts and they seem to a lot of promise. Is what I described possible to automate in Photoshop using JavaScript or VBScript or whatever?
I just found this script just did the work for me! It automatically crop & straighten the photo and save each result to directory you specified.
http://www.tranberry.com/photoshop/photoshop_scripting/PS4GeeksOrlando/IntroScripts/cropAndStraightenBatch.jsx
Save it to local then run it in the PS=>File=>Command=>Browse
P.S I found in the comment it said the script can be executed directly by double clicking from Mac Finder or Windows Explorer.
Backup gist for the script here
I actually got the answer on the Photoshop forums over at adobe. It turns out that Photoshop CS4 is totally scriptable via JavaScript, VBScript and comes with a really kick-ass Developer IDE, that has everything you'd expect (debugger, watch window, color coding and more). I was totally impressed.
Following is an extract for reference:
you can run the following script that will create a new folder off the existing one and batch split all the files naming them existingFileName#001.png and put them in the new folder (edited)
#target Photoshop
app.bringToFront;
var inFolder = Folder.selectDialog("Please select folder to process");
if(inFolder != null){
var fileList = inFolder.getFiles(/\.(jpg|tif|psd|)$/i);
var outfolder = new Folder(decodeURI(inFolder) + "/Edited");
if (outfolder.exists == false) outfolder.create();
for(var a = 0 ;a < fileList.length; a++){
if(fileList[a] instanceof File){
var doc= open(fileList[a]);
doc.flatten();
var docname = fileList[a].name.slice(0,-4);
CropStraighten();
doc.close(SaveOptions.DONOTSAVECHANGES);
var count = 1;
while(app.documents.length){
var saveFile = new File(decodeURI(outfolder) + "/" + docname +"#"+ zeroPad(count,3) + ".png");
SavePNG(saveFile);
activeDocument.close(SaveOptions.DONOTSAVECHANGES) ;
count++;
}
}
}
};
function CropStraighten() {
function cTID(s) { return app.charIDToTypeID(s); };
function sTID(s) { return app.stringIDToTypeID(s); };
executeAction( sTID('CropPhotosAuto0001'), undefined, DialogModes.NO );
};
function SavePNG(saveFile){
pngSaveOptions = new PNGSaveOptions();
pngSaveOptions.embedColorProfile = true;
pngSaveOptions.formatOptions = FormatOptions.STANDARDBASELINE;
pngSaveOptions.matte = MatteType.NONE;
pngSaveOptions.quality = 1;
pngSaveOptions.PNG8 = false; //24 bit PNG
pngSaveOptions.transparency = true;
activeDocument.saveAs(saveFile, pngSaveOptions, true, Extension.LOWERCASE);
}
function zeroPad(n, s) {
n = n.toString();
while (n.length < s) n = '0' + n;
return n;
};
Visit here for complete post.
Have you tried using Photoshop Actions? I don't now about the scanning part, but the rest can all be done by actions quite easily.