It depends on your application's needs, but I generally break my design into visual chunks and use custom MXML components to lay out the main areas and components of my application (data panels, dialog boxes, etc) using mxml based custom components. Then I'll augment that with custom actionscript components where I need more visual flexibilty than the built in layout components provide. MXML is handy because it makes it extremely easy to get components on the stage and set their various properties and style settings.
Take this example of two identical login panels:
In MXML:
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="290" height="148" title="Login">
<mx:Label text="User name:" width="80" textAlign="right" y="8" x="8"/>
<mx:Label text="Password:" width="80" textAlign="right" y="38" x="8"/>
<mx:TextInput id="txtUsername" maxChars="20" y="8" x="90"/>
<mx:TextInput id="txtPassword" displayAsPassword="true" y="38" x="90" maxChars="20"/>
<mx:Button x="185" y="68" label="Login" id="btnLogin" click="doLogin()"/>
</mx:Panel>
And in actionscript:
package
{
import flash.events.MouseEvent;
import mx.containers.Panel;
import mx.controls.Button;
import mx.controls.Label;
import mx.controls.TextInput;
public class MyLoginPanel extends Panel
{
private var _unLabel:Label;
private var _passLabel:Label;
private var _txtUsername:TextInput;
private var _txtPassword:TextInput;
private var _btnLogin:Button;
public function MyLoginPanel()
{
}
override protected function createChildren():void
{
super.createChildren();
this.width = 290;
this.height = 148;
this.title = "Login";
this.layout = "absolute";
_unLabel = new Label();
_unLabel.text = "User Name:";
_unLabel.width = 80;
_unLabel.setStyle("textAlign", "right");
_unLabel.move(8, 8);
this.addChild(_unLabel);
_passLabel = new Label();
_passLabel.text = "Password:";
_passLabel.width = 80;
_passLabel.setStyle("textAlign", "right");
_passLabel.move(8, 38);
this.addChild(_passLabel);
_txtUsername = new TextInput();
_txtUsername.move(90, 8);
this.addChild(_txtUsername);
_txtPassword = new TextInput();
_txtPassword.move(90, 38);
_txtPassword.displayAsPassword = true;
this.addChild(_txtPassword);
_btnLogin = new Button();
_btnLogin.label = "Login";
_btnLogin.move(185, 68);
_btnLogin.addEventListener(MouseEvent.CLICK, doLogin);
this.addChild(_btnLogin);
}
}
}
Seven lines of code vs 62. That's a pretty simple example, but hopefully you can see how you might benefit by laying out many portions of your application in MXML, whether you're using the design mode in Flex Builder or not.
One thing I do recommend however is keep actionscript out of your mxml files as much as possible. Treat MXML as your view and separate any heavy functionality into other classes. You can then provide public properties in those classes that the controls in your MXML components can bind to. MXML is a layout language and in my experience it pays in the end to use it where it makes sense and drop into actionscript whenever heavier lifting is required.
It depends on where you want to go.
If you're aimed towards making "application"-like content - that is, buttons, pulldown menus, tab and accordion frames and so on, then probably you should keep on with the Flex tutorials. Flex is a framework, remember - it will spare you more of the gritty details if what you want to do is aligned with it.
If you want to make more generally expressive content - games, unique menus, highly interactive experiences and the like, then learning Flex would probably be a sidetrack. You'd be better off focusing on ActionScript itself.
Since you're starting from zero, you should also consider how far you plan on going. If you hope to eventually be able to handle complicated, heavily script-driven content, then you'd be better off learning ActionScript 3 and pretending AS2 doesn't exist. However, if you need to learn "enough" scripting to get the job done, but you don't plan on getting married to it, then you might prefer to do the reverse. AS2 is much more ad-hoc, and less strict. It has more whippituppitude, as they say. But for complex work AS3 is far better.
As for learning other languages, I'd say not so much. AS2 is very similar to JavaScript, and AS3 is very similar to Java, but you'll understand much better how to make good Flash content if you learn the scripting together with the authoring tool, and you'll come away more able to grok Flash's internal structure and the attendant possibilities and limitations.
Best Answer
As MXML is compiled to ActionScript while building, there may be no need for MXML - everything can be coded in AS3.
However, I find that MXML is quicker to use in some scenarios - for example, composite components of the UI in an application.
If a composite component is a library-type component (a new type of generic widget - whether based on an existing control or completely custom), I use AS3 as I get finer control. The code for such controls will not change much over time, once a stable release is made.
If a composite component is a part of an application's UI which is more likely to change over time due to user-driven changes to the UI (e.g. application configuration panels) then MXML allows faster iterative development. This is the kind of change where you have to move controls around, change styling etc. in response to user or marketing feedback, or business-driven changes over time.