Animate a square

Hi guys, I am wanting to rotate a square in animate if anyone can help please?
Basically I want to have a square spin from off the page onto the page in a particular place, I need it to spin quickly and then slow down to finally stop... any ideas please?? I am new to edge and muse. Thanks a lot

This should help
1. Position the square element (mine is off-stage) and the Timeline Playhead (mine is at 0).
As captured the elements properties you want to pin to the Timeline is its Position: Left X value and its Transform: Rotate value (both circled in the Properties Panel)
2. Add a Keyframe for Left:X | Rotate to the Timeline at the position of the Playhead.
To add a keyframe simply click the little diamond/marker (circled) in the Properties Panel. Once clicked they will be added to the Timeline.
3. Reposition the Playhead on the Timeline; then adjust the Left X | Rotate values, as captured.
In my example it quickly animates in in under a half a second just shy of the midway area of the document.
4. Adjust the Playhead and repeat value changes. Except this time add more time from the last change (.500) mark. Say another 3 seconds.
Preview:  http://www.heathrowe.com/edge/animatea/
Download:     http://www.heathrowe.com/edge/animatea/animatea.zip
hth
Darrell

Similar Messages

  • Problem with repainting, should be Threaded...

    Hello,
    I want to smoothly animate a square to some coördinates of the screen, smoothly means with some time between new coörds.
    I'm using the following code:
                        for(int i = 0; i<5; i++)
                             bx-=2;
                             repaint();
                             try
                                  Thread.sleep(tijdTussenFrame);
                                  System.out.println("Wacht nummer: "+i);
                             catch(Exception er)
                                  System.out.println("error bij wachten voor pijl links!");
                        }However, I don't seem to repaint when the (small sleep times) are in use...
    My paint Thread should be a different Thread than the one that is sleeping small times...
    My full code:
    * To change this template, choose Tools | Templates
    * and open the template in the editor.
    * @author Man Ik Weet
    import java.applet.*;
    import java.awt.event.*;
    import java.awt.*;
    //import java.net.URL; //alleen als er plaatjes worden geladen!
    public class RPG extends Applet implements KeyListener, Runnable,MouseListener, MouseMotionListener
         //nodig voor extra Thread
         Thread painter = null;
         boolean threadSuspended;
         //Offscreen tekeken
         Graphics bg;
         Image offscreen;
         //dimensie scherm
         int width,height;
         //x en y muis
         int xm,ym = 0;
         //alles voor audio/plaatjes
         //URL base;
         //AudioClip geluidjeNaam;
         //Image plaatjeNaam;
         //MediaTracker mt; //alleen nodig als er plaatjes worden geladen van het internet
         //voor de FPS
         int fps = 25; //de frames per seconde, game sloom? zet dit hoger/lager;
         int tijdTussenFrame;
         //Voor het blokje dat reageert op de pijlen...
         int bx,by = 0;
         boolean keyInGedrukt = false; //als er een toets is gedruk wacht de thread, maar hij vangt wel andere toetsen dan op
         public void init()
              //zorg voor het laden van plaatjes en/of geluid
              /*try
                   base = getDocumentBase();
              catch (Exception e)
              plaatjeNaam = getImage(base,"plaatjeNaam.png");
              mt.addImage(plaatjeNaam,1); 1 = hoeveelste plaatje
              naam = getAudioClip(base, "naam.au");
              try
                  mt.waitForAll();
             catch (InterruptedException  e)
                  System.out.println("Fout bij wachten voor alle plaatjes...");
              //zwarte achtergrond FTW
              setBackground(Color.black);
              //zet alles op voor muis/toetsenboord
              addKeyListener(this);
              addMouseListener(this);
              addMouseMotionListener(this);
              //pixels voor scherm, we willen niet te groot of te klein ;)
              width = getSize().width;
              height = getSize().height;
              offscreen = createImage(width, height);
              bg = offscreen.getGraphics();
              tijdTussenFrame = (1000/fps);
       public void start()
              if (painter == null )
                   painter  = new Thread( this );
                   painter.setPriority( Thread.MAX_PRIORITY );
                   threadSuspended = false;
                   painter.start();
              else
                   if ( threadSuspended )
                        threadSuspended = false;
                        synchronized( this )
                             notify();
         public void stop()
              threadSuspended = true;
         public void run() {
              try
                   while (true)
                        //hier doet het IETS? LMAO! muwahahahaha!
                        if (threadSuspended)
                             synchronized( this )
                                  while (threadSuspended)
                                       wait();
                        repaint();
                        painter.sleep(tijdTussenFrame);  // interval given in milliseconds
              catch (InterruptedException e) { }
         public void paint(Graphics g)
              bg.clearRect(0,0,width,height);
              bg.setColor(Color.red);
              bg.drawString("Key ingedrukt: "+keyInGedrukt,width/2,height/2);
              bg.drawString(xm+";"+ym, xm, ym);
              bg.setColor(Color.cyan);
              bg.fillRect(bx, by, 10, 10);
              g.drawImage(offscreen,0,0,this);
         public void update(Graphics g)
              paint(g);
         public void mouseClicked(MouseEvent me)
              xm = me.getX();
              ym = me.getY();
         public void mousePressed(MouseEvent me)
         public void mouseReleased(MouseEvent me)
         public void mouseEntered(MouseEvent me)
         public void mouseExited(MouseEvent me)
         public void mouseDragged(MouseEvent me)
              xm = me.getX();
              ym = me.getY();
         public void mouseMoved(MouseEvent me)
              xm = me.getX();
              ym = me.getY();
        public void keyTyped(KeyEvent e)
            System.out.println("Key getypt.");
        public void keyPressed(KeyEvent e)
              if(keyInGedrukt==false)
                   keyInGedrukt=true;
                   System.out.println("Key ingedrukt.");
                   if(e.getKeyCode()==KeyEvent.VK_LEFT)
                        System.out.println("Key pijl links.");
                        for(int i = 0; i<5; i++)
                             bx-=2;
                             repaint();
                             try
                                  Thread.sleep(tijdTussenFrame);
                                  System.out.println("Wacht nummer: "+i);
                             catch(Exception er)
                                  System.out.println("error bij wachten voor pijl links!");
                   if(e.getKeyCode()==KeyEvent.VK_RIGHT)
                        System.out.println("Key pijl rechts.");
                        bx+=10;
                   if(e.getKeyCode()==KeyEvent.VK_UP)
                        System.out.println("Key pijl omhoog.");
                        by-=10;
                   if(e.getKeyCode()==KeyEvent.VK_DOWN)
                        System.out.println("Key pijl naar beneden.");
                        by+=10;
              else
                   System.out.println("Key is ingedrukt?");
        public void keyReleased(KeyEvent e)
              keyInGedrukt = false;
            System.out.println("Key losgelaten.");
            if(e.getKeyCode()==KeyEvent.VK_LEFT)
                   System.out.println("Key pijl links losgelaten.");
                   bx-=10;
              if(e.getKeyCode()==KeyEvent.VK_RIGHT)
                   System.out.println("Key pijl rechts losgelaten.");
                   bx+=10;
            if(e.getKeyCode()==KeyEvent.VK_UP)
                   System.out.println("Key pijl omhoog losgelaten.");
                   by-=10;
              if(e.getKeyCode()==KeyEvent.VK_DOWN)
                   System.out.println("Key pijl naar beneden losgelaten.");
                   by+=10;
    }

    Doesn't work that way. You have to remove the old Button and insert the new one:import java.awt.*;
    import javax.swing.*;
    import java.awt.event.*;
    public class ButtonExample extends JFrame implements ActionListener {
         JButton b1, b2;
         JLabel l1 = new JLabel("left");
         JLabel l2 = new JLabel("right");
         JPanel jp = new JPanel(new BorderLayout());
         ButtonExample() {
              setSize(800, 600);
              setDefaultCloseOperation(EXIT_ON_CLOSE);
              Container conPane = getContentPane();
              b1 = new JButton("First Click");
              b2 = new JButton("Second Click");
              b1.addActionListener(this);
              jp.add(l1,BorderLayout.EAST);
              jp.add(b1,BorderLayout.CENTER);
              jp.add(l2,BorderLayout.WEST);
              conPane.add(jp);
              pack();
              setVisible(true);
         public void actionPerformed(ActionEvent e) {
              if (e.getActionCommand() == "First Click") {
                   System.out.println("fldf");
                   jp.remove(b1);
                   jp.add(b2,BorderLayout.CENTER);
                   pack();
                   validate();
         static public void main(String args[]) {
              ButtonExample fr = new ButtonExample();
    }

  • Pie chart created in edge animate changes to a square animation when imported into dps

    I Have created an animated pie chart in edge animate and all works fine.
    I then import into indesign and again all looks fine (even though at this stage it is a flat image) but when i export for dps and preview folio etc the animation turns from a circle to a square.
    Anyone have any pointers or experinced the same problem etc?
    Cheers

    The top image is a screen shot from edge and what it should be like, and the bottom image is of when you preview it in dps
    Also when i view this in browser via edge animate and then preview it seems fine and as you can see on the bottom image when i import the oam into indesign again it is fine but then when I come to preview my 'folio it turns the animation from a circle into a square.
    Also if its any help, the animation works perfectly if exported by epubs and viewed through ibooks.
    Thanks,

  • Edge Animate Ellipses Changing into Squares in Indesign preview play. What's wrong?

    Edge Animate Ellipses Changing into Squares in Indesign preview play. What's wrong? Previewing on a PC desktop.

    I'm using a OAM file. Placing it as I would an image. In EA, I grouped an ellipse with a text box and then applied the fade on effect to the group. Each fades on as the timeline progresses. I hope that answers your question. let me know if not. I also tried to ungroup the two layers and apply the fade to each individually but it produced the same effect in the content viewer.

  • The images imported to my stage turn up as blank and render every image previous to the rogue imported image as red squares that fill the perimeters of the image which then renders the publishing and scene testing features in flash useless, what can i do

    I have been working on animating a scene in flash for a few weeks and recently I have encountered a problem with importing my images on to the stage where the images I import do not turn up, however the key frame that I attempted to import the image onto shows that it is occupied by an image and every frame previous to the key frame that just imported an image that does not show turns up as a red square that fills the original perimeters of the image, there is no solution to this problem any where on the forum and the adobe technical support staff will not help me find a solution to this problem what can I do to get Flash running normally again and fix this problem?????
    Also after the first time i publish a preview after i begin using flash, flash renders the publishing and scene testing features as useless and claims that there is no HTML template found, or if the images if i import any images onto the stage that come up blank and render every image previous to that image as a red square and then try and publish a preview  flash renders the publishing and scene testing features as useless and claims that there is no HTML template found. What can I do to fix this problem??? there is no solution on the web anywhere to this problem either.

    I don't know if Flash has a memory limit of its own. The memory for your Flash file is based on the available memory on your computer.
    There is a limit on the number of frames that you can have in any given timeline. I think that it's about 15000 frames, but that's a guess. Flash does all of its work at runtime, this means that no part of your animation is pre-compiled like it is in a video file. So the more objects that you have on the stage, the more work Flash has to do. It follows that the more objects that there are to animate, the more work your processor and the video card have to do.
    Here's a list of articles on memory management that might be useful:
    Garbage collection internals for Flash Player and Adobe AIR | AdobeDeveloper Connection
    actionscript 3 - What are good memory management techniques in Flash/as3 - Stack Overflow
    AS3 Memory Management Tips

  • Meter squared symbol in pages for iPad

    Hey Guys,
    Does anyone know how to make the meter squared symbol in Pages for iPad? I cant find away to push the 2 up.
    Thanks
    Tom

    Thanks. In a document in Pages on my iPad, if I press the + symbol, I am given various insert options like tables, graphic boxes and 'animatable' lines, which can be adjusted. Top left says 'text' which is obviously a text box. However my friend has an arrow option next to the word 'text' which allows him to import a thin arrow which can be rotated to point in any direction in his document (useful for pointing one area of text to another.
    I don't have this option; just the 'fixed' block arrows which appear below as options. My version of Pages is the latest and my iPad is very new.
    Thanks.

  • How do I multiply an image and animate it in 3d space to create a shape?

    My boss has a small clip he would like me to make. He wants me to take an image (Its just a square image) and have it start in the center of the screen, and as it scales down and moves to one of the bottom corners (I've already got that part done) the image multiplies and creates a seamless circular/oval band in 3D space. He also wants this done with another image, but for this other image (also simply a square) to create a sphere as it multiplies.
      Is there an easier way to do this, or am I going to have to place, manipulate and animate each individual copy of the square image to create a solid band?
    I originally posted this question here: http://forums.adobe.com/thread/1056968
    Because what I am trying to do is similar to what she was able to do with the letters in this thread.
    Any help, tips or pointers anyone could give me would be great.

    Try searching aeEnhancers for a layer distributor script. That will automate the process of distributing layers in a sphere. Use that to set your final position then just work backwards. I don't remember exactly where the script is but I know it's out there.
    Another option would be to create a grid of these images where you animate the layers from the center to their position a grid of flat images. Nest that pre-comp in your main comp and apply CC Sphere.
    You could also write an expression that bases the layer's position relative to the index value of the layer. Duplicate the layer and the position is taken from the layer above and the layer width or height is added to distribute the layers. Base the move on the value over time and the layer's in and out point or layer markers. Now just arrange the layers in the timeline and you have an automated grid.

  • 2 squares in the 3d indicator

    Hello all,
    I downloaded an AE template which has some text in 3D layer.
    In the 3D indicator there are 2 small squares, when I click them off and then on again it changes to one large square, like I'm used to seeing.  Is there any meaning behind these 2 small squares and why do they not come back when making the layer 3D again.
    Please see the attched screen shot.
    Thanks
    CS4 on a Mac OS 10.6.8

    Just tried it. If you click on that thing, the little button with the two squares in it, you disable the 3D animation for the layer. You cannot get it back. Just turning the layer back into a 3D layer doesn't give you the 3D effects per character back. Bummer. Must be a way aroudn this.
    Why, yes there is.
    The ANIMATE selector flyout menu on the the TEXT line has, at the very top, "ENable per character 3D."
    bogiesan

  • Best way to animate refresh arrows

    Hi all, I am looking for a best practice for animating two arrows along the path of an O (font: Times new Roman)
    See the picture below, it is not as simple of rotating the arrows, as the arrows have to move along a oval path and the paths stroke is not a consistent thickness.
    I could animate frame by frame but I figured some guru on here might be able to suggest an expression or some other more optimized way. Thank you in advance for any tips. Chris

    A few of the tricky steps I left out:
    Change the anchor point of the triangle to be at the "base" with the pan-behind tool
    1st arrow:
    time-reverse the keyframes.
    adjust the rotation and anchor point of the arrow to place it correctly.
    set the arrow to "Auto-orient" "orient along path"
    2nd arrow:
    select mask path again and look at the "first vertex" which is the square vertex--not round.
    go to the vertex that is 180 degrees and select it, right click and set first vertex
    then repeat above

  • Grow/Animate Pie Chart

    I've searched high and low on how to do this and can't find anything. Here's the scenario - Lets say you have a pie chart and you want to animate it so that you have 2 sections both at 50%. But you want to show 1 half of the 50% starting at 20% then growing to 50% then the other half can grow to fill the pie chart. There's no way to make one half go from 20% then grow to 50% with out it being made into 2 different sections- it makes it a separate set/section and different color. Same thing with bar graph, you can't make the same line animate to grow higher. There doesn't seem to be a way to append on to the same bar.
    It's late and I may not be very clear, if so just let me know and I'll try to rephrase it.

    The top image is a screen shot from edge and what it should be like, and the bottom image is of when you preview it in dps
    Also when i view this in browser via edge animate and then preview it seems fine and as you can see on the bottom image when i import the oam into indesign again it is fine but then when I come to preview my 'folio it turns the animation from a circle into a square.
    Also if its any help, the animation works perfectly if exported by epubs and viewed through ibooks.
    Thanks,

  • Can someone help me troubleshoot my Edge Animate project? nothing works!

    https://dl.dropbox.com/u/3744225/Ruesterprod%20Edge%20Test.zip
    I have my whole project in there... plus my portfolio_page div is using a jQuery plugin called Quicksand to filter some thumbnails/videos that I want to have work as well... (Here's a link to what that is supposed to look like: http://www.ruesterprod.com/edgeTest_c/ - click on the square green and black buttons )
    I can't seem to get ANYTHING to work, except for a neat opening animation! I hope I'm not just a complete imbecile and missing totally obvious things!...
    1) I've put a play action on my "portfolio_btn" but it won't play the requested label on my timeline...
    2) I've tried linking local font files using the Edge Animate "Add fonts" menu because I was trying to create new button symbols to replace the button text I currently have (Thinking that might be part of issue #1 - Edge won't recognize the font files within the program - the fonts you see are from my original html file)
    3) Is it possible to create symbols from my current html document's divs? Or how can I nest my divs into a symbol's timeline?
    Thanks for any help at all! Even if I only get one of these issues fixed at a time that's totally awesome!!
    Aza

    Thanks soooo much Darrell!
    1) ... that worked... slap to my forehead... d'oh!
    2) I am currently using @font-face in my original html document (actually linked in another css file), but I was just trying to get Edge to recognize the fonts in it's text tool... might not be necessary now that issue #1 has been resolved
    3) I'm basically trying to swap one div for another (As you might be able to see in my project file) and I was going to use nested timelines like in this tutorial: http://blogs.adobe.com/edge/2012/07/18/tutorial-leveraging-independent-symbol-timelines/ - Is there some other way of accomplishing this?
    Thanks again, you rock!!

  • Edge CC 2014.1 action panel shows white square (was: Open actions, white square only..)

    Hi there, I've had a new update of edge animate.. When i click on "open actions" i now only see a white square instead of the actions window. Does anybody know how can i fix this?

    Hi,
    Please try recreating the edge animate preferences,
    Quit Edge Animate.Mac OS: In the Finder, navigate to /Users/Your User Name/Library/Preferences/Adobe.
    Rename the Edge Animate folder to, for example, Old Edge Animate.
    Please open edge animate and try again.
    Regards,
    Devendra

  • Edge Animate code output image location (X,Y) changes in Chrome and Safari

    Hi there,
    I'm working on my first project in Adobe Edge Animate, and so far it has been a miserable failure! Yay! Anyone out there interested in helping me out?
    Here is a sample of the project so far:  http://research.cs.queensu.ca/home/parker
    My problem is that the green square's location appears incorrectly in Chrome and Safari browsers, but correctly in Firefox. I'm using a Mac Mountain Lion OS.
    Why would an element have a different position when seen in a different browser? Note that all the other elements are displaying properly in all the browsers?
    Thanks for your help,
    -David

    Try posting at the Web Development / Standards Evangelism forum at MozillaZine. The helpers over there are more knowledgeable about web page development issues with Firefox. <br />
    http://forums.mozillazine.org/viewforum.php?f=25 <br />
    You'll need to register and login to be able to post in that forum.

  • Edge Animate Scroll Effects must loop, cant stop at end?

    I have an Edge Animate composition that I have inserted into Muse and have selected and checked the box for Edge Animate Scroll Effects. The Edge Animate compositon is of a piece of text that is set to shrink to about half size and then stop once it reaches the end of it's timeline. In the scroll animation I created, as the page is scrolled the text travels from the center of the home page, starting at full size, to the upper left side, where it reaches the end of it's Edge Animate timeline and should rest as a logo in the banner at half size. The problem I'm encountering is that Muse ignores the stop action at the end of the timeline and instead loops through the timeline over and over, causing the text to continuously go from full size to half size and then back again after it comes to rest in the upper left corner of the banner as the page is further scrolled, even though I have a stop action placed at the end of the Edge Animate timeline.
    Must an Edge Animate Scroll effect loop continuously as the page is scrolled, or is there a way to make them stop at the end of the Animate timeline? Obviously, having it scroll off the page before it begins to loop over again would not be a solution, given that I want it to rest in the upper left corner as a logo…
    Any advice appreciated. Thanks.

    The answer is quite straightforward
    you cannot stop the animation from looping in MUSE if you linked it to scrolling
    BUT
    you can still do it in EDGE ANIMATE - the technic which works for me is to put a "trigger" like STOP at 30 or 40s at the end of the timeline of your animation.
    Then for MUSE it will be considered as an "ongoing" animation and will not loop. Still the user keep the possibility to "scroll backward" and deconstruct the animation while scrolling  which is I believe what you were seeking.
    Check this ongoing project if you want the visualisation of it. Master Square
    Best regards,
    Charlelie - Old-Continent

  • An example of a high graphic internet site all built in Edge Animate

    Hi,
    I'm a french designer, freelance, and I just fell in love for Edge Animate. This software has a great potential and I just wished to share with you one of my last work. Just have a look at it and send me your comments and advises.If you guys have interest in my developments, I'll post later the 2 others internet site I'm working on, trying to reproduce a parallax effect in Edge Animate.
    Thanks in advance for your attention.
    http://www.muscade-palais-royal.com/

    Thank you for your feedback Michael To answer your question, about the homepage, only the right arrow (to select where you want to go on the site) and the big drawing on the white square are (to reach the selected part of the site you chosed) are clickable. The list of items aren't.
    To share my experience with other experts on this forum, I have to tell the complete site has been designed and scripted in Edge Animate, and all the pictures have been made with... an iPhone and a Lumia 900. From the small ilustration picture to the large full screen size picture, all come from a cellphone camera. As you already guessed, I worked them all in Photoshop.
    See you later all ))

Maybe you are looking for