12 Replies Latest reply on Oct 9, 2011 3:12 PM by Andrei1

    Isometric Animation

    sunflexm

      Hello,

       

      I would like to know if its possible to create an isometric animation in flash like the example below.

      In case I want to create an isometric figure like the first two objects shown and by mouseover they should lift up to the last figure shown.

      Its no problem to create the basic figures with Photopshop, but I dont know how to animate them in flash cs5.

      bewegung.jpg

        • 1. Re: Isometric Animation
          Ned Murphy Adobe Community Professional & MVP

          It is not clear what you mean since there is no animation indicated with what you show and there is only one figure (image) shown.

           

          If you mean that each of the six sections within that figure should be separate objects that can be animated, then yes, you could make them each within Flash itself as vector objects in movieclips and have them animate in any number of ways.

          • 2. Re: Isometric Animation
            sunflexm Level 1

            Yes.

            In first place it should be a plane area and on mouseover it should lift up slowly,  so it looks like a growing building

            • 3. Re: Isometric Animation
              Ned Murphy Adobe Community Professional & MVP

              Can you show what the end result of the animation should look like?  It will save trying to explain something you might not want.

              • 4. Re: Isometric Animation
                sunflexm Level 1

                Yes of course, click the link below, it should exactly do whats done there.

                 

                http://www.foerdepark.de/einkaufswelt/centerplan-3d.html

                • 5. Re: Isometric Animation
                  Ned Murphy Adobe Community Professional & MVP

                  That's much better as an example of what you want!  I thought you wanted to have the blocks animate skyward as if growing into a tall building.

                   

                  For the example you show you would just create a movieclip for each block that moves from one visiual to the next on a frame by frame basis, possibly with multiple frames of the same image to give the minor growing effect that your example shows... it is too abrupt in terms of the visuals changing to say it is actually being animated to a greater height, it's more of a flip-page animation (like you'd draw in the corner of a book's pages and then flip thru them).

                   

                  There are other ways to get a smoother animation, which would work well for blocks that needed to grow higher.  Still, you could take the same approach for these short version.  But to match what your example shows, that probably overkill.  That would be to have the animation be a tween that still starts with the flat white plane visual, but gradually slides the red block under a mask that outlines its final shape. A mask reveals what is beneath it, so as you slide the block upwards under the mask, it appears to gradually grow higher.

                  • 6. Re: Isometric Animation
                    sunflexm Level 1

                    Ah okay I understand, you mean its more or less a sequenz of images, first the plane area and around that area maybe a invisble higher area and when I move the mouse above it, the invisble area gets colored?

                    • 7. Re: Isometric Animation
                      Ned Murphy Adobe Community Professional & MVP

                      Yes, a sequence of images, one frame after another.  For the example you show it would appear to be just three images for each building.  The flat gray plane, followed by the same flat plane colored red, then followed by the 3D view of the block.  The appearance of it growing is just an illusion since the height change is not all that great.  Since there appears to be a slight delay between the red plane becoming the 3d block, there might be a few frames of just the red plane before it switches to the block image.

                      • 8. Re: Isometric Animation
                        sunflexm Level 1

                        Would you be so kind to give me small exampel of a rectangle?

                        • 9. Re: Isometric Animation
                          Ned Murphy Adobe Community Professional & MVP

                          I do not understand what you are asking for.

                          • 10. Re: Isometric Animation
                            sunflexm Level 1

                            I did it, your awesome!!! look at this http://ul.to/7lolhwuc

                             

                            Edit: Last question, is there a way to get an isometric grid in flash?

                            • 11. Re: Isometric Animation
                              Ned Murphy Adobe Community Professional & MVP

                              I am not aware of there being one readily provided.  You might be able to create your own as a symbol and place it on a layer below all others.  THat way you could resize and move it as needed too.

                              • 12. Re: Isometric Animation
                                Andrei1 Level 6

                                I am not sure it will help off the bat but here is a code that draws isomeric grid to start with Flash math and graphics (just paste it into action panel):

                                 

                                 

                                stop();
                                import flash.display.Sprite;
                                drawGrid();
                                
                                function drawGrid():void
                                {
                                    var grid:Sprite = new Sprite();
                                    grid.x = grid.y = 10;
                                    addChild(grid);
                                    var side:Number = 20;
                                    // half side
                                    var hs:Number = side * .5;
                                    var altitude:Number = side * Math.sin(Math.PI / 3);
                                    
                                    var gridData:Vector.<Number> = new Vector.<Number>;
                                    // number of grid columns
                                    var gridCols:int = 30;
                                    // number of grid rows - always odd number
                                    var gridRows:int = 37;
                                    //internal loop iterator
                                    var j:int = 0;
                                    // coefficient
                                    var coef:int = 0;
                                    var mod:int = 0;
                                    // triangles points
                                    var tp0:Point = new Point();
                                    var tp1:Point = new Point();
                                    var tp2:Point = new Point();
                                    for (var i:int = 0; i < gridRows; i++)
                                    {
                                        for (j = 0; j < gridCols; j++)
                                        {
                                            mod = j % 2;
                                            if (i == 0 || i == gridRows - 1)
                                            {
                                                tp0.x = altitude * j;
                                                tp0.y = tp1.y = hs * i * int(i == gridRows - 1);
                                                tp1.x = altitude * (j + 1);
                                                tp2.x = altitude * (j + int(mod == 0));
                                                tp2.y = hs * (i + int(i == 0)) - int(i == gridRows - 1) * hs;
                                            }
                                            else
                                            {
                                                coef = mod == 0 ? -1 : 1;
                                                tp0.x = tp1.x = altitude * (j + coef * i % 2 + 1 - mod);
                                                tp0.y = hs * (i - 1);
                                                tp1.y = hs * (i + 1);
                                                tp2.x = altitude * (j - coef * i % 2 + 1 * mod);
                                                tp2.y = hs * i;
                                            }
                                            tp2.y = hs * (i + int(i == 0)) - int(i == gridRows - 1) * hs;
                                            gridData.push(tp0.x, tp0.y, tp1.x, tp1.y, tp2.x, tp2.y);
                                        }
                                    }
                                    
                                    var g:Graphics = grid.graphics;
                                    g.lineStyle(1, 0, 1, true);
                                    g.beginFill(0xFF8000);
                                    g.drawTriangles(gridData);
                                }