Om, Check this out;
https://jsfoo.talkfunnel.com/2013/788-using-randorijs-and-kontikijs-to-create-2d-webgl-based-games-from-existing-starling-as3-code Load this in Chrome; http://renaun.com/html5/randoristarlingtest/hero.html That whole thing and the Starling framework was cross compiled with the Randori compiler I wrote. :) It uses the same as code! Renaun had to make tweaks but this shows what we could do if we wanted to. Mike On Tue, May 19, 2015 at 3:36 PM, Michael Schmalle <teotigraphix...@gmail.com > wrote: > Ok thanks Om, lots to think about. Some more questions. > > I am still a bit naive with HTML and SVG. Can SVG be used to skin an HTML > button? Or is it that you have to "Wrap" an html button with an SVG tag to > pretty much draw under it? > > I love the idea of a Spark like skinning system and would totally help on > this, I am just trying to see how it would be implemented and how it > coincides with the HTML side, the AS side is obvious, the HTML side the SVG > is a child of the this.element? > > Question: Is SVG meant to be interactive like a Button element or is it > meant for graphics. I am just trying to see the point at which the > component in html is either SVG or an HTML element. Since you say the SVG > is just created on the DOM, then aren't you saying that the SVG element is > just a child of the main component? > > Do you have any prototypes of this going? > > Mike > > > > > > On Tue, May 19, 2015 at 3:21 PM, OmPrakash Muppirala <bigosma...@gmail.com > > wrote: > >> On Tue, May 19, 2015 at 11:29 AM, Michael Schmalle < >> teotigraphix...@gmail.com> wrote: >> >> > Ironically Om, this was my next post! SVG and what are we doing to use >> it. >> > >> > Maybe through all my bable of the last thread some might see where I am >> > coming from, I am really trying to figure out, what are we building on. >> > >> > Now SVG I understand, Canvas I understand. >> > >> > Om, what are the pluses and minuses of each paradigm? I was just reading >> > about this today, canvas doesn't have event handlers, svg does. >> > >> >> Canvas is a fire and forget mode of rendering. Think of Canvas as an >> equivalent to Flash's BitmapData. Once you draw on a Canvas, you cannot >> get access to individual elements without doing a lot of complicated >> hittests or other kind of hacks. Moreover, it is a raster object. So, if >> you draw on a Canvas and resize it up, it gets pixelated. >> >> SVG, on the other hand is a retained mode of rendering. All elements >> drawn >> in SVG become part of the DOM. This means that you can do event handling, >> animation, etc. much more easily. Also, SVG is vector drawing. So >> drawing >> in any size and scaling keeps the rendering quality intact. >> >> Canvas is generally used for drawing a ton of elements in runtime without >> needing them to be individually interactive. SVG is less performant >> because of the added dom related overhead on each element, and is (should) >> generally used for building interactive UI components (charts, maps, etc.) >> >> >> > >> > FXG -> SVG, is there currently a parser/renderer for this? How were you >> > planning on doing this. >> > >> >> So, my first approach was to write an FXG to SVG transformer[1] stylesheet >> that I imagined would be invoked by the compiler. It turns out that doing >> it the 'FlexJS' way was much easier. Basically, I created the primitives >> - >> Line, Circle, Path, Fill, Stroke, etc. in the AS side [2] Then, I created >> their JS equivalents [3] where I draw SVG elements via JavaScript. That >> is >> pretty much it. The MXML/FXG parsing, cross-compilation from AS to JS >> etc. >> is handled automatically by FlexJS (magic for me ;-) ) >> >> The idea from here on is that anything you draw on the screen via AS3 will >> look exactly the same in Flash vs. HTML/JS. Here is an example of flash >> [4] vs html [5] Put them side by side and see if you can tell the >> difference :-) >> >> The next progression was to build FlexJS charts out of these. Here is a >> set of chart components that Peter Ent built on top of this core graphics >> classes: Flash [6] vs HTML5[7] There is a pretty detailed wiki page for >> these charts [8] >> >> >> >> > >> > Is this something we could write that would pretty much cross compile to >> > js? >> > >> >> Yes, I believe we are at a point where things are getting more and more >> cross-compiled as opposed to be hand-written. Of course, the beauty is >> that you can draw in MXML/FXG and you can see a drawing in the JS side. >> Pretty cool. >> >> >> > >> > Tell me your ideas, I am very interested in this part. >> > >> > >> My next few TODOs are to build a spark like skinning system in FlexJS. >> Basically create FXG skins on the AS3 side and mirror them with SVG based >> skins on the JS side. Peter has built a small example that will let me >> play around with event driven, states based skins. I hope to get on this >> as soon as I get my Git access back. >> >> Of course, the core graphics packages needs more love with things like >> RadialGradients, and more fancy graphics primitives. >> >> After that I would like to tackle animation. I haven't given a lot of >> thought into this, so not sure how easy/hard this is going to be. >> >> Thanks, >> Om >> >> >> > >> > >> > Mike >> > >> > >> [1] https://github.com/apache/flex-asjs/tree/develop/fxg2svg >> [2] >> >> https://github.com/apache/flex-asjs/tree/develop/frameworks/projects/Graphics/as/src/org/apache/flex/core/graphics >> [3] >> >> https://github.com/apache/flex-asjs/tree/develop/frameworks/projects/Graphics/js/src/org/apache/flex/core/graphics >> [4] http://people.apache.org/~bigosmallm/flexjs/drawing/flash/ >> [5] http://people.apache.org/~bigosmallm/flexjs/drawing/html5/ >> [6] http://people.apache.org/~pent/chartswf/ >> [7] http://people.apache.org/~pent/chartjs/ >> [8] https://cwiki.apache.org/confluence/display/FLEX/FlexJS+Charts >> >> >> > >> > > See this is my problem, Randori was a straight cross compile with >> shims >> > and >> > > worked awesome. So all my questions to you are like me "unlearning" >> what >> > I >> > > spent 6+ months working on in that project. >> > > >> > > The compiler's emitter just puked out js and we locked in SWCs in the >> > apps >> > > that used js API surfaces. >> > > >> > > Although, the one thing as you know was Mike disagreed with FlexJS's >> view >> > > in ActionScript because he said HTML/CSS designers should just do what >> > they >> > > do and design in HTML/CSS. >> > > >> > >> > I disagree fundamentally with this idea. For one, HTML/CSS is a >> terrible >> > terrible paradigm. No designer is happy with the way things work >> today. I >> > would rather provide a better way of doing the visuals via MXML+FXG >> (like >> > we do in Flex's spark skins) and cross compile them over to JS + SVG + >> > Canvas as needed. >> > >> > Even the HTML/JS world is waking up to this idea. This presentation [1] >> > does a great job of explaining why SVG is better than CSS for interfaces >> > building. FlexJS is in a great position to provide this out of the box >> to >> > developers. >> > >> > Thanks, >> > Om >> > >> > [1] >> http://slides.com/sarasoueidan/building-better-interfaces-with-svg#/ >> > >> > >
