Layer attached to end of animated stroke

I've an animated stroke on a shape layer drawing dotted lines over a map using Trim to animate the length of the stroke. Works as expected.
I'd like to add something (vector graphic of vehicle or whatever)to the moving end of the stroke from another layer.
Forum and web searches didn't turn up anything addressing this question.
Grateful for hints on how to get something on another layer to follow the growing end of a stroke.
AE CS3 under Win XP SP3

>I've not done much with expressions yet. Is there a route that way?
Not for actually attaching the layer, no. Scripting is the only way you could do that procedurally. Someone out there might have a script that does this sort of thing.
Matching the animation could be done with expressions, I think. I'd have to actually sit down and do it to tell you how, since I haven't done this before, but I don't think it would be difficult. Of course, if your trim paths animation is constant-speed, you should just be able to stretch the position keyframes you pasted to match the duration of the Trim Paths animation (select all the keyframes, then option/alt-drag the first and/or last keyframe to match).
Matching the transforms could also be done using expressions, nulls, and parenting. If you match the grouping structure of the shape layer contents using parented nulls (ultimately parented to the shape layer itself) you should be able to use the pick-whip to link the null transforms to the group transform properties of the shape layer.

Similar Messages

  • Newbie / how was this done? animated stroke

    My favorite DPS magazine has this beautiful animated stroke that I am showing below in these iPad screen captures. The stroke starts from upper left corner and progresses up until to lower right. This is DPS and I presume this animation is made in Flash before becoming a DPS html overlay, so I drawed a couples of black lines in Flash with several white rectangle tweens progressively covering the line in order to recreate that effect. That does not work, my SWF ignores the timeline and triggers all tweens at the same time, ruins the effect.
    I am not a Flash guy, but do you people know if Flash is the easiest to create this effect?
    Many thanks,

    First, you need to get handle of AS3 drawing API and geometry/math capabilities.
    Here is the link to Graphics class documentation:
    http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/display/Graphics. html
    Here is the link to Point API docs:
    http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/geom/Point.html
    Math is, well, the same as anywhere else.
    In JavaScript you will need to get knowledge of its API as well - it is very similar because AS3 and JavaScript are siblings.
    Here is a code that I commented as thoroughly as I could:
    stop();
    import flash.display.Graphics;
    import flash.display.Shape;
    import flash.display.Sprite;
    import flash.events.Event;
    import flash.geom.Point;
    * Shape which is used to draw line into.
    * Basically line drawing itself.
    var animatedLineOverlay:Shape;
    * Instance of animatedLineOverlay.graphics
    * This variable is created to be reused
    var overlayGraphics:Graphics;
    // array of points between which to draw line
    var overlayPoints:Array;
    // x and y postions of line drawing
    var overlayMargin:Number = 30;
    * Used to kepp reference to current start and end points
    * between which line is being drawn
    var currentPoints:Object;
    * Next point to which draw line in the animation.
    * Declare here so it can be reused.
    var nextPoint:Point;
    * Line straight segmen starting point.
    var sPoint:Point;
    * Line straight segment end point
    var ePoint:Point;
    * Anngle under which to draw line segment
    var angle:Number;
    * Line draw speed
    var speed:Number = 8;
    * How far to advance line animation in a single frame along x
    var advanceX:Number;
    * How far to advance line animation in a single frame along y
    var advanceY:Number;
    init();
    * Inititalizes entire thing by calling specialized functions
    function init():void
        makeBackground();
        definePoints();
        makeOverlay();
        startAnimation();
    * Starts line animation by adding ENTER_FRAME event listener
    function startAnimation():void
        addEventListener(Event.ENTER_FRAME, drawLine);
    * ENTER_FRAME event handler
    * @param    e
    function drawLine(e:Event):void
        // if no currentPoints defined - go through the logic
        if (!currentPoints)
             * since we shorten overlayPoints while animating line
             * whyen array is empty - stop animation
            if (overlayPoints.length == 0)
                // stop animation
                removeEventListener(Event.ENTER_FRAME, drawLine);
                // calling return will effectively exit drawLine function
                return;
            // get point to process by extracting first element in the array
            currentPoints = overlayPoints.shift();
            // if element contains color property - change line color
            if (currentPoints.lineColor)
                overlayGraphics.lineStyle(1, currentPoints.lineColor, 1, true);
            // get start and end points
            sPoint = currentPoints.start;
            ePoint = currentPoints.end;
            // calculate angle between the points
            angle = Math.atan2(ePoint.x - sPoint.x, ePoint.y - sPoint.y);
            // calculate how far line needs to advance along x/y based on the angle
            advanceX = speed * Math.sin(angle);
            advanceY = speed * Math.cos(angle);
            // move line to startgin position
            overlayGraphics.moveTo(sPoint.x, sPoint.y);
            // starting point position
            nextPoint = new Point(sPoint.x, sPoint.y);
        // advance drawing coordinates
        nextPoint.x += advanceX;
        nextPoint.y += advanceY;
        // add to line segment nextPoint coordinates
        overlayGraphics.lineTo(nextPoint.x, nextPoint.y);
         * if the lates drawing did not get to the exact target point
         * add the difference
        if (Point.distance(ePoint, nextPoint) <= speed)
            // add the difference
            overlayGraphics.lineTo(ePoint.x, ePoint.y);
             * nullify currentPoints so that on the next frame
             * funciont exectures first conditional
            currentPoints = null;
    * Creates data for usage in animation.
    * Points coordinates are arbitrary.
    function definePoints():void
        // use this variables to make drawing dynamic - based on overall application dimensions
        var overlayWidth:Number = stage.stageWidth - overlayMargin * 2;
        var overlayHeight:Number = stage.stageHeight - overlayMargin * 2;
        overlayPoints = [];
         * each array element will be an Object
         * each Object will have two properties start and end
         * which represent points at which, naturally start and end line segment
         * points values are totally arbitrary - use your imagination
        overlayPoints.push({start: new Point(0, 0), end: new Point(0, overlayHeight / 6)});
        overlayPoints.push({start: new Point(0, overlayHeight * .5), end: new Point(0, overlayHeight)});
        overlayPoints.push({start: new Point(0, overlayHeight), end: new Point(overlayWidth / 8, overlayHeight)});
        overlayPoints.push({start: new Point(overlayWidth / 8, overlayHeight), end: new Point(overlayWidth / 6, overlayHeight - 50)});
        overlayPoints.push({start: new Point(overlayWidth / 6, overlayHeight - 50), end: new Point(overlayWidth * .5, overlayHeight - 50)});
        // this element also has color property - to change line color at this segment
        overlayPoints.push({start: new Point(overlayWidth * .5, overlayHeight - 50), end: new Point(overlayWidth - 20, overlayHeight - 50), lineColor: 0xFFFFFF});
        overlayPoints.push({start: new Point(overlayWidth - 20, overlayHeight - 50), end: new Point(overlayWidth - 20, overlayHeight - 100)});
        overlayPoints.push({start: new Point(overlayWidth - 20, overlayHeight - 100), end: new Point(overlayWidth, overlayHeight - 150)});
        overlayPoints.push({start: new Point(overlayWidth, overlayHeight - 150), end: new Point(overlayWidth, overlayHeight - 200)});
    * Creates line drawing plain
    function makeOverlay():void
        // instantiate
        animatedLineOverlay = new Shape();
        // gain reference to the graphics API
        overlayGraphics = animatedLineOverlay.graphics;
        // define line properties
        overlayGraphics.lineStyle(1, 0, 1, true);
        overlayGraphics.beginFill(0x000000);
        // draw initial rectangle at the top/left
        overlayGraphics.drawRect(0, 0, 80, 10);
        overlayGraphics.endFill();
        // position drawing plain at its margin
        animatedLineOverlay.x = animatedLineOverlay.y = overlayMargin;
        addChild(animatedLineOverlay);
    * Makes applpication background.
    function makeBackground():void
        graphics.beginFill(0xFF8040);
        graphics.drawRect(0, 0, stage.stageWidth * .5, stage.stageHeight);
        graphics.endFill();
        graphics.beginFill(0x0070DF);
        graphics.drawRect(stage.stageWidth * .5, 0, stage.stageWidth * .5, stage.stageHeight);
        graphics.endFill();

  • Dots at the Ends of Brush Strokes?

    I just uprgraded to CS4 from CS3 and there's a problem with the brushes that I can't seem to figure out. I have the brush set to pen pressure, and at the end of each stroke, there's a dot. Like this:
    /Users/jpb1343/Desktop/Picture 13.png
    I thought it may have been my drawing tablet, but CS3 worked fine. Is there anything I can do to make the brush strokes smooth?

    Sorry. Does this work?
    <br />
    <a href="http://www.pixentral.com/show.php?picture=1kJXbKAzdBCZJGbXWiNzfGQPfS0ur1" /></a>
    <img alt="Picture hosted by Pixentral" src="http://www.pixentral.com/hosted/1kJXbKAzdBCZJGbXWiNzfGQPfS0ur1_thumb.png" border="0" />
    <br />I use a Hanvon drawing tablet to draw. Is it not compatible with PS?

  • I have a new ipad4. I can not open e-mails that have an attachment that ends in WMV. Is there a solution? Thanks.

    I have a new ipad4. I can not open e-mails that have an attachment that ends in WMV. Is there a solution to this? Thanks.

    WMV is an unsupported format on Ipad.
    Here is a good discussion to read. an dit may help you decide what to do
    https://discussions.apple.com/thread/3721087?start=0&tstart=0
    Cheers

  • End of Animation capture in Indesign CS5

    I've been creating a series of in-house slide-shows that involves page to page animation and timelines but unfortunately come unstuck with this issue. I know with Microsoft Powerpoint I also used to have this problem but managed to download a plug-in to capture the end of an animation. Can this be done with Indesign? Is there a plug-in for this function?
    I know I could create guides on my pages but it would be far less tedious/more accurate and really speed things up if I had this option..

    It's not related to hard disk space.
    It could be that you've had InDesign open too long - closing InDesign and reopen it and it could fix the problem.
    It could be the internal structure of the InDesign file itself - so you could File>Export and choose IDML from the options (think it's File Save AS in newer versions?)
    This can clear out unnecessary build up of code that is causing this error.
    But if you let us know more about your issue and what happens and the exact error message.
    Computer Model/Specs
    Versoin of InDesign
    Screenshots of any errors that pop up.

  • How to adjust each layer so frames end at chosen position

    Greetings,
    How can I drag the key frames back within each of the layers below so that they all end on the final scene. Currently when I hit play, the clip runs till the last key frame and the other layers that don't run that length disappear. How can I best fix this?
    Many thanks in advance

    I don't know how it works if you happen to be using the newer tweens, but to have something remain as it was when its tween ended I would normally just right click the last frame that I want occupied and choose the "Insert Frame" command.  That last  frame would be frame 72 for what you show/want.  You would need to get rid of any blank keyframes at the end which most of your layers appear to have.
    Just as an example, for the layer named "layer 2, I would right click frame 67 and choose "Clear Keyframe" to get rid of the blank keyframe.  Then I would right click frame 66 and choose "Remove Tween".  Then I would right click frame 72 and choose "Insert Frame"  That should result in the contents of frame 66 remaining thru frame 72.

  • Photoshop CC: Layer Merging Behavior with Timeline Animations (Bug?)

    Hello,
    we're working a lot with the Photoshop timeline in our company. After upgrading to Photoshop CC we encountered a behavior that was different with CS6.
    Picture a file with a timeline animation consisting for example of 8 frames, with 8 layers, each layer's visibility exposed on a single frame (layer 1 exposed in frame 1, layer 2 exposed in frame 2 etc) and all other layer not visible.
    In Photoshop CS6, if I were to create a new layer for example in frame 4 of my timeline above layer 4 (which is the only visible layer in this frame) and merged it back down onto layer 4 (by selecting it and pressing the shortcut CTRL+E), the resulting layer inherited all the exposure settings of layer 4, but did contain the merged visual content of layer 4 and the previously new layer above it. This is what I want.
    Now in Photoshop CC, when doing the very same action, the layers are merged and keep the naming of layer 4, however the visibility flag is not inherited properly. The resulting layer is exposed (visible) on all frames in the timeline, whereas it actually should only be exposed in frame 4.
    Also note that the timeline option "New layers visible in all frames" is deactivated. So even if Photoshop treated the merged layer as an actual new layer, it shouldn't expose it's visibility in all other frames.
    The only workaround I've found so far is enabling "unify layer visibility", hiding the layer, then disabling "unify layer visibility" again. This is annoying however, and the entire new behavior seems like a bug to me. Can any of the developers comment on this? Thank you.
    Regards,
    Hannes Drexl

    My only solution so far is to avoid using CC and sticking with CS6.  Thanks Adobe for not letting me enjoy the other great features of the PS version you seem to care about updating and improving.  Since PS is the main reason I even subscribed to creative cloud, it would be nice to at least know this problem is being resolved in the future.

  • How to make custom start end shapes for stroke (arrowheads)...

    hello...
    Indesign cs4 have nice start end stroke shapes like arrowheads, circles, squares...circles is clear, without fill. I need fill in it.
    How to make custom shapes or edit existings start/end shapes to functioning like original provided with indesign?
    Maybe illustrator cs4 have this?

    There's no way to edit line endings in ID. You would have to make a compound path from a line with no ending and a second path or shape for the end.

  • Text Animation Stroke

    Is there any way to put a stroke on text animation in
    Captivate 3?

    Hi there YTCollege
    Can you please clarify what you mean by "Putting a stroke" on
    the animation?
    * Does it mean you want to use strikethrough?
    * Does it mean you want underlining?
    * Does it mean you want to pause it?
    * Does it mean something else not listed here?
    Cheers... Rick

  • Layer position resets when creating animations

    I'm creating an animated gif from a video clip (cinemagraph). In order to acheive the effect I need, I need to move each layer with the move tool to get an object to stay in the same position. I have gone through layer by layer and used the move tool to move the contents of each layer. When I play the animation I see the layers in the position I put them in. As soon as I stop playing the animation the contents of each layer snap back to their original positions. I have tried using the lock tools (both lock position and lock all) but they don't make a difference. Can anyone tell me why layer positions would reset when creating animations and how to get it to stop?
    Thanks for any help.
    Eric

    It seems from your answer that you're thinking I'm just moving one frame and expecting the rest of them to move automatically (but I'm not sure if that's what you are saying). I have gone through and moved each frame individually and then locked each frame's position individually. When I play the animation and then stop it the layers move back to their original positions.
    I'm also not sure if you're thinking I'm expecting that when I move one image off the layer it will affect the next layer. That's not what I'm expecting. I'm just repositioning the image on each layer to get a particular object to stay in one place (the camera was moving while shooting), so I'm dealin gwith each layer individually.
    Thanks

  • SWF Export; Rasterized Layer from using a simple animated mask?

    I'm currently animating some drawings from Illustrator in AE CS3, and exporting them as SWF's.  Everything has gone pretty well, up until I used a simple rectangular animated mask (Inverted, Mode 'Add') that revealed a layer.  Whether I have the mask directly on the layer, or have it parented on an adjustment layer, the output is horribly rasterized, but only for that layer.  I've looked at the Help Viewer and it states that masks are a supported feature of exporting to swf, but I am flummoxed how to keep the vectored images I began with.  Any suggestions?  Thanks!
    Mike

    Thanks for the reply!  I had considered that fact, even though I couldn't find any documentation for it.  However, even with a static mask, drawn onto the layer, the rasterization still occurs.  Is there a way to have even a static mask produce a non-rasterized export?  It seems it should be the case considering it's a 'supported feature.'   Do I need to import vectored shapes from Illustrator as masks, instead of drawing them in AE?  And yes, Continuously Rasterize is checked (althought it doesn't seem to be necessary in any other of the Illustrator layers).   Any ideas?
    Mike

  • I am tryin to convert AI files to PSDs and am getting them as one layer in the end. I think the problem is all of my sub layers. What is a quick solution?

    I keep getting a flat psd.

    Select File > Export and select Photoshop as the file type. In the menu that appears set your color mode and resolution preferences per the file you have, but make sure you select Write Layers and don't have Flat Image selected.
    if you're still getting a single flat image in Photoshop you haven't separated each object to it's own layer in Illustrator. The first image shows a file which has multiple objects but they're all contained in a single layer.
    Clicking on the layer and selecting "Release to Layers (sequence)" will then move all the shapes to their own layer.

  • JS CS4: Create variable for current layer then select the layer at the end of a script

    I'm coming up blank with the verbiage and spinning my wheels with the OMV and script guide.
    var myOriginalLayer = app.activeDocument.layers.item(0);
    alert(myOriginalLayer)
    returns "object layer" and not the layer's name.
    var myOriginalLayer = app.activeDocument.layers.lastItem().name;
    Does return the layer name I want but not by selection.
    I'm challenged on how to select the layer.

    Hi John,
    The difference lies in that the [Object Layer] is the actual object, and the 'name' is just a property -- just like its color.
    You can use one of these two approaches:
    var myOriginalLayer = app.activeDocument.layers.item(0);
    alert(myOriginalLayer.name);
    will hold the original layer object, and you can see the name if required :-)
    To re-select the layer, use
    app.activeDocument.activeLayer = myOriginalLayer;
    Alternatively, selecting by name goes like
    var myOriginalLayerNAME = app.activeDocument.layers.lastItem().name;
    app.activeDocument.activeLayer = app.activeDocument.layers.item(myOriginalLayerNAME);
    I also noticed the following:
    app.activeDocument.layers.item(0) points to the first layer of your document; not the 'active' one. Similarly, app.activeDocument.layers.lastItem() just points to the very last one. I'm not sure if the order of the activeDocument.layers array mimicks the order as shown in the Labels palette, but I would hope it does :-)
    To get/set the active layer, use app.activeDocument.activeLayer as shown above.

  • Ability to vitually attach images, end to end

    A suggestion: It would be cool to have a mode that worked like stacking, except it connects multiple photos together along a common horizon. Individual tilt, perspective, overlap, and exposure controls could be used to match the edges.  They would export as one huge photo to be printed.

    George,
    That's panorama stitching. You can currently do it in various "pixel editors", such as Photoshop.
    You might want to submit your feature request here.
    Hal

  • Why is the stroke causing a blob during the animation of my text?

    Hi,
    I have a simple text layer that I have applied a stroke to and then added the text animation preset "blur by word".  During the anmiation, the stroke causes this ugly blob of black. See attached image.
    How do I fix this?
    Thanks,
    Scott

    Don't use layer styles to produce a stroke. This works based on a threshold and naturally using a blur and introducing semi-transparent areas will wreak havoc with this. Use the text's native outline or use duplicate layers and pre-composing to get the look you want without making a mess.
    Mylenium

Maybe you are looking for