StageVideo displaying above content? - actionscript-3

So I'm building a video player that appears in a nested (display) hierarchy, and I would really like an easy way to preserve the background. I have a Loader SWF that contains a bg, and another SWF (which contains the video player) that toggles between StageVideo and Video per the end user's environment. I have StageVideo working, but it always shows below other content.
Now I know that this is the desired behavior for StageVideo, as it allows the GPU to render content directly to the screen without having to composite the video feed with display list content (http://help.adobe.com/en_US/as3/dev/WSe9ecd9e6b89aefd2-68d5ef8f12cc8511f6c-7fff.html), but I really want to be able to show my background (if only as a 'picture frame') behind the video player. Drawing a simple rectangular frame around the player such that it appears to have a bg will not work; I need to be able to also display images and other DisplayObjects behind the video player itself.
Are there any scenarios in which this might be possible? Any potential workarounds (even undocumented) that someone has discovered to resolve this problem?

If all you need is a frame around the video player, try masking the background with a rectangle the size of the video screen and put it on top of it.
Otherwise you might have to use the regular video player instead of the StageVideo player.

Okay - got it. It turns out that putting all of the background content in a container, and masking the container with a frame-shaped mask will actually allow StageVideo to effectively render atop.
For example:
bg_container.x = video_container.x;
bg_container.y = video_container.y;
set_frame_mask(video_width, video_height, frame_width, bg_container);
// Helper function.
protected function setFrameMask(width:Number, height:Number, frame_width:Number, container:Sprite):void
{
var frame:Sprite = new Sprite();
frame.graphics.beginFill(0xFF0000);
frame.graphics.drawRect(0, 0, width, frame_width);
frame.graphics.drawRect(0, frame_width, frame_width, width - frame_width);
frame.graphics.drawRect(width - frame_width, frame_width, frame_width, height - frame_width);
frame.graphics.drawRect(frame_width, height - frame_width, width - 2 * frame_width, frame_width);
frame.graphics.endFill();
frame.x = container.x;
frame.y = container.y;
container.mask = frame;
}

Related

How to render properly Box2DDebugRenderer

I've some problem for render Box2D Debug with Box2DDebugRenderer.
I've 2 OrthographicCamera, one for render the world (named Cam) and one for the HUD (healthBar, Armor, ...) (named hudCam).
I've tried to render :
b2dr.render(world, cam.combined); -> I can't see the Box2D
b2dr.render(world, cam.projection);
b2dr.render(world, hudCam.combined);
b2dr.render(world, hudCam.projection);
b2dr.render(world, new OrthographicCamera().combined); and b2dr.render(world, new OrthographicCamera().projection)
I can't find a way to render the Box2D exactly like cam, to see the edge of all bodies.
If somebody understand my problem, please help me !
Thx.
Unfortunately some tutorial out there suggest to use a meter-to-pixel-conversion when using Box2D. This is not neccessary (at least with Libgdx), as this conversion can be done by using a camera.
The problem in your case is, that you are using a meter-to-pixel-conversion when rendering the Sprites, while the Box2DDebugRenderer renders everything 1:1.
To solve this problem you have to get rid of the meter-to-pixel conversion and use the camera or the viewport to "scale" the things.
THis way, the Box2DDebugRenderer and your SpriteBatch can (and should) use the same camera to render.
For the camera/viewport:
The constructor has the params width and height. Those params are often set as Gdx.graphics.getWidth() and Gdx.graphics.getHeight(), which in my optinion is not right, the game should be resolution-independent.
You should instead select those values depending on how big your player (or any other visible entity) is in real life and how big it should be on screen.
Let's say you have a little characte, like in your game. It is 1m tall in real live and should take 1/13 of the screen height (more or less like in your first picture, where the screen is about 13 times as high as the character).
So your cameras height should be 13, your characters height (also it's Box2Ds Body height) should be 1m. Next you need to define the width. For that i like to think about my desired aspect ratio. Lets assume the game should focus on 16/9 devices, the width is then (13/9)*16=23.
Now your camera should be created like this:
camera = new OrthographicCamera(23, 13);

flash actionscript 3.0 hide part of an image

I am working on a flash sound mixer application with multiple sound channels, and I am having trouble with the lights beside the volume knob.
Is there a way to hide just a part of an image?
On the image below, image-2 is on top of image-1 to create some kind of volume level indicator effect, and how much of image-2 is shown depends on the value of the volume.
image-url: http://s30.postimg.org/r3ow1g5bl/volume_lights_level.png
I've tried by just reducing the height of image-2, but it looks awful and distorted.
Is there something in flash that works closely the same as CSS's behavior.
example: I'll just make image-2 a background of a shape, and when I reduce the shape's height, the image-background does not get distorted or changes it's height as well.
By searching for solutions, I have come across the mask property, but I don't quite understand how it works, and most of the examples shown are images placed inside circles.
Is the mask property applicable in this situation?
I'm quite new to flash so I don't know a lot of things yet.
You can indeed use a mask.
How to programmatically create your mask
Put an occurrence of your image named myImage on the stage, and put over this occurrence a mask named myMask with the same dimensions. You can apply myMask mask to myImage using it's mask property like below:
Main Timeline
myImage.mask = myMask;
function mouseMoveHandler(e:MouseEvent):void {
myMask.height = myImage.y - e.stageY;
}
stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
You have just to adapt this code to your animation, in the function where you click your button.
I got it working now, many THANKS #VC.One. heres how I did it.
Imported img-2 to stage, converted it into symbol(type:Movie Clip), assigned instance name: img2_mc.
I created a new layer for the mask, drawn a rectangle using rectangle tool, converted it also to symbol(type:Movie Clip), assigned instance name: mask_mc.
Then applied the mask to img2_mc.
/* the code */
img2_mc.mask = mask_mc;
function onEnterFrame(event:Event):void{
var volumeKnob_y = volSliderKnobOn.y + 12; // adjust it to the center of the knob
mask_mc.height = volumeKnob_y;
}

AS3 - Thumbnail generator

I've a MovieClip with 10 frames and a photo (1024x768 px) in each frame. Now I'ld like to create a 174x174 px thumbnail from it and place it into a container (instance: thumb1 - thumb10)
How to make this happen?
var mc:MovieClip = new MovieClip();
var bitmapData:BitmapData = new BitmapData(mc.width, mc.height, ... );
bitmapData.draw(mc);
then just use the bitmapData to create a Bitmap and scale it the way you like.
Easiest way would be to create the thumbnails outside of Flash in a graphics editor (such as Photoshop or Paint.net). This would increase your file size slightly, but would probably work the best.
A simple way to do this in Flash, would be to give each image a Class linkage in the library, and just create a new instance of them when you need it. You can just set width and height (or scaleX and scaleY) on the Bitmaps to resize them, but make sure you set smoothing to true for each of them, or they wont look very nice.

Can some one explain to me why the behavior of this ActionScript code is auto scale?

I'm new to AS3 and I'm doing some custom video player video project for AIR. While I was studying the simple examples (non-StageVideo) on how to play videos, I've encountered a unique situation where I got an awesome auto-scaling (stretch-to-fit) to window behavior from Flash.
Whenever I set the SWF directive's width and height equal to the width and height of the flash.media.Video object I'm creating. It does the auto-scaling, stretch-to-fit, resizable behavior. Like so:
// SWF directive placed before the class declaration of the main class
[SWF( width="1024", height="576", backgroundColor="000000", visible="true" )]
// somewhere in my initialization
myvid = new Video();
with( myvid )
{
x = 0;
y = 0;
width = 1024; // if I set this wxh equal to wxh in the SWF directive it auto-scales!
height = 576;
}
myvid.attachNetStream( myns );
addChild( myvid ); // must come after instancing of video and netstream, and attach to make the auto-scale work
myvid.play( "somevideo.flv" );
Even if I set the width to 16 and height to 9 on both it scales and fits perfectly on the size of my window. Can some explain me this behavior? None of what I read in the documentation mentioned this.
Don't get me wrong, I like this behavior! :) It made things easier for me. But code-wise I need to understand why is this happening as the code I set had nothing to do with auto-scaling.
Also, what the heck are directives for? Don't they just have pure ActionScript 3 equivalent? They look hackish to me.
I think the behavior you're describing is caused by the scale parameter in the HTML embed of the Flash. Generally this defaults to showAll, scaling the Flash up to fit the container.
There are two different sizes: the size of the container (the block in the HTML page) and the size of the Flash content (what you specify in the SWF tag). The scale mode decides the behavior when these sizes don't match. You can control this behavior either by tweaking that embed parameter, or from AS3 directly using stage.scaleMode:
import flash.display.StageScaleMode;
// scale the content to fit the container, maintaing aspect ratio
stage.scaleMode = StageScaleMode.SHOW_ALL;
// disable scaling
stage.scaleMode = StageScaleMode.NO_SCALE;
If you want to use the scale mode to your advantage, I would set the width of your Video to match the stage dimensions like so:
myvid.width = stage.stageWidth;
myvid.height = stage.stageHeight;
This way you avoid having to repeat the SWF width and height.
The directives mostly specify some metadata or instructions for the compiler. The SWF tag in particular specifies the info in the SWF header, such as desired width, height, framerate. Mostly these are just some suggestions to the player + container about how the file should be displayed. Some of them can be changed in code (stage.frameRate = 50;). Another metatag is Embed, which will bundle some assets into the SWF (particularly handy if you want to embed some binary data).

AS3 - can't scrub through FLV using netstream.seek() after FLV finishes loading

I'm trying to play an FLV using the Netstream class - standard stuff, really using nothing more complex than things you can find in the help files. I've created a control panel with a bar you can use to click and drag and scrub through the video.
Exporting to Flash Player 9, it's working fine and I can scrub through the video, but only while the FLV is still loading. As soon as it hits 100% the scrubbing (using Netstream.seek()) becomes incredibly unresponsive, almost to the point of crashing the player.
I've killed all ENTER_FRAMES, removed all unnecessary listeners and nullified everything I can think of but something massively resource-intensive seems to be kicking in as soon as the load finishes.
Has anyone ever seen this? I've never come across this and can't find anything similar across assorted forums.
Code below but I don't think the mouse-move drag actions are the problem! Fine in the Flash CS4 IDE, broken in the browser.
Thanks for any help you might be able to provide,
Gareth
// Drag
private function dragVideo(e:MouseEvent):void {
// Match the x position of the dragger to the x position of the mouse
videoControls.progressBar.dragger.x = videoControls.progressBar.barInner.mouseX;
// If this results in the dragger moving outside the dragging area, constrain it
if (videoControls.progressBar.dragger.x < videoProgressRectangle.left) {
videoControls.progressBar.dragger.x = videoProgressRectangle.left;
} else if (videoControls.progressBar.dragger.x > videoProgressRectangle.right) {
videoControls.progressBar.dragger.x = videoProgressRectangle.right;
}
// As the dragger moves, work out its position as a percentage of the total distance it CAN move
// That distance is the width of the black inner bar but you must also accomodate the centred registration point of the dragger
// So knock off half the dragger's width from it's current position (which gives the left edge of the inner bar)
// Then knock off the dragger's width minus the 2px overhang of the white progress bar border, from the total draggable distance
videoSeekPercentageMouse = (videoControls.progressBar.dragger.x - (videoControls.progressBar.dragger.width / 2)) / (videoControls.progressBar.barInner.width - (videoControls.progressBar.dragger.width - 2));
// Now use that percentage to seek the video to the equivalent percentage of its total time
if (videoSeekPercentageMouse <= 0) {
videoNetStream.seek(0);
} else if (videoSeekPercentageMouse >= 1) {
// Because video metaData says the length is xyz while the real length is xyz + 0.015,
// seek to slightly before the end
videoNetStream.seek(videoDuration - 0.016);
} else {
videoNetStream.seek(videoDuration * videoSeekPercentageMouse);
}
// Show the video's current progress
videoControls.progressBar.barProgress.scaleX = videoSeekPercentageMouse;
// After the mouse moves update the display
e.updateAfterEvent();
}
Got it!
You should try this..
Pause the streaming "before" seeking..
Seek()
And then resume the streaming!