I am creating a custom video player in flash builder using SDK 4.1 on windows 7.
I have created video player controls like Play/Pause, progress bar etc. in a HBox.
Now I want to display these controls when user mouse hover on display object as overlay like in vimeo.com video player and remove/disable when hover out.
My current .mxml page structure is like http://i48.tinypic.com/15x4w7a.png
I simply show/hide video player controls HBox on video container mouse hover event by giving HBox height.
How can I implement overlay functionality in video player?
Any web link and source code would be highly appreciated.
The solution is to use a Flex container that will allow content to be layered on top of other content. By design, the VBox and HBox containers do not allow this. They layout their contents in a vertical or horizontal layout with no overlap.
You can use the Canvas or Group containers to overlay components on top of other components. Since you are using Flex 4, I would recommend using Group instead of Canvas ... and VGroup instead of VBox ... and HGroup instead of HBox.
Here is a simple layout you could do using the Flex 4 classes:
<s:Group>
<s:VideoDisplay top="0" bottom="0" left="0" right="0" />
<s:HGroup bottom="0" left="0" right="0"/>
</s:Group>
The VideoDisplay component is whatever you are using to show the video. Note that the top/bottom/left/right attributes tell the parent Group object to layout this component so that its top is 0 pixels from the parent's (Group's) top edge (and similar for the bottom/left/right edges).
The HGroup component is the container that holds your player controls. The HGroup is positioned to be 0 pixels from the bottom, left, and right edges of the parent container.
Instead of changing the height of the player controls container on mouseover, you should set the visible property HGroup (or HBox) container to false.
As they say, a picture is worth a thousand words. But on StackOverflow, code is worth a thousand pictures. If this answer doesn't help, you should edit your question and add the actual code you're using :)
Related
Is it possible to create a UI controller that would look like a home screen? Or is there one already?
I am trying to make one using a Grid controller, but I am struggling with sizing - I could not find exact sizes for tiles, margins, only for their content, and it appears that margins and tile sizes change on over-scroll.
I would like to use this to display something like a picture album.
Your answer for photo album is WrapPanel.
One of the new controls in the Silverlight Toolkit is WrapPanel. It enables users to position child elements sequentially from left to right or top to bottom. When elements extend beyond the panel edge, they are positioned in the next row or column.
For more Refrence how to use it go here
Is it possible to apply UI virtualization to ScrollViewer in WinRT. In my application I am creating a line chart with the help of Polyline(Polyline embedded inside a scrollviewver). But in the current case, If it come more than 500 points. It blocks the UI during the time of interacting with the Map. So what I am trying to achieve is to apply kind of UI virtualization to scroll view. If anyone had any idea to solve this please help me.
The way I would handle a Polyline is I would break its data into sections, perhaps screen-wide ones (assuming horizontal-only scrolling), put a Canvas inside of the ScrollViewer, make the size (Width) of the Canvas the total size of the chart and put a few (say 5) Polyline controls in it and then on the ViewChanged event update the Polyline controls' Canvas.Left and Points properties to correspond to the area around the current view port of the ScrollViewer. That should give you smooth scrolling. Just don't add/remove or update the controls on each ViewChanged and only update Canvas.Left and Points when you need to - that is when you don't have a Polyline ready to display next to the current view port.
How can I create horizontal layout with fullscreen scrollbar? Like "Store" app in Windows 8. I use WinJS
Try this, flexbox:
http://msdn.microsoft.com/en-us/library/ie/hh673531(v=vs.85).aspx
There is a property called ‘flex-direction’which allows you to change a row to a column, i.e. the elements would be aligned vertically. It is also possible to reverse the direction, i.e. the last element in the container would appear first in the list. This property can take the values – ‘row’, ‘row-reverse’, ‘column’ and ‘column-reverse’.
I am developing an application where I need to place rectangular slabs of different shapes to create the shape of a Bench Top. I am placing the rectangular slabs of different shapes(I am using a the Canvas container as the slab) in a repeater and dragging them on the main canvas. One functionality that needs to be implemented is the ability to resize these slabs once the are dragged from the repeater into the drawing canvas by dragging along their edges like we resize the windows that we normally see. Is there any way this can be done.
I just found an component developed for the purpose
http://www.rogue-development.com/objectHandles.html
I am going to check it out.
Please inform if anyone has any other solutions.
I have a XULRunner application that I want to have display 2d graphics in a HTML element. I would like to be able to repaint those graphics when the window resizes. The layout looks something like this:
<box flex="1" id="canvas-box">
<html:canvas id="canvas" flex="1">
</html:canvas>
</box>
First of all the "width" and "height" properties of the canvas element do not reflect its actual size on the screen. This causes the strokes to come out stretched strangely, since 1 unit in the x direction ends up being different than 1 unit in the y direction. Secondly, I can't get the onresize event to fire, regardless of whether I put it on the canvas or on the surrounding box.
The XUL tutorial does warn that there are layout weirdnesses that will occur when you use HTML elements inside your XUL app, but in this case I don't have a choice because I need 2d graphics. Any pointers?
EDIT For now I'm going to use SVG in the place of the canvas element. I'm in the preliminary stages of trying it out, but at least it doesn't seem to have the weird "stretching" problems that canvas was having.
Couldn't you just put an HTML frame/iframe in the XUL and put the canvas in there?
I thought onresize only worked on <window>, you could resize the canvas and repaint it from there.