xbox live gold membership generator chrysler financial make a payment jeans for big thighs small waist desktop backgrounds for macbook pro windows xp internet backgammon os x snow leopard server serial number canon powershot sx20 is price in malaysia summer 2010 fashion internships in new york snowboarding games online free guitar hero world tour unlock all songs cheat buy commercial truck tires online yamaha atv parts yamaha outboards troubleshooting samsung lcd tv problems black screen dress up barbie games to play satellite tv for pc elite edition password subaru outback 2010 review canada diamond solitaire engagement rings monster truck games online for kids watch summer heights high episode 1 online samsung lcd tv troubleshooting no picture nikon d5000 prices in dubai limewire basic for mac os x bridezillas where are they now karee rpg maker 2003 rtp cheap dresses for juniors online wireless headphones for ipod touch 1g youtube malayalam movies xbox 720 pics xbox 360 hard drive transfer kit gamestop student doctor network interview feedback compaq mini netbook with intel atom processor used pool tables for sale in michigan download auctioneer addon for wow chrysler town and country parts mitsubishi lancer evolution x mr pizza hut coupons online codes 2001 chrysler sebring convertible parts boots online shopping ireland canon rebel eos manual ds6041 honda civic hatchback parts for sale skype download for blackberry curve 8520 famous love quotes from the notebook healthy pizza dough no yeast pizza hut menu with prices canada wedding invitation wording divorced parents mdi reader download jar software free download for mobile travelocity gnome commercial song cruises only coupons best screensavers for mac snow leopard xbox 360 games on demand hack student loans without cosigner and no credit dvd ripper for mac freeware jcpenney furniture outlet atlanta ga cocktail dresses online cheap youtube video to mp3 converter for mac paid summer internships new york city radiohead tour 2010 north america dodge journey 2009 sxt housecall antivirus helmets for motorcycles in india free playstation network card generator bathroom shower tiles pictures nintendo ds roms free download english canon rebel xti vs nikon d5000 best wireless headphones for tv listening porsche 911 turbo for sale craigslist snowflake patterns crochet backpacks for college radio disney live stream wireless n router review cnet truck mount carpet cleaning machines for sale subaru 22b sti for sale commercial carpet steam cleaning machines hairstyles for women over 60 pictures bride wars soundtrack listen wireless n router range comparison free elementary career interest inventory bmw m3 for sale cheap tires plus locations in florida next radiohead tour 2010 pontiac grand prix gtp supercharged transmission websites like craigslist personals samsung i8000 omnia ii reviews gps maps for blackberry playstation 3 gamestop trade in value barcode scanner java api laptops cheapest uk project portfolio management software open source radiohead tour 2010 uk dating simulation games for girls online porsche carrera gt for sale in us pontiac gto judge 1969 for sale land rover freelander parts diagram samsung plasma tv calibration settings honda motorcycle parts warehouse honda generators eu2000i rpg maker vx sprite generator download snowboarding jackets on sale for women replica daft punk helmets for sale portfolio lighting replacement parts playstation 3 network card generator 2010 mazda 3 replacement parts infinity ward nat strict pc jeep wrangler unlimited for sale in iowa rpg maker vx activation code free nissan skyline gtr for sale in florida dvdfab registration key generator dvdfab 6 keygen download download snowboarding games for pc porsche cayenne 2010 prices hp psc 1610 scanner software for vista autotune 5 download for windows princess cut diamond engagement rings cheap free strip blackjack canon rebel xsi tutorial video murray riding lawn mower parts diagram nintendo ds roms download free xbox live ban wave finished glassjaw tour dates 2010 buy cigarettes online paypal mazda 626 manual transmission guitar pro 6 release date bmw m3 2010 prices mazda reviews mercedes benz amg black edition 2011 cadillac cts v coupe motorcycle repair manuals for free subaru forester parts catalog wedding reception invitation wording examples skype for mac snow leopard movies online streaming new moon dvd ripper for mac snow leopard playstation emulator vista download software architecture in practice ppt shirt printing machines for sale hyundai santa fe 2010 release date samsung mythic a897 price in india rolex prices datejust flash player 9 free download firefox marlboro cigarettes online usa radio stations online free hip hop mitsubishi lancer evolution for sale used volkswagen jetta sportwagen tdi for sale honda financial services phone number handbags leather manufacturer mazda tribute parts diagram wedding vows traditional catholic tattoo quote ideas for girls logo creator software free download canon rebel xti vs nikon d3000 nissan skyline gtr for sale in california tools download free skype video conference 3 people templates for powerpoint games kids snow boots clearance uk jeep grand cherokee reviews 2000 design your own wedding dress online free game xbox tips toyota prius prices paid canon s90 review ken rockwell radiohead tour dates 2010 furnitureland south bankruptcy skinny jeans for men on sale crochet snowflake patterns free pizza hut menu prices us design your own wedding dress for free wedding shower favors homemade 1971 volkswagen beetle convertible for sale wireless bridge linksys wrt160n snowboarding gloves or mittens gps coordinates conversion formula mercedes benz parts online uk jaguar xk8 performance parts snowboard pants sale nikon d60 manual download free land rover defender 110 for sale travelers insurance commercial song worry mobile satellite internet service providers tattoo wedding rings pictures furniture liquidators denver download logo maker freeware sony ereader touch backlight download desktop destroyer 2 chicken carnage how to make pizza dough without yeast and baking powder skype download vista 64 bit cypress hill torrent summer paid internships 2010 design your own engagement ring tiffany prom dresses for prom 2010 modem commands us robotics xbox 360 e73 repair guide roses are red poems funny crocodile monitor lizards for sale marriage counseling infidelity wedding dresses pictures for men dvdfab 6 platinum registration key master bathroom renovation ideas warcraft 3 cd key finder tires plus corporate headquarters sony reader vs kindle vs nook sony vegas 9 serial number free toyota corolla parts catalog playstation emulator mac os x snow leopard guitar tuner drop c tuning mitsubishi lancer ralliart specs skype phone wifi dress up games and makeover games and cooking games tattoo ideas for girls wrist yamaha baby grand piano for sale compaq presario c700 drivers for xp suzuki sidekick parts manual templates for resumes for teachers samsung mythic a897 black wifi porsche cayenne forum italian pizza recipes dough nintendo ds emulator for iphone 3g golf digest hot list 2010 irons toyota oem parts discount winter olympics history wow cataclysm worgen druid forms famous movie quotes from the 80s gps maps free download tomtom wedding ceremony songs christian sony vaio recovery disk free download laminate flooring installation instructions pergo caribbean weather forecast subaru impreza wrx sti for sale in canada toyota forklift parts catalog skype emoticons hidden volkswagen tiguan review top gear cable modem hacking software sofas direct from factory wholesale handbags designer inspired kawasaki mule parts diagram antique harley davidson motorcycle parts sample resume restaurant waitress monitor audio rx8 test logo design freeware download honda civic 2010 price egyptian arts and crafts for kids example career essays tattoos ideas for girls pictures flooring options for screened porch toyota recall gas pedals honda accord forum 7th gen toyota camry recall 2009 guitar tabs for beginners acoustic mazda rx8 performance parts tattoos quotes for guys guitar tuner widget os x suzuki gsxr motorcycles for sale xbox 360 games torrent tracker volkswagen tiguan 2010 release date used mercedes amg for sale yamaha vmax motorcycles for sale harley davidson sportster parts and accessories snowboard pants men toyota corolla floor mat recall football fanatics coupon code 20 off sofa beds for sale in san diego ca sony psp 3000 games free download dresses for prom under 100 dollars latin tattoo quote ideas subaru wrx parts catalog grassroots lobbying examples mac logo creator freeware hyundai genesis coupe review chevrolet tahoe police package for sale toyota center seating chart 3d download gps maps europe lawnmower man game jaguar cars for sale on ebay warcraft 3 cheats reign of chaos suzuki grand vitara parts online subaru forester forum singapore saturn ion performance parts xbox 360 transfer kit gamestop jeans size chart forever 21 beginner guitar chord chart printable winter olympics 2010 tv coverage mercedes parts hardware temperature monitor windows 7 mitsubishi outlander 2010 commercial song craftsman tool boxes on wheels illuminated bathroom mirrors with shelf subaru baja turbo mpg dresses to wear to a wedding games for girls flight attendant mile high club sony vegas free download for mac suzuki samurai engine swap kit jeep grand cherokee 2011 release date yamaha atvs for sale cheap toyota venza 2010 hybrid 1998 mitsubishi eclipse spyder parts guitar chord chart finger position guitar tabs for sweet home alabama for beginners toyota recalls rav4 famous movie quotes quiz toyota body parts used guest bathroom color ideas mercedes benz sl55 amg price xbox 360 elite vs ps3 specs jeanstar jeans macys toyota recall list accelerator installing laminate flooring on stairs video harley davidson accessories for dogs guitar chord chart finger placement free soccer drills for 4 year olds dodge charger srt8 for sale used perfume outlet online snow leopard hackintosh laptop compaq presario v2000 laptop motherboard rpg maker vx resources faces warcraft 3 download free for mac tattoos for guys forearms kitchenaid dishwasher parts diagram mitsubishi parts oem guitar pro torrent mac toyota land cruiser parts and accessories modern wedding invitation wording examples lexus is 250 for sale by owner animation factory essential collection honda generators prices tattoo quote ideas for men famous funny poems about school software testing tutorials for beginners pdf chrysler 300 accessories canada cruises only coupon code garden of eden key west web cam summer internships for college students 2010 invoice templates free microsoft word jeep wrangler unlimited hardtop volkswagen gti 2010 price volkswagen beetle convertible pink mitsubishi evo 8 mr for sale winter jackets for men sale winter bells game cheat sony ericsson equinox reviews samsung moment vs htc hero comparison replica cowboy guns computer science resume objective dvdfab registration key 6 harley oem parts online 2000 jaguar s type parts clothes horse store samsung omnia i910 firmware update download snowflake patterns photoshop saturn vue transmission problems canon powershot a480 manual pdf biketoberfest 2009 pictures famous deaf people in history glass bongs online store gamecube emulator mac os x 2005 volkswagen beetle convertible for sale mitsubishi eclipse spyder body kits kia sportage 2008 problems coach shoes on sale at dillards wedding dresses pictures indian desktop wallpaper for macbook pro software manual testing interview questions hair color pictures highlights guitar chord chart poster famous short funny poems dvd shrink free download for mac mattress firm clearance center toyota tacoma lift kits 2wd world war 2 replica cap guns toyota camry parts for sale warcraft 2 tides of darkness mac download unblock facebook proxy at school ford trucks for sale in florida mitsubishi electric air conditioning remote control jeep grand cherokee 2011 video nissan versa hatchback reviews 2010 laminate flooring installation costs toyota camry 2010 recall mercedes e63 amg wagon for sale volkswagen passat cc 2010 famous american ceramic artists facebook layouts for mac empire carpeting reviews tattoo ideas for men quotes biker chicks photos college football recruiting rankings 2011 isuzu trooper engine diagram cable tv providers by zip code daft punk helmets for sale equalizer software mazda rx 8 r3 body kit replica cap guns snow white and the seven dwarfs story script linux commands list pdf free tattoo cursive lettering bathroom wall tile design ideas famous love poems sonnets tattoo script lettering alphabet satellite internet connection wwe dvd release schedule 2010 linux ubuntu beryl download free funny wedding vows write your own compaq presario c700 specifications movie replica airsoft guns compaq presario f700 drivers for windows 7 winter olympics history wiki summer heights high quotes jonah takalua used opel cars for sale in germany bathroom vanities cabinets wireless router booster homemade acoustic guitar scales beginners mercedes benz e63 amg coupe volkswagen parts diagrams software testing life cycle flow chart bicycles for sale at walmart toyota recall 2009 list apartments for rent in philadelphia no credit check why is flash flash revolution down used pool tables for sale dallas tx porsche boxster spyder 2010 guitar power chords chart t shirt dress sewing pattern youtube indian movies songs the jewelry exchange complaints hyundai elantra 2010 mpg compaq presario v6000 specs toyota tacoma used 4x4 mazda 626 parts online list of toyota recall september 2009 warcraft 3 cd key battlenet custom jeep cherokee bumpers famous poems about death and loss furniture factory outlet missouri suzuki sx4 forum toyota tacoma 2010 diesel used mud tires for sale cheap girls pantsed and wedgied pics chrysler sebring parts diagram minivan gas mileage comparison chart mens underwear blogspot vinyl siding colors pictures harley davidson parts made in china dvd decrypter download 64 bit poster templates free powerpoint logo creator freeware mac linux mint download mirror jewelry instructions mercedes benz accessories bluetooth wow cataclysm release date rumors jaguar xj 2010 test drive mitsubishi lancer evolution x for sale online rpg space star wars designer wedding dresses with sleeves famous historical hispanic people rolex submariner price used subaru outback gas mileage guitar chords chart printable facebook login proxy chrysler sebring 2008 owners manual compaq mini 110c netbook canon g11 manual pdf hair color trends winter 2010 samsung impression covers pool table dimensions room size civilian contracting jobs overseas portfolio cases for modeling tattoos for guys chest xbox 720 real pictures recipes for chicken breast strips kitchen islands for sale in toronto bathroom corner vanity cabinets youtube full length movies malayalam volkswagen tiguan 2010 diesel summer internships for high school students 2010 samsung solstice a887 black wifi volkswagen jetta for sale by owner gps maps for blackberry 9000 pontiac grand prix for sale in michigan jaguar xf problems radio stations for sale california minivan with best gas mileage toyota sienna parts catalog sturgis biker chicks photos kawasaki ninja 250r mpg golf shoes closeouts volkswagen gti forum play pocket god online game mitsubishi eclipse parts oem flowers for algernon short story summary laptop computer deals walmart dvdfab 6 key siding colors home depot kitchen islands with breakfast bars subwoofer wiring calculator samsung eternity apps glass bongs and pipes for sale laptop computer deals under 400 wireless internet connection keeps dropping pokemon rpgs online best gps systems for truck drivers subaru legacy oem parts open gps tracker android toyota tacoma gas mileage basketball plays motion offense isuzu npr snow summit lift tickets coupons tattoo ideas for men forearm winter olympics 2014


Monthly Archive for February, 2008

Panorama Viewer

*FIXED!!*

Here's a really simple example, all it does is texture a sphere and rotate it depending on what the camera is doing:

Click Here (1.3Mb download so I didn't embed this one)

Source Code (Uses the Base Class):

Actionscript:
  1. /**
  2. * ...
  3. * @author Luke Mitchell
  4. * @version 1
  5. */
  6.  
  7. packageĀ  {
  8. \timport org.papervision3d.materials.BitmapFileMaterial;
  9. \timport flash.events.MouseEvent;
  10. \timport org.papervision3d.materials.ColorMaterial;
  11. \timport org.papervision3d.materials.utils.MaterialsList;
  12. \timport org.papervision3d.objects.primitives.Cube;
  13. \t
  14. \tpublic class Main extends PaperBase {
  15. \t\t
  16. \t\tpublic var materials:MaterialsList = new MaterialsList(
  17. \t\t{
  18. \t\t\tfront: new BitmapFileMaterial("http://papervision2.com/wp-content/pano/s1.gif"),
  19. \t\t\tback: new BitmapFileMaterial("http://papervision2.com/wp-content/pano/s3.gif"),
  20. \t\t\tleft: new BitmapFileMaterial("http://papervision2.com/wp-content/pano/s4.gif"),
  21. \t\t\tright: new BitmapFileMaterial("http://papervision2.com/wp-content/pano/s2.gif"),
  22. \t\t\ttop: new ColorMaterial(0x000000),
  23. \t\t\tbottom: new ColorMaterial(0x000000)
  24. \t\t});
  25. \t\tpublic var cubemap:Cube = new Cube(materials, 2000, 2000, 900, 5, 5, 5,Cube.ALL);
  26. \t\t
  27. \t\tpublic function Main() {
  28. \t\t\tinit(600,300);
  29. \t\t\tcubemap.x = 0;
  30. \t\t\tcubemap.y = 0;
  31. \t\t\tcubemap.z = 0;
  32. \t\t\t
  33. \t\t\tdefault_scene.addChild(cubemap);
  34. \t\t\tdefault_camera.z = 0;
  35. \t\t\tdefault_camera.x = 0;
  36. \t\t\tdefault_camera.y = 0;
  37. \t\t\tdefault_camera.lookAt(cubemap);
  38. \t\t\t
  39. \t\t\tdefault_camera.zoom = 5;
  40. \t\t\tstage.addEventListener(MouseEvent.MOUSE_WHEEL, mWheel);
  41. \t\t}
  42. \t\t
  43. \t\tpublic function mWheel(e:MouseEvent):void {
  44. \t\t\tdefault_camera.zoom += e.delta / 5;
  45. \t\t\tif (default_camera.zoom <5) {
  46. \t\t\t\tdefault_camera.zoom = 5;
  47. \t\t\t}else if (default_camera.zoom> 20) {
  48. \t\t\t\tdefault_camera.zoom = 20;
  49. \t\t\t}
  50. \t\t}
  51. \t\t
  52. \t\toverride protected function processFrame():void {
  53. \t\t\tcubemap.yaw( -((stage.mouseX - (stage.width / 2)) / stage.width)*4);
  54. \t\t\tdefault_camera.rotationX = -((stage.mouseY - (stage.height / 2)) / stage.height) * (Math.sqrt(default_camera.zoom*6));
  55. \t\t}
  56. \t}
  57. }

You can use this for pretty much any panoramic image, just change the image url and tweak it a bit :)

-Luke

Post to Twitter Post to Delicious Delicious Post to Digg Digg This Post Post to Facebook Facebook Post to StumbleUpon Stumble This Post

11. Advanced Interactivity 2

**UPDATE
This tutorial has been updated
view-update

This tutorial will show you how to handle full interactivity on an objects surface, just as if it's a normal movieclip.

For my example, I've made this. The red spot in the centre is a button. You can click it to toggle it's glow on and off. The other button will reveal how it works!

There are other ways to do this, but I think this way is the easiest and most hassle-free, and it's pretty fast.

I've super-commented the source code, so from reading the comments in the code you should be able to figure out exactly what's going on.

The basic idea is, you add the movie clip which is being used as the texture to the scene, but make it invisible. You then move it so that your mouse is over the correct part of the movieclip, when your mouse touches the texture on the 3d model. I think the "Show Movieclip" button on the cube above will explain better than I can :)

Actionscript:
  1. package  {
  2.     import flash.display.Bitmap;
  3.     import flash.display.MovieClip;
  4.     import flash.events.MouseEvent;
  5.     import flash.filters.GlowFilter;
  6.     import org.papervision3d.materials.MovieMaterial;
  7.     import org.papervision3d.materials.utils.MaterialsList;
  8.     import org.papervision3d.objects.primitives.Cube;
  9.     import org.papervision3d.events.InteractiveScene3DEvent;
  10.    
  11.     public class Main extends PaperBase {
  12.        
  13.         // This is the movieclip that we'll use as the texture.
  14.         private var movie:MovieClip = new MovieClip();
  15.        
  16.         // This movieclip will be completley transparent and will hold the
  17.         // texture movieclip, then move it to the correct loaction under the mouse.
  18.         private var movieParent:MovieClip = new MovieClip();
  19.        
  20.         // These are buttons that I'm going to add to the texture movieclip
  21.         private var button:MovieClip = new MovieClip();
  22.         private var showbutton:MovieClip = new MovieClip();
  23.        
  24.         // A "MovieMaterial" will use a movieclip as a texture.
  25.         private var mat:MovieMaterial;
  26.        
  27.         // The cube that we're going to texture..
  28.         private var cube:Cube;
  29.        
  30.         // This will import the file "E:/Papervision/images/showtex.jpg" to the project, and
  31.         // store the data in "ButtonIm". (This is the "Show Movieclip" Button)..
  32.         [Embed(source = "E:/Papervision/images/showtex.jpg")] private var ButtonIm:Class;
  33.        
  34.         public function Main() {
  35.             // Initiate, 400px wide, 400px tall..
  36.             init(400, 400);
  37.         }
  38.        
  39.         override protected function init3d():void {
  40.             // - See the prepareMovieclip function. This just builds the movieclip called "movie".
  41.             // You can use ANY movie clip for this..
  42.             prepareMovieclip();
  43.            
  44.             // Prepare out moviematerial. Make it animated and interactive.
  45.             mat = new MovieMaterial(movie, false, true);
  46.             mat.interactive = true;
  47.            
  48.             // Zoom in a bit..
  49.             default_camera.zoom = 5;
  50.            
  51.             // Prepare the cube.
  52.             cube = new Cube(new MaterialsList( { all: mat } ), 500, 500, 500, 4, 4, 4);
  53.             // Listen for when the mouse is moved over the cube.
  54.             // Trigger the mMove function when this happens.
  55.             cube.addEventListener( InteractiveScene3DEvent.OBJECT_MOVE, mMove);
  56.            
  57.             // Add the cube to the scene.
  58.             default_scene.addChild(cube);
  59.            
  60.             // The movieParent movieclip will hold the movieclip which is being used
  61.             // as the texture. It will then move depending on the mouse posirion.
  62.             movieParent.addChild(movie);
  63.             // Make it invisible.
  64.             movieParent.alpha = 0;
  65.            
  66.             // Add the movieParent movieclip to the stage.
  67.             addChild(movieParent);
  68.            
  69.         }
  70.        
  71.        
  72.         private function prepareMovieclip():void {
  73.            
  74.             // - This code will set up our movieclip which is going to be used
  75.             // as the texture for the cube.
  76.             // Draw Outline:
  77.             movie.graphics.beginFill(0xFFFFFF);
  78.             movie.graphics.drawRect(0, 0, 500, 500);
  79.             movie.graphics.endFill();
  80.             movie.graphics.beginFill(0x000000);
  81.             movie.graphics.drawRect(0, 0, 10, 500);
  82.             movie.graphics.drawRect(490, 0, 10, 500);
  83.             movie.graphics.drawRect(0, 0, 500, 10);
  84.             movie.graphics.drawRect(0, 490, 500, 10);
  85.             movie.graphics.endFill();
  86.            
  87.             // Draw Circular Button:
  88.             button.graphics.beginFill(0xBB0000);
  89.             button.graphics.drawCircle(0, 0, 50);
  90.             button.graphics.endFill();
  91.             button.x = 250;
  92.             button.y = 250;
  93.             button.buttonMode = true;
  94.            
  95.             // Load bitmap button texture:
  96.             var Bim:Bitmap = new ButtonIm();
  97.             // Draw "Show Movieclip" Texture:
  98.             showbutton.graphics.beginBitmapFill(Bim.bitmapData);
  99.             showbutton.graphics.drawRect(0,0,100,30);
  100.             showbutton.graphics.endFill();
  101.             showbutton.buttonMode = true;
  102.             showbutton.x = 380;
  103.             showbutton.y = 450;
  104.            
  105.             // Add the buttons to the movieclip
  106.             movie.addChild(showbutton);
  107.             movie.addChild(button);
  108.            
  109.             // -- Listen for the buttons to be clicked --
  110.             button.addEventListener(MouseEvent.CLICK, mClickButton);
  111.             showbutton.addEventListener(MouseEvent.CLICK, showHide);
  112.             // --
  113.         }
  114.        
  115.         private function showHide( e:MouseEvent ):void {
  116.             // The "Show Movieclip" button has been clicked
  117.             if (movieParent.alpha == 0) { // If it's invisible,
  118.                 movieParent.alpha = 0.2; // Make it slightly visible.
  119.             }else {
  120.                 movieParent.alpha = 0; // Or make it invisible again
  121.             }
  122.         }
  123.        
  124.         private function mClickButton(e:MouseEvent):void {
  125.             // The cental round button has been clicked.
  126.             if(button.name == "on"){
  127.                 button.filters = null;
  128.                 button.name = "off"
  129.             }else {
  130.                 button.filters = [new GlowFilter(0x000000, 1, 15, 15, 10, 1)];
  131.                 button.name = "on";
  132.             }
  133.         }
  134.        
  135.         private function mMove( e:InteractiveScene3DEvent ):void {
  136.             // This code is run when the mouse is moved on the cube.
  137.             // This will move the movieclip to the right place beneath
  138.             // the mouse.
  139.             movieParent.x = root.mouseX -e.x;
  140.             movieParent.y = root.mouseY -e.y;
  141.         }
  142.        
  143.         override protected function processFrame():void {
  144.             // Spin our cube a bit.
  145.             cube.yaw(0.25);
  146.             cube.pitch(0.25);
  147.         }
  148.        
  149.        
  150.     }
  151. }

The image that's embedded in the code can be found here: showtex.jpg

Have fun! More Examples coming soon.

Post to Twitter Post to Delicious Delicious Post to Digg Digg This Post Post to Facebook Facebook Post to StumbleUpon Stumble This Post

We Had Forums

We have had forums!

I've set up a Papervision 3d forum at http://papervision2.com/forum/

Hopefully these forums will help everyone to solve common problems that they're having with Papervision. I'm going to fill them with some problems which we've resolved in the past so they're all in one place.

I've set up Help, General Chat, Suggestions and Examples forums. If you can think of anything else that the forum needs then make a thread in the suggestions forum and I'll get round to it.

Hope you like it!

-Luke

Post to Twitter Post to Delicious Delicious Post to Digg Digg This Post Post to Facebook Facebook Post to StumbleUpon Stumble This Post

10. Advanced Interactivity

**UPDATE
This tutorial has been updated:
Updates:
1) Removed InteractiveScene3DEvent and replaced it with standard MouseEvents
2) Updated to use papervision's BasicView.as class

view-update

Today we're going to learn how to handle more advanced interactivity. We'll be making something like this:

Click on a face of the cube to zoom into it. Click it again to make the cube spin again.

So, in this tutorial I'm going to show you exactly how to work out which material has been clicked on the cube and act accordingly.

If you haven't read it already, I strongly suggest that you read the Basic Interactivity tutorial first or you'll probably miss something.

Ok, so on to the code.

Firstly we'll want six materials to apply to each face of the cube. Here are mine, although you can create whatever materials you like:

Actionscript:
  1. private var frontMaterial:BitmapFileMaterial = new BitmapFileMaterial("http://papervision2.com/wp-content/pvTex/front.jpg");
  2.         private var backMaterial:BitmapFileMaterial = new BitmapFileMaterial("http://papervision2.com/wp-content/pvTex/back.jpg");
  3.         private var leftMaterial:BitmapFileMaterial = new BitmapFileMaterial("http://papervision2.com/wp-content/pvTex/left.jpg");
  4.         private var rightMaterial:BitmapFileMaterial = new BitmapFileMaterial("http://papervision2.com/wp-content/pvTex/right.jpg");
  5.         private var topMaterial:BitmapFileMaterial = new BitmapFileMaterial("http://papervision2.com/wp-content/pvTex/top.jpg");
  6.         private var bottomMaterial:BitmapFileMaterial = new BitmapFileMaterial("http://papervision2.com/wp-content/pvTex/bottom.jpg");

So, in this code I'm just loading six images from my server to use as each face.

Also, add the following declaration beneath the texture declarations to hold our Cube object:

Actionscript:
  1. private var cube:Cube;

Now we need to set up the 3d initiation code. In this code we will firstly set all of our materials as interactive, and then give each of our materials a name. This is VERY important to be able to easily find out which material has been clicked. If we didn't give each material a name then we wouldn't be able to easily work out which face has been clicked.

So, add the following code to your init3d() function:

Actionscript:
  1. override protected function init3d():void {
  2.             // We need to be able to identify each side. We'll do this
  3.             // by asssigning names to each material. During this process
  4.             // we'll also make the materials interactive.
  5.             frontMaterial.interactive = true;
  6.             frontMaterial.name = "front";
  7.             backMaterial.interactive = true;
  8.             backMaterial.name = "back";
  9.             leftMaterial.interactive = true;
  10.             leftMaterial.name = "left";
  11.             rightMaterial.interactive = true;
  12.             rightMaterial.name = "right";
  13.             topMaterial.interactive = true;
  14.             topMaterial.name = "top";
  15.             bottomMaterial.interactive = true;
  16.             bottomMaterial.name = "bottom";
  17.             // ---------------------------------------------
  18.            
  19.             cube = new Cube(new MaterialsList( {
  20.                 front: frontMaterial,
  21.                 back: backMaterial,
  22.                 left: leftMaterial,
  23.                 right: rightMaterial,
  24.                 top: topMaterial,
  25.                 bottom: bottomMaterial
  26.                 } ), 500, 500, 500, 3, 3, 3);
  27.             cube.addEventListener( InteractiveScene3DEvent.OBJECT_PRESS, onPress);
  28.             default_scene.addChild(cube);
  29.         }

So, In this code, we've set each material as interactive, given each one a sensible name, and initialised our cube with the materials assigned to the correct faces.

We then add an event listener to trigger the "onPress" event when the cube is clicked, then finally we add the cube to the scene.

We've now got a cube with six materials on it listening for a click event.

Now, the code which will let us work out which face has been clicked:

Actionscript:
  1. private function onPress( e:InteractiveScene3DEvent ):void {
  2.     switch(e.face3d.material.name) {
  3.         case "front":
  4.             // This code will be run when the front face is clicked
  5.         break;
  6.         case "back":
  7.             // This code will be run when the back face is clicked
  8.         break;
  9.         case "left":
  10.             // This code will be run when the left face is clicked
  11.         break;
  12.         case "right":
  13.             // This code will be run when the right face is clicked
  14.         break;
  15.         case "top":
  16.             // This code will be run when the top face is clicked
  17.         break;
  18.         case "bottom":
  19.             // This code will be run when the bottom face is clicked
  20.         break;
  21.     }
  22. }

Pretty self explanitary. The "e" variable in this code holds lots of data about the click event, including which material has been clicked, so, because we know which material is on each face, we can tell by the materials name which face has been clicked!

With a little bit of code, you can make a nice spinning cube gallery like the example above:

Here is my final code, have fun!

Actionscript:
  1. package  {
  2.    
  3.     import flash.display.DisplayObject;
  4.     import org.papervision3d.materials.BitmapFileMaterial;
  5.     import org.papervision3d.materials.utils.MaterialsList;
  6.     import org.papervision3d.events.InteractiveScene3DEvent;
  7.     import org.papervision3d.objects.primitives.Cube;
  8.    
  9.     public class Main extends PaperBase {
  10.        
  11.         private var frontMaterial:BitmapFileMaterial = new BitmapFileMaterial("http://papervision2.com/wp-content/pvTex/front.jpg");
  12.         private var backMaterial:BitmapFileMaterial = new BitmapFileMaterial("http://papervision2.com/wp-content/pvTex/back.jpg");
  13.         private var leftMaterial:BitmapFileMaterial = new BitmapFileMaterial("http://papervision2.com/wp-content/pvTex/left.jpg");
  14.         private var rightMaterial:BitmapFileMaterial = new BitmapFileMaterial("http://papervision2.com/wp-content/pvTex/right.jpg");
  15.         private var topMaterial:BitmapFileMaterial = new BitmapFileMaterial("http://papervision2.com/wp-content/pvTex/top.jpg");
  16.         private var bottomMaterial:BitmapFileMaterial = new BitmapFileMaterial("http://papervision2.com/wp-content/pvTex/bottom.jpg");
  17.        
  18.         private var targetrotationX:Number = 0;
  19.         private var targetrotationY:Number = 0;
  20.         private var targetrotationZ:Number = 0;
  21.        
  22.         private var tweening:Boolean = false;
  23.        
  24.         private var cube:Cube;
  25.        
  26.         public function Main() {
  27.             init(400, 400);
  28.         }
  29.        
  30.         override protected function init3d():void {
  31.             // We need to be able to identify each side. We'll do this
  32.             // by asssigning names to each material. During this process
  33.             // we'll also make the materials interactive.
  34.             frontMaterial.interactive = true;
  35.             frontMaterial.name = "front";
  36.             backMaterial.interactive = true;
  37.             backMaterial.name = "back";
  38.             leftMaterial.interactive = true;
  39.             leftMaterial.name = "left";
  40.             rightMaterial.interactive = true;
  41.             rightMaterial.name = "right";
  42.             topMaterial.interactive = true;
  43.             topMaterial.name = "top";
  44.             bottomMaterial.interactive = true;
  45.             bottomMaterial.name = "bottom";
  46.             // ---------------------------------------------
  47.            
  48.             cube = new Cube(new MaterialsList( {
  49.                 front: frontMaterial,
  50.                 back: backMaterial,
  51.                 left: leftMaterial,
  52.                 right: rightMaterial,
  53.                 top: topMaterial,
  54.                 bottom: bottomMaterial
  55.                 } ), 500, 500, 500, 3, 3, 3);
  56.             // Listen for the click:
  57.             cube.addEventListener( InteractiveScene3DEvent.OBJECT_PRESS, onPress);
  58.             // Add to scene:
  59.             default_scene.addChild(cube);
  60.         }
  61.        
  62.         private function onPress( e:InteractiveScene3DEvent ):void {
  63.             // If the cube has been moved to the front:
  64.             if (tweening) {
  65.                 // Let it rotate again
  66.                 tweening = false;
  67.             }else {
  68.                 // Find which rotation we need to be able to see
  69.                 // the face image:
  70.                 switch(e.face3d.material.name) {
  71.                     case "front":
  72.                         targetrotationX = 0;
  73.                         targetrotationY = 180;
  74.                         targetrotationZ = 0;
  75.                         tweening = true;
  76.                     break;
  77.                     case "back":
  78.                         targetrotationX = 0;
  79.                         targetrotationY = 0;
  80.                         targetrotationZ = 0;
  81.                         tweening = true;
  82.                     break;
  83.                     case "left":
  84.                         targetrotationX = 0;
  85.                         targetrotationY = -90;
  86.                         targetrotationZ = 0;
  87.                         tweening = true;
  88.                     break;
  89.                     case "right":
  90.                         targetrotationX = 0;
  91.                         targetrotationY = 90;
  92.                         targetrotationZ = 0;
  93.                         tweening = true;
  94.                     break;
  95.                     case "top":
  96.                         targetrotationX = 90;
  97.                         targetrotationY = 0;
  98.                         targetrotationZ = 0;
  99.                         tweening = true;
  100.                     break;
  101.                     case "bottom":
  102.                         targetrotationX = -90;
  103.                         targetrotationY = 0;
  104.                         targetrotationZ = 180;
  105.                         tweening = true;
  106.                     break;
  107.                 }
  108.             }
  109.         }
  110.        
  111.         override protected function processFrame():void {
  112.             if (tweening) {
  113.                 // If a face has been clicked
  114.                 if (default_camera.zoom <6.8) {
  115.                     // If the camera isn't zoomed enough then zoom in a bit more:
  116.                     default_camera.zoom += Math.sqrt(6.8-default_camera.zoom)/5;
  117.                 }
  118.                
  119.                 // Test each rotation and rotate it towards the target rotation:
  120.                 // X axis:
  121.                 if (cube.rotationX <targetrotationX) {
  122.                     cube.rotationX += Math.sqrt(targetrotationX-cube.rotationX);
  123.                     cube.rotationX = Math.round(cube.rotationX);
  124.                 }else if (cube.rotationX> targetrotationX) {
  125.                     cube.rotationX -= Math.sqrt(cube.rotationX-targetrotationX);
  126.                     cube.rotationX = Math.round(cube.rotationX);
  127.                 }
  128.                 // Y axis:
  129.                 if (cube.rotationY <targetrotationY) {
  130.                     cube.rotationY += Math.sqrt(targetrotationY-cube.rotationY);
  131.                     cube.rotationY = Math.round(cube.rotationY);
  132.                 }else if (cube.rotationY> targetrotationY) {
  133.                     cube.rotationY -= Math.sqrt(cube.rotationY-targetrotationY);
  134.                     cube.rotationY = Math.round(cube.rotationY);
  135.                 }
  136.                 // Z axis:
  137.                 if (cube.rotationZ <targetrotationZ) {
  138.                     cube.rotationZ += Math.sqrt(targetrotationZ-cube.rotationZ);
  139.                     cube.rotationZ = Math.round(cube.rotationZ);
  140.                 }else if (cube.rotationZ> targetrotationZ) {
  141.                     cube.rotationZ -= Math.sqrt(cube.rotationZ-targetrotationZ);
  142.                     cube.rotationZ = Math.round(cube.rotationZ);
  143.                 }
  144.             }else {
  145.                 // If the camera is zoomed in, it shouldn't be now
  146.                 if (default_camera.zoom> 2) {
  147.                     // So zoom out a bit.
  148.                     default_camera.zoom -= Math.sqrt(default_camera.zoom-2)/5;
  149.                 }
  150.                
  151.                 // Rotate the cube a bit:
  152.                 cube.rotationX += 2;
  153.                 cube.rotationY += 2;
  154.                
  155.                 // Make sure that we dont "wind up" the rotation
  156.                 if (cube.rotationX>= 360) cube.rotationX = 0;
  157.                 if (cube.rotationY>= 360) cube.rotationY = 0;
  158.             }
  159.         }
  160.     }
  161. }

Post to Twitter Post to Delicious Delicious Post to Digg Digg This Post Post to Facebook Facebook Post to StumbleUpon Stumble This Post

9. Basic Interactivity

In this tutorial, we're going to learn how to handle "interactive scene3d events", in particular the events which occur when your mouse moves over an object, out of an object and clicks an object. We're going to make something like this:

When you place your mouse over the plane, the material will change. When you click it, it will spin in the opposite direction.

Unfortunately we have to edit the base class.. again.. All we need to do is change one line so that the viewport becomes interactive when we initialise it.

Open up PaperBase.as, and find this line:

Actionscript:
  1. viewport = new Viewport3D(vpWidth, vpHeight);

Swap it for this line:

Actionscript:
  1. viewport = new Viewport3D(vpWidth, vpHeight, false, true);

This will make the viewport interactive, which means it can trigger events.

Now that you've updated the base class, create a new project. Make the Main class extend PaperBase as usual and then add the following imports:

Actionscript:
  1. import org.papervision3d.materials.BitmapFileMaterial;
  2.     import org.papervision3d.objects.DisplayObject3D;
  3.     import org.papervision3d.events.InteractiveScene3DEvent;
  4.     import org.papervision3d.objects.primitives.Plane;

Now, add the following declarations under "public class Main extends PaperBase {" :

Actionscript:
  1. private var ourMaterial:BitmapFileMaterial = new BitmapFileMaterial("http://papervision2.com/wp-content/pvTex/front.jpg");
  2.         private var ourOverMaterial:BitmapFileMaterial = new BitmapFileMaterial("http://papervision2.com/wp-content/pvTex/front_over.jpg");
  3.         private var yawspeed:Number = 5;
  4.         private var plane :DisplayObject3D;

ourMaterial is the material that we'll put onto the plane.
ourOverMaterial is the material that will be activated on mouse over.
We'll load both of these materials from files on my server.
yawspeed will be how much we're going to yaw() the plane by each frame
and "plane" will be the plane.

This next function will show you how to make the material interactive, and how to add an event listener to the stage:

Actionscript:
  1. override protected function init3d():void {
  2.             ourMaterial.interactive = true; // You need to set the interactive property of the materal to true.
  3.             ourMaterial.doubleSided = true; // We want to be able to see both sides of the plane
  4.             ourOverMaterial.interactive = true; // Same for the mouseover material
  5.             ourOverMaterial.doubleSided = true;
  6.            
  7.             plane = new Plane(ourMaterial, 1000, 1000, 4, 4); // Create a new plane
  8.             default_scene.addChild(plane); // Add it to the scene
  9.            
  10.             // These lines add event listeners to the plane which will trigger the functions on the event specified.
  11.             plane.addEventListener( InteractiveScene3DEvent.OBJECT_PRESS, onPress ); // Will trigger "onPress" when the object is pressed (clicked)
  12.             plane.addEventListener( InteractiveScene3DEvent.OBJECT_OVER, onOver ); // Will trigger "onOver" when the mouse rolls over the object
  13.             plane.addEventListener( InteractiveScene3DEvent.OBJECT_OUT, onOut ); // Will trigger "onOut" when the mouse rolls out of the object
  14.         }

I've commented the code so it should be easy to understand.

Now we need to add the "on..." functions. You can do whatever you want in these functions, but in this tutorial we're going to make the effect like above.

Actionscript:
  1. private function onOver ( e:InteractiveScene3DEvent ):void {
  2.             plane.material = ourOverMaterial; // Change the material to "ourOverMaterial"
  3.         }
  4.        
  5.         private function onOut ( e:InteractiveScene3DEvent ):void {
  6.             plane.material = ourMaterial; // Change the material back to "ourMaterial"
  7.         }
  8.        
  9.         private function onPress( e:InteractiveScene3DEvent ):void {
  10.             yawspeed *= -1; // Reverse the yaw speed
  11.         }

Finally, we need to add the processFrame code, to rotate the plane by the angle "yawspeed".

Actionscript:
  1. override protected function processFrame():void {
  2.             plane.yaw(yawspeed);
  3.         }

Done! Run the project and you should see the result like above. Here's the complete code:

Actionscript:
  1. package  {
  2.     import org.papervision3d.materials.BitmapFileMaterial;
  3.     import org.papervision3d.objects.DisplayObject3D;
  4.     import org.papervision3d.events.InteractiveScene3DEvent;
  5.     import org.papervision3d.objects.primitives.Plane;
  6.    
  7.     public class Main extends PaperBase {
  8.        
  9.         private var ourMaterial:BitmapFileMaterial = new BitmapFileMaterial("http://papervision2.com/wp-content/pvTex/front.jpg");
  10.         private var ourOverMaterial:BitmapFileMaterial = new BitmapFileMaterial("http://papervision2.com/wp-content/pvTex/front_over.jpg");
  11.         private var yawspeed:Number = 5;
  12.         private var plane :DisplayObject3D;
  13.        
  14.         public function Main() {
  15.             init();
  16.         }
  17.        
  18.         override protected function init3d():void {
  19.             ourMaterial.interactive = true;
  20.             ourMaterial.doubleSided = true;
  21.             ourOverMaterial.interactive = true;
  22.             ourOverMaterial.doubleSided = true;
  23.            
  24.             plane = new Plane(ourMaterial, 1000, 1000, 4, 4);
  25.             default_scene.addChild(plane);
  26.            
  27.             plane.addEventListener( InteractiveScene3DEvent.OBJECT_PRESS, onPress );
  28.             plane.addEventListener( InteractiveScene3DEvent.OBJECT_OVER, onOver );
  29.             plane.addEventListener( InteractiveScene3DEvent.OBJECT_OUT, onOut );
  30.         }
  31.        
  32.         private function onOver ( e:InteractiveScene3DEvent ):void {
  33.             plane.material = ourOverMaterial; // Change the material to "ourOverMaterial"
  34.         }
  35.        
  36.         private function onOut ( e:InteractiveScene3DEvent ):void {
  37.             plane.material = ourMaterial; // Change the material back to "ourMaterial"
  38.         }
  39.        
  40.         private function onPress( e:InteractiveScene3DEvent ):void {
  41.             yawspeed *= -1; // Reverse the yaw speed
  42.         }
  43.        
  44.         override protected function processFrame():void {
  45.             plane.yaw(yawspeed);
  46.         }
  47.     }
  48. }

Post to Twitter Post to Delicious Delicious Post to Digg Digg This Post Post to Facebook Facebook Post to StumbleUpon Stumble This Post

Poll Results

Hi,

Thanks for voting! The poll results are in, and I'll be publishing the next tutorials in this order:

  1. Basic Interactivity
  2. Advanced Interactivity
  3. Advanced Texturing
  4. Creating an interface
  5. Using Multiple Cameras and Scenes
  6. I'll publish more effects and shading examples

Interactivity tutorials coming right up!!

Be sure to check back later!

- Luke

Post to Twitter Post to Delicious Delicious Post to Digg Digg This Post Post to Facebook Facebook Post to StumbleUpon Stumble This Post


Follow papervision2 on Twitter

Flash and the City banner
2010 Flash And The City Speaker

RSS Feed