Hi All,
So, I already know that native objects can not be placed inside display groups but whenever I perform a Storyboard transition (like slide left, right, up, or down) I notice that the native object does not follow the movement of the transition. It simply appears once the scene is in full view or vanishes as the scene is moving out of view.
Does anyone know how to make the native object move along with the rest of the display objects during a Storyboard transition?
Thanks
I don’t think you can. It’s a shame as I’d like to implement the same sort of functionality in my app like the native calendar app has when adding a entry, i.e. it scrolls up the ‘add new entry’ window that has a bunch of native text fields on it.
we implemented two different things on the last project i did:
when the view/app was ready to move the display, we added an enterFrame listener to the code. the handler was responsible for tracking the motion of the app (specifically, what would be the parent group for the native object if it could be added) and moving the native display object each frame using x,y coords. when motion was complete, we removed the listener.
for large items, say a map, the android devices couldn’t keep things in sync. so we created a background behind the map. when motion started, we hid the map (native object) which revealed the background – this kept a visual placeholder for the user so it wouldn’t be so jarring to see a missing element. when motion was complete, we made the native object visible again.
cheers,
dmc
Interesting Idea dmccuskey,
I was able to create a transition for the native object that goes in the same direction at the same time as the scene transition. The transition is in the exitScene handler. BUT BEWARE! Make sure that your transition has completed before you purge or remove the scene that contains the native object.
Jesse Warden has a great video that explains how to create your own custom scene transitions.
http://www.youtube.com/watch?v=7zMoMMFXI88
I think that in using the ideas he explains in his video would allow us to perform transitions that include native object as well.
Just read this in the tutorial and thought you might find it interesting
Overall, it depends on the needs of your app, but here are some suggestions as to things you might do to make native elements blend into your app a little better:
Use rectangles, rounded rectangles, and text objects to serve as “placeholders” for your native objects. When a user touches the placeholder, display the native object directly above while the user is editing. When the user finishes, update the placeholder to match and remove the native object.
Do transitions, etc. on your placeholder objects.
Hide the background of text boxes (with the hasBackground property) and create your own background (using a normal Corona display object) to truly make text boxes blend in with your app.
which tutorial is that ? do you have a link ?
thanks,
dmc
Sadly I cannot find it now but it was one of the tech tutorials from here
Oh, OK. I think I know what you’re talking about now! =) Sweet.
When Entering A Scene That Contains A Native Widget:
I put dummy display objects (images that closely resemble the native widget) on the screen to simulate the native objects. Then performed my transitions. After the transition ended I placed the actual native widget on the screen in the exact location of the dummy and removed the dummy.
When Leaving A Scene That Contains A Native Widget:
I hid the actual native widget and showed the dummy display object. Then performed the scene transition.
It works beautifully! The DOWNSIDE to it all is that I must create a different dummy native image for every platform I deploy to. The IOS TextField (on the device) looks different from the Android TextField (on the device).
I think I will create a blog post about it.
Thanks Everyone!
pls keep me posted … ta
I don’t think you can. It’s a shame as I’d like to implement the same sort of functionality in my app like the native calendar app has when adding a entry, i.e. it scrolls up the ‘add new entry’ window that has a bunch of native text fields on it.
we implemented two different things on the last project i did:
when the view/app was ready to move the display, we added an enterFrame listener to the code. the handler was responsible for tracking the motion of the app (specifically, what would be the parent group for the native object if it could be added) and moving the native display object each frame using x,y coords. when motion was complete, we removed the listener.
for large items, say a map, the android devices couldn’t keep things in sync. so we created a background behind the map. when motion started, we hid the map (native object) which revealed the background – this kept a visual placeholder for the user so it wouldn’t be so jarring to see a missing element. when motion was complete, we made the native object visible again.
cheers,
dmc
Interesting Idea dmccuskey,
I was able to create a transition for the native object that goes in the same direction at the same time as the scene transition. The transition is in the exitScene handler. BUT BEWARE! Make sure that your transition has completed before you purge or remove the scene that contains the native object.
Jesse Warden has a great video that explains how to create your own custom scene transitions.
http://www.youtube.com/watch?v=7zMoMMFXI88
I think that in using the ideas he explains in his video would allow us to perform transitions that include native object as well.
Just read this in the tutorial and thought you might find it interesting
Overall, it depends on the needs of your app, but here are some suggestions as to things you might do to make native elements blend into your app a little better:
Use rectangles, rounded rectangles, and text objects to serve as “placeholders” for your native objects. When a user touches the placeholder, display the native object directly above while the user is editing. When the user finishes, update the placeholder to match and remove the native object.
Do transitions, etc. on your placeholder objects.
Hide the background of text boxes (with the hasBackground property) and create your own background (using a normal Corona display object) to truly make text boxes blend in with your app.
which tutorial is that ? do you have a link ?
thanks,
dmc
Sadly I cannot find it now but it was one of the tech tutorials from here
Oh, OK. I think I know what you’re talking about now! =) Sweet.
When Entering A Scene That Contains A Native Widget:
I put dummy display objects (images that closely resemble the native widget) on the screen to simulate the native objects. Then performed my transitions. After the transition ended I placed the actual native widget on the screen in the exact location of the dummy and removed the dummy.
When Leaving A Scene That Contains A Native Widget:
I hid the actual native widget and showed the dummy display object. Then performed the scene transition.
It works beautifully! The DOWNSIDE to it all is that I must create a different dummy native image for every platform I deploy to. The IOS TextField (on the device) looks different from the Android TextField (on the device).
I think I will create a blog post about it.
Thanks Everyone!
pls keep me posted … ta
I’m also pondering how to simply/elegantly tackle the “create a different dummy native image” for each platform…
How did you get along and anything to share?
G
Hi G,
I created a helper “class” that enables me to create the native TextField, the dummy text field, and the dummy text with one call to my “class” method. The “class” also handles the visibility of the dummy text field and text on the focus events and the removal of the native object after transitioning.
It works well except I don’t like the apparent contrast between the native TextField and the dummy text field and text when viewed on the actual device. I am played around with using an image that simulates the native TextField for a specific device but I can still see the change. Trying to position and size the dummy text to match perfectly with the text in the native TextField was a headache.
So in one project (a business app) I altered the UX design of the screen to show only the dummy text and NOT the dummy text field when the native TextField has no focus and is invisible. When the native TextField loses focus a transition is done to fade it away and fade in the matching dummy text.
In another project (a game app) I do not use any native objects. I simulate the TextFiled. It looks like a stylized command-line text entry (complete with blinking vertical mouse cursor). That one took some time to pull off.
I’ve been very busy making deadlines for a few important projects including a video course on Corona SDK. I will try to carve out a little time in between to post my experience and code soon.
Theo
Thanks - I’d really like to see a quick example of that business app where you fade in/out a dummy text field to see how viable this approach is… most seem to suggest it isn’t and looks aweful.
This is where I wish Corona focused more on getting this stuff right and less on adding more features when the existing features are sub optimal.