WinRT - My animation doesn't seem to run - windows-store-apps

I have written a control that makes a star formation, the number of points and the length of each point is configurable via dependency properties. I can bind them to Slider controls and it all works.
Now I've written a behaviour that 'injects' this star control into the visual tree of a loaded control and then, in code, makes an animation to make the star grow and disappear like a cartoon flash going off.
My animation doesn't run. The Storyboard.Completed event fires, but a breakpoint in the change handler for the dependency property being animated is never hit after its initial setting when the page loads.
I'm using a couple of DoubleAnimation instances.
(this is Q/A I solved it after 3 hours)

You need to set the EnableDependentAnimation property on your DoubleAnimations. From MSDN:
Not all custom animations you create can run by default in a Windows
Runtime app, if the animation system determines that the animation
might cause bad performance in your UI. Animations where the system
determines there could be a performance impact are called dependent
animations. It's dependent because the clocking of your animation is
directly working against the UI thread, which is also where active
user input and other updates are trying to apply the runtime changes
to UI. A dependent animation that's consuming extensive system
resources on the UI thread can make the app appear unresponsive in
certain situations. If your animation causes a layout change or
otherwise has the potential to impact performance on the UI thread,
you often need to explicitly enable the animation to see it run.
That's what the EnableDependentAnimation property on specific
animation classes is for. See Dependent and independent animations for
more info.
Very discoverable. Lucky you chose to RTFM on this day, else you could have ended up writing your own timers and stuff to force all the rest of the work on the clever star control not to have been wasted.

Related

Issue with transitions between scenes using effects

I've ran into a (hard to catch) issue using transitions between scenes in Cocos2d-x.
Basically I normally do a fade in-fade out like this:
Director::getInstance()->replaceScene(TransitionFade::create(0.5, scene, Color3B(0, 0, 0)));
It looks visually good and proper and all but I realized that it can be dangerous. If I have a button to go from Scene A to Scene B this way, the transition will run for 0.5 seconds as per the above implementation. When tapping ONCE and waiting, everything will be fine but if you tap very fast, it IS possible to have the event of the button called another time, even though the first transition call is already under way. This can, and I think in my case, lead to all sorts of strange and dangerous things. Especially for me who often use a protocol/delegate pattern for fetch data callbacks etc.
Want we want to do is to disable any UI (at least, possibly more?) on scene A as soon as the transition starts just to be sure that no other pushes are possible to the same or any other button, causing more transitions to be launched which could cause harmful things. Or there should be some kind of feature within cocos2d-x to always refuse transitions if one transition is already under way... To me that sounds like the most sane thing at first thought.
Is there anything I missed or are transitions in cocos2d-x really this dangerous? Anyone tackled this? Maybe a way to check if a transition is already under way would be one way for me to get around this problem without hacking around on cocos2d-x itself?
The virtual cocos2d::Node function onEnterTransitionDidFinish() could be used to unregister your callbacks for web requests etc.
Assuming you don't use the cocos2d-x event system for any app logic during a transition you might also consider disabling the EventDispatcher to block the propagation of touch events.
You could simply disable the button after it triggers.
Or you could be super lazy and create a Layer/TouchListener to intercept touch when a transition begins (onEnterTransitionDidStart()), and destroy it along with your scene :)

Dynamic UI window drawing in Flash?

Wasn't sure if this question belongs here, but I'll try. So I'm about to move my project from Director | Shockwave Player (if you ever heard of these) to Flash Player for numerous reasons and while I'm thinking how to better start off I got a question which really made me wonder. To the point.
Currently in Director each game window in the user interface (like small alerts or large windows with lot of elements in them) is drawn upon need - meaning that the actual window's graphical image is being put together from configuration (all sorts of properties like width, height and all elements and their properties) from numerous pieces of graphics (e.g. window background is made from 9 small pieces like the 4 corners, 4 middle pieces between corners for dynamic width and height and 1 central piece to fill the window) and then added to stage. This approach makes it easy to edit each graphical element without having to redraw the actual windows and everything in them if we would like to change the color scheme or improve something in a element. It also saves the resources as windows are being drawn only when requested.
Now I got to figure out if it's worth writing such code in Flash too as opposite to just creating all the windows and placing them in the library and adding to stage when they are requested. What do you think? Is it worth writing such implementation?
IMO, it depends on 1) How comfortable you are with Flash's drawing API / graphics class, and 2) How flexible each window/dialog needs to be.
If it's easier to just throw them together as static objects -- and if they don't necessarily need the flexibility to change dimensions/style much (can you count on one hand how many times they've needed to change since it was originally done in Director many years ago?), it's obviously easier to do this than going through the time/energy to recreate them dynamically, especially if you're not very comfortable with Flash's drawing API.
That said, a lot can be accomplished dynamically with Flash's drawing API, so if you have the time/interest I'd certainly suggest digging in and doing it the "right" way if you want to familiarize yourself with the drawing API.
My method for doing this sort of thing usually goes like this:
Create a separate class that extends Sprite/MovieClip; something like 'Dialog.as'.
Create public init(), show(), and hide() methods, and a private build() method.
init() is called just once upon initialization of your app, and takes some global parameters to hold on to internally (padding, colors, etc).
show() takes an argument of either text (a String), or even a Sprite/MovieClip -- whatever it is you want to show in this dialog. When called (when you want to spawn a window), it uses this -- plus whatever init parameters were originally passed in during init() -- to draw itself, and then unhides itself (tween the .alpha property, or simply set the .visible property).
When you want to close the dialog, make sure to invoke the hide() method, which first hides itself, and then cleans up whatever was created (removing listeners, etc) so that the next time it is called upon it can draw itself fresh.
It might also make sense to pass into this object a reference to the Stage (in the original init() call), so that it can center and size itself accordingly on the stage, and also addChild itself to the top of the display list so that it's always above everything else.
I hope this helps.
If is 2D you can check this:
http://pushbuttonengine.com/
if is 3D you can start here:
http://alternativaplatform.com/en/alternativa3d/
I can suggest you also Unity3D but this is outside of flash
Hope it helps

Non-blocking modal Swing progress dialog

A daft question, but I really cannot get this to work: I have some long-running process in a Swing application which may take several minutes. I want to display a progress dialog to the user while this process is ongoing. I also want to prevent the user from performing further actions, eg pressing a button while the process is going on.
If I do the process on the EDT, this obviously prevents the end-user from doing anything while the process is going on. But because the EDT is busy processing, it never gets around to rendering the dialog's content, so I just get the outline of the dialog.
But if I do the process in a worker thread, the end-user can click buttons and cause the EDT to manipulate state that the worker is also manipulating at the same time, with bad stuff as a consequence. If I make the dialog modal, that does not happen, but modal in Swing also implies blocking, so the moment I call setVisible(true), the thread blocks forever.
So my current "solution" is to use a worker thread, and then spawn off a separate thread whose only purpose is to absorb the blocking nature of setVisible. Surely there must be a better solution!
So how do I get a dialog that prevents the user from interacting with the rest of the system (modal) but does not block the thread that causes it to be visible?
You should be using the GlassPane from preventing the user from interacting. The good thing is this is modal for the user and not your program so your thread won't get blocked.
The great news is that you can also use it for cool GUI effects like shading the GUI portion busy and the user can't interact with. You can also display a busy gif image in the GlassPane.
Links:-
Official tutorial on GlassPane
Some helpful tutorials
Another tut
Oreilly's Swing Hacks is excellent.
You must be doing something wrong. Try the tutorial on How to Use Progress Bars. If you can understand how that code works, it should give you the direction for achieving the required feature.
Note that progress bars are usually modal.

generically detecting html position changes using jquery?

I'm using the excellent BeautyTips plugin as a means of indicating validation failures to end users and I'm running into positioning problems whenever page content is dynamically added, removed, or animated.
Here's a concrete example. I have a DIV at the top of each page that’s used for confirmation/error messages. It's displayed in $(document.ready) using slideToggle(). This naturally "pushes" all subsequent html content down, throwing off the positioning/alignment of the beautytips. If I call the plug-in's built-in refresh method after slideToggle() has fired, said positioning problems are corrected. You can see the before/after screen-shots here and here.
One possible workaround would be to programmatically detect DOM changes, specifically changes to css, so that I could then loop over each beautytip and manually reload it. However, it appears that there are no native jQuery events which expose such functionality. I've seen the impressive jQuery plug-in by Rick Strahl that monitors CSS changes, but it seems based on the assumption that one knows ahead of time the specific HTML element(s) they wish to monitor. I want to monitor the entire document, since I can't be expected to know what html elements might exist on a given page that a) are going to be animated and b) would be at such a position in the document that they would "push" down the my beautytips. And I certainly don't want to have to incur the massive performance penalty of polling every block level element in the document.
I should mention that the plug-in works perfectly if I use it in its default "hover" mode in which beautytips are displayed only in response to user mouse input. Unfortunately, there is a design constraint imposed on the application that states all validation errors must be displayed after form submission without additional user interaction.
I'm sure there's a really simple/elegant fix that is completely eluding me. I could avoid all of this hassle, of course, by simply not using animation to display page content, but that seems like a high price to pay.

Glitchy screen redraws in flex application?

I have a flex/actionscript based project. The project has various view stacks and tab navigators and a few popup windows. The whole thing is managed in pureMVC framework.
When transitioning between various view states, opening a popup, switching a tab, etc, I find the app to exhibit various redraw glitches. Parts of views will be partially drawn or flicker in odd ways. I am fairly confident that the code is working correctly, just seems to be an issue with the overall heaviness of the UI.
Is this a common issue? Are their tried and true techniques to optimize this problem?
In particular what event handlers are available to delay the drawing of view components until the last moment when everything is ready to quickly display to the screen?
Say for example I have a VBox inside a viewstack, and inside this VBox I have a fairly complex datagrid. Can I prepare the datagrid and/or delay the viewstack change until all subview components are in fact ready to be quickly drawn.
What are some possible symptoms to this kind of glitchiness?
just a guess, but this might be related to the flex framework ... i experienced this kind of behaviour too ... i guess it is related to the way flex framework works when carrying out ui tasks ... a lot of deferred instantiations/calls and so on ... when there is a lot going on, the framerate drops and since deferring is framebased, that is probably when the resulting delays become noticable ...
greetz
back2dos
Not sure if this applies to you, but in Firefox/OSX there is a known bug when you make too many javascript calls, and the result is similar as you say... the whole interface shows various glitches and flickers... The solution was to delay the JS calls a bit, so they don't get called too often... this was a serious issue with swfaddress for instance (I think it still is).
http://www.bigspaceship.com/blog/labs/mac-firefox-30-flash-javascript-random-artifacts/
I assume you need the datagrid already attached to its parent container and you are loading data while it's being shown so it constantly updates and renders its content.
Have you simply tried setting its visibility to false until everything is loaded while keeping includeInLayout true and giving it a fixed size?