how databinding really work in actionscript - actionscript-3

I was wondering if it could be possible to create a databinding system in pure actionscript without using mx.binding.utils.
At least I would like to know what is the overhead of the databinding code and how exactly the ChangeWatcher knows when a property has been changed.
Thank you!

Check out the Diving in the Flex Data Binding Waters by Michael Labriola: http://www.ruffkutmedia.com/tutorials-diving-in-the-data-binding-waters-by-michael-labriola.htm (video) - slideshare here: http://www.slideshare.net/michael.labriola/diving-in-the-flex-data-binding-waters-presentation
There's a lot of work that goes on behind the scenes when you bind data, but he gives a really good explanation of how it works. It's a bit awkward to create something that works automatically unless you're passing through a "compile" phase where you add code.
You can also check out the as3 commons byecode project: http://www.as3commons.org/as3-commons-bytecode/index.html which should let you add code at runtime

The flex compiler actually compiles your MXML/AS3 to pure AS3 before it compiles it all to bytecode anyway. So at some stage in the compile process, data-binding is actually being implemented with ActionScript.
The problem is that Flex adds a bit of syntax specifically for data-binding. There is nothing stopping you from creating a data-binding system in AS3, but there are limitations, such as you would have to do it in an AS3 way.

Related

How to "convert" a simple flash project to HTML5 using OpenFL

I have to "convert" some flash projects to HTML5/JS but I don't really know how I can do it :(
This flash projects are little "activities" like this one :
https://www.brainpop.com/artsandmusic/artconcepts/cameras/activity/#=standard
I did some research about it, but i'm a bit lost...
I found other people asking the same question and a lot of responses are to use Haxe/OpenFL and as3hx (https://github.com/HaxeFoundation/as3hx) but I don't really understand how to proceed...
Is it possible to load a .swf file with openfl-swf to create a similar .html file ?
Should I convert AS3 to Haxe3 with as3hx ?
Is there a simple way to just get a graphic render of this activities without any interactivity so I can add manually input text field ?
I never used ActionScript or Haxe before.
If someone has any suggestions i'll be glad to hear it :)
I hope my explanations are clear, english is not my first language, so excuse me for any mistake.
Cheers !
as3hx will convert only as3 code to haxe openfl and may well need hand tweaking. To make the code more flexible try to avoid extending Sprite then potentially it will be easier to use your activity logic in more webgl accelerated haxe solutions like Kha and Luxe.
You probably need clean seperation of the code and the onscreen layout.
To run a fla swf that is mostly graphics in openfl you need to use the haxelib https://github.com/openfl/swf, it can be quite fiddly getting to different children or frames and the gradients are not perfect, just remember when using it that it's not the same as accessing a child normally your using a structure that is a bit different to do that.
Alternatively you may find flump useful it can be used with openflump.
https://github.com/SavedByZero/openflump exports from flash IDE.
It converts lots of your graphics to png sequences in nested structures, it would probably be worth rebuilding textfields yourself.
Openfl js can be slow I suggest you do some tests before committing to a solution, since Kha or Luxe may provide you a more shader modern approach to graphics than a flash emulation api solution, but then all you assets largely need to be images.
I doubt if there is any ideal way but getting your logic in Haxe is really good idea because then you can do c++, c#, js etc.. The first step if you choose openfl is to perhaps to try just porting parts of your code to haxe and then use them as a swc in your current projects this will allow you to gradually check your conversion and fix an issues easily within a haxe flash approach prior to trying to do the same in html haxe. You may find the swf library is not ideal for html5 and that png's are the way to go, Animate now provides export png sequence which I have used in starling as3. Another approach to consider is the away3d plugin for Animate it can convert flash timeline into typescript away3d (2D ) that you can control with javascript code ( even haxe you may have got from as3hx if you remove some of the flash specific haxe and adjust it to work with the away3d 2d but I guess it could be very complex ).

FlashDevelop ? Do i still need Flash CS

I am fairly new to Flash and AS3.
My questions is do I actually still need to use Flash CS6 to setup the stage and library files.
Or can it all be done from FlashDevelop ?
Thanks
Flash CS6 is an application similar to Photoshop, you generally use it for creating/structuring/positioning graphical resources and then makes it possible to animate these (from keyframe to keyframe) and then access the graphical content from code.
So, the answer is no, you can create a SWF file without Flash, you can embed content to use in AS3-code without flash and you can use flex-components and position them without flash.
But creating any bigger project like that would be pretty unnecessary since you just as well could use some other language or tools for doing that kind of stuff. Tools and languages that were designed to do this specific thing.
Few months ago I switched completely to FD and since today I successfully built everything only in FD. The reason was that I had huge project to publish, and I couldn't compile it in Flash because of memory shortage for JVM compiler. With FD that was not a problem.
So in short, no, you don't need flash any more.
Though maybe there can be some things that you can create quicker and easier way in Flash than in FD (for example: some timeline animation and then publish to SWC to use with FD).
I still have Flash installed, just in case for quick animation jobs.
You need it if you want to create graphic objects to use them later in your code. The alternative is to create everything by code
It depends. If you need to use vector graphics, drawn in Flash, then the easiest way to incorporate them in your project is to use the IDE-based project (http://www.flashdevelop.org/wikidocs/index.php?title=Projects#AS3_Flash_IDE_Project). This isn't the only way, but it's easier than packaging them up and using libraries. In this case you are effectively using FD just as an external AS editor (and it's worth doing it just for this, since it is a much better editor than the one built in to Flash Pro.
If, on the other hand, you are working with objects drawn in code, with text, or with external bitmaps, then no, there's no real need to use CS* at all.
The advantage to OOP is having an environment like Flash for layout. It's been pretty crucial for me as a designer and when implemented correctly with a proper class structure, becomes extremely powerful. It really depends on what you are using as3 for. I find the Flash architecture to be most advantageous in the context of interface design, but for things like games or "static" interactives, sometimes its much more efficient to do everything in code and compile outside of Flash.

Isn't creating a Flex skin by copying code a Bad Thing?

I've created a number of skins for various components recently. Some of these were for Spark components and the default behavior of Flash Builder is to take the source code of the original skin and copy into your skin as a starting point.
Normally, I am 90% ok with the original skin, I just want to tweak or add one little thing. It seems to me that duplicating 3 pages of source code to do this is a bad idea. What do I do when I upgrade Flex SDKs? Do I have to go back through the source of all these original skins and (re)compare? This sounds like a disaster.
Is there a way I can create a new skin in MXML that inherits from the old skin? Can I do this via ActionScript?
If you upgrade your Flex SDK I don't think there should be any modification in the skinParts of components. Anyway if there were, you would have a compilation error if one of your implemented skinparts is not of the right type or if you miss a required skinPart. So I wouldn't worry if I were you :)
Another tip would be to use as much as possible CSS styling to avoid this kind of problems.
And no, I don't think you can inherit from a skin and modify its elements (but I'd be glad to be proved wrong).

Flex 4 skins & binding

I love skins in Flex 4 - they offer a really nice separation between logic and styling.
I was wondering how people use binding in skins. The easiest way is to just bind in the skin:
label="{ hostComponent.model.buttonLabel }"
you can also use 2 way bindings:
selectedItem="#{ hostComponent.model.selectedItem }"
but you could argue that this is logic so it should really be handled in the component. You don't really want to re-create all the bindings each time you create a new skin. That seems fragile and prone to creating bugs.
So what are the alternatives? Creating a bucket load of event listeners I suppose. The adobe observe and observeValues tags could be useful as well I suppose.
How do others handle this?
I think it's a good and interesting question. There are a couple of alternatives. I suppose you could inject the model into the skin and bind directly, but that seems wrong because I think the skin should be intimately connected with the component - if the component changes its reference to the model, it automatically changes in the skins. And anyway it only exaggerates the problem you mentioned.
You can create ids in the skin and operate on them from the model. For example
SKIN: label id="infoLabel"
COMPONENT: [SkinPart] var infoLabel:Label
creationComplete {
BindingUtils.bindProperty(this, 'infoLabel', model, 'infoLabel');
}
This solves your problem. No repetitive maintenance between skins of the same component. However using BindingUtils comes at a cost. Firstly it's not as evident what is bound to what - using the {} way is just so much more obvious. Secondly (I suppose this is actually just part of the first point) you might confuse less-able developers that have to read your code and figure out what's going on.
EDIT: This assumes your component is in AS3. If your component is in MXML, I guess you can just bind as you normally would in MXML.

Flex Builder 3 code hints

In Flex Builder, when I create an .as file in a non-actionscript/flex project, the code hinting doesn't seem to work.
Is there a way to get code hinting to work when working on a .as file that's not part of an ActionScript/MXML project?
UPDATE:
The Outline functionality also doesn't seem to work in the same situation. It would be nice to get that working as well.
can't get it to work either ... this must be somehow related to eclipse's project/file management ...
if you really want to code AS3 however, than FlexBuilder really is not your IDE of choice ...
personally, i use FlashDevelop for AS3, but it needs windows ... it's worth virtualizing though ... also, it does a very smart completion on any as files and it supports AS2 and AS3, works quite alright with MXML, and provides rudimentary support for HTML, CSS, XML and PHP ...
apart from that, there seems to be quite a good textmate plug in for as3 ... but i really don't know of anything decent for linux ...
well, there's always FDT, but i somehow don't like it, and in my eyes it is too expensive for the features provided, that i'd use ...
greetz
back2dos