Docu says:
Timeline The Timeline class synchronizes multiple tweens and allows
them to be controlled as a group.
but there is no example how to use it. If I create a Timeline with
var tl = createjs.Timeline();
none of the shapes are rendered anymore.
Timeline is a great feature in TweenMax and I like to use it in the canvas too.
Creating a Timeline shouldn't affect the rendering of the Shapes - could you provide some more code or explain further what you're trying to do?
The usage of Timeline is quite straight forward:
var timeline = new createjs.Timeline(); //create the Timeline
timeline.addTween(tween, tween2); // add some tweens
timeline.setPaused(true); // pause all tweens
timeline.setPosition(300); // set position on all tweens ...
However if you're more used to GSAP you could just use GSAP in combination with EaselJS/CreateJS - they work great together.
I have an example:
//First Tween on rav4 object
var ravScaleTween = new createjs.Tween.get(rav4)
.wait(350)
.to({scaleX:1, scaleY:1, x:ravEndPoint.x, y:ravEndPoint.y}, 1500, createjs.Ease.quadOut);
//Second Tween on rav4 object
var ravAlphaTween = new createjs.Tween.get(rav4)
.wait(350)
.to({alpha:1}, 400);
//Create Timeline class
var ravTimeLine = new createjs.Timeline();
ravTimeLine.addTween(ravScaleTween,ravAlphaTween);
rav4 object starts to scale and go move to x and y position (1500 milliseconds) as alpha of rav4 object fades up at 400 milliseconds
Related
Can the measurement tool be scripted to measure a custom distance? Not an existing measurement, that is.
I would have thought it possible, but Abobe's documentation are sketchy
and there's not much info when it comes down to scripting the measurement tool. Or ruler, as it use to be known. More specifically a lack of examples using the ruler in a script.
Ideally I'd like to:
Script a measurement from x1,y1 to x2,y2
Determine its length, (preferably from a variable, not from a text file - see below)
Clear the ruler tool (so no ruler line appears)
Delete any measurements (so there are no recordings in the ruler window)
That's basic trig, right? But if you can't set the initial ruler then this is all for nothing.
The only thing on the list I've done is the last. :(
I stumble at the first hurdle not being able to set the ruler, which I thought would be app.activeDocument.recordMeasurements(); Only it gets returned as undefined or Unable to record measurements for selection.
As minimal working, this is pretty minimal:
// Let's stick to pixels as the units to make things easier.
// Switch off any dialog boxes
displayDialogs = DialogModes.ERROR; // OFF
// Get and set the units to pixels
var currentUnits = app.preferences.rulerUnits;
app.preferences.rulerUnits = Units.PIXELS;
// delete existing measurements
app.measurementLog.deleteMeasurements(); // THIS WORKS!!
// call the source document
var srcDoc = app.activeDocument;
// Set array to record measurements
var rulerArr = [];
// Set ruler measurement
measure_it(x1,y1,x2,y2); // this a fictional function
// not even the ScriptListener records the ruler tool in a useful form
// var d = app.activeDocument.recordMeasurements(MeasurementSource.MEASURESELECTION, rulerArr); // Unable to record measurements for selection
// var d = app.activeDocument.recordMeasurements(MeasurementSource.MEASURESELECTION); // Unable to record measurements for selection
var d = app.activeDocument.recordMeasurements(); // undefined
var ruler = app.measurementLog; // Is an object!
alert(ruler.length); // undefined
// There's an option to export to a text file
// Is that the only way to get the measurements?
// Can't this be don't internally?
var f = "D:\\temp\\ruler.txt";
ruler.exportMeasurements(f, MeasurementRange.ACTIVEMEASUREMENTS)
alert(app.measurementLog);
// put the units back to how it was
app.preferences.rulerUnits = currentUnits;
// Set Display Dialogs back to normal
displayDialogs = DialogModes.ALL; // NORMAL
I have a Image on a stage and I'm drawing over it and erasing it. Using the following method
http://jsfiddle.net/lannymcnie/ZNYPD/
Now i want to take a clone of the user drawings but its not working. I tried
var drawingAreaClone = drawingArea.clone(true);
but its not working .
Is there a way to clone it. kindly Help
The demo you posted doesn't clear the stage, but instead clears the graphics each frame. If you clone the shape, it will have no instructions.
#Catalin's answer is right if you just need a visual -- but another option is to use the Graphics store() method instead of clearing the graphics: http://createjs.com/docs/easeljs/classes/Graphics.html#method_store
Essentially this method just sets an internal pointer to where the graphics draw from. By storing after each draw, only future draw calls are made. This will have the same application as the demo you posted, only you can call unstore() later to reset the Graphics to draw from the beginning. If you clone it this way, it should work.
var erase = document.getElementById("toggle").checked;
wrapper.updateCache(erase?"destination-out":"source-over");
//drawing.graphics.clear();
drawing.graphics.store(); // Don't draw anything before this point
// Later
var newGraphics = drawing.graphics.clone();
newGraphics.unstore(); // Might be redundant
var shape = new Shape(newGraphics);
Note that cloning Graphics doesn't recreate the entire graphics tree, and simply clones the array that stores the instructions. Modifying the individual instructions after the fact would impact any clones of that Graphics object.
Hope that helps.
If the drawn line shape is a child of the drawingAreaClone then the clone should work properly.
However, if for some reason you can't make it work with that, you can take a snapshot of the canvas and save it as an img type varaible like this:
var snapshot = new Image();
snapshot.src = canvas.toDataURL();
Also, if you don't want to snapshot the whole canvas, after you saved the initial image, you can limit the drawing area to a rectangle with these extra instructions:
var ctx = canvas.getContext('2d');
canvas.width = snapshot.width;
canvas.height = snapshot.height;
ctx.drawImage(snapshot, rectangle.x, rectangle.y, rectangle.width, rectangle.height, 0, 0, rectangle.width, rectangle.height);
snapshot.src = canvas.toDataURL();
I have several images, which are Symbols (movieClip) with Alpha parameter.
And i'm creating dynamic textfield from AS3 to be able change text every few seconds.
Problem is that everything worked good till i converted images to MovieClips. But after that my textfields are not visible.
Here is the code:
textFormat = new TextFormat();
textfield = new TextField();
textFormat.font = new customFonts().fontName;
textFormat.size = 16;
textFormat.align = "center";
textFormat.color = 0xFFFFFF;
textfield.defaultTextFormat = textFormat;
textfield.embedFonts = true;
textfield.width = 480;
textfield.height = 95;
textfield.x = 185;
textfield.y = 22;
textfield.wordWrap = true;
addChild (textfield);
So the question is - how to bring this textfield to the top so it would be visible?
You're adding your Text field after the movie clips are being initiated. Think of it as a layer, the text field is at the bottom layer, hence they will not be seen.
I would look at the container class
The Container class is an abstract base class for components that controls the layout characteristics of child components. You do not create an instance of Container in an application. Instead, you create an instance of one of Container's subclasses, such as Canvas or HBox.
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/core/Container.html
You should be able to change what is displayed.
EDIT:
Anytime you add a clip it is added on top by default.
You should also look into Z-Index.
If you are coding with Flash Develop then it can get tricky, whilst using Flash Adobe CC can make your life so much easier!
Sorry if it's not that much of an answer.
I'm trying to create functionality very similar to most websites these days.
The concept is 3 sections the size of the browser, the background images are supposed to be fixed positioned and revealed by the div scrolling up and down.
We need this to function as beautifully on mobile as it does on desktop, and it looks like Famous/angular is the solution.
Here is a pen.
http://codepen.io/LAzzam2/pen/XJrwbo
I'm using famous' Scroll.sync, firing javascript that positions the background image on every start / update / end.
scrollObject.sync.on("update", function (event) {
console.log('update');
test(event);
});
here is the function positioning the backgrounds.
function test(data){
var scroller = document.getElementsByClassName('famous-group');
styles = window.getComputedStyle(scroller[0], null);
tr = styles.getPropertyValue("-webkit-transform").replace('matrix(1, 0, 0, 1, 0,','').replace(')','');
var distanceTop = -(parseInt(tr));
var sections = document.getElementsByClassName('section');
sections[3].style.backgroundPosition="50% "+distanceTop+"px";
sections[4].style.backgroundPosition="50% "+(-(window.innerHeight)+distanceTop)+"px";
sections[5].style.backgroundPosition="50% "+(-(window.innerHeight*2)+distanceTop)+"px";
};
Any input / suggestions / advice would be wonderful, really just looking for a proof of concept with these 3 background images scrolling nicely.
That jittery-ness is unfortunate, I can't tell what would be causing the issue, except maybe the order in which events are fired?
**There are known issues, only works in -webkit browsers as of now
I think your idea to use Famous is good, but probably what I would do, would be taking a different approach to the problem.
You are solving this by touching the DOM, that is exactly what both Angular and Famous are meant to avoid.
If I had to face the same goal, I would probably use a Famous surface for the background instead of changing the property of the main one and synchronize its position with the scrolling view.
So, in your code, it would be something like this:
function test(data){
var scrollViewPosition = scrollObject.getAbsolutePosition();
var newBackgroundPosition = // Calculate the new background position
var newForegroundPosition = // Calculate the new foreground position
var backgroundSurface = backgroundSurface.position.set(newBackgroundPosition);
var foregroundSurface = foregroundSurface.position.set(newForegroundPosition);
};
given a PDF that is rendered in the browser using pdfjs, are there functions to do the following basic view operations:
rotate
flip
zoom
If not, what are the best strategies I can use to do the operations above?
You can set rotation when you getting viewport form PdfPage object:
var viewport = pdfPage.getViewport(scale, rotation);
If you want to immediately set all the parameters, you can clone viewport, created with scale = 1:
var defaultViewport = pdfPage.getViewport(1);
var neededViewport = defaultViewport.clone({scale: needScale, rotation: needRotation, dontFlip: true});