I would like to create animations compatible with Android2.3, using Adobe Flash Pro CS6.
Since I don't want to be dependent on Flash Player on the device, I would like to save the animation as HTML5.
So far, I used Swiffy to convert the swf output to HTML5 but it doesn't run on Android 2.3 device, only on Android 3 and up.
I read here that the reason might be that "older android browsers supports SVG, but not inline SVG. Only android 3 and up supports it."
I am an Android developer and not familiar with Adobe Flash Pro, but I would like to instruct my graphic designer how to create the animations or what settings to use when he creates the swf/html5 files so that they would run on Android 2.3.
Can anyone help or give me some guidelines?
Have you taken a look at Adobe Edge ?
Taken right from the description
"Adobe® Edge is a powerful, intuitive tool for creating stunning
animated and interactive content using HTML5, CSS3 and JavaScript."
Note that Adobe Edge is still in beta. Give it a try and see whether you will be able to leverage your existing skills in Flash.
Related
I'm trying to build a website using the technique described in this article: pure CSS parallax.
This technique requires browsers to support 3D transforms (and specifically perspective/preserve 3d).
It's working on the majority of devices and browsers no problem, and where it doesn't it is easy to detect if it'll break (such as lack of transform-style: preserve-3d in IE, or lack of 3d transforms at all) and fix it accordingly.
However, one browser stands out in exceptionally f*******g me over when I try and make it compatible to any degree - Android stock browser. Versions of the browser on Android 4+ support css3d transforms but are completely incapable of rendering them properly, with the big bug being that -webkit-perspective: 1px, while technically supported has absolutely no effect in this case (transform: translateZ(xpx) elements).
As far as I see it I have two options:
Detect the Android stock browser and serve CSS accordingly
Detect perspective not to be working and serve CSS accordingly (unlikely)
I've yet to find a foolproof/futureproof, elegant way of detecting the Android browser on the back end with PHP, with the only options being hefty API's and what I consider to be lacklustre abuse of mobile detection libraries.
I have absolutely no idea how I'd go about doing no.2.
Any help appreciated
I am developing an advertisement application which plays multiple videos. I have faced a very strange problem: nor the simple Video nor the StageVideo are not visible when I run the app on target android device. Even FLVPlayback is not visible.
I can hear the audio but the only way to get the video is to press back button and then get back to app. In this case the video is displayed on the top of the rest display objects. This happens only on a target device which is a chinese sibo android tablet. It has android 4.1 on board. As I see a lot of people had the similar issue with different devices:
http://forums.adobe.com/message/5429125
but the solution they have mentioned there -adding true to the manifest xml doesn't fix my issue.
Adobe also advises to do it
http://forums.adobe.com/message/4914005
I am using adobe air 4.0 sdk and the air 4.0 runtime on the device. I have tried to change renderMode to CPU/Direct/Auto but it doesn change anything.
The other three android devices I have - toshiba thrive tablet(4.0.4)/ eken tablet(4.2.2)/ htc desire c smartphone(4.0.3) play all the video content just fine.
I guess the problem is re: their custom firmware(it auto hides all system bars..etc in order to make it work in 'kiosk' mode) but wanted to try all the variants before give up on this.
Any advice will be highly appreciated.
Thanks,
Max
After hours of scouring I did find a solution for AIR 4.6.0.
add backgroundAlpha to application node in the FLEX xml:
<s:Application backgroundAlpha="0.0" ... >
in the app.xml, change the namespace to highest version (3.7)
<application xmlns="http://ns.adobe.com/air/application/3.7">
and under the <android> node, add this
<containsVideo>false</containsVideo>
these are the references I found:
https://community.adobe.com/t5/flash-player/12-11-2012-air-3-5-runtime-and-sdk-update/td-p/4661723
https://help.adobe.com/en_US/air/build/WSfffb011ac560372f2fea1812938a6e463-8000.html#WS1B1ABBB6-F1D9-43f0-BC3E-0135F15FFAC4
No video when using spark VideoPlayer AS3
https://issues.apache.org/jira/browse/FLEX-33856
https://issues.apache.org/jira/browse/FLEX-33896
I have found a way how to force this unfriendly tablet to play the video in Adobe Air app by encoding it into FLV format and then embedding it into a swf via Flash pro. In this case I had to sync the app and video framerate(24fps). I have also set usingVideo flag to false in app descriptor.
Playback quality and performance are not very good but it's the only working method at the moment - I guess those can be improved by tweaking flv encoder params.
Update 4/3/2014
As the video playback embedded into swf was awful on the target device I have decided to download all the android versions of air runtimes starting from 3.1 and test normal video playback on these. Finally I have got the following results:
3.1.0.557 - NO
3.2 - YES
3.3.0.365 - YES
3.4.0.254 - NO
3.5.0.60 - NO
3.6.0.609 - NO
3.7.0.186 - NO
3.8.0.147 - NO
3.9.0.141 - NO
4.0 - NO
In the end I have found the solution - I have uninstalled all modern versions downloaded from google play and installed 3.3.0.365. I think my experience can be useful for those who develop AIR apps for android where target devices are noname low-end android tablets.
PS. I found another possibility to make video playing by using an swf embedded into an html page and displayed by StageWebView but this method has so much obstacles(FP security rules, ExternallInterface barriers) so it has no sense to implement it.
I have a web application, not a native Android app, and the animated gif we use as a loading icon doesn't show its animation. I've browsed other sites and it seems that no animated gifs work in Safari mobile on Android, but I've been unable to find a documented confirmation that this is the case. Does anyone know why the android browser doesn't show animated gifs? Is there a workaround for this? I've seen lots of topics about showing animation in a WebView in a native app, but none for straight web apps. Do I have to create the image with css animation?
Thanks very much!
Android uses webkit which is the underlying engine from Safari, not Safari itself.
Historically it has not supported animated GIFs due to the way the graphics are composited, however they can be optionally enabled by the user under the advanced settings of the browser on some more recent devices. That probably does not make them useful to you.
For wide compatibility with various android versions you would probably be better off with a javascript or css animation (not sure if the later works all the way back through the earliest releases).
After running tests with a project I'm working on, I can say that:
gifs display beautifully on iOS devices (I'm testing on an iPhone4 running iOS6 and gifs run smoothly. I have tested on newer devices as well...it only gets better!)
gifs display pretty badly on android (I'm testing on Galaxy S3 running android 4.1). Its even better to display a flat image, the gif animation lags a lot).
I am developing an Android app using web technologies and the CSS transitions (quite essential to the functionality of the app, since they're responsible for scrolling and swiping pages) are quite sluggish.
According to information found on the internet, CSS transitions are not hardware accelerated unless transformed 3-dimensionally. I found many articles saying that I should put "-webkit-transform: translateZ(0);" to my animated elements.
However, the Webkit in older Android versions (below 3.0) doesn't support 3D transformations.
Can I embed a newer version of WebKit with my app?
Can I embed a newer version of WebKit with my app?
In theory, perhaps.
You would have to completely rewrite WebKit to use something that the NDK supports for output (e.g., OpenGL) and embed it in your app. I estimate that this will take >100 developer-months, so if you have a large team and matching budget, you are welcome to try this. By the time you complete the work, the "older Android versions" will be obsolete, and you will not need the code.
Hence, from a practical standpoint, either redesign the apps such that CSS transitions are no longer "essential to the functionality of the app", or limit your app to Android 3.0+ and wait for the Android user base to catch up.
I recently finished the first iteration of a game concept I was working on for mobile phones or browsers. My plan was to use PhoneGap and write it in JavaScript/HTML and port it everywhere. Because I wanted to be light on graphics and support any number of resolutions and orientations, I built this use SVG. I have been testing in Chrome and figured that the same SVG support would be on Android...
Well after doing some Googling, I see that the android devs specifically left out SVG rendering from the browser... I assume this means that once I convert my app into PhoneGap format, it won't run on Android. Is there any way to bake-in SVG rendering with a PhoneGap plugin or something, or am I SOL?
I saw that Honeycomb has support for SVG, does anyone know if they plan on backporting this to 2.2, 2.3, etc? It seems to be a huge oversight that if you want to support multiple resolutions and screens you wouldn't incorporate a technology than can dynamically create graphics.
As you mentioned in your question, support for SVG was compiled into the Webkit browser for Android 3.0. I just tried the Android 3.1 emulator, and it is working there as well:
So it appears as though, for future releases, we can probably count on SVG support being included in the Webkit browser.
I am not aware of any work being done to bring SVG to the webkit browser on earlier versions of Android.
You might be able to use canvg which uses javascript to interpret SVG and draw it on the canvas. I expect performance will be too slow for a game, though (I've not tried it myself yet)