Отладка и Flex
May 4th, 2007
http://www.cflex.net/
http://www.3gcomm.fr/Flex/RatingComponent/Blog_Post_Rating_Component.html
http://www.cflex.net/
http://kss.korax.ru/index.html
http://augiemarcello.com/flex-2-basic-email-form/
http://www.examples.augiemarcello.com/Flex2/URLRequestFile/URLRequestFile.html
http://www.examples.augiemarcello.com/Flex2/URLRequestFile/srcview/index.html
http://www.examples.augiemarcello.com/Flex2/SimpleEmailForm/SimpleEmailForm.html
Blog | MXML Example | Actionscript Example | Example App | FAQ
Known Issues | Discussion | Documentaton | Downloads | Source Code
In Sept. 06 I set out to show someone that is was possible to connect to a mySQL server from acionscript. It took about an hour to get actionscript connecting to mySQL. I was getting a bad handshake error but if anything I proved that it could be done. That project then sat in Flex Builder until about a month ago when I started back on it. And now, a mySQL actionscript 3 driver exists.
This project is very much still in Alpha stages but neverless it is working. Writing a database driver in actionscript raises some major concerns. One of the biggest concerns to address is fact that to use an actionscript database driver you will need to make your database server publicly accessible. Another issue is where to store the server location, username’s, password’s etc.
For passwords, I just assumed that most people would not want to store the password in the swf itself. So when connecting to the database you provide a «Scrambler» class that handles receiving the seed from mysql, sending it somewhere, encrypting the seed using the database password, then sending the scramble back to the connection to be used in the authentication process. Currently the only scrambler I am providing is the «PlainTextScrambler» which will allows you to just provide a string for the password. This scrambler will work for embedding passwords in the swf and allowing the users to input a password.
When developing this I have been testing on a locally installed MySQL 5 database. I have been developing it to support 4.1.1 and later MySQL releases but I have not done any testing on 4.1.1. If you come across any bugs please post them in the forum.
Here are some quick examples of using the driver.
<mx:Script>
<![CDATA[
private function callService(sql:String):void
{
sqlService.send(sql);
}
]]>
</mx:Script>
<sql:MysqlService id=»sqlService»
host=»database.mydomain.com»
port=»3306″
user=»username»
scrambler=»{new PlainTextScrambler(‘password’)}»
database=»databaseName»
response=»onResponse(event)»
error=»onError(event)» />
<mx:ComboBox id=»cbx1″ dataProvider=»{sqlService.lastResult}» labelField=»userName» />
private function getUserList():void
{
var host:String = «database.mydomain.com»;
var port:int = 3306;
var user:String = «mydatabaseuser»;
var scrambler:PlainTextScrambler = new PlainTextScrambler(«password»);
var database:String = «databaseName»;
var con:Connection = new Connection(host, post, user, scrambler, database);
con.addEventListener(Event.CONNECT, onConnect);
con.addEventListener(SQLErrorEvent.SQL_ERROR, onError);
con.connect();
}
private function onConnect(e:Event):void
{
var con:Connection = Connection(e.target);
var st:Statement = con.createStatement();
st.addEventListener(RestulsEvent.RESULTS, onResults); //FOR SELECT
st.addEventListener(ResponseEvent.RESPONSE, onResponse); //FOR INSERT, UPDATE, etc.
st.addEventListener(SQLErrorEvent.SQL_ERROR, onError);
st.executeQuery(«SELECT * FROM users;»);
}
private function onResults(e:ResultsEvent):void
{
var st:Statement = Statement(e.target);
var con:Connection = st.getConnection();
var rs:ResultSet = e.resultSet;
while ( rs.next() )
{
var userName = rs.getString(«userName»);
var email = rs.getString(2);
}
con.disconnect();
}
private function onResponse(e:ResponseEvent):void
{
var st:Statement = Statement(e.target);
var con:Connection = st.getConnection();
var affectedRows:int = e.affectedRows;
var insertID:int = e.insertID;
con.disconnect();
}
private function onError(e:SQLErrorEvent):void
{
var st:Statement = Statement(e.target);
var con:Connection = st.getConnection();
var message:String = e.msg;
var errorNo:int = e.id;
var text:String = e.text; // Equals SQLError #{id}: {msg}
con.disconnect();
}
Particle Illusion is a very simple yet advanced software. With it you will be able to create just about any kind of special effect that can later be imported to other great programs such as Flash, After Effects and even Photoshop.
Now, when I said «simple yet advanced» i meant that it in fact is fairly easy to grasp, especially for those familiar with Flash or just about any other motion graphics software.
In this tutorial i will walk you through the basics of PI and how to use it.
1) Stage – This is the working area that you will create and preview all of your creations.
2) Timeline - Quite self explanatory
3) Preview - Here you can see a preview of the emitter in action
4) Emitter Browser – Choose or load emitters by Right Clicking -> Load Library
5) Layers - Just like in Photoshop or Flash, this is a layers pallet, you can also load movies or images by double clicking on the layer or Right Clicking -> Background Image
6) Parameters – Here you can edit the general appearance and behavior of the emitters.
7) Toolbar – Load, save, paste and perform all of the basic functions along with some unique to the particle illusion.
Note that Right Clicking works in all of the above listed parts of the PI interface, getting familiar with functions that can be brought up by Right Clicking could improve your work flow quite a bit.
Now I would like to go over the functions of a toolbar in a greater detail; we are going to break it up in 3 bits.
Here are the basic functions, that are pretty much self explanatory, from left to right. I strongly suggest you learn these shortcuts and use them at all times as they are nearly universal and are the same in most of modern software:
● New (Ctrl+N)
● Open (Ctrl+O)
● Save (Ctrl+S)
● Cut (Ctrl+X)
● Copy (Ctrl+C)
● Paste (Ctrl+V)
This section is unique to PI and introduces some features you may not be aware of:
● Project Settings (Alt+P) – This is where you can not only edit the size of your stage(working area) but also edit the frame rate, enable and edit motion blur and change the background color. You can also save and load custom settings. Note: If you do increase the size of your stage you might have to adjust the widths and heights of the interface panels of PI to view the whole working area as it may end up being partially covered up.
● Select (A) – this is the actual selection tool you will use to move around your particle emitters and edit paths / bezier curves.
● Add Deflector / Blocker / Force – we will not get into these features for now; yet i encourage you to go ahead and give them a try, they do exactly what they sound like.
● Show Particles (P) – Switches the particles on and off on the stage, very helpful if you are working with paths or emitters and wish to disable everything else.
● Move (M) – You got it, it moves stuff around. =]
This set of tools is pretty much the same as the Move tool, yet Nudge offers you a lot more precision.
![]()
Last but not least we have our Playback Box. With it you can play, stop and rewind your animations to preview them and save the output with a Red (Record) button. Please note that the Loop feature will not actually loop your animation in its final output, it will only loop the preview. By changing the numbers in the Start and End Frame you can add or remove frames from your animation.
Thank you for reading my “Particle Illusion Interface Overview” tutorial.
Hope it was helpful to some of you in one way or another, best regards.
NextExile
Introduction:
For this tutorial we’re going to use the audioManager actionscript class from dhtmlnirvana to play all the sounds.
There are several ways you can do this, but this is probably the simplest.
What we are going to do is create a drop down box which is the song list. The data for the song list is got from an external XML file using an HTTP service.
When the user selects a new song from the dropdown box, the song that is currently playings stops and the new one begins. Our actionscript class knows which song to play using an internal array of songs.
Sounds complicated? Well, it’s not that hard. It’ll all become clear as you keep reading!
Step 1 – Setting up your GUI
Create a new project and call it «MP3 Player» or whatever you wish. File -> New -> Flex Project
Drag a panel onto your document. This is where we will store all the buttons and information.
Give your panel a title, for example, MP3 Player. An ID won’t be necessary for now.
I would recommend using some layout constraints to get your panel right in the middle of the page.
Now that we have our basic panel setup, lets begin adding the other components.
Drag a Combo Box onto the document. This will be the song list. Give it and ID of «cbxMusic».
Now put 5 buttons in the panel. These will be the Next, Previous, Stop, Play, and Pause buttons. Of course you could use images but this just saves time.
And thats it!
Your GUI is now complete!
Step 2 – The Code
Alright now we’re almost done!
Here is what my code looks like at the moment..
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:Panel width="236" height="200" layout="absolute" title="MP3 Player" verticalCenter="0" horizontalCenter="2.5"> <mx:ComboBox left="10" top="10" id="cbxMusic"></mx:ComboBox> <mx:Button label="Stop" left="10" verticalCenter="-29"/> <mx:Button x="70" y="40" label="Play"/> <mx:Button x="129" y="40" label="Pause"/> <mx:Button label="Previous Song" verticalCenter="1" left="10"/> <mx:Button x="125" y="70" label="Next Song"/> </mx:Panel> </mx:Application>
Now lets begin coding the player. Instead of writing all the code in our main document (main.mxml), I created a separate document (File -> New -> ActionScript File) and wrote all the functions there.
Here is my main.mxml :
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="songService.send()">
<mx:Script source="functions.as" />
<mx:HTTPService id="songService" showBusyCursor="true" result="initApp()" url="songList.xml" />
<mx:Panel width="236" height="200" layout="absolute" title="MP3 Player" verticalCenter="0" horizontalCenter="0">
<mx:ComboBox left="10" top="10" id="cbxMusic" change="aMusic.setSong(cbxMusic.selectedItem.data);" />
<mx:Button label="Stop" left="10" verticalCenter="-29" click="aMusic.onStop()"/>
<mx:Button x="70" y="40" label="Play" click="aMusic.onPlay()"/>
<mx:Button x="129" y="40" label="Pause" click="aMusic.onPause()"/>
<mx:Button label="Previous Song" verticalCenter="1" left="10" click="aMusic.cyclesongArray('rev',cbxMusic)"/>
<mx:Button x="125" y="70" label="Next Song" click="aMusic.cyclesongArray('forw',cbxMusic)"/>
</mx:Panel>
</mx:Application>
Pretty much the same as before. If you notice I’ve added a creationComplete statement to the main application tag. All this does is tell the file to execute a function as soon as it’s done loading.
In this case, we’re telling it to start the http service. The http service will fetch the list of songs from an XML file, and fill up our combo box.
I’ll explain the rest later. You’ll need to see our ActionScript file before you’ll understand anything else.
My ActionScript functions file :
// ActionScript file
import audioManager;
public var aMusic:audioManager = new audioManager;
private var dp:Object;
private function initApp():void
{
if (songService.lastResult.song!=undefined) {
var aryTemp:Array = new Array();
for (var i:Number=0; i<songService.lastResult.song.length; i++) {
aryTemp.push({value: songService.lastResult.song[i].name, label: songService.lastResult.song[i].name, data: songService.lastResult.song[i].data});
}
dp = aryTemp;
cbxMusic.dataProvider = dp;
}
}
It’s actually quite simple. The first thing we do is import the audioManager ActionScript class (audioManager.as). This tells the script to import all the functions and whatnot from that file.
«public var aMusic:audioManager = new audioManager;» simply tells the script to assign the audioManager class to the var aMusic.
Same goes for the var «dp» (short for data provider), except that dp is an object. We’ll be using that later on…
Now, finally, comes our function initApp(). This function is called as soon as the http service «songService» is done.
This function starts off by checking if there is are any values. If there is some data, it goes ahead and initiates a new array.
Now we use a for loop to loop through all the songs in songList.xml. While looping through, we’re filling up our array «aryTemp» with the various attributes of the songs.
Then we set the dataProvider for our combo box «cbxMusic» to dp, which gets it’s data from the array aryTemp.
Almost done! All that’s left is the play, stop, etc… buttons!
<mx:ComboBox left="10" top="10" id="cbxMusic" change="aMusic.setSong(cbxMusic.selectedItem.data);" />
<mx:Button label="Stop" left="10" verticalCenter="-29" click="aMusic.onStop()"/>
<mx:Button x="70" y="40" label="Play" click="aMusic.onPlay()"/>
<mx:Button x="129" y="40" label="Pause" click="aMusic.onPause()"/>
<mx:Button label="Previous Song" verticalCenter="1" left="10" click="aMusic.cyclesongArray('rev',cbxMusic)"/>
<mx:Button x="125" y="70" label="Next Song" click="aMusic.cyclesongArray('forw',cbxMusic)"/>
Explanation:
When the user clicks on the combo box and selects a new song, the function setSong() is called directly from the audioManager class, and we pass on a number (cbxMusic.selectedItem.data) that correlates to number in the songList array in the audioManager class.
So, for example, Song1 has a value of «song number 1″ and data «12″. In our songList array in the audioManager class, songList[12] = «song number 1.mp3″, so that sound would play. Make sense now?
The rest of the functions are pretty easy to grasp. The stop,play, and pause buttons are self explanatory. When clicked their respective functions are called and they do their thing.
The previous song and next song buttons are slightly different, however. With a little customization to the audioManager class, I managed to change the change the song currently selected in the combo box when the cyclesongArray function was called.
So if the currently selected song in the combo box was «Song Number 1″, and you hit Next Song, it would automatically change to «Song Number 2″ and start playing that song!
The function requires two arguments, the direction in which you want to cycle (next – forw(forward),previous – rev(reverse)), and the current component (so we can change the selected item).
With that, your Flex MP3 Player is complete! Congratulations!
Download: Flex MP3 Player Basic (No Sound Files) – 634 Kb
Introduction:
In this tutorial you will learn how to create a login system with Adobe Flex and PHP. It»s quite basic, but you should have a general knowledge of both Flex and PHP to begin with.
What we»re going to be using:
Adobe Flex
-View States
-Transitions
-Web Requests
PHP
-Login the User
Coffee
-This tutorial is long!
Alright lets get started!
Part 1 – Creating the GUI
Lets start out by creating a new project. You can name yours whatever you wish, I named mine «Login System».
Now that we have created a new project, let»s start by adding some simple panels to hold our content.
Drag a Panel onto the canvas and under Flex Properties, give it a title, say «Login System». Now scroll down, Flex Properties->Layout, set the following contraints:
Now we have a panel setup! The next step is adding some labels and text input boxes, and a button.
Drag and drop a few labels and text input boxes and you should have something that looks like this:
Now lets go back and edit their properties. You can change the text of the labels to Username and Password, no need to assign them labels for now. However, you do need to assign the text input boxes id»s. Name the first text box «username» and the second one «password».
Almost done with the sign in form, just one more step, the submit button! Drag a button onto the canvas and change the text and ID to «Submit».
Now you should have a fully complete form that looks like this:
That»s it for Part 1!
Part 2 – Programming the GUI
Okay so we»re done with the easy part, here comes the tricky part. If you»re not too familiar with programming in Flex then you might have to read a few lines over but if you have some experience you should be set. I»ll try to make it as descriptive as possible.
Let»s start by creating a simple web request that will send the form data to the PHP file.
<mx:HTTPService
id="login_user"
result="checkLogin(event)" //This is the function that will be called after a result comes
method="POST"
url="http://www.vipercreations.com/flex/login.php"
useProxy="false">
<mx:request xmlns="">
<username>{username.text}</username>
<password>{password.text}</password>
</mx:request>
</mx:HTTPService>
Explanation:
Creating a web request is rather simple in Flex. All you have to do is call the <mx:HTTPService> command and throw in the right parameters and you»re set!
Some of the more important parameters are the ID, method, and obviously, the url. The id is the unique name given to the service and is used to call the service later in the script. The method is the way the service communicates with the PHP script. You can use either the GET or POST method, but I choose POST. Lastly, setting useProxy to true or false specifies whether to use the Flex proxy service or not.
After we setup the service, we setup the request. This tells the service what to send to the script. If you changed <username> to <user_name>, you would have to change it in your PHP script too. {username.text} simply means that the value of $_POST["username"] will be the value of the text in the username field of the GUI(what the user has entered). Same goes for the password.
Not too hard, right?
The next thing to do is tell the submit button what to do when it is pressed. Under the submit buttons properties (Flex Properties->On click:), type in the following: login_user.send();
This tells it to send an http request to the login script.
Once the service has finished executing, a function named «checkLogin» will be called.
<mx:Script>
<![CDATA[
private function checkLogin(evt:ResultEvent):void
{
if(evt.result.loginsuccess == "yes")
{
currentState = "Logged In";
}
if(evt.result.loginsuccess == "no")
{
mx.controls.Alert.show("Invalid username/password");
}
}
]]>
</mx:Script>
Explanation:
This isn»t as bad as it looks
. After we tell Flex that we»re writing some code (typing in <mx:Script>), we create our custom function called checkLogin();. All this function does is check if the login was successful or not! To see the result of the request, we use «login_user.lastRequest». You cannot pass a variable directly from PHP to Flex so you must output it as XML and then parse it through Flex. Once we write the PHP script, all this will become clear, I promise!
If the result of the request was successful, the the script returned «yes», then we change the current state to «Logged In». View States is a really nice feature of Flex. Think of them as different pages, but all in one application. We»ll create the Logged In View State right after the PHP script, so you don»t get too confused.
However, if the result was «no», Flex pops up an alert box(just like a JavaScript alert) saying that the username/password entered was wrong. And that»s it for the function!
That pretty much sums up Part 2, we»ll be adding a bit more to this later on in Part 4. Now we must create the PHP script.
Part 3 – The PHP Backend
The PHP script is a simple script that queries the database with the details provided to see if the user is real or not, and the outputs the result in XML.
<?php //connect to the database $mysql = mysql_connect(DATABASE_SERVER, DATABASE_USERNAME, DATABASE_PASSWORD) or die(mysql_error()); //select the database //asign the data passed from Flex to variables //Query the database to see if the given username/password combination is valid. $query = "SELECT * FROM users WHERE username = '$username' AND password = '$password'"; //start outputting the XML $output = "<loginsuccess>"; //if the query returned true, the output <loginsuccess>yes</loginsuccess> else output <loginsuccess>no</loginsuccess> if(!$result) { $output .= "no"; }else{ $output .= "yes"; } $output .= "</loginsuccess>"; //output all the XML ?>
Explanation:
Again, if you have some background in PHP this should be extremely basic stuff. I»ve commented most of the code so you should be able to understand it.
After connecting to the MySQL database, we query the db to see if the given details(username and password) are valid ones. If so, we output it as XML (<loginsuccess>yes or no depending on whether or not the operation was successful) and Flex then reads it.
Earlier in this tutorial we wrote the following:
if(login_user.lastResult.loginsuccess == "yes")
{
currentState = "Logged In";
}
lastResult.loginsuccess refers to the <loginsuccess> we outputted from PHP. So if instead of outputting <loginsuccess>, you decided to output <userLogin>, then you would change lastResult.loginsuccess to lastResult.userLogin. Make sense now?
Now that we cleared that bit up, on to the last part, creating the Logged In View State and throwing in some neat effects!
Part 4 – View States and Special Effects
Almost done, hang in there!
This part is quite easy, lots of drag + dropping, and VERY little coding
In the upper right hand corner of Flex, you should see a box that says States, and it should have one state(<Base state>(start)) in it. Right click somewhere in that box and click «New State…»:
Now that you have created a new state, set the panel width and height to 95% and the title to «Members Section» or whatever you want. Now delete all the stuff inside the panel(the labels, text inputs etc.) so you have a clean panel.
Now all you have to do is throw some labels in there and whatnot, and you»re done!
You now have a fully functional login system using Adobe Flex and PHP!
If you want, you can throw in some cool resize effects. Edit the following code.
Find:
<mx:Panel ...
Add This:
<mx:Panel resizeEffect="Resize" ...
Now you should have a cool resizing effect if your login was successful!
That»s the end of it. Hope you enjoyed this tutorial, and please feel free to ask any questions in the forums or just leave a comment!
View LIVE Example! (Login with user:test,pass:test)
Download: Login System.zip (539 KB)
Thanks!
This installation guide actually shows you how to install the example project provided with the zip file. What you will learn in doing this procedure will carry over into your new projects using your new library components.
For all intents and purposes this guide uses locations that are purely for illustration(anchors) so if your locations differ, by all means substitute the library /project locations and/or workspace location.
There are several ways that a project can be created in Flex Builder using these sets.
There are different OS‘s out there, this guide targets Windows, please adjust for your specific OS type.
This example also shows switching workspaces. This is not a harmful action. Switching workspaces changes the root of your projects and creates a .metadata folder which eclipse uses to store your workspace defaults.
We switch workspaces in this installation guide for the sole fact of simplicity. Switching your workspace in effect initializes Flex Builder like it was a brand new installation.
For those that are experienced, by all means just import into your existing workspace. For those who are new, I suggest trying this because you might learn something.
c:/dev.c:/dev.FSCollectionFX1_1.0.106. This example just copies the zip right into the workspace folder c:/dev.
Workspace: enter c:/dev. OK.Flex Builder will actually close and restart when switching workspaces. Flex Builder is now reinitializing to your current workspace preferences.
With Flex Builder open;
Navigator Pane.Navigator Pane right click to open the context menu.Import.... We will now load just the Set1AssetsLibrary library project.
With the Import window still open;
Currently the Select root directory radio button is selected;
Select archive file.Browse button.c:/dev and select the Library zip file.Ok.Deselect all check boxes except Set1AssetsLibrary.Finish button.Flex Builder will now build the library project and create the needed SWC file in the bin folder.
Now, repeat step 4, 5 and 6 up to the point of deselecting the projects.
Select the project below.Finish button. Now check to see that your Navigator pane looks the the above image. If so you are right on track.
Now that everything is ready to go, you will be able to hit the ground running.
Since Teoti Graphix values user experience first and knows developers just want to go!, we decided to include the SWC file twice. Once in the bin folder and again in the FSCollectionFX1Example project.
All of the projects are connected and give you the top notch organization you need to start learning your new components!
Open the FSCollectionFX1Example project.Double click the BackgroundGradients.mxml file to open it in Flex Builder.Ctrl F11 or Run and you should now see step 10.Here is the default running of this example. Enjoy the ease of learning and experimenting with our user oriented project structure!
May 4th, 2007
April 16th, 2007
Стили для Flex
Flex Styles Creator
Derek Wischusen: Flexonrails.net
Flex Filter Explorer
Joe Johnston: Merhl.com
Flex 2.0 Primitive Explorer
Jason Hawryluk: Flexibleexperiments.wordpress.com
Flex Transitions and Effects Explorer
David Keutgens: blog.keutgens.de
April 16th, 2007
Публичная альфа-версия Apollo доступна для скачивания в Adobe Labs. Для создания своего Apollo-приложения нужно скачать Apollo runtime и Apollo SDK.
April 2nd, 2007
Официальный ответ на сайта LiveDocs
Варианты:
1) SWF целиком
[Embed(source="icon.swf")] [Bindable] public var imgCls:Class;
2) Символ из SWF
[Embed(source='SWFFileName.swf‘, symbol=‘symbolName‘)]
3) Вставка в изображение (Image)
Для взаимодействия с flash8 файлами необходимо использовать flash.net.LocalConnection

The Flash Player 9 runs in a new ActionScript Virtual Machine (AVM). Though many new projects can be developed ground up using Flash 9 or Flex, it is likely that your projects will still be using elements and SWFs that have been published for the Flash 8 player or lower. Flash has always offered the ability to load up one SWF inside of the other and then you could treat that SWF as if it resided as a native inside the loading SWF, communicating and driving it directly within your application. Communicating between the two AVMs is no longer that simple. FlashInterface provides the means to communicate directly between the Flash 8 and 9 AVMs. FlashInterface will allow you to move forward, building Flash 9 player applications while still using existing SWF resources from previous Flash player versions
| Downloads & Documentation | |
| Download v2.1.0 | Download Examples (10 Mb) | Documentation * Note: The API is same for both AS 2.0 and AS 3.0. |