[swfobj src=”http:\/\/elwinlee.com\/flash\/outline\/TestImageOutline.swf” width=”546″ height=”400″]<\/p>\n
I’m learning Away3D<\/a> at the moment instead of PaperVision3D for a project at the HITLab<\/a>. PaperVision is kind of outdated and the latest version was causing trouble for creating interactive panoramas. The idea behind this is to create an actual outline of the hotspot on the panorama picture instead having an image (e.g. arrow) overlapping the background image to indicate a hotspot. Next apply a “GlowFilter”<\/strong> to the hotspot image, set the strength to a high value and set Knockout = true, to create an outline. The hotspot object might disappear when moving the camera around. To fix this, move the object slightly in front of the background, e.g. value of “0.5”<\/strong>, which won’t be visible to the viewer anyway. And set the “pushback”<\/strong> and “pushfront”<\/strong> accordingly (this saved my day!). Compile the file and tada! \ud83d\ude00<\/p>\n How to outline hotspots on a 3D plane image<\/p>\n","protected":false},"author":1,"featured_media":54210,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rs_blank_template":"","rs_page_bg_color":"","slide_template_v7":"","_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":true,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[429],"tags":[722,425,433,583,584,712,713,714,715,716,717,718,719,720,721],"class_list":["post-1984","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design","tag-cubic","tag-hitlab-nz","tag-flash","tag-actionscript-3","tag-as3","tag-away3d","tag-papervision","tag-plane","tag-knob","tag-outline","tag-panorama","tag-hotspot","tag-transparent-image","tag-transparency","tag-interactive"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t
\nIn the example above;
\n– Rotate the view by clicking the background and drag the mouse.
\n– The bidoof is the hotspot and will change color when pressed.
\n– Outline moves along the z-axi when tilted to show the 2 separate layers (background & hotspot).<\/p>\n
\nTo achieve this, I placed 2 planes; background and hotspot, on top of each other. The hotspot image is a cutout of the background image with a transparent background. The images are then mapped onto the planes and placed on top of each other accordingly. Flash ignores the transparency in the hotspot image, so placing the image on a plane wouldn’t effect the image.<\/p>\nbackground = new Plane( {material: BackgroundImage, width: 800, height: 600 } );\r\nbackground.rotationX = -90;\r\nbackground.rotationZ = 180;\r\nbackground.ownCanvas = true;\r\nbackground.pushback = true;\r\nview.scene.addChild(background);\r\n\r\nvar objectGlow:GlowFilter = new GlowFilter(0xff1616, 1, 8, 8, 20, 1, false, true);\r\nobject = new Plane( { material: ObjectImage, width: 250, height: 250 } );\r\nobject.x = -158;\r\nobject.y = -65;\r\nobject.z = 0.5;\r\nobject.rotationX = -90;\r\nobject.rotationZ = 180;\r\nobject.ownCanvas = true;\r\nobject.filters = [objectGlow];\r\nobject.useHandCursor = true;\r\nobject.pushfront = true;\r\nview.scene.addChild(object);<\/pre>\n","protected":false},"excerpt":{"rendered":"