How to play video using mouse click for an interactive poster

Hello, I'm very new to Processing (and programming in general) so likely this will be very obvious to someone, I'm hoping! I have a background image imported that I created using Adobe Illustrator. I would like to show this background image, and use mouseClick and keyPress to load and play different interactive aspects of this poster. It's for a school assignment and doesn't need to be that complicated. So for example I have an area in the image that is a square made of green cubes. I would like to mouseClick anywhere within that box, and have it play a movie that displays the animated green cubes. I would like the movie to take up a small portion of the screen only, play once, and then disappear from the screen.

I have a small sketch that plays the movie once. I have another sketch that loads the background image successfully. i have two Processing textbooks and have searched through them extensively to no avail!

I'm looking for the simplest way to do this, that I can then repeat and build on for other aspects of the poster.

Thank you!

Answers

  • Well you got almost everything already. :)

    You can look at the buttons example that comes with processing (under GUI). Thats is kind of what you need to make a region clickable.

    Try combining all this.

    If you need more help post the code so people can see where you got stuck
    :)

  • When I run this code I get an "unexpected token void" pointed at the 'void movie Event' within the mouseClicked function. I have tested the play movie sketch and the rectangle function and they work separately. I just have no idea exactly where to put the various parts of the play movie commands. Do all of them go in setup? Is one in set up an one in the actual mouseClicked command? I am still getting used to the syntax and general order / structure of coding. Thanks!

    import processing.video.*; Movie m; //declares a movie object

    PImage img; //This loads the image of the poster

    void setup() { //setup is code that only runs once size(1200, 1000); // maximum screen size specified in assignment background(0); // black img = loadImage("ProcessingPoster03_b.jpg"); m = new Movie(this, "GreenCubeMatrix.mov"); m.play(); //m.play() to play once
    } //m.loop() to loop continuously.

    void draw() { image(img, 0, 0); }

    void mouseClicked() { println(mouseX, mouseY); if(inRectangle(mouseX, mouseY, 50, 50, 100, 100)) { void movieEvent (Movie m) { m.read(); } void draw() {
    image(m,0,0, 200, 200); } }

    } else { // or else println("Click to play movie"); // encourage user ineraction }

    }

    boolean inRectangle(float mouseX, float mouseY, float ULX, float ULY, float LRX, float LRY) { if(mouseX < ULX) return false; if(mouseX > LRX) return false; if(mouseY < ULY) return false; if(mouseY > LRY) return false; return true; }

    /Here I want to click the mouse anywhere inside the image of the bright green cubes (x=500, y=188) (x=700, y=188) (x=500, y=400) (x=705, y=400) and have it play the movie "GreenCubeMatrix"./

    //The video will close and dissapear when finished playing

    /A mouseClick anywhere inside the image of the white cubes between (x=437, y=640) (762, 640) (435, 966) (763, 963) will play the video "White Cubes"./ //the video will close and dissapear when finished playing

    /key-press of the first letter of the word would bring up the definition, regardless of location on screen/

    /Alternately, key pressed on the word "Code" (426, 390) will show a pop-up definition of the Stack-aspect of memory/ //The pop-up definition will close when the key is pressed again

    /*A key pressed on the word "Data" (450, 555) will show a pop-up definition of the Data-aspect of memory */ //The pop-up definition will close when the key is pressed again

    /*A key pressed on the word "Stack" (906, 386) will show a pop-up definition of the Data-aspect of memory */ //The pop-up definition will close when the key is pressed again

    /*A key pressed on the word "Heap" (940, 561) will show a pop-up definition of the Data-aspect of memory */ //The pop-up definition will close when the key is pressed again

Sign In or Register to comment.