It's my first time with Papervision3D and I have created a slide show of images that is skewed on the y-axis. Smallest photos on the left, and they increase in size going to the right. So they zoom from left to right, smallest to biggest.
I have a tooltip that pops up when you hovers over the photo, but the tooltip also gets skewed proportionate to the camera view (slanted). I want the tooltip's angle to be independent of the entire camera view.
Any idea how to rotate objects independent of the parent's camera angle?
Thanks!
my_obj = new DisplayObject3D();
my_plane = my_obj.addChild(new Plane(bla bla));
my_obj.lookAt(camera);
The 'lookAt' bit is what you need.
Why not draw the tooltips in 2d? You can get the on-screen position of the images and then just draw a regular Sprite like so:
package
{
import flash.display.Sprite;
import flash.text.TextField;
import org.papervision3d.events.InteractiveScene3DEvent;
import org.papervision3d.materials.ColorMaterial;
import org.papervision3d.objects.DisplayObject3D;
import org.papervision3d.objects.primitives.Plane;
import org.papervision3d.typography.Text3D;
import org.papervision3d.view.BasicView;
public class PVTest extends Sprite
{
private var world:BasicView;
private var text:Text3D;
private var text2d:TextField;
public function PVTest()
{
world = new BasicView(stage.width, stage.height, true, true);
var colorMat:ColorMaterial = new ColorMaterial();
colorMat.interactive = true;
var planeContainer:DisplayObject3D = new DisplayObject3D();
var plane:Plane;
for(var i:int = 0; i < 11; i++)
{
plane= new Plane(
colorMat,
100, 100,
10);
plane.x = (i * 105) - 500;
plane.addEventListener(InteractiveScene3DEvent.OBJECT_OVER, handleMouseOver);
plane.addEventListener(InteractiveScene3DEvent.OBJECT_OUT, handleMouseOut);
planeContainer.addChild(plane);
}
planeContainer.rotationY = 10;
world.scene.addChild(planeContainer);
world.camera.z = -500;
addChild(world);
world.startRendering();
}
private function handleMouseOver(event:InteractiveScene3DEvent):void
{
var plane:Plane = Plane(event.displayObject3D);
plane.calculateScreenCoords(world.camera);
const OFFSET_X:int = -20;
const OFFSET_Y:int = 30;
text2d = new TextField();
text2d.text = "toolTip";
text2d.x = plane.screen.x + (stage.width/2) + OFFSET_X;
text2d.y = plane.screen.y + (stage.height/2) + OFFSET_Y;
addChild(text2d);
}
private function handleMouseOut(event:InteractiveScene3DEvent):void
{
removeChild(text2d);
}
}
}
Even for this example you'd have to offset the y position of the tooltip based on the objects scale but it may be easier than working out the rotations and is the best way to get a consistent looking result.
Related
I have a confetti generator that I am tyring to add to a single movie clip within my flash file. The clip is masked and I want to have some graphics and text appear above the confetti (which will be above a background layer as well).
I purchased a decent script and have modified it to work with some original confetti artwork but I can't figure out how to use this class (or change it for use) in just the one movie clip. Pasting the class below. I've been stressing about this for a couple of hours now, any help would be greatly appreciated.
package com.pixeljunkyard
{
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
import caurina.transitions.*;
import fl.motion.Color;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
public class Main extends Sprite
{
//Create Heart Instance
private var hearts:Heart;
//Amount of hearts
private var totalHearts:Number = 30;
//Falling Speed
private var speed:Number = 1.5;
//Constructor
public function Main()
{
//Align top left for screen aspect ratio
stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;
//Loop through the amount of heart to be created
for (var i = 0; i < totalHearts; i++)
{
//Create new heart
var heart = new Heart();
//Set Random value
var randScale:Number = randRange(50, 100);
var randRotation:Number = randRange( -180, 180);
var randRotationY:Number = randRange( -360, 360);
//Random position and scale
heart.x = randRange(0, stage.stageWidth);
heart.y = randRange( -stage.stageHeight, stage.stageHeight);
heart.scaleX = randScale/100;
heart.scaleY = randScale/100;
//Name each heart with the number of creation
heart.name = "heart" + i;
var Low : int = 1;
var High : int = 8;
var myRandomNumber:int = Math.floor(Math.random()*(1+High-Low))+Low;
heart.gotoAndStop(myRandomNumber);
//Add eventlisteners for interactions
heart.addEventListener(MouseEvent.ROLL_OVER, hit_heart);
heart.addEventListener(Event.ENTER_FRAME, change_shade);
//Initial Animation
Tweener.addTween(heart, {time:randRange(1,5)/speed, rotation:randRotation,rotationY:randRotationY,y:stage.stageHeight+(heart.height/2)+20, transition:"linear", onComplete:rebirth,onCompleteParams:[heart]} );
//Add to Stage
addChildAt(heart, i);
}
}
//Change shade to give lighting effect
private function change_shade(e:Event):void
{
//New color instance
var c:Color = new Color();
//Set properties
c.brightness = e.target.rotation / 300;
//Apply color to heart
e.target.transform.colorTransform = c;
}
//Random Function
private function randRange(min:Number, max:Number):Number
{
var randomNum:Number = Math.floor(Math.random() * (max - min + 1)) + min;
return randomNum;
}
//Interactive animation
private function hit_heart(e:Event):void
{
Tweener.addTween(e.target, { time:randRange(1,3), rotationY:e.target.rotationY+180 } );
}
//Reset heart to top of the screen once fallen
private function rebirth($heart:Heart):void
{
$heart.x = randRange(0, stage.stageWidth);
$heart.y = -$heart.height;
Tweener.addTween($heart, {time:randRange(1,5)/speed, rotation:randRange(-180,180),y:stage.stageHeight+($heart.height/2)+20, transition:"linear", onComplete:rebirth,onCompleteParams:[$heart]} );
}
}
}
Now I understand your problem.
First of all, I suggest to never write code on the timeline, except simple stuff like stop() or gotoAndPlay("loop").
The easiest way to achieve what you want is to do the following:
Make a blank MovieClip in Flash IDE Ctrl + F8
Give it a linkage like this:
Then click the edit button (marked with a red rectangle)
Open in Flash Professional if asked
Save the file in your .FLA directory and copy the contents of your Main.as file into this file
Remove the package name ("com.pixeljunkyard")
Change the public class Main extends Sprite to public class ConfettiContainer extends MovieClip and import flash.display.MovieClip
Now you have a class ConfettiContainer which does the same stuff that you Main.as file did. Don't forget to copy anything that this Main.as class uses from stage to your ConfettiContainer MovieClip.
You can now create and use it like this:
var confetti:ConfettiContainer = new ConfettiContainer();
addChild(confetti);
P.S. If you can't see Export for Actionscript option when creating a Symbol in Flash, click Advanced.
I'm looking to check if a BitmapData object is completely obscured by a BitmapData object. Is there something like the hitTest function but that makes sure every pixel is covered instead of any pixel?
Edit: It is important that transparent pixels are not included when checking if the object is obscured.
It's actually a pretty simple solution after all! Basically what you do is just capture the pixel values of the overlapping bitmap in the rectangle area that the overlapped bitmap occupies. You then iterate over that vector of values and as long as you don't have a 0 (completely transparent pixel), then you've completely covered the bitmap underneath.
Here are the two bitmaps I used in this test:
Overlapping bitmap:
Overlapped bitmap:
Code:
import flash.display.BitmapData;
import flash.display.Bitmap;
import flash.events.MouseEvent;
import flash.geom.Point;
import flash.utils.ByteArray;
import flash.geom.Rectangle;
var coveredBitmapData:BitmapData = new CoveredBitmapData();
var coveringBitmapData:BitmapData = new CoveringBitmapData();
var coveringBitmap:Bitmap = new Bitmap(coveringBitmapData, "auto", true);
var coveredBitmap:Bitmap = new Bitmap(coveredBitmapData, "auto", true);
coveredBitmap.x = Math.random() * (stage.stageWidth - coveredBitmap.width);
coveredBitmap.y = Math.random() * (stage.stageHeight - coveredBitmap.height);
stage.addChild(coveredBitmap);
stage.addChild(coveringBitmap);
stage.addEventListener(MouseEvent.MOUSE_MOVE, onMouseMovement);
function onMouseMovement(e:MouseEvent):void
{
coveringBitmap.x = mouseX - (coveringBitmap.width * .5);
coveringBitmap.y = mouseY - (coveringBitmap.height * .5);
checkIfCovering(coveringBitmap, coveredBitmap);
}
function checkIfCovering(bitmapA:Bitmap, bitmapB:Bitmap):Boolean
{
//bitmapA is the covering bitmap, bitmapB is the bitmap being overlapped
var overlappedBitmapOrigin:Point = new Point(bitmapB.x, bitmapB.y);
var localOverlappedBitmapOrigin:Point = bitmapA.globalToLocal(overlappedBitmapOrigin);
var overlappingPixels:Vector.<uint> = bitmapA.bitmapData.getVector(new Rectangle(localOverlappedBitmapOrigin.x, localOverlappedBitmapOrigin.y, bitmapB.width, bitmapB.height));
if(overlappingPixels.length == 0) {
//This means that there is no bitmap data in the rectangle we tried to capture. So we are not at all covering the underlying bitmap.
return false;
}
var i:uint = 0;
for(i; i < overlappingPixels.length; ++i) {
if(overlappingPixels[i] == 0) {
return false;
}
}
return true;
}
So you want to see if object2 completely covers object1 (both Bitmaps)?
var left:Boolean = object2.x <= object1.x;
var top:Boolean = object2.y <= object1.y;
var right:Boolean = object2.x + object2.width >= object1.x + object1.width;
var bottom:Boolean = object2.y + object2.height >= object1.y + object1.height;
if(left && right && top && bottom)
{
// Completely covered.
}
I am trying to place an object at my players current position but when i move away the object sticks to my player. I kind of know why it sticking to my player but i cant think of any other code to use.
Hero is my player that i move around the screen.
Thanks Lochy
var trap1:trap = new trap();
function keydown(event:KeyboardEvent) :void {
if(event.keyCode ==32)
addChild(trap1);
trap1.x = hero.x;
trap1.y = hero.y;
There are several ways to accomplish this task. There is basically a detail you have to know. In Flash, the display list is responsible for managing elements on the screen. The DisplayObject and DisplayObjectContainer classes provide the API to access and manipulate the display list.
A naive approach would be
function placeAbove(d1:DisplayObject, d2:DisplayObject):void
{
if (!d1 || !d2) return;
d1.x = d2.x;
d1.y = d2.y;
}
But when both DisplayObjects have different parents, the DisplayObjects are not part of te same coordinate system, so this little method won't work. I coded a small example:
package
{
import flash.display.DisplayObject;
import flash.display.DisplayObjectContainer;
import flash.display.Sprite;
import flash.geom.Point;
public class Points extends Sprite
{
public function Points()
{
const child1:Sprite = createSquare(50, 50, 0xFF0000, .5)
, child2:Sprite = createSquare(100, 100, 0x0000FF, .5)
, container1:Sprite = new Sprite()
, container2:Sprite = new Sprite();
DisplayObjectContainer(placeRandomly(addChild(container1))).addChild(child1);
DisplayObjectContainer(placeRandomly(addChild(container2))).addChild(child2);
placeAbove(child1, child2);
}
private function createSquare(width:Number, height:Number, color:uint = 0, alpha:Number = 1):Sprite
{
const sprite:Sprite = new Sprite();
sprite.graphics.beginFill(color, alpha);
sprite.graphics.drawRect(0, 0, width, height);
sprite.graphics.endFill();
return sprite;
}
private function placeAbove(child1:Sprite, child2:Sprite):void
{
const point:Point = child2.localToGlobal(new Point(0, 0))
, point2:Point = child1.globalToLocal(point);
child1.x = point2.x;
child1.y = point2.y;
}
private function placeRandomly(displayObject:DisplayObject):DisplayObject
{
displayObject.x = Math.random() * 100;
displayObject.y = Math.random() * 100;
return displayObject;
}
}
}
The Application generate 2 squares and adds it into different parents. The containers (parents) are placed randomly on the screen and so are the two child display objects. The placeAbove method does all the magic. It calculates the position from the second display object globally and the maps it to the first display objects target local position within the parent's coordinate system.
Ii hope it helps.
It's not very clear how your display list is organized, but try adding the trap as a child of the hero's parent. i.e.:
hero.parent.addChild(trap1);
I have a question about Papervision3D, or perhaps bitmapData, I am unsure where the problem is. I have constructed a program that takes 4 banners and splits them into pieces and then applies those pieces to cubes so that I can make a banner rotator. So after I run my program I have 10 cubes with a piece of a banner on 4 faces(front, top, back, bottom) of each cube. The problem is that some of the faces are oriented incorrectly(spun 180 degrees). Is there a way in Papervision3D to spin a cube face? The other place I think the problem may be is when I create the bitmapData that will be applied to the cube faces. Is there some way to explicitly define orientation during bitmapData creation? Any help or ideas would be greatly appreciated. Thanks!
-------Edit----------
Here is the code for my CubeMaker.as class. This is the class that takes the image pieces and applies them to the cubes.
package {
import away3d.events.MaterialEvent;
import away3d.materials.BitmapMaterial;
import away3d.materials.ColorMaterial;
import away3d.materials.TransformBitmapMaterial;
import away3d.primitives.Cube;
import away3d.primitives.data.CubeMaterialsData;
import CubeEvent;
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.display.Sprite;
import flash.events.Event;
public class CubeMaker extends Sprite {
private var _colorMaterial:ColorMaterial = new ColorMaterial(0x000000);
private var _dcRef;
private var _banners:Array;
private var _cubeArray:Array = [];
private var _cubeCoung:int = 0;
private var _numberOfPieces:int;
private var _width:Number;
private var _depth:Number;
private var _height:Number;
public function CubeMaker(banners:Array, numberOfPieces:int) {
_dcRef = DocumentClass._base;
_banners = banners;
_numberOfPieces = numberOfPieces;
}
public function makeCubes() {
//loop through the cubes
for (var i = 0; i < _numberOfPieces; i++) {
var faceBitmapArray:Array;
//fill array with four faces for current cube
faceBitmapArray = fillFace(i);
//get width and height from a piece instance
var width:Number;
var height:Number;
var tempArray:Array;
tempArray = _banners[0];
_width = tempArray[0].width;
_height = tempArray[0].height;
_depth = tempArray[0].height;
//create four materials from bitmapData
var myFront:TransformBitmapMaterial = new TransformBitmapMaterial(faceBitmapArray[0], {rotation:0} );
var myTop:TransformBitmapMaterial = new TransformBitmapMaterial(faceBitmapArray[1], {rotation:0.5} );
var myBack:TransformBitmapMaterial = new TransformBitmapMaterial(faceBitmapArray[2], {rotation:0} );
var myBottom:TransformBitmapMaterial = new TransformBitmapMaterial(faceBitmapArray[3], {rotation:0} );
//create two materians from color
var myLeft:ColorMaterial = new ColorMaterial(0x000000);
var myRight:ColorMaterial = new ColorMaterial(0x000000);
//create a CubeMatrialsData from the materials created above
var myMaterials:CubeMaterialsData = new CubeMaterialsData( { front:myFront, back:myBack, top:myTop, bottom:myBottom, left:myLeft, right:myRight} );
//listen for material change
myMaterials.addOnMaterialChange(materialChanged);
//create a new cube with the CubeMaterialsData created earlier
var _cube = new Cube({width:_width, height:_height, depth:_depth, cubeMaterials:myMaterials});
//the created cube is put into the _cubeArray
_cubeArray[i] = _cube;
if (i == (_numberOfPieces - 1)) cubesMade();
}
}
private function fillFace(i:int):Array {
var faceBitmapArray:Array = [];
for (var j = 0; j < 4; j++) {
//tempBannerArray filled with one banner in pieces
var tempBannerArray:Array = _banners[j];
//batmapData created and sized to current banner piece
var bitmapData:BitmapData = new BitmapData(tempBannerArray[i].width, tempBannerArray[i].height);
//bitmapData filled with current banner piece bitmap data
bitmapData = tempBannerArray[i].bitmapData;
bitmapData.lock();
//array is filled with bitmap data
faceBitmapArray[j] = bitmapData;
}
return faceBitmapArray;
}
private function cubesMade() {
//dispatch event to notify of cube making completion
dispatchEvent(new CubeEvent(CubeEvent.CUBES_MADE, _cubeArray.length));
}
private function materialChanged(e:MaterialEvent):void {
trace("Warning! Warning! Material changed!");
}
public function get cubes():Array {
return _cubeArray;
}
public function get cubeWidth():Number {
return _width;
}
public function get cubeHeight():Number {
return _height;
}
public function get cubeDepth():Number {
return _depth;
}
}
}
Preface: Papervision3D is close to unsupported / closed as a library, so I highly recommend using Away3D or another actionscript 3D library. Though the work done on PV3D was groundbreaking and incredible from a flash perspective so if you're looking to build a 3D experience with it, it's quite good. Just know from the get-go that future dev + support are unlikely.
Preface aside, take a look at the "Cube" primitive class in the library. You can create Materials and attach them to the MaterialsList instance that will be added to the cube instance. Assuming you're using BitmapMaterial, it has a "rotation" property, that you can set. Just determine which materials are upside-down and make their rotation = 180. Pros: quick; Cons: hard-coded.
The other option is to hit the problem on the "asset" end and flip your images. Pros: quick; Cons: non-scalable or puts the issue on the designer.
The best option, when loading the data / assets, is to have a "rotate" property that you can use to set which images should be flipped. It's a cube, so like Ender says, up is relative.
I need to develop a cube that contain 10 little cubes and manipulate everyone like an object..Somebody have any idea or some tutorial for do this on PaperVision3d and Flash CS4..Thanks Folks!!
I think what you actually want is Papervision3d as I know of nothing called "PaperViewer". If that is the case, please update your question.
This should give you an idea of how to start. It creates 10 cubes and stores them in an array. You can access them using boxes[index] to alter their scale, postion and rotation.
package
{
import flash.display.Sprite;
import flash.events.Event;
import org.papervision3d.cameras.Camera3D;
import org.papervision3d.materials.ColorMaterial;
import org.papervision3d.materials.utils.MaterialsList;
import org.papervision3d.objects.primitives.Cube;
import org.papervision3d.view.BasicView;
public class Boxes3d extends Sprite
{
private static const NUM_BOXES:int = 10;
private var world:BasicView;
private var boxes:Array;
public function Boxes3d()
{
addEventListener(Event.ADDED_TO_STAGE, addedToStage);
}
private function addedToStage(event:Event):void
{
// create the world and add it to the stage
world = new BasicView();
addChild(world);
// create a set of boxes
boxes = [];
var box:Cube;
var materials:MaterialsList;
for(var boxIndex:int = 0; boxIndex < NUM_BOXES; boxIndex++)
{
// create a material to cover the cube
materials = new MaterialsList({
all: new ColorMaterial(Math.random()*0xFFFFFF) });
// make a cube
box = new Cube(materials, 100, 100, 100);
// spread it out in space
box.x = Math.random()*500 - 250;
box.y = Math.random()*500 - 250;
box.z = Math.random()*500 - 250;
// add it to the scene
world.scene.addChild(box);
}
// get the world to render each frame
world.startRendering();
addEventListener(Event.ENTER_FRAME, positionCamera);
}
private function positionCamera(event:Event):void
{
var camera:Camera3D = world.cameraAsCamera3D;
camera.x = -(stage.width/2 - mouseX) * 2;
camera.y = (stage.height/2 - mouseY) * 2;
}
}
}