For developing simple games with the Flex SDK, what are the consequences of using a Canvas object, versus a UIComponent object, as a drawing surface? Are there performance issues with either one? Are the methods generally the same? Searching around, it seems that most sample code I've found uses UIComponent. Is this just customary, or are there reasons?
I already know one odd difference - I had developed a simple Pong game using:
public class MyGameCanvas extends UIComponent
and then decided to replace UIComponent with Canvas. This caused the line to fail:
addChild(paddle);
After spending too many hours searching, I finally found that a Canvas object requires:
rawChildren.addChild(paddle);
due to the inheritance chain of objects, Sprites being higher than Canvas.
But that doesn't seem like a reason to prefer one class to another. Are there any specific reasons? Thanks.
Update:
Okay, I guess Canvas is out, and UIComponent is in. The only reason I even tried a Canvas object is the name. I mean, it's a Canvas - isn't that where you're supposed to do drawing? :)
So the second question that has popped up is about using the Flex SDK (and I don't know if this should be a totally new question, or here is okay).
However, I have to confirm something, being new to Flex and the various terminology. I'm presuming that people mean I should not be using MXML for games, when they said Flex SDK. Since I thought the Flex SDK was what provided the compiler that generates .swf files. Otherwise, where/how would I even compile AS3?
Assuming that's the case, then my question would be about the suitability of using both MXML and AS3 for (simple) games. Based on what I've read about both, it seemed like the intended use of them was MXML for the interface elements, and AS3 for everything else. Is the overhead that bad for MXML?
John C>
I think there is no point at all to use flex sdk to develop a game.
Flex SDK has been designed with application development in mind so you shouldn't use it to make games.
Do you have specific reasons to use it instead of a plain AS3 project?
Canvas has a bunch of extra layout code, plus scrollbars. It's definitely heavier than UIComponent alone. Also, it's important to know that Canvas requires all children to be subclasses of UIComponent. Using rawChildren to add non UIComponent is a hack unless you're building some sort of "chrome" for a Flex container (scrollbars on Canvas and the border/background in Panel).
I agree with PeZ, though. The Flex framework probably isn't the right choice for a game. Unless you have a game UI with things like DataGrids, Trees, Charts, etc., you can get a smaller and more optimized SWF without Flex.
If you dont need the additional stuff in canvas, like the scrollbars, that's clearly a reason to prefer UIComponent. Canvas is just an heavier object.
Related
The question is: Is it a good practice to use SpriteVisualElement instead of UIComponent to create custom components? The reason being I can't add Sprite or FlexSprite as direct children of View and I see that UIComponent is quite heavy then SpriteVisualComponent from code point of view.
I searched extensively to confirm if there are certain examples elsewhere which shows use of this control as the base to create custom controls but could only find this. So actually I was little less confident about weather this is Ok or not.
Below is the supplement information:
Nature of application: Educational game application for children
Target platform: Mobile device (currently only Android platform)
Application environment: Flex SDK4.6 with AIR 3.8. Blank Spark application with spark.components.ViewNavigator. PureMVC framework used. Multiple Views to contain custom components which mostly use graphics package to draw themselves and to draw child controls within them (This is where I actually extend SpriteVisualElement for custom drawing as well as containing and displaying other custom controls).
Please suggest me if what I am doing is a good practice for a mobile app or not.
Thanks in advance and regards,
Sachin.
I use it often as SpriteVisualElement is lighter. I always try to use lighter things if it's fit my needs so I think it's a good practice especially for mobile development.
they both seem to accomplish the same things with different syntax, whats the point of using two different technologies. Please highlight every possible benefit of using mxml. Also are there scenarios when one is more beneficial than the other and why.
Please clarify this runtime behavior of mxml vs AS3 as discussed in Oreilly Flex 4 Cookbook page 1:
" Many newcomers to Flex wonder how MXML and ActionScript relate to one another.
The MXML compiler (mxmlc), after parsing through the different idioms, translates
them into the same objects, so that this:
<s:Button id="btn" label="My Button" height="100"/>
and this:
var btn:Button = new Button();
btn.label = "My Button";
btn.height = 100;
produce the same object. The major difference is that while creating that object in
ActionScript (the second example) creates the button and nothing else, creating the
object in MXML adds the button to whatever component contains the MXML code.
The Flex Framework handles calling the constructor of the object described in MXML
and either adding it to the parent or setting it as a property of the parent. "
Usually,
MXML is used to build the user interface
ActionScript is used to code the logic of your application
Of course, you can also build the user interface with ActionScript but :
it will take you more time
MXML views are easier to read than AS views
In terms of user interface, ActionScript should be used only to manage view elements (add, remove, ...) at runtime.
Edit
Within a Flex application, one is expected to favor using mxml over AS, provided both uses are available. In case mxml doesn't provide a solution , the user can fallback to AS3. Flex is a framework, therefore you would expect that the emphasis is put towards mxml, rather than AS3. Like most frameworks , the idea is to hide the details in order to facilitate design and supposedly make programming more accessible.
Everything comes at a cost though, you can't really expect mxml to be faster than AS3 since it's built on top of it. A logical conclusion would be to decide on a case basis. What are your app requirements, is there really a performance gain in using this component or not etc... Apart from the fact that Flex as a whole is bound to be slower than AS3, I don't think you can set general rules. One could add that if one is worried about performance, why choose Flex in the first place...
End of Edit
The Flex framework is geared towards building RIAs, therefore it comes with a bunch of components to that effect and mxml which mainly deals with the layout of these components, Actionscript being the language the Flex framework is built upon, will typically be used for the logic of your application.
The question is not really why choose one over the other. It's the same approach you would have if you decide to develop using a language directly or using a framework based on this language. It's like comparing JQuery & Javascript or CodeIgniter & PHP .I don't mean to imply that the reasons to use JQuery are the same regarding using Flex. Whilst JQuery will attempt to hide browser specificities and make JS more accessible , Flex's purpose is entirely different.
If you're developing RIAs, Flex makes sense, if you're developing games, not really. All you can do with Flex can be done with AS3 , only you wouldn't want to spend time developing DataGrids or HBoxes whilst you could spend more time on your app structure & design.
On the other hand, if you're developing a website or a game , you wouldn't want to add the weight of the Flex framework to your swf, simply because you've added a few Image components and a couple of Labels.
Flex is not adapted to every situation, unlike my previous Javascript or Php examples , Flex's purpose is not to make the language it's based upon more accessible or easier to deal with. Flex has a very specific target.
A similar question might be "what is the advantage of using HTML over Javascript for the UI?"
I suppose you are really asking "what is the advantage of using a declarative UI over an imperative one?"
Declarative UIs are more like configuration -- no logic (or in the case of MXML, very little logic). Declarative UIs separate the specification of the view from the behavior and data.
Tooling almost always prefers declarative UIs as well, because declarative specs tend to be extremely well suited to serialization... much easier for a tool to update MXML than ActionScript with properties and such.
As you get more familiar with the concept, declarative UIs start to feel more natural, and most people tend to prefer them.
Productivity, you create view elements with MXML faster than with AS3.
Under the surface MXML get's converted to the same AS3 bytecode as if you'd write in plain AS3 so the question if MXML makes the app slower comes down to how well the Flex compiler does the conversion.
As for the original question I would say that MXML is for visual development but as said before you hit the limits when trying to create custom components.
Personally I write Flex apps in 99.9% plain AS3 because I can't stand MXML. The only MXML file is the required Entry class so the compiler knows it should be a Flex app that it compiles.
Either way your app is going to get converted to an ActionScript object.
The advantage of using MXML is user friendly and more control on the look and feel of application. sometimes its easy to fix issues aligining your components on the right pane or panel with MXML.
The advantage i see using actionScript is command over your application, you have more control. Sometimes your MXML does not get you the itch of what you are looking and actionScript gives you more power.
I would suggest you to play with both to build an application which can give you less headache and better results.
None, Flex is for learning, as you learn more you use more .as and then one day... you use 0 Flex.
For one it's slow.
(edit - answer to comments)
'Why is flex slow' - it creates computer generated .as code. Equivalent functionality in .as is faster and smaller.
'MXML separates UI from code' - I'd say no it does not. First of ... it's XML.
If you are new, check out other frameworks, like Away3d, FDT and MinimalComponents. As you get more advanced, you use less MXML and one day no MXML, you are writing pure .as.
Anything in Flex can be done in HTML5/.js better. Also .as is much better than HTML5/.j
It's like a learning tricycle, and good for corporate developers that do drag and drop, they think of themselves as programmers. Software engineers... don't stay with Flex for long before evolving.
Here: http://www.youtube.com/watch?v=TL2t8eOs1XE
I feel sorry for you if you stay in Flex and don't advance.
this is not a technical question, well maybe potentially, but since this is such aresponsive messageboard I thought I would get some good responses here.
I am due to create a pretty robust website coming up soon that has to be creative but also incorporates a lot of data. My perspective, as a newcomer to flex, is that it is better for applications than it is for more abstract websites. Things are harder to skin in flex, you can have smoother animations in flash, etc. These are just my perceptions.
Question is, can you do the same creative material in flex that you can do in flash, or if you can is it worth the extra time? Basicially trying to figure out if I should do this project in all flash or flex and flash, because I know the design, transitions and look of the site will be fairly organic.
You can do a lot of the same creative material in Flex that you can do with Flash. In some cases, especially if you can handle coding easily, it's even easier, because you can add effects without having to tweak a timeline. You can use the graphics class to draw the kind of simple shapes Flash lets you work with and you can style them.
You can also add any bitmap or vector images you want to Flex and use them however you want, even as background-images for, say, a Canvas. I create graphics symbols in Illustrator and export them to SWF files which can then be embedded and accessed directly in Flex using the [Embed] directive.
It involves a different way of thinking about it, but let me put it this way: I started off as a graphic designer who could code, and loved and used Flash to create cool interactive animations that used complicated and extensive ActionScript. Then I started working in Flex and once I got to a certain level of proficiency I completely abandoned Flash. I don't use it at all anymore unless I have to work with someone else's Flash files directly.
If in your HTML/Javascript/CSS work you're the kind of person who codes in a text editor first, Flex is going to feel right for you. If on the other hand you rely on DreamWeaver or some other visual tool, you may want to stick with Flash. Bear in mind that Flex also has a fairly rudimentary "design" view, which I never use because it just gets in the way. As would DreamWeaver.
Edited to say: I should add that you can also create animations in Flash and use them in Flex. So you don't have to abandon Flash to use Flex, but it just might fall out that you do, as I did.
Flex has a bunch more components out of the box for handling data -- and is much more geared toward handling data than Flash. And Flash is much more geared towards "animation" (in a broad sense of the word).
You can create your skins in Flash if you want, but skinning in Flex 4 in general is much easier and more robust than in previous releases.
It sounds like Flex will suit your project better, and you can decide as you go if there's a piece that may be more suited for Flash. They're working together pretty well in Flex 4.
Flex & Flash.
Flex for robustness and ease of development.
Flash IDE for assets libraries (gfx, sounds & animations to import in Flex).
What are the key differences between Flash and Flex? I have over five years experience with flash and feel very comfortable developing with it and ActionScript3. I find myself more and more curious about Flex and want to know when it is best to use flash or flex. Also, is everything that can be done with MXML, able to be done with AS3? I have a strong understanding of AS3 and OOP and would like to know the diffrences between using AS3 and MXML in Flex.
Flex is great if you quickly want to build a UI, you can mock up a functioning UI in a couple hours. Since it still can be limiting for some custom UI's it's not perfect for everything but if something should "look" more or less like an application and fit in a grid it's super quick to mock up the UI in MXML. Also don't be intimidated of how most Flex apps look (ugly, imo), you can customize everything or easily create your own components.
Putting actionscript in mxml is the same as putting css or javascript in html = really bad. Unfortunately even Adobe has this in multiple examples (probably mostly because it's easier & faster for demostrations).. My personal opinion is that this applies to bindings too, as i don't want to put my data in the UI (mxml).
As an experienced developer I'm sure you don't do any development on the timeline (to clarify the Flash = timeline misconception). Still with Flex you have the UI separated in a framework that handles a lot of the burden with layout so that you can concentrate on the business logic. The rest of the workflow is close to what you probably already have with Flash.
It depends on what kind of applications you are developing now with Flash. I have been a Flash developer (mainly applications) for 7 years. I must honestly say that I was extremely glad when Flex 2 was released because it had the component framework (good components, layout managers, ...) I did not have in Flash. This is IMO the biggest difference between Flash and Flex (or the Flex framework).
MXML is a real blessing, especially when using data binding. In the end, everything is compiled down to ActionScript (check the -keep compiler option), but MXML just saves you so much time.
Flash and Flex provide different ways to produce different things. I am not familiar with Flash, but I would expect that it is dependent on a time-oriented way to produce something, whereas Flex is geared toward more traditional software development. That is, rather than dealing with time and frames in Flash, one is dealing with describing where components should be placed with MXML and how those components work with ActionScript.
One should also be able to write a Flex app with just AS3 and no need MXML.
The main difference between AS3 and MXML in Flex, as far as I know, is that MXML is not intended to be used with application logic, but rather it is intended to be used like HTML/CSS in web pages and puts components and content onto the Flex app. ActionScript is used to program behaviors, components, and other things outside or what MXML does. Thus, if you want to attach an event to a component one would write ActionScript code.
Hope that helps. I am still learning about Flex myself.
Some other differences that come to mind:
Flash allows you to create graphical assets and then work with them immediately. To use those same things in Flex, you need to use Flash to export them to a swf or swc first.
Flex has a layout manager, so applications that have variable window size are waaaay easier to make. For instance, you can take a window and set it to 90% width of the window, and it will change size... not scale mind you, but actually change its width as the window is made larger or smaller. This is not easy outside of the Flex framework.
Data Binding in Flex is a huge timesaver. It essentially creates all of the code you'd need to write in AS3 by simply saying blah="{foo}" The curley braces denote "bind to this".
The Flex Debugger is vastly superior to the Flash one. There is also a Profiler.
Since I started with Flex and not Flash, I'm not sure what kind of IDE is best for Flash dev, but the Eclipse based Flex Builder is quite nice. The code hinting is great. Subclipse integration is great.
Really, Flash and Flex are different beasts. You should know and understand AS3 if you want to use Flex, and since you do, you're in a perfect position to take advantage of Flex's features. Flash is not going anywhere as a tool for making more visually creative pieces, but Flex offers a lot of advantages for application development.
I prefer Flash IDE vs Flex (aka Flex Builder aka Flash Builder for my comment)
In general i would say it depends on the size of the project.
I find it easier to start and finish small projects quickly in Flash.
I would advise Flex for larger projects because it has various debug tools that can save you plenty of time (although i would still just use Flash my self)
But maybe if you really get used to flex, that might not matter.
some Cons of Flex from my experience.
When working on a team of 4 on a
large project, Flex failed to keep
the project
settings from one computer to another. (we shared files using SVN)
Flex constantly conflicted with SVN for us.
I felt distant from the art assets.
some Pros of Flex
being able to follow variable references from one class to another at the click of a button.
being able to easily see many variables while debugging. w/o needing to trace them.
and Flash used to not have Custom Class Code hinting, but now with CS5 it does.
I think you can use the newest features of Flash Player w/o waiting for a new Flash CS#, for example MoleHill (a new 3d api that uses the GPU) has a beta release out right now. and i think the Flex SDK can already use it.
hope this helps.
it should be noted that I am a rare case that doesn't prefer flex, most people strongly prefer flex, so you should give it a try at least.
MXML compiles to action script so it's really like a higher level version of that. So, yes, everything that can be done with MXML can be done with actionscript (but not the other way around).
Flash CSx:
GUI\Layout: Basic GUI class framework
Graphical Content: Great for editing graphical library objects with or without animation
Code: Lacks a good code editor
Flex/Flash Builder + Flex Framework:
GUI\Layout: Advanced GUI class framework and layout engine (Flex)
Graphical Content: Lacks drawing capabilities of Flash, but you can include Flash generated graphics by exporting them for ActionScript into a SWC and importing/referencing the SWC in Flash Builder.
Code: Much better code editor than Flash; not sure if it's on par with FlashDevelop
Other: Supports MXML, which is basically just another style of laying out content. Instead of writing a bunch of "c = new C()", "c.prop = x", "c.addChild"... you can structure display objects and thier children using XML constructs, and the MXML compiler will convert it all back into the less-readable, but basically the same AS3 code.
These technologies are all related and interoperable. They are natural and predictable extensions of the Flash player and ActionScript techonolgies, but for some reason Adobe developed the Flex/Flex-builder/MXML technologies as a totally separate product, and market it as something totally new and oh-so-amazing. Whatever. So now we have to go back and forth between the two to use all the features, which is LAME. They also have to waste time and resources developing unnecessary, but helpful, packages like the "Flex Component Kit" to reduce the number of steps necessary to get Flash content into Flash Builder.
You have to go back and forth between these applications, because of their mutually exclusive features -- Flash Builder lacks graphics editing, and Flash CSx lacks MXML and a good code editor -- but they're interoperable in the sense that you can use Flex classes in Flash, Flash classes (and their embedded graphics) in Flex, you can use Flash Builder and MXML without Flex, etc.
I think they need a single, truly integrated Flash IDE, so they need to merge Flash Builder into the Flash CSx editor.
The most common way of changing a cursor in Flash apps seems to be based on simply hiding the native OS cursor and displaying a graphic (drawn by the Flash Player) inside the Flash rectangle where the (hidden) cursor would be. This is what mx.managers.CursorManager does, for example. The reason why I find this approach unacceptable is that Flash Player isn't nearly fast enough at updating the cursor graphic, leading to some very visible lag in the cursor movement, which I find to be a pretty fundamental usability problem and annoyance, making the whole app seem slower than it really is.
On the other hand, I've noticed that the CSS cursor property implementation in browsers works like it should -- i.e. there's no visible lag in the cursor movement when using it to implement a custom mouse cursor.
So my question is: is there any way to use the CSS cursor property (or any other method that doesn't involve lagging, slow cursor movement) to change the cursor on top of a Flash rectangle?
I've already tried to change the cursor style property for a Flash element (or a Div wrapper around the Flash element) via JavaScript, but didn't seem to get it to work. Has anyone successfully done something like this?
Native cursors are available in Flash Player 10.2 beta. So you should give it a try! See: http://www.bytearray.org/?p=2373
I don't believe there is any way for Flash to use custom system cursors. In my 6 years of being a Flash Developer I've never heard of such functionality or a hack.
I understand your complaints, I too have been frustrated with how laggy the display-update can be. Thinking about the solution to use CSS to set a cursor-style in the browser though is an interesting approach... It smells, but off the top you may be able to implement control over the CSS cursor attribute from Actionscript using ExternalInterface. That way you could presumably communicate back to the HTML container calling some Javascript to modify the HTML page CSS at runtime. Not 100% sure that will work, but it may be worth a try if you are desperate. Otherwise it's probably advisable to stick with CursorManager.
The CursorManager is it, but I haven't had any problems with being laggy.
If you haven't already seen it, check out Colin Moock's CustomMousePointer classes. He has a bunch of AS3 examples and sample code from his Essential AS3 book posted at http://www.moock.org/eas3/examples/. Scroll down to, or search for, the Custom Mouse Pointer link. It's under the Chapter 22 heading.
The code in these examples, incidentally, was originally intended for use by Flash developers, so you may be able to optimize some of them for Flex by using objects that aren't available in Flash's implementation of AS3.
I believe Flash Player 10 will natively let you select the ibar, drag hand, finger or normal cursors, but if you're in Flash 9 this isn't possible and I don't believe a CSS hack will work either.
My advice is - use the MOUSE_MOVE event to position a graphic and set the frame rate as high as possible (e.g. 50 frames per second).
You could in fact accomplish this by writing an ExternalInterface that calls javascript to update the Mousecursor. jQuery functionality would work well here and it is something im doing in my new portfolio site for buttons and various areas of the flash app.
The new portfolio is not up yet, but should be within the next week or two for those are curious it will be at http://chrismcintoshdesigns.com