how to convert flash based interactive animations for iPad - javascript

I am trying to develop a mobile app(iPad) for a client who has an e-learning website. The website consists of quite a few simple flash based interactive animations. I would like to know which would be the best way to proceed??A native app or a html5 based app. If so how do I covert the flash based interactive animation for the ipad.

You can use Adobe Edge for developing HTML5, CSS3 based animation which works very well in ipads.

If you want the exakt animations and have flash cs you van download the createJS plugin which allows
conversion of timeline animation to Javascript code. Doesnt work if its AS3 coded though I think.

Related

Is it possible to replicate Flash banner to HTML5 CSS3 and JavaScript 100%

I just want to ask if I want to replicate or copy (100%) an animated web swf banner or flash banner file.... Is it possible to to be 100% copied.?
Thank you for your help.
Depend also of your tools.
If your are in Adobe ecosystem, Wallaby was the first Adobe attempt to do such things . Now, CreateJS is a library adopted by Adobe as a replacement for Wallaby, works as a plug-in inside Flash Professional and uses HTML5 Canvas for animations.
Other "free" tools:
Google Swiffy that converts SWF files into HTML5, using SVG for graphics and JavaScript for animation
Mozilla Shumway, a Flash virtual machine written in JavaScript.

SVG or PNG for html5 android game?

I created html5 android game. It uses simple ball which is device motion moved. For moving ball I use setinterval in javascript and change position for ball element.
So what is better to use for better rendering and perfomance? SVG or PNG ball? And other elements in game, like coins, lifes etc.
It seems like game is much smoother if i run it in chrome browser on mobile (android 5.0.2) then in webview. I use phonegap build and set miniandroid sdk level 19. (4.4), because i read that webview in 4.4 uses chromium engine.
For my game i use svg for all elemnts.
I prefer using <canvas> for HTML5 games since it is hardware accelerated. You shouldn't use png's since having to move a lot of them at the same time can be very costly/slow.
The downside to this is that you will have to create all object management methods/eventhandlers yourself (onclick, onmouseover etc.) or use a game engine which already implements all of this.
Anyhow if you're going with either plain html elements or svg, I would go with svg.

Can CreateJS be used for Mobile App Development?

I am given a mobile app project and I'm looking at the technologies I can develop the app with. It is a mobile app to be used on tablets and smartphones. It will involve animations like fading in menus, changing opacities, transitions between pages, some minor sound playbacks... But it is not a game. I need to be able to use HTML elements like tables or divs with auto-overflow.
I started to create the app using HTML 5, CSS3, JavaScript and JQuery. But there are some problems I run into, like, animations being laggy, CSS3 not behaving the same, "touch" events behaving very differently, sound playback not being exactly the same among different browsers.
I recently saw that there are some JS libraries to make high performance animations, like CreateJS. My question is that should I use a library like this to create my mobile app? Or are such libraries only for game development?
CreateJS is not specially adapted for game development, there is no "game engine".
It just allows you to easily manipulate shapes, images, sounds in layers (Containers) like Flash.
Supports touch interactions in iOS, modern Android browsers and IE10.
So yes, you can use this library to create mobile app and you can combine it with jQuery.
I have successfully used createjs in mobile projects. I would recommend reading the SoundJS Mobile Safe tutorial (http://www.createjs.com/tutorials/Mobile%20Safe%20Approach/).
Hope that helps.

Non-Canvas graphics in web pages

I am a complete novice at web development and I am wondering a few things about graphics rendering using JavaScript (not Flash or some other plugin). For example, is it possible to render arbitrary graphics (e.g. lines, curves, text, images etc.) inside a web page without using the Canvas feature found only in HTML5? I ask because I believe I have seen Google for example showing interactive graphics for one of their logo enhancements on their homepage for special anniversaries and the like before HTML5 was around and currently in browsers which don't even support HTML5. I also remember seeing animations in web pages during the 90s that were done in pure JavaScript.
So:
1) Is such graphics rendering possible using pure JavaScript?
2) If so, which APIs or libraries are being used?
3) Is it possible to decorate standard HTML controls with arbitrary graphics?
I am trying to determine the bounds of what is possible in a web-based UI.
For example, is it possible to render arbitrary graphics (e.g. lines, curves, text, images etc.) inside a web page without using the Canvas feature found only in HTML5?
Yes. Have a look at SVG, which has been around in some form or another since... 1992 or thereabouts.
There are plenty of docs and tutorials on the Mozilla Developer Network.
I ask because I believe I have seen Google for example showing interactive graphics for one of their logo enhancements on their homepage for special anniversaries and the like before HTML5 was around and currently in browsers which don't even support HTML5.
You saw SVG, which Google has used for Google doodles in the past and still uses for all sorts of stuff (portions of Google Maps on some platforms).

Image viewer in html5

I have to develop an image viewer application. The designed application should have the following features
Zoom in functionality
Zoom out functionality
Magnifying functionality
Pan functionality
Image overview functionality
I have to develop the application in Asp.net application. I have the following questions
What will be the better method to develop such application , I mean Whether it is implemented using Asp.net controls or standard HTML controls
Have any scope of HTML5 in developing such application?
Can i get any customizable open source project written in javascript or jQuery?
My answers to your questions:
I would use HTML, since you don't need anything from the server.
There is, you can search google for info.
Look at the info below.
I would try the following steps:
Look for examples of the required features.
Strip these examples down and build them up again according to your requirements.
Create a holder for the image. You can load the image from the server with jQuery and AJAX
Implement controls for zooming, panning. Use the implementation you created in step 2
There is alot of information to be found on the internet. Some examples are:
Zooming
http://www.tripwiremagazine.com/2012/07/jquery-image-zoom.html
Panning
http://manos.malihu.gr/jquery-image-panning
Overview
http://www.designzzz.com/jquery-slide-show-image-gallery-tutorials-downloads/
Tutorial for pan and zooming with HTML5 canvas
http://my.safaribooksonline.com/book/web-development/html/9781449308032/images-on-the-canvas/zooming_and_panning_an_image
For me,
I would use HTML,
Use HTML5 and CSS3 if you can,
Yes, there are plenty. Just type what you need. It seems what you are building is a image slider/gallery. Plenty of those on the web. Just look for it.
If you have to build it from scratch, what you could do is research, these css properties. scale, zoom, and transitions.
There you go, hope I pointed you in the right direction.

Categories

Resources