18 Replies Latest reply on Jan 16, 2014 7:55 AM by _snickers

    Continuous zoom of vector based elements

    _snickers

      Hey there,

       

      could anyone please explain me how to create a continuous zoom like in Google Maps? I did some screen designs in Photoshop with vector objects and don't know how to animate this.

       

      I need to scale both – a timeline from a minute to an hour view like shown in the attachment – and a map.

       

      In the timeline the distance between the single elements should be the same at any zoom factor (2 px) – only the bars are changing in size. In Illustrator for example if you scale a contour the thickness can always be the same (>attachment). Is this possible without any scripts or programming?

       

      Hopefully you know what I mean and thanks for your support!

      131213_Zoom.pngBildschirmfoto 2013-12-13 um 12.49.46.png

        • 1. Re: Continuous zoom of vector based elements
          Mylenium Most Valuable Participant

          You would have to re-create yopur elements natively in AE and then animate their parameters separately.

           

          Mylenium

          • 2. Re: Continuous zoom of vector based elements
            Rick Gerard Adobe Community Professional & MVP

            I can think of two options depending on your comp setup. I would probably go first with a camera and 3D shape layers with a stroke. You can use vector math in an expression to adjust the with of a stroke and another expression based on the index of a shape layer to offset it's position. You can use the same vector math to adjust the scale of text layers. The key to all of the expressions is this line which measures the distance between the camera and a 3d layer:

             

             thisComp.layer("text parent").content("Rectangle 1").transform.position;
            

             

            maintaining the height of a rectangle would be done like this:

             

            y = value[1];
            x = value[0];
            d =length(thisComp.layer("Camera 1").transform.position, thisLayer.position)/thisComp.layer("Camera 1").cameraOption.zoom;
            [x, y*d]
            

            Adjusting the stroke width so that it always looked the same would be done like this:

             

            d =length(thisComp.layer("Camera 1").transform.position, thisLayer.position)/thisComp.layer("Camera 1").cameraOption.zoom;
            value * d
            

             

            Scaling a text layer would look like this:

             

            d =length(thisComp.layer("Camera 1").transform.position, thisLayer.position)/thisComp.layer("Camera 1").cameraOption.zoom;
            sf = d * 100;
            [sf, sf, 100]
            

             

            Take a look at this comp (CS6) and you'll see how this might work.

             

            You could use similar expressions to adjust the width of a stroke in a 2D comp but the moves on the artwork would be easier and look better using 3D layers and a camera.

            Screen Shot 2013-12-13 at 7.29.13 AM.png

            • 3. Re: Continuous zoom of vector based elements
              _snickers Level 1

              Thanks a lot for your help Unfortunately I use CS5 and can not open the file. Could you please convert it to CS5 somehow? Would be great

              • 4. Re: Continuous zoom of vector based elements
                Rick Gerard Adobe Community Professional & MVP

                Sorry about that. I can't do that right away. Maybe someone with CS6 could. I run CC only on my laptop and am out of the office for a few days. Try experimenting with a shape layer and the expressions. That and the screenshot should get you started.

                • 5. Re: Continuous zoom of vector based elements
                  Andrew Yoole MVP & Adobe Community Professional

                  Here is Rick's file converted for CS5 compatibility.

                  1 person found this helpful
                  • 7. Re: Continuous zoom of vector based elements
                    _snickers Level 1

                    Thank you so much! That seems to work great for my context. Let's see how it works with the map

                    • 8. Re: Continuous zoom of vector based elements
                      _snickers Level 1

                      Hey there,

                       

                      we have one more question left. Everything of your input works fine for our our project. But: How can I use this expression for a pencil drawn path?


                      In a rectangle path / shape you can find attributes underneath like size, position, stroke and so on. In your file you applied the expression on some of those.

                      If I draw a path with the pencil in After Effects CS5 it seems to work different. I tried to apply the expression globally which works. But can you tell me how to get a manually drawn path which keeps the size during a camera zoom but changes the position analogical to it? I only want to create the same thing as with the rectangle for a path.

                       

                      Thanks a lot for your efforts!

                      • 9. Re: Continuous zoom of vector based elements
                        UQg Level 4

                        Hi, my bet is that you should put the path inside a shape group, and use the same expression as for the "size" property of a rectangle, but this time in the shape group "transform.scale" property.

                        Xavier.

                        1 person found this helpful
                        • 10. Re: Continuous zoom of vector based elements
                          _snickers Level 1

                          That's what we did and works quite fine. But the problem is that the path object leaves its position during the moving process. It keeps the size but moves Here's an example of what I mean…Maybe we need a different expression? Seems tricky...

                          • 11. Re: Continuous zoom of vector based elements
                            Rick Gerard Adobe Community Professional & MVP

                            The art in your example moves because the your objects are not at the exact center of the composition. You are moving elements in 3D space and they are behaving exactly, except for the size of the objects, as they would if you were using a real camera in the real world. If you want to keep the objects centered they must be exactly at the center of the camera's field of view at all times. You can tie the Camera's point of interest to the 3D objects or you can adjust the camera position.

                             

                            The stroke width in your example is 1 pixel. That's not going to work very well because you are moving the single pixel wide line across the composition and as the position shifts the single pixel wide line is going to be resampled and the line will flicker. There is no way around this except to thicken the line, hide the interpolation during the movement with motion blur, or make sure that your single pixel thick line is exactly lined up on the grid at every frame of your move. That's very hard to do when you are moving a camera.

                             

                            Other than the flickering of the line as the camera moves in for the reasons stated above I don't see anything in your sample project that is anything but perfect behavior based on the camera move and the position of your shape layers.

                            1 person found this helpful
                            • 12. Re: Continuous zoom of vector based elements
                              _snickers Level 1

                              In the last few days I experimented a lot. I know that the camera has a perfect behaviour and the position of my shape layers are correct.

                               

                              But I want the "object" in my example to keep in size while moving the camera position or zooming in. Your expressions work perfect with rectangles because there you find attributes like size etc. . But my "object" is a path shape where you cannot find those attributes – the expression is not working. Is there any possibility to make it work for path shapes? It would be great if you can send me the example (CS5) with the correct expression because I don't have a clue.

                               

                              In my project I want to generate a zoomable map with differente objects. If you zoom in with the camera the result should be that the objects keep in size but the distance between those objects behaves analogous to the camera zoom – like in this video. I'm zooming in the map and "Nordamerika" and "Vereinigte Staaten von Amerika" have the same size but the position behaves analogous to the zoom value. The text is fixed to the country.

                               

                              So far I hope you know what I mean ;-)

                               

                              Thanks a lot! :-)

                              • 13. Re: Continuous zoom of vector based elements
                                _snickers Level 1

                                Doesn't anyone have a clue? I tried a lot but cannot find a solution. Meanwhile I could solve a lot of problems with your help but not the one with the map zoomable map. I still can't apply the expression to path shapes...

                                Thanks again for any support

                                • 14. Re: Continuous zoom of vector based elements
                                  Szalam Adobe Community Professional & MVP

                                  _snickers wrote:

                                   

                                  In my project I want to generate a zoomable map with differente objects. If you zoom in with the camera the result should be that the objects keep in size but the distance between those objects behaves analogous to the camera zoom

                                  Place null objects where you want them in 3d space.

                                   

                                  Keep your different objects 2d.

                                   

                                  Use the toComp expression to make the 2d objects follow the 3d point.

                                  "How?" you ask? Simply activate expressions on the position of a 2d object, pickwhip to the layer name of one of the nulls, then type .toComp([0,0,0]);

                                  You'll end up with something like this:

                                  thisComp.layer("Fulton").toComp([0,0,0]);

                                  1 person found this helpful
                                  • 15. Re: Continuous zoom of vector based elements
                                    RusselH

                                    Take a bow, Szalam. This is the exact solution I need. It will save me hours of tedious key-framing. I really need to get up to speed with expressions! Cheers.

                                    • 16. Re: Continuous zoom of vector based elements
                                      _snickers Level 1

                                      Hi Szalam,

                                       

                                      thanks for your helpfull explanation. I've tried to use this expression and it seems to work for my context. But there are still some problems with the anchor points. The stroke weight and scaling works fine but my 2D object doesn't follow the 3D one. If uploaded a file once again that shows what I mean (composition: "Test"). Does it have to do something with the camera settings?

                                       

                                      Link to the test file:
                                      Download

                                       

                                      Thanks a lot!

                                      • 17. Re: Continuous zoom of vector based elements
                                        Szalam Adobe Community Professional & MVP

                                        I can't access dropbox due to restrictions on the network where I work.

                                        All I know is that your 2d layers should follow the 3d nulls - unless, perhaps, you have those 3d nulls parented to something else. My AE machines are both in the middle of renders right now or I would check this, but it may make it not work. If that's not the case, we'll have to wait until someone else can look at your project or hope that I remember when I get home in 8 hours (not likely, I'm afraid).

                                        • 18. Re: Continuous zoom of vector based elements
                                          _snickers Level 1

                                          I appreciate any help Maybe you'll have a minute for it later Here are some screenshots, maybe they explain it the same way. My composition has a size of 9600x5400 px (4x Full HD).


                                          The first two pictures show my camera movement. The camera moves from X -2000 to X -4000. Furthermore I created the layer "Formebene 2" that contains the strokes. Each stroke has an expression on the stroke weight that keeps the same stroke size at any camera zoom value. I used the same expression on the two stroke attributes which works pretty well

                                           

                                          d =length(thisComp.layer("Camera 1").transform.position, thisLayer.position)/thisComp.layer("Camera 1").cameraOption.zoom;

                                           

                                          In the next picture you see my two Label objects. Label 3D (that should be invisible in the end > Nullobject) and Label 2D that should follow (the path / anchor point) of "Label 3D" with the help of this expression:

                                           

                                          thisComp.layer("Label 3D").toComp([0,0,0]);

                                           

                                          "Label 2D" does follow my 3D object but although both objects have the same anchor point (0,0,0) it's not on the same position and I really don't know why. You can see the problem in the last picture. I think it has something to do with the camera but I don't know why.

                                           

                                          Btw: The Label object should symbolize a water tank and the strokes are the pipes. That's the reason why I'm talking about a "map"

                                           

                                          Maybe you now get an idea?


                                          Thanks a lot so far

                                           

                                           

                                          01_01_Camera Settings 1.png01_02_Camera Settings 2.png03_Strokes.png04_2D expression.png05_2D and 3D position.png