Hey, I've been assigned to design a flex 3 volume control component similar to the one Youtube players have. I mean, you move the mouse over the volume icon and a vertical slider appears.
My only doubt is about how making this vertical slider to appear and to hide properly.
Should I extend a PopUpButton somehow? Maybe another kind of PopUp component? Or do I really need to program the whole thing in actionscript(that would be just sad and sounds like reinventing the wheel)?
Is anyone able to simply point me in the right direction?
OBS: No need to teach me about skinning, designing.. or any of the rest. :)
No! Don't use a popup. Put a canvas somewhere hidden behind your bar of controls and just set it's visible to true when you mouse over the control.
I don't remember if the youtube slider covers the volume button or appears above it, but either way you can put it in there with a canvas.
If you want it to be one single component, the problem you run in to is that the size will be wrong if you hide the slider in the button component (It will be measured to be the size of the slider, instead of the button). But don't worry! Just override measure() and measure the button instead of both. Then if you set clipContent to false, it can display the slider outside of its bounds
What I suggest is to create a flex control that contains a graphic for displaying the volume meter and a hidden slider.
When you roll over the graphic volume meter you show the slider.
When you roll out the slider or the volume meter then you hide the slider.
I believe that's all
Related
I'm practicing development of a simple iPad Split View app (Stanford's Hegarty online class). And everything works for the most part. However, the Master side ('left side), although working in landscape mode looks a little different than what I expect it to as a 'popover' in portrait mode. The 'popover' covers the left side of the screen including the toolbar button item that triggered it where normally it should not cover that button.
Unfortunately I can't post images so I'll try my best to describe in more detail. Normally the 'proper' popover will be hovering right below the bar item button that triggered it with a thick arrow-ish thingie (the 'anchor') pointing to the button and not covering that button. The popover can be dismissed by clicking on that button again (or elsewhere on the screen).
What's happening to me, however, is that when I click the bar item button to show the popover, the resulting popover 'covers' the button and essentially fills up the left portion of the screen (the detail view is under it and most of it is showing) with its designated width (so, again, it doesn't cover the entire detail view). The is no 'anchor' arrow pointing to the bar item button since it is obviously covering it instead. The popover is dismissed normally once I click anywhere else on the screen.
So why is my popover covering the button and not simply hovering under it with an 'anchor' pointing to it as it should?
I don't think it it makes much sense to post code at this point because I don't think it'll help and more importantly not sure what portion to post considering this might be a problem with how I wired it in the Builder. Any thoughts will be greatly appreciated!
Thanks!
Mo
I believe its a change that came in IOS5.1
If you want the same behaviour you probably need to set the master up as a popover segue, from a toolbar button or similar in the detail view, and set the split view delegate to not show the master in portrait.
I'm on the move now but if you want any more info let me know and I'll try and get back to you later.
Hi I want to create an application has this sort of function:
http://looklet.com/create
In this application when you click the button (or some tilelist) on the right the model on the left update accordingly. I wonder how they achieve this. Originally i think it's some sort of image-only pop-up window but then pop-up window seems to update the entire view.
Then I think it might be only change view state, but then I still confused how it can be done using view state.
Flex expert please give me some hint !
Looks like transparent images drawn on Canvas. Each piece must have predefined offset and draw order.
Probably just images placed on one or more Canvas, with the z-order controlled for depth.
The body stays the same, so shirts probably have their own placement properties, as do skirts, underwear, hosiery, etc. as well as backgrounds, faces, etc.
I'm working on a Flex 4 application and I started customizing the interface with skins to give a whole new look.
So, I've created two scrollbar skins in Flash Catalyst (one horizontal, one vertical).
Its working great when I test the application through Catalyst so I took it and imported it on Flash Builder, copied the components and defined the new skins in my css file for the HScrollbar and VScrollbar.
The skin is working, all the buttons are ok. But, the scrollbar isnt resizing for some reason. It remains in the same height I've designed it to be regardless of the content it is bound to.
It scrolls the content in all the ways it should be but it doesnt resize and the thumb isnt getting all the way down.
Also I've noticed the following.
I have a custom component acting as a list. It extends Group and contains a Scroller. So at one place of the application the Scrollthumb is getting lower than on another place where the same custom list is used.
I also have to mention that this scroller works perfectly without a custom skin.
Anyone else having similar problems?
Okay, I know you posted this a while ago but I have been scouring the internet for days looking for why the scrollbar's thumb wasn't scaling like the default scrollbar.
There are a couple things to check, first is there a set height on your thumb's skin?
If not, and this is what I was overlooking, go to your scroller skin and at the point where you add the vertical and horizontal scrollbar set the "fixedThumbSize" property to false.
I suppose that your graphic elements are defined as every single part of the scrollbar (top arrow, bottom arrow, track, etc...): in this case you should check that the elements dimensions are not fixed... they should be in % to be able to change the dimensions based on the container.
Anyone know how to create animated auto-hide on ApplicationControlBar just like Windows's taskbar?
I'm totally new on this.
Thanks.
The issue with doing this is that on Windows, you have a 'lower bound'--also known as the bottom of the screen which is used to trigger the display of the task bar based on the mouse location.
In a browser based app, you don't have that spot which is easy for the user to roll their mouse over.
That said, if you're still adamant, you should be able to put something together easily using the mouse over events to swap the visibility of the ApplicationControlBar and then you can use show / hide effects to display the control bar.
I want a fusion chart in my flex app to display with a Lightbox effect like the effect you get when you click on any of the charts here or checkout the demos here
These effect have been attained with the help of javascript. How do i get the same effect via Flex? Any idea?
Thanks a lot
I built a Flex component called PopUpThumbnail that is very similar to HTML/JavaScript lightbox components.
Here's an example application that I created with it to displays Flickr images.
Add a mask over the top of the whole application with the content area in the middle and the semi alpha area around it. Clicking on the surrounding mask removes the layer, and you can interact with the content area as normal (make it look like a popup rather than actually using one...)