I would like to display a spinning image, when my application is not connected to the socket server and is in an "offline" state.
So I've tried using an ajax-loader.gif, courtesy of http://www.ajaxload.info/
<s:Image source="#Embed(source='assets/ajax-loader.gif')"
horizontalCenter="0" verticalCenter="0" includeIn="offline" />
but unfortunately the bitmap is not animated (does not spin).
Is there a way to do that, how do you approach displaying a "loading indicator" in your Flex 4.5 programs?
Or do I have to fallback to mx.controls.ProgressBar?
When you embed a gif, only the first frame gets embedded.
You can either use an "swf" animation file that has a spinner and use it inside an Image tag or you can also check out gif libraries in as3, as3 gif player and as3gif.
Why not just use the progress bar set to in determinant ;)
Related
I am having an interesting bug in MSIE8, only.
I have also tested this in MSIE7, MSIE9 and Chrome and could not reproduce it in those environments.
I have a flex application which is embedded in a webpage. The application has a few top level components. One is a mx:ViewStack which contains a number of different icons. The other is a mx:Canvas which contains a number of child mx:Canvas elements (which are used as layers to hold other UIComponents).
<mx:Canvas backgroundColor="#FFFFFF" id="drawing_area" borderColor="#000000" borderStyle="solid" horizontalScrollPolicy="off" verticalScrollPolicy="off" width="728" x="10" height="522.8889" y="10">
...
</mx:Canvas>
The error occurs when I perform the following steps.
Load the page with the component
Let the component fully load
Scroll down so that the top of the flex content goes outside the bounds of IE8's content window.
When I do the above, the mx:Canvas with the border disappears. It can still be interacted with, but any content moved into one of the child elements also disappears.
In this first image you can observe my starting state, there is a border around the drawing area, and the drawing area can be interacted with.
This second image shows the issue, after additional scrolling down. The border disappears and all UIComponents placed into the drawing_area also disappear.
Unfortunately IE8 is still a popular browser in the organization this was designed for.
Anyone have any clues as to what might be happening. I have tried different wmodes for flash. I am currently using window, but have tried transparent as well, and have the same issue.
I have tried a number of different things to get a work-around for this bug without much success.
I am using Rails on the backend and this issue is tied to only the "new" action, and does not appear on the "edit" action. Both pages use a shared partial to render the content.
Because of this I am doing browser detection using the rails gem browser. When a user is using IE8 I provide a recommendation to upgrade. On the page that has this error occurs I am providing instructions to enter data for the required fields and then save their report. This will take the user to the "edit" action and they will be able to interact with the flash content without issue.
I would like to use a GIF image as a loading animation on my Flex application, however I read Flex 3 doesn't have native support for GIF images. Therefore, is there any way to use them without any drawbacks?
If not, where can I find some flash animations to include in my app?
There are a lot of progress indicator flash animations out there as swf which can be easily be embedded (ie. here) or search google for Flex Progress Spinner. It's not that difficult to implement your own anyway. You just need a canvas and some matematics (rotation about point formulars).
Yes it's possible. You can find and design your own loading animation in:
http://www.ajaxload.info/. All you need to do is add this image in canvas or anyobject then call this one everytime you load.hope this will help you
I am developing a Flex application in which I would like to simulate roughly what we get when we serach Google for images. When we pass the mouse pointer over an image, it enlarges a little bit so we can see it better and click it if we want.
I know I could just use an image and increase its size via mouseOver/ mouseOut events, but the thing is that it is much easier for users to realise that they're clickable when I use a button with an icon (as opposed to a plain image).
So here's the question. Is there any way to alter (in this case, its height and width) the button icon through the button methods/ properties?
I can explain it a little further if this is too confusing.
Thank is advance.
P.S.: The way I'm doing it now is by changing the src property of the icon to switch to another (larger) version of the same picture (that requires two versions of each pictures to be stored). However, I'm using the setStyle method to achieve that, which, according to the documentation itself, is not very good performance-wise. And it's so much easier to adjust the size than to have to load another picture which is just an old version of the previous one.
If your picture is enlarged only 'a little bit', you can get away with one (larger) version (just set smoothing = true on underlying Bitmap.) This also enables smooth transition from small to larger version. And hand cursor would be fine way to indicate clickableness, while very large buttons will look strange.
The question was already asked in these threads
Create a button with an icon in actionscript
Set the icon of a Flex button with a Sprite in runtime
According to them there is no graceful solution, but the task can be done via setStyle() or using this snippet:
http://blog.benstucki.net/?p=42
The another way is to use a hack like this (Transparent button over image):
<s:Group width="100" height="20">
<mx:Image source="picture_you_need.jpg" width="100%" height="100%" scaleContent="true" maintainAspectRatio="false"/>
<s:Button id = "test_button" width="100%" height="100%" alpha="0.0"}"/>
</s:Group>
I am creating Sprite objects as simple shapes, and would like to know how to resize them dynamically.
my question:
How can I enable the Sprite to be re-sized on mouse drag(perhaps enabling a only a portion of the Sprite for this behavior)?
It might be important to note that I am using the Flex SDK, and therefore do not have full
access to the Flash libraries.
Thank you in advance.
You might want to check out the Flex Object Handles open source library. Check out the demo to see how it can be used to allow users to resize any object in a Flex app.
Doesn't the sprite always adapt itself to its contents to set its height and width? (like movieclips in as2). If you want to resize a sprite, I guess you'd have to draw something as background?
What do you mean by enabling a portion of the sprite to be re-sized?
I want to display some kind of animation when my datagrid is updating. Does anyone have any good examples of this?
I wouldn't use a gif as a loader because there is no built-in support for animated gif.
Try to use a SWF instead.
Then you could use a Canvas as a container for your DataGrid and the Loader. When your DataGrid is updating, add your loader on top of it and remove it when your data is ready.
However, if you can't use anything else than an animated gif, you can find an AS3 Gif Loader here : http://www.bytearray.org/?p=95&cpage=2