flash to html5, How to - html

I have a good knowladge in web development , But in this situation, I'm trying to find the best way to convert flash site to html5 where it supports in all modern browsers and compatible with iphones and tablets,
http://www.undergroundcathedral.com/
Please do visit the above link, currently it works in flash, I want to convert it into html5,
I would be glad if any one can suggest me a way of doing it, with complete guidance tutorials, and links,
I drew lines in a html5 canvas but, couldn't find a way to make them anchors. I hope to add onmouseover event to play the sound and to pop up the image,
Suggest me the best way,
Thanks in advance :)

Google has a good service for this use called Swiffy. It is also availible as a plugin for Adobe Flash Studio, if you use it.

From as far as I know Adobe Flash CC has the ability to export, including apps built using ActionScript, into HTML5 + JS + CSS web apps. Take a look > http://tv.adobe.com/watch/creative-cloud-for-web/adobe-flash-professional-cc-overview/

Related

Possible ways to implement voice recording functionality without flash

I know it would be hard to implement a web-based voice recorder without using flash, but is there any existing API that could help make this possible to achieve? Is HTML5 media feature matured enough for this space?
Thanks guys :)
Web Audio API is quite mature, and supported by many browsers (even on mobile).
You can implement your audio recorder starting from
this example
this plugin

HTML5 video capture and streaming?

I'm working on kind of an educational site, where there are teachers and students around the world (potentially). Since it's a non-profit site, and I don't have the need for it to be done tomorrow (kind of a side project of something bigger), I wanted to know the best way to figure out how to do this. I'm not a programmer by trade, I've been on the systems side of things for years, but I understand most technology and the question here is more how to gauge what to do so I can get the right resources in place.
That said... here's what I am looking at. I figure the future is HTML5, and that's probably where I'd rather spend my efforts given that it will be cross platform and without the need for plugins. It will work on mobile as well. Question is, how well does HTML5 handle input media, say desktop capture and camera, or on mobile perhaps, where I'd want to use the user's phone camera, etc.
Second question is dynamic streaming... I've read about MPEG DASH, then there are technologies like Smooth Streaming (which I think given the way Silverlight is going is going to be gone or useless), then also Apple and Flash, but if I'm doing HTML5 it doesn't benefit me. Any ideas here would be really helpful, and the more detail the better! :)
That's about it... there are free chat services out there like using the MSN Web Chat controls (how good they are, I don't know, but worldwide most people have a Hotmail/MSN account) so I can use that for chat. I don't know its limitations of course, but that's something if people know or have suggestions, then I'm all ears.
As far as I know the video tags doesn't support input media as such, all it does rather well for the moment is play video files IF the file formats is supported by the given browser (different browsers different extensions) Also I have seen out there a solution where someone stream their own webcam into the video tags but that was on Mac only and using other technologies to help out.
The video tag is not supported by all browsers either, recent modern one will but if you need to support IE flash is still a better alternative way to provide videos across all platforms.
Streaming is only partially supported by some browsers and is not an easy task to achieve.
Here is few links that might help.
http://ishtml5readyyet.com/
http://html5readiness.com/
https://developer.mozilla.org/En/Media_formats_supported_by_the_audio_and_video_elements
There are actually several posibilities to do this since HTML5 makes it super easy to stream most the basic input using video tags is however very much limited because you won't have actual access to the bytes like you would want.
But to convert something basic like mp4 to html5 compatible video just use this converter tool:
http://easyhtml5video.com/

Embedding audio in a web page

I'm currenlty desigining and building a website where I need to embed some audio files (some 60sec extracts from various tracks from a band's album) so people can listen to their material quickly without having to download any files to their desktop etc.
I know QuickTime was a favourite in the past (perhaps it still is?) but I've had some experience with lag and poor load times of a web page because of this. Also, I understand there's an tag in HTML5 but I wonder about compatibility?
Really I just wondered if anyone had any recommendations on the a tried and tested approach to accomplish this?
Not an ideal solution, but I went for a Flash based plugin in the end - seems to work resonably well on compatible devices (shame it's not particularly well supported on mobiles/tablets etc. though).
Give 'dewplayer' a Google if you're interested...

Download youtube videos with flash

I'm new to flash, but I understand most concepts of it and had great progress so far.
I was wondering how hard it would be to say download a youtube video and what components/functions I would have to use. I know its possible since I've seen an Adobe Air app that does it.
Take a look at the Youtube Chromeless Player!
This depends on what purpose you have with your YouTube application. Depending on what you want to do you can go several different ways
If you want to use the in-built flash functionality, use the flash API. http://code.google.com/apis/youtube/flash_api_reference.html
The best solution (i think) is to use the JS api, it has a lot of tweaking options for playlists, start/ stop function, cusumization (such as the chromeless player mentioned above). Available here: http://code.google.com/apis/youtube/js_api_reference.html

Capture image from camera into form or html5 canvas

I need to capture an image from a webcam (tethered camera, etc.) into a form or html5 canvas so that I can save the image to the server. Also, I would like to be able to preview the image live in the page.
For example, I have a browser running at a registration check in station. I would like to take a picture of the attendee currently standing in front of the table, and submit that image into the database. Then I can use that image to print the attendee's badge with their picture on it.
I'm using rails and paperclip, though I doubt that matters.
Anyone done this before, or have some ideas how to do it?
There is a plugin for jQuery entitled 'jQuery Webcam Plugin' that provides a friendly and easy way to interact with a webcam. It actually relies on a small flash component (unfortunately), but it does a great job of making the interaction easy - as well as providing functionality to copy imagery direct into an HTML5 canvas.
Again, it's unfortunate that it relies on Flash, but I think any reliable solution is going to need flash at this point in time.
The plugin is available here: http://www.xarg.org/project/jquery-webcam-plugin/
At present, if you want to interact with a web cam from a web page you need to look at using a plug in. Flash has a mature interface to web cams, so it would be my first choice of tool.
There used to be a spec for native web cam support in HTML 5, but it has been spun out into its own, independent, specification. Currently there is no browser support for it outside of experimental Opera builds.
Android >=3.0 (on plenty of tablets and one phone soon) is supposed to support this. Searching for "html media capture" and "device api" will get you a lot more information.
On the not-even-alpha bleeding edge side, there are things like webrtc and the mozilla rainbow plugin.