Published by Administrator on 05 Jul 2007 at 07:34 am
Flex Components Page
For questions/requests/bugs - post a comment at the bottom of the appropriate tutorial page.
Preloading Image
The Preloading Image is an Adobe Flex (2.0+) component. It is a mx.controls.Image subclass that adds graphical preloading display. You can use included preloaders or create your own.
Its free unders the Artistic license.
1. select preloader on the right
2. swap images in combo to see it in action (clear cache if its download becomes too fast).
Mask Image
The Mask Image is an Adobe Flex (2.0+) component, which moves a mask “window”
over an image following user mouse movements.
Its free unders the Artistic license.
- download
- quick start
- right click -> view source (on application below)
HSmoothBox
The HSmoothBox is an Adobe Flex (2.0+) HBox like component, which has animated smooth scrolling.
Smooth scrolling can be done with or without the blur effect.
Its free unders the Artistic license.
- download
- quick start
- right click -> view source (on application below)
VSmoothBox
The HSmoothBox is an Adobe Flex (2.0+) VBox like component, which has animated smooth scrolling.
Smooth scrolling can be done with or without the blur effect.
Its free unders the Artistic license.
- download
- quick start
- right click -> view source (on application below)
This page has the following sub pages.
Arzath on 14 Jan 2008 at 5:15 pm #
Hey, can’t believe such a great site of yours still got no comment yet.
Your stuffs are AWESOME!
Oscar on 29 Jan 2008 at 8:12 pm #
hey, nice work. all your components lokk great!!
are you planning to update your work to flex 3?
thanks for sharring!!
Administrator on 30 Jan 2008 at 8:39 am #
Thanks,
Planning to re compile them with the flex 3 sdk, soon. Should be straight forward.
I’ll notify you when I do.
Cheers
Dakshika on 04 Feb 2008 at 2:45 pm #
Such a great thing ….
Thanks
Dimitar G. on 20 Feb 2008 at 10:12 pm #
VSmoothBox and HSmoothBox are quite appealing.
I have couple of questions though. Please drop me a line at my email.
Anthony on 05 Mar 2008 at 7:54 pm #
SmoothBox = Nice job!!! I was looking for something like this for days. I was wondering if anyone has done this same thing but added an “iPhone” like drag to control the scrolling.
Well done man. Wicked cool.
Administrator on 06 Mar 2008 at 7:26 am #
stay tuned, a much improved version coming out in a week or so.
BigVirgil on 14 Mar 2008 at 11:37 am #
Hi, I’ve downloaded the HSmoothBox and VSmoothBox and tried and had a look at the source, but obviously some assets are missing:
[Embed(source=”../resource/arrowsd.png”)] among others…
Administrator on 14 Mar 2008 at 3:50 pm #
Sorry about that, forgot to add the resource pics to the distribution.
Download again and it should be fine.
Vipin on 11 Jun 2008 at 11:36 pm #
Hi,
I have downloaded and checking the component. I am trying to add childs dynamically using dataProvider. It does not work for me. I checked the source and found that ‘_initialCommitPropertiesDone’ is false and not building the childs from dataProvider.
Here is my MXML:
Here is my code which sets the dataProvider:
private function xmlLoadResult(e:ResultEvent):void
{
xmlCurrentBook = e.result as XML;
currentPageList = xmlCurrentBook.book.pages.page.(@visible==”true”);
currentPageListCol = new XMLListCollection(currentPageList);
book.dataProvider = currentPageListCol;
}
What could be wrong here?
Vipin on 11 Jun 2008 at 11:38 pm #
Sorry the MXML tag didnt come up in the post: let me try this.
<containerEx:VSmoothBox id=”book” borderStyle=”solid” width=”200″ height=”300″ itemRenderer=”BookPage”
itemHeight=”200″ itemWidth=”100″ verticalScrollPolicy=”on” />
Administrator on 12 Jun 2008 at 11:30 am #
Hi,
I think I see what might be causing the problem, the _initialCommitPropertiesDone flag should be lit in the commitProperties, regardless of the dataProvider existence.
For now, you could work around this by setting a dummy dataProvider (empty ArrayCollection or something, define it with binding) and replace it when your service result is in.
I will fix this in the next release.
Cheers
Vipin on 12 Jun 2008 at 12:17 pm #
Thank you. Its a great component… thanks for getting this…
Vipin
Vipin on 12 Jun 2008 at 12:35 pm #
I was able to load images. But when I try scrolling, I am getting a runtime error:
Error: out of bounds for scroll: 1
at containerEx::SmoothScrollerCore/scrollToItemIndex()[C:\Documents and Settings\Administrator\My Documents\Flex Builder 3\CatWidget\src\containerEx\SmoothScrollerCore.as:262]
at containerEx::SmoothBoxUI/onScroll()[C:\Documents and Settings\Administrator\My Documents\Flex Builder 3\CatWidget\src\containerEx\SmoothBoxUI.mxml:553]
Any reason for this?
Vipin
Administrator on 12 Jun 2008 at 1:25 pm #
Not sure about that one, what version do you have?
Lets take this offline, reply to the email I sent you and please send me the relevant code you are using if you can. I’ll try to get to it today or tomorrow.
Brian on 17 Jun 2008 at 9:57 pm #
@Vilpin
That happens for me when I don’t explicitly set a width/height on the child objects (itemWidth/itemHeight don’t seem to work for me).
@Administrator
Love the component. Tried making my own one day, but no where as nice as this!
I could use some help though… I’ve noticed an issue when using the component with states. For example, think of an app with two states, each with a different HSmoothBox (with different data, etc). I can load each state once, but if I try to go back to one that was already viewed, it crashes with “RangeError: Error #2006: The supplied index is out of bounds.”
It appears to be crashing in the function “commitProperties” on the “itemContainer.addChild(child);” line. I’ve been trying to debug the error to find out where it is going wrong, but cannot figure it out.
Any ideas? If you would like, I can put together a small example for you.
Brian
Brian on 17 Jun 2008 at 10:05 pm #
I think I might have figured it out…
##function commitProperties##
if( _childrenChanged )
{
itemContainer.removeAllChildren(); <—- ADDED THIS
for each( var child:DisplayObject in _children )
{
itemContainer.addChild(child);
}
}
I no longer crash
Is this the right approach though? I’m still very early with custom component development.
Administrator on 19 Jun 2008 at 5:10 am #
Hi Brian, [DefaultProperty(”children”)] ). So I actually override the parent children and save my own.
Interesting about the states, I am not sure about this fix. Seems ok on first sight, but I do need to check what the _children list holds. If it always holds all children then the fix is fine. I use a patteren I found on some post on how to create mxml components that can act as containers (using the
Regarding the post by Vipin, There was a bug using the dataProvider itemRenderer pattern at runtime. I fixed it and release a new version so 1.3.4 was released. Please see the download page If you don’t have that version.
In any case, I am on vacation and will be back in about a week so I’ll look at it then and get back to you. I would appreciate you sending me a sample of the code that uses the component.
Thanks for the info
Felipe Almeida on 24 Jun 2008 at 1:25 am #
How do i can view the source code of the samples above?
Administrator on 24 Jun 2008 at 6:51 am #
Haven’t got around to adding the view source option to the samples, It’s on my todo list. For now please check out the readme/quick start files attached.
Cheers
Vipin on 24 Jun 2008 at 10:12 am #
Thaks mate for the latest version.
Pythagoras on 01 Jul 2008 at 5:51 pm #
It seems that the SmoothVBox does not work when you populate it with the repeater component…
The following results in a blank page (works with VBox though):
Pythagoras on 01 Jul 2008 at 5:55 pm #
sorry, my code didn’t come through, here’s another try:
Administrator on 02 Jul 2008 at 4:20 pm #
Thanks for the info, I actually never use repeaters so I never tested it
or intended for it. I will try to look at it as soon as I can.
Posting code does not work too well here. I will send you and email so you can reply the code.
Cheers.
Krittiya on 09 Jul 2008 at 10:49 pm #
When I hold the mouse down at the scrollbar’s track, the scrollbar’s thumb will step continuously until it reaches the mouse position. After that, if I click at the scrollbar’s track (and this time ..not hold the mouse down), I notice that the thumb also moves like when the mouse was hold down and it doesn’t step per item anymore. Is this a bug?
Thanks again SP for sharing this awesome component
Administrator on 10 Jul 2008 at 6:51 am #
Sounds like a bug, I couldn’t get it to reproduce on the examples above, maybe more items are needed. I will test this soon and add it to my todo list.
Thanks for the info.
Dpatrick on 11 Jul 2008 at 8:43 pm #
Can I apply this to a list control ? If so how?
Administrator on 12 Jul 2008 at 3:55 pm #
Sorry, can you please elaborate on the quesiton? apply what to a list control?
Dpatrick on 13 Jul 2008 at 6:58 pm #
Sorry, for the lack of detail in my earlier post but I wanted to know if the SmoothVBox component could be extended and used in a list control for the selectedItem method. Or can you point me in the right direction to be able to add this method, if you could it would be great. Also I really appreciate your time for responding and creating these awesome components.
Administrator on 14 Jul 2008 at 6:55 am #
As you probably know, I did not implement any kind of selection mechanism into the SmoothBox classes. At first glance to add this kind of functionality would require hooking to clicks of item renderers in the addScrollChild() method and implementing a single selection (or multiple) behavior on the dataProvider. I’ll will add it as an option for a future release. In the mean time, one option you might be able to do is mark a “selected” attribute on the data of the renderer when you need to, and via event or binding have something go over all the dataProvider to unSelect all the other items.
Hope this helps.
Cheers.
borf gordon on 22 Aug 2008 at 5:09 pm #
Hi,
Great component, thanks. Is there a way to enable the user “dragging” in the list to go left or right?
Administrator on 24 Aug 2008 at 7:07 am #
I implemented a “dragging” behavior in the FlexWheel component (based on the VSmoothBox), but not in the containers on this page. I might add it in a future version.
Cheers.
flysnail on 02 Sep 2008 at 7:30 am #
Hi
Great component,I have some question to consult with you,how to define Preloading component ,and use it when page first initialize and loading. the Preloading component like wheel round.
Administrator on 02 Sep 2008 at 7:39 pm #
Can you elaborate? sorry but I didn’t fully understand the question. Did you look at the tutorial, or the sources of the sample above (right click -> view source)?
Sky on 15 Sep 2008 at 7:53 am #
I just love your components, thanks.
Boris on 25 Sep 2008 at 9:24 am #
Really incredible stuff, yeah man - But if i had one wish for free, i would like to wish that i could scroll through the Items in the Boxes - Now i try to set an mouseDown and mouseUp-Event but the scroll-Velocity is so speedy - something like that:
private function moveScrollerBackward(e:Event):void
{
if (scrollerPosition == details.length - 5)
{
scrollerPosition = 0;
scroller.scrollToItemIndex(scrollerPosition);
}else {
scrollerPosition++;
scroller.scrollToItemIndex(scrollerPosition);
}
}
private function moveScrollerForward(e:Event):void
{
if (scrollerPosition == 0)
{
scrollerPosition = details.length - 5;
}else {
scrollerPosition–;
}
scroller.scrollToItemIndex(scrollerPosition);
}
But it isnt sexy
Administrator on 25 Sep 2008 at 1:43 pm #
Hi Boris,
Didn’t quite understand what you are trying to do, what do you mean “…could scroll through the Items in the Boxes…”? are you trying to get a “wheel” like behavior? If you are check out the FlexWheel component on this site.
If you need to slow down the scrolling it could be controlled using the changeScrollSizeDurationRatio() function which sets the ratio between pixels scrolled to duration of scrolling.
Cheers
Julien on 24 Oct 2008 at 3:21 pm #
Hi,
I have tried your component. However, I tried to create instance at runtime with the following code :
var myImage:PreloadingImage = new PreloadingImage();
myImage.preloaderTitleWindow = WheelPreloadingWindow;
myImage.source = myURL;
myImage.autoLoad = true;
but the preloader never appears. Any idea / suggestion ?
Thanks in advance
Julien
Administrator on 25 Oct 2008 at 5:28 am #
Julien,
I tried your code and it works ok for me,
first, just to make sure, you did do a container.addChild(myImage) right?
If you did, make sure that:
1. your browser has not cached the url you are trying to load (clear the cache and try your app). If its cached you will not see a preloader.
2. please try setting a height and width to myImage for test.
I will send you an email so we can take this offline if needed.
Cheers
Julien on 25 Oct 2008 at 8:57 am #
Hi
thanks for your reply
I have already done what you did, but I think I have found where the problem comes from.
The image source is an aspx page, a dynamically generated image. The creation process time can be quite long (2/3 s), then after the creation it sends the answer in Response.write(). The sending of the picture is almost immediate (I am on localhost).
You component seems to display the “wait animation” when it receives the first bytes of answer from the server, not before the request is sent. Am I right ? If so, is there any workaround ?
Thanks
Julien
Administrator on 26 Oct 2008 at 7:12 am #
There should be a way but it includes some code change,
check out the PreloadingImage.as, see the onOpen(event:Event):void,
That is where I initiate the loading animation, It is an event handler of a start of the download (in bytes). You can change it so this code is called in the creation complete or something. I will add this option to the next version.
Scott on 17 Dec 2008 at 3:40 pm #
Quick question.
I’m trying to get the HSmoothBox component to resize (width=100%). It appears just fine when first opening the window, but it will not resize(no matter what I try) when changing the window size.
Is there a way around this problem?
Thanks.
Scott
Administrator on 18 Dec 2008 at 8:42 am #
Using explicit width is recommended with this component for now.
I wrote this in my quick start documentation. This is an issue I will hopefully solve in
the next release. For now, set an explicit width and as for the resize, hook to the windows resize event and change the HSmoothBox width in that event. Sorry for the inconvenience.
Cheers
Carlos on 10 Jan 2009 at 8:55 pm #
hi,
when i use VSmoothBox with a mx:Text with dynamic html text inside, VSmoothBox doesn’t scroll until the end of the text, it cut it at the begining.
i tried to put text inside a hbox with height value, but nothing…
so…how do i scroll text with VSmoothBox?
actually….dynamic html text (can have images) from database?
Administrator on 11 Jan 2009 at 9:23 am #
Carlos,
Lets take this offline, I will send you an email so you can reply.
Cheers
Frank on 16 Jan 2009 at 7:56 am #
There is a bug of PreloadingImage component.
If image doesn’t exist or fail loading, the progress window won’t close.
Administrator on 16 Jan 2009 at 10:46 am #
Thanks Frank,
I will fix it in the next version, if its urgent then you can add a listener to image error loading (see constructor) and in it remove the popup.
Cheers
Misha on 30 Mar 2009 at 4:43 pm #
I can’t make HSmoothBox working in very simple example:
I doesn’t show scrolls in both vertical and horizontal boxes
I’m using containerEx-1.3.5-flex3.swc, Flex 3.2.0
Misha on 31 Mar 2009 at 11:22 am #
Yeah, I see that library doesn’t not work properly when component dynamically added after VSmoothBox/HSmoothBox were created.
Misha on 31 Mar 2009 at 11:22 am #
Ok, my bad!
I thought u have addChild() override, but instead there are special method addScrollChild(,) I used it and all fine now.
MorF on 02 Apr 2009 at 12:22 am #
Hi there,
I’ve been looking for some smooth scrolling content in flex but I didn’t find any till today.
Your smoothboxex looks great, but I’d like to use it in my photogallery.
But it seems that it’s not working with the repater ? is it possible or i’am doing sth wrong?
thakns a lot
Nory on 02 Apr 2009 at 3:50 pm #
hello thank you for this wonderful component
how to make the first pass is shown in the middle of
Administrator on 03 Apr 2009 at 4:35 pm #
MorF,
Please use a dataProvider and renderer or just loop and call addScrollChild().
I am aware the repeater does not work with this component and I will hopefully fix it in my next release.
Cheers
David Ang on 01 Jun 2009 at 10:32 pm #
I need a continuous way to have the vertical scroll and poll for new messages, though my messages can amount to 100,000 thousands at a time, i need to remove the existing child components of the scroller, the way i do that is like this:
scroller.itemContainer.removeChildAt(0);
Right after i make a call to: scroller.scrollToItemIndex(1);
unfortunately that shifts the entire thing up as well.
Any ideas how to remove item correctly from the scroller?
David Ang on 02 Jun 2009 at 3:02 pm #
I need to remove components from the vertical box but when i do that, all the components shifts up if im smooth scrolling from BOTTOM to TOP.
The reason I needed to remove components because the number of components inside the box can propel to thousands and that would really slow down the browser.
Thanks.
Administrator on 02 Jun 2009 at 4:26 pm #
Hi David,
The SmoothBox component unfortunately does not yet support reuse of renderers. This is something I have considered when designing the component, but it’s not implemented yet. The component is currently creating renderers for each data provider item. I am planning to support this needed functionality in a future release.
I don’t understand exactly when you are trying to remove the renderer, on each poll? do you have 100,000 items at a time in the dataProvider?
I might be able to help If I better understand but If you are handling 100,000 renderers at a time I suggest switching to one of Adobe’s lists.
Sorry for the inconvinience
sixones on 11 Jun 2009 at 11:56 am #
what license is your ‘Preloading Image’ component released under? i’ve adapted your ‘WheelPreloadingWindow’ mxml class to a pure actionscript3 implementation under flex.
Administrator on 11 Jun 2009 at 1:07 pm #
As mentioned above - http://www.opensource.org/licenses/artistic-license-2.0.php.
Narada on 20 Jun 2009 at 10:19 pm #
Big thanks for sharing this components! Keep going
p.s. i dont see any donation button… how can i thank you?
max on 28 Jul 2009 at 3:52 pm #
Great works.
smoothbox can be used to scroll in ring (without a stop at the head or tail) ?
thanks
Administrator on 29 Jul 2009 at 11:44 am #
Sorry not in this component, check out the FlexWheel for a possible solution.
JoeDamage on 12 Aug 2009 at 10:10 am #
Hi,
Thanks for the great components, I am particularly interested in the HSmoothBox. I really needed a horizontally scrolling component and this is it! My only problem is that I am using the dataProvider and my images are uneven in width. I can gaurantee height, but width is a problem. Is there any way around this? I have to dynamically load the images…
BTW, do you have a paypal account. Be happy to donate something to help the motivation!
thanks
zqproject on 12 Aug 2009 at 2:27 pm #
Amazing component.
I tried to remove a component child with removeChildAT() method, failed however and range error message poped up. Hope the funtionality will be included soon.
Thanks again for sharing the great job.
Administrator on 13 Aug 2009 at 6:01 am #
Joe,
The HSmoothBox supports uneven sized renderers, see the sample at the top of the page. If you are having problems getting this to work please reply.
Administrator on 13 Aug 2009 at 6:10 am #
zqproject,
If you replace the dataProvider without the child you would like to remove it will update.
JoeDamage on 13 Aug 2009 at 8:44 am #
When I use a dataProvider, it forces me to set the HSmoothBox itemWidth and itemHeight values. This then squashes any item that is wider, down to the itemWidth. In your example, you have statically added the items. I need to load the items dynamically at runtime. Is there any way I can use a dataProvider to do this? Is there any other way I can do this?
Thanks for you response.
zqproject on 16 Aug 2009 at 2:39 am #
Thanks for the reply. I will try the dataProvider. Is it possible to use percentage for itemHeight and itemWidth, so while users change window size, the children inside the container adjust themselves automatically.
Thanks in advance.
Administrator on 16 Aug 2009 at 6:31 am #
Sorry, at the moment only explicit sizes. You would need to hook to resize events and handle it yourself. I will add this option to a future version I am planning.
Cheers.
李宽 on 23 Aug 2009 at 10:30 am #
<![CDATA[
import mx.events.ListEvent;
import containerEx.HSmoothBoxCore;
import mx.collections.ArrayCollection;
[Bindable]
private var path:ArrayCollection;
private var arr:Array = new Array();
private var flag:int;
private function ini():void{
flag = hs.pos;
for(var i:int=1;i<19;i++){
arr.push({big:”image/photo/”+i+”.jpg”,small:”image/photo/”+i+”s.jpg”});
}
path = new ArrayCollection(arr);
}
private function gohead():void{
hs.head();
flag = hs.pos;
}
private function previous():void{
if(flag!=0){
hs.scrollToItemIndex(–flag);
}
flag = hs.pos;
}
private function nextto():void{
if(flag+7
/*—————————this ’s the imagepanel.mxml—————————————-*/
it’s scrolling while I move the mouse move over the hsmoothbox,then I want it stop.how to make it
李宽 on 23 Aug 2009 at 10:33 am #
private function stop(e:Event):void{
var i:int = (e.target as HSmoothBox).length;
flag =e.target;
hs.scrollToItemIndex(flag);
}
]]>
Administrator on 23 Aug 2009 at 10:56 am #
李宽,
.Didn’t really go through I think,
lets take this offline, I will send you an email so you can reply.
osis on 14 Sep 2009 at 5:04 pm #
Hello,
How can I change the effect?
easeOut-> easeInOut
Thanks,
osis.
Administrator on 15 Sep 2009 at 12:13 pm #
Sorry its not currently possible easily.
If you need to slow down or speed the scrolling it could be controlled using the changeScrollSizeDurationRatio() function which sets the ratio between pixels scrolled to duration of scrolling.
Cheers.
John DeIorio on 09 Nov 2009 at 8:17 pm #
Hi - I’m noticing a potential bug issue in regards to using an itemrenderer with the smooth scroll box. The problem is that when the data which is binded to the renderer changes, the itemrenderer does not override the set data method, anotherwords, it doesn’t “hear” that the provider was updated… most itemrenderers update as the data changes. Am I doing something wrong or is this a bug? I’d appreciate your help, thanks - John
Administrator on 11 Nov 2009 at 7:08 am #
John,
The problem is that there is no “smart” dataProvider updates at the moment, meaning renderers are not being reused and set with the data property, I have already started working on a version that handles this and more fixes I gathered, but it will be a while until I get it out (cant find the time). For now you will have to re set the dataProvider each update you have.
Don T on 05 Apr 2010 at 9:18 pm #
Awesome thanks! exactly what the Dr. ordered
Fernando on 18 May 2010 at 8:29 pm #
I made a little modification to use classFactory instead Class in itemRenderer. It works better when I use an actionscript created container. It´s just a suggestion. Great work, thank you.
Alex on 08 Jun 2010 at 3:13 am #
I don’t know if you are still maintaining this code for flex 3.5+
I would be interested to know if you had any luck creating a component like combining the VSmoothBox and HSmoothBox but which extends the tile component, I have been trying to figure out a solution for quite some time now too have a TileList and HorizontalList type component combined together with properties like your VSmoothBox and HSmoothBox, I need to not only have variable height but also variable width as well as be able to tile the items(tons of images) in a row which has 3 columns of variable width with each of these rows be a row in a set of 4 width variable height and width. And which takes advantage of the performance gains of TileList and HorizontalList by rendering only what is displayed in the scrollable area (mask area?) of the entire data set.
If anyone else has any suggestions, I am open to them