Hi authorpoint

50 %
50 %
Information about Hi authorpoint
Entertainment

Published on July 10, 2007

Author: Surinder

Source: authorstream.com

Animation:  Animation How animation is done:  How animation is done The illusion of movement is created by displaying a series of images, each slightly different The eye fills in the gaps More images per second makes smoother animation 12 images per second is sometimes “good enough” 20 images per second (one every 50 ms) is quite good The computer has to work to compute each new image For complex images, such as most visually exciting computer games, this is an extremely difficult problem For simple animations, modern computers generally don’t have any problems That is, if you don’t do anything too stupid  Tweaking:  Tweaking When developing an animation, you often have several parameters (time, x and y distances, etc.) that you need to experiment with It’s a nuisance to recompile your program each time Instead, pass in parameters You can pass parameters to both applets and applications For an application, each parameter comes in as a String public static void main(String args[]) This is just an array of Strings; use it in the obvious way Passing parameters to applets:  Passing parameters to applets In the HTML file, <applet code="MyApplet.class" width="250" height="60"> <param name="delay" value="50"> <param name="version" value="Version 1.0"> </applet> In the Applet code: String version = getParameter("version"); int delay = Integer.valueOf(getParameter("delay")).intValue(); Bounce Applet Model-View-Controller:  Model-View-Controller The MVC Design Pattern is usually an excellent choice for doing animations The Controller handles user input, and controls the Model The best way to do this is to call methods in the Model The Model does the computational work; it should be independent of the other classes The View examines the state of the Model and displays the results on the screen For a “pure” animation, sometimes the View is in charge, at least to the extent of telling the Model when to make a “step” Controller.html Example Model I: Bouncing ball:  Example Model I: Bouncing ball class Model { final int BALL_SIZE = 20; int xPosition = 0; int yPosition = 0; int xLimit, yLimit; int xDelta = 4; int yDelta = 3; void makeOneStep( ) { ...} } Example Model II: Bouncing ball:  Example Model II: Bouncing ball void makeOneStep() { xPosition += xDelta; if(xPosition < 0 || xPosition >= xLimit) { xDelta = -xDelta; xPosition += xDelta; } yPosition += yDelta; if(yPosition < 0 || yPosition >= yLimit) { yDelta = -yDelta; yPosition += yDelta; } } Example: View.run():  Example: View.run() public void run() { // we set "alive" false when applet is destroyed while(alive) { // we set okToRun true if the Applet is started if(okToRun) { model.makeOneStep(); repaint(); } // We use "delay" to control the speed of execution try { Thread.sleep(delay); } catch(InterruptedException e) {} } } Example: View.paint():  Example: View.paint() public void paint(Graphics g) { // Erase previous ball g.setColor(Color.white); g.fillRect(oldX, oldY, model.BALL_SIZE, model.BALL_SIZE); // Draw new ball and remember its position g.setColor(Color.red); g.fillOval(model.xPosition, model.yPosition, model.BALL_SIZE, model.BALL_SIZE); oldX = model.xPosition; oldY = model.yPosition; } How repainting is actually done:  How repainting is actually done Remember, you write paint but you call repaint Applets inherit an update(Graphics g) method When you call repaint(), Java really calls update(Graphics g) What the inherited version of update does is: Erases the Applet (set it to the background color) Call your paint(Graphics g) method Your gets a nice, clean background to draw on, but erasing and drawing may cause flicker You can override update(Graphics g) and erase only the part that needs erasing Example: View.update(Graphics g):  Example: View.update(Graphics g) public void update(Graphics g) { // Erase anything that needs erasing, then... paint(g); } Backgrounds:  Backgrounds To use a background, simply paint it before you paint any objects in the foreground: void background(Graphics g) { int width = getSize().width; int height = getSize().height; int squareSize = 2 * model.BALL_SIZE; g.setColor(Color.blue); g.fillRect(0, 0, width, height); g.setColor(Color.green); for (int x = 0; x < width; x += 2 * squareSize) { for (int y = 0; y < height; y += 2 * squareSize) { g.fillRect(x, y, squareSize, squareSize); g.fillRect(x + squareSize, y + squareSize, squareSize, squareSize); } } } Example: View.update(Graphics g):  Example: View.update(Graphics g) public void update(Graphics g) { paintBackground(g); paint(g); } public void paint(Graphics g) { // Draw new ball g.setColor(Color.red); g.fillOval(model.xPosition, model.yPosition model.BALL_SIZE, model.BALL_SIZE); } Controller Applet Flicker, again:  Flicker, again Flicker occurs because you are trying to change the display at the same time your computer is trying to show you the display The secret is to get the display ready first, then give the computer the new, completed display Instead of painting onto the same Graphics g that the computer is using, Create a new, “offscreen” Graphics Do your work there Move it to g when it's all painted and ready to be seen This technique is called double buffering Double buffering:  Double buffering public void update(Graphics g) { Image offscreenImage = null; Graphics offscreenGraphics = null; // Create the offscreen Graphics if (offscreenImage == null) { offscreenImage = createImage(getSize().width, getSize().height); offscreenGraphics = offscreenImage.getGraphics(); } // Paint into the offscreen Graphics background(offscreenGraphics); paint(offscreenGraphics); // Copy the offscreen onto the screen g.drawImage(offscreenImage, 0, 0, null); } Controlling flicker Controls:  Controls User controls have to be handled in a separate Thread from the animation All the usual techniques for working with Threads apply Adding user controls Using images:  Using images Good news: Displaying images is easy g.drawImage(controller.skull, model.xPosition, model.yPosition, null); Bad news: Loading images into memory is slightly complicated Here’s how: Create a new MediaTracker object Get the URLs for your images Start loading your images Tell the MediaTracker about each image Tell the MediaTracker to wait until all images are loaded Example: loadImages() I:  Example: loadImages() I void loadImages() { // Create a MediaTracker MediaTracker tracker = new MediaTracker(this); // Declare variables for the URLs URL appletLocation = getCodeBase(); URL imageURL = null; Example: loadImages() II:  Example: loadImages() II try { // Start loading the graveyard image imageURL = new URL(appletLocation + "/images/boothill-blue.jpg"); graveyard = getImage(imageURL); tracker.addImage(graveyard, 0); // Start loading the skull image imageURL = new URL(appletLocation + "/images/skull-1.gif"); skull = getImage(imageURL); tracker.addImage(skull, 0); } catch (MalformedURLException e) { e.printStackTrace(); } Example: loadImages() III:  Example: loadImages() III // Wait for the images to be loaded // (should do error checking, but I didn’t) try { tracker.waitForAll(5000); } catch (InterruptedException e) {} } // end of method Using Images Animating individual elements I:  Animating individual elements I To make an individual image “do something” we need a series of images Examples: A bird that flaps its wings, a rotating skull The more images, the smoother the motion. There are two ways to animate an individual image: Use an animated GIF You only need to load and use the one image Your program can't control the speed of the animation Use a series of GIFs or JPGs You have lots of separate files and images You have full control over the animation Animating individual elements II:  Animating individual elements II for (int i = 0; i < 25; i++) { skullURL = new URL(appletLocation + "/images/t-skull-" + i + ".gif"); skull[i] = getImage(skullURL); tracker.addImage(skull[i], 0); } skullNumber = (skullNumber + 1) % 24; g.drawImage(controller.skull[skullNumber], model.xPosition, model.yPosition, null); Animating elements Multiple images Listening to the mouse:  Listening to the mouse Your program can detect (and use) mouse events This doesn’t really have anything to do with animation, but it can be used along with animation view.addMouseListener(myMouseAdapter); class myMouseAdapter extends MouseAdapter { public void mousePressed(MouseEvent event) {...} public void mouseReleased(MouseEvent event) {...} } view.addMouseMotionListener(myMouseDragger); class myMouseDragger extends MouseMotionAdapter) { public void mouseDragged(MouseEvent event) {...} } Reacting to mouse clicks:  Reacting to mouse clicks public void mousePressed(MouseEvent event) { // Get mouse position int mouseX = event.getX(); int mouseY = event.getY(); // Check whether the mouse is inside the skull if (mouseX >= model.xPosition && mouseX <= model.xPosition +model.skullWidth && mouseY >= model.yPosition && mouseY <= model.yPosition +model.skullHeight) { draggingSkull = true; } } public void mouseReleased(MouseEvent event) { draggingSkull = false; draggingSkeleton = false; } Responding to mouse drags:  Responding to mouse drags public void mouseDragged(MouseEvent event) { // Get mouse position int mouseX = event.getX(); int mouseY = event.getY(); if (draggingSkull) { // Center skull over mouse position model.xPosition = mouseX – (model.skullWidth / 2); model.yPosition = mouseY - (model.skullHeight / 2); } Mouse control The End:  The End

Add a comment

Related presentations

Related pages

Hi - authorGEN

Title: Hi Author: vishal Last modified by: rupi1 Created Date: 2/28/2008 6:58:12 AM Document presentation format: On-screen Show Company: authorgen Other ...
Read more

Hi - authorGEN

What can you do with authorPOINT Lite: Convert your PowerPoint file to Flash Convert your PowerPoint file to Flash Import PowerPoint into aPLite Select ...
Read more

authorPOINT's flash presentation - HiJob

authorPOINT's flash presentation - HiJob
Read more

authorPOINT's flash presentation

authorPOINT's flash presentation
Read more

Gesucht: Software zum Umwandeln von .pptx- zu Flash-Dateien

Hi, Leute! Ich suche momentan ein kostenloses Programm ... Habe bereits authorPOINT Lite ausprobiert: Funzt bis maximal PowerPoint 2007, ...
Read more

Powerpoint auf Homepage einbinden - - - - - Office-Loesung.de

Hab inzwischen "authorPoint Lite" versucht ... Hi Traumcocktail... falls es die Startseite auf dem Server sein soll, dann muss die HTML Datei index.htm
Read more

29 Free eLearning Tools - Capterra Blog

A list of 29 great free eLearning tools to help training professionals. Capterra has been helping organizations make smarter software purchases since 1999.
Read more

Suche professionell aussehende Vorlagen für Impress ...

Hi, ich finde die Ursprungsfrage interessant. Ich kann dich ein wenig verstehen. Ich bevorzuge natürlich auch Libreoffice/Openoffice nur fehlt auch mir ...
Read more