Archive Page 2

flexblogdatasql

20Май07

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.

MXML:

<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» />

 

Straight Actionscript:

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();
}

 

Example App

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.

Particle Illusion - General Interface

 

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.

Tool Bar Image

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.

First Bit

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)

Second Bit

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. =]

Third Bit

This set of tools is pretty much the same as the Move tool, yet Nudge offers you a lot more precision.

Fourth Bit

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


Flex MP3 Player

20Май07

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

Step 1

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.

Step 2

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.

Step 3

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..

Code :
<?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 :

Code :
<?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 :

Functions.as :
// 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!

Code :
<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

Download: Flex MP3 Player (All Sound Files) – 11 Mb

View Live Example

Go Back For More! | AddThis Social Bookmark Button


Create a Login System with Flex and PHP | 2006-12-23

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».

Step 1

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:

Contraints (0,-2)

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:

Step 2

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:

Step 3 - Complete Form

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. 

Code:
<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. 

Code:
<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 Tongue out . 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 Code:
  1. <?php
  2. define( "DATABASE_SERVER", "localhost" );
  3. define( "DATABASE_USERNAME", "user" );
  4. define( "DATABASE_PASSWORD", "pass" );
  5. define( "DATABASE_NAME", "flex" );
  6. //connect to the database
  7. $mysql = mysql_connect(DATABASE_SERVER, DATABASE_USERNAME, DATABASE_PASSWORD) or die(mysql_error());
  8. //select the database
  9. mysql_select_db( DATABASE_NAME );
  10. //asign the data passed from Flex to variables
  11. $username = mysql_real_escape_string($_POST["username"]);
  12. $password = mysql_real_escape_string($_POST["password"]);
  13. //Query the database to see if the given username/password combination is valid.
  14. $query = "SELECT * FROM users WHERE username = '$username' AND password = '$password'";
  15. $result = mysql_fetch_array(mysql_query($query));
  16. //start outputting the XML
  17. $output = "<loginsuccess>";
  18. //if the query returned true, the output <loginsuccess>yes</loginsuccess> else output <loginsuccess>no</loginsuccess>
  19. if(!$result)
  20. {
  21. $output .= "no";           
  22. }else{
  23. $output .= "yes";     
  24. }
  25. $output .= "</loginsuccess>";
  26. //output all the XML
  27. print ($output);
  28. ?>

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: 

Code:
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 Laughing

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…»:

Step 5 - View States

Step 4 - Creating New States

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.

Step 7 - 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:  

Code:
<mx:Panel ...

Add This:

Code:
<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!


teoflex

20Май07

Installation Steps

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.

  • Create a new Flex Project from scratch and copy/paste example applications into the project. Add applications to the project’s application list.
  • Import existing projects into the Workspace.
  • Import existing project Archives into the Workspace.

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. :)

Step 1 :: Placement of Library SWC

  1. Create a folder on your hard drive c:/dev.
  2. Copy the Library zip file into the folder c:/dev.
    • In this example the zip file is named FSCollectionFX1_1.0.106.

This example just copies the zip right into the workspace folder c:/dev.

Step 2 :: Switch Workspaces

  1. Select File.
  2. Select Switch Workspace....

Step 3 :: Create the Workspace

  1. Next to Workspace: enter c:/dev.
  2. Click OK.

Flex Builder will actually close and restart when switching workspaces. Flex Builder is now reinitializing to your current workspace preferences.

Step 4 :: Flex Builder Import

With Flex Builder open;

  1. Open the Navigator Pane.
  2. In the Navigator Pane right click to open the context menu.
  3. Select Import....

Step 5 :: Select import type

With the Import window open;

  1. Select Existing Projects into Workspace.
  2. Click Next.

Step 6 :: Browse for zip archive

We will now load just the Set1AssetsLibrary library project.

With the Import window still open;

Currently the Select root directory radio button is selected;

  1. Click the Select archive file.
  2. Click the Browse button.
  3. Navigate to the folder c:/dev and select the Library zip file.
  4. Once the zip file is selected, select Ok.
  5. You should now see the example projects selected with check boxes.
  6. Deselect all check boxes except Set1AssetsLibrary.
  7. Click the Finish button.

Flex Builder will now build the library project and create the needed SWC file in the bin folder.

Step 7 :: Load the 4 example projects

Now, repeat step 4, 5 and 6 up to the point of deselecting the projects.

  1. Select the project below.
    • FSCollectionFX1Example
    • Package1A
    • Package1B
    • Package1C
  2. Click the Finish button.

Step 8 :: All Projects loaded

Now check to see that your Navigator pane looks the the above image. If so you are right on track.

  1. If you do not see the new projects, repeat these steps.
  2. If you still do not see the projects, feel free to use the forum support board.

Step 9 :: All Projects loaded

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!

  1. Open the FSCollectionFX1Example project.
  2. Double click the BackgroundGradients.mxml file to open it in Flex Builder.
  3. Hit Ctrl F11 or Run and you should now see step 10.

Step 10 :: Hit the ground running

install10.jpg

Here is the default running of this example. Enjoy the ease of learning and experimenting with our user oriented project structure!


Отладка и Flex

May 4th, 2007

Не изобретение велосипеда, а использование mx.logging

FirebugTarget — показать то, что скрыто

Flex инструментарий

April 16th, 2007

Стили для Flex

Flex Style Explorer

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

Apollo

April 16th, 2007

Публичная альфа-версия Apollo доступна для скачивания в Adobe Labs. Для создания своего Apollo-приложения нужно скачать Apollo runtime и Apollo SDK.

Read the rest of this entry »

Как вставить swf файл в flex приложение

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

http://struts.apache.org/2.0.6/index.html

  • Build!
    • Easy startup – Jumpstart new projects with our bootstrap tutorial and template application or Maven archetype.
    • Improved Design – Code clean against HTTP-independant framework interfaces.
    • Enhanced Tags – Code less with stylesheet-driven form tags that provide their own markup.
    • Stateful Checkboxes – Avoid special handling with smart checkboxes that know when they are toggled.
    • Flexible Cancel Buttons – Go directly to a different action on cancel.
    • First-class AJAX support – Add interactivity and flexibility with AJAX tags that look and feel just like standard Struts tags.
    • Easy Spring integration – Inject dependencies into Actions using Spring without glue code or red tape. (Plexus support also available.)
    • Enhanced Results – Do more with speciality results for JasperReports, JFreeChart, Action chaining, and file downloading.
    • POJO forms – No more ActionForms! Use any JavaBean to capture form input or put properties directly on an Action class. Use both binary and String properties!
    • POJO Actions – Use any class as an Action class — even the interface is optional!
  • Deploy!
    • Easy plugins – Add framework extensions by dropping in a JAR. No manual configuration required! Bundled plugins add support for JavaServer Faces, JasperReports, JFreeChart, Tiles, and more …
    • Integrated profiling – Peek inside Struts2 to find where the cycles are going!
    • Precise Error Reporting – Flip directly to the location and line of an error.
  • Maintain!
    • Easy-to-test Actions – Test Struts2 Actions directly, without resorting to mock HTTP objects.
    • Intelligent Defaults – Skip obvious and redundant settings. Most framework configuration elements have a default value that we can set and forget. Say it once!
    • Easy-to-customize controller – Customize the request handling per action, if desired. Struts2 only does what you want it to do!
    • Integrating Debugging – Research problem reports with built-in debugging tools.
    • Easy-to-tweak tags – Customize tag markup by editing a FreeMarker template. No need to grok the taglib API! JSP, FreeMarker, and Velocity tags are fully supported.

Rapid AJAX versus Flex Flash Remoting

I was glazing through Macromedia’s blogs today and saw that there is much jubilee over at AdobeMacromedia about the new release of Flex (‘Flex-able’ Programming: Flex 2 Remoting ).  Which kind of got me thinking.  What would it take to have similar functionality in the AJAX web dev world?  Could we start with a remote layer that interfaces with a nice widget package like ActiveWidgets (which had a 2.0 RC release yesterday)?  Is the Zend Framework going to offer this kind of solution when it meets up with IBM’s ATK?  What would you like to see for rapid rich application development?  Lemme know.

Flash Lite 2 Development – Thoughts on the Google Calendar Aftermath

Now that the Flash Lite contest is officially over, and I’ve submitted my entry, I wanted to take some time to discuss my thoughts on the whole development process. The goals are to let others know what my current feelings are on the industry, on development for devices, and to hopefully provide context on if Flash Lite development really matters, and how, in the whole Flash Ecosystem.

My entry for the Flash Lite contest was a Google Calendar application. As the code base currently stands, it allows you to see your appointments as well as create new ones. The data comes from your Google Calendar data. If you have GMail, you have a Google Calendar. In the busy past 3 months, I’ve come to depend on Google Calendar to keep my life on track; there is so much going on right now that it really helps to keep me organized and set availability expectations to others. I’ve tried a variety of online calendar applications as well as Outlook’s built-in one for PC, and iCal (?) on my Mac. To me, Google Calendar is the best strictly because it’s accessible from anywhere, on any computer whether mine or someone else. I didn’t really get the chance truly battle test any of the other online offerings so I still haven’t settled on Google Calendar being the best, but you’d be surprised how much a «calendar» hyperlink in your web browser’s email window really sways your opinion.

I’ve used Gmail’s BlackBerry version which allows you to read your Gmail on a BlackBerry. BlackBerry’s in general are super hot, and for such a small device, have a pretty powerful & speedy web browser. I can read MXNA for example although not all blogs render the same, it’s still usable. I was immensely impressed with the application, and it «felt» like GMail did even though this was a tiny device with Cingular’s EDGE (which is good enough for this type of data application, regardless of what the iPhone critics say).

I saw someone blog a few months ago a Google Calendar application they created with Flash Lite 1.1. I was blown away. I had the idea 3 days before of building a calendar application on my phone, and was then investigating if any of the calendaring web applications had an API I could use. I found Google’s did, although, the documentation wasn’t in the API style I was used to. Amazon.com for example assumes you are a programmer, and shows you the methods, descriptions, parameters, and the responses. They even provide example code in multiple languages. Thanks, that’s what I was looking for.

Google’s, however, takes a more work flow approach and walks you through using 3 example scenarios such as getting your list of calendars and getting entries (aka events, appointments). There is a strong emphasis on how it works using the Java client API as well as expecting you to investigate their REST like HTTP protocol XML formats which are very disparate, spread out, and verbose. To me, this makes it extremely hard to get up and running quickly; you really have to get intimate with the GData format, and «care» about how it all works. I really don’t think this is necessarey, but they do. Frankly, that’s not how you document a public API. However, they compensate by having a very helpful email list. A lot of the guys on there answered my questions very well in a reasonable period of time.

I quickly gave up on their SMS gateway… I just didn’t get it. I saw the dudes who wrote the Flash Lite 1.1 used it heavily. To me, though, that broke the experience, and I refused to accept that as a viable way of doing things. The SMS stuff on my phone didn’t send SMS messages from the Flash Lite SWF; instead, it opened my phone’s text messaging app. Screw that. I wanted to create an all encompassing application; a self-contained, good experience. Breaking out to other apps for helper functionality was not what I wanted to do.

I started experimenting with hitting Google’s API directly from Flash. I had very positive results. Creating the XML by hand was a royal pain in the neck, but once I had reproducible test cases (basically a FLA specifically created to test one aspect of Google Calendar’s API), it was pretty easy to build upon that foundation.

Psyched, this was the motivation I need to have a valid need to create some Flash Lite 2 components. Over a year ago, I had tried to do this with Richard Leggett. I quickly lost interest, though, because at the time, non-device Flex & Flash work was (and still is mind you) in high demand. There was basically no way I saw to make any return on investment on what I coded. Even the community was then focused more so on Flex development, so there really wasn’t a large device developer audience. There still isn’t I don’t think.

Last summer, I had spent over 3 months in Detroit working at a design firm. We were «re-skinning» an extremely large, data-driven Flash website for a car company. The code was unusable based on our goals, so I proceeded to create a usable component framework. We couldn’t use the MX components, which I still love, because of file-size reasons. I knew I could create the same set, again from scratch, insanely faster than the first time, and target them for devices. I set out in November in my spare time to create a new version specifically made for Flash Lite 2. I named them «Shuriken«, based on their goals of being fast, lightweight, and providing many different components to help common developer needs.

About the same time, I started to really get tired of touting Flash & Flex integration. The number of companies flocking to using Flex was insane. While a wonderfully, positive sign, the majority of those companies either had no concept of what graphic designers, 3D, and video compositors brought to the table, the «Rich» in «Rich Internet Applications», or just didn’t care. The level of control using CSS, skins, and the ways of skinning components using NJ’s article as your guide was apparently covering 90% of the use cases out there for mid to Enterprise size applications. I still think that some of the use cases are flawed, but that’s merely because the industry still needs to grow. For some, CSS and/or just skinning is fine. The same thing Microsoft wants to happen has to happen with the Adobe customers as well. Software companies bringing multimedia skill sets on board to augment, and thus complete their teams. Programmers alone cannot fully leverage the Flash Platform or WPF platforms without design talent. What we all think is cool now won’t be so in a year, and will be old hat. The fact that these long term, large & highly experienced development teams are integrating Flex into their work flows & projects vs. modifying their work flows & projects around Flex is a testament to how «right» Adobe was and is in creating Flex for that market.

With that said, as these companies start wrapping their head around Flex, what it offers their company, and come to the realization that Flex is used to create «applications», not websites that hit back-end services, things will truly start moving forward. The 10% that either do get it, or just have valid design use cases, have been very keen on getting someone like me on their team because of design & Flex background as opposed to Enterprise Java development experience. This is a very positive thing for all the Flash Developers out there with similar backgrounds. We have a lot to offer these companies, and they us.

…that said, that 10% is small right now. Even worse, most of the start ups are still using Flash Player 8 because of player penetration numbers compared to Flash Player 9. So, I needed something to talk about at WebDU 2007, the Asia-Pacific conference down in Sydney, Australia. I was already speaking about Flash & Flex integration at 360 Flex, and was pretty tired of repeating the same thing, knowing that things will change in due time, just not fast enough for impatient-me. About the same time I started seeing Alessandro and others blogging about all of these new devices coming out with Flash Lite 2 capability. I still don’t know enough about Verizon’s BREW platform to really have an opinion, but I DO know that a lot of the mobile operators in the US were seriously struggling to capitalize monetarily on their data offerings for the average consumer. There were little to no incentives for the average Joe to utilize his Internet enabled phone, and these carrier’s are left wondering why? At least, that’s what the financial reporters seemed to think. Like any big company, usually the ladies & gents in the trenches do understand and somehow politics seems to sabotage the whole affair for some. Sometimes they do too good, like T-mobile who recently is thinking about preventing all 3rd party applications from accessing their data network.

The nail in the coffin, though, was my last day up in Detroit, at the larger design agency. I asked their Director of Engineering if they ever thought they’d do any Flash Lite work. He actually had a pretty neat history back in ‘96 doing a lot of ahead-of-its-time device work, so I really valued his opinion. He said, «Come back in a year.» I was extremely surprised by his answer. I couldn’t believe that soon. I managed to sputter out, «How come a year?». He proceeded to explain that the car company’s CEO wanted to see a picture of a car that was at a dealership. His daughter then sent him a picture to his phone she had gotten over the Internet. Apparently this was «ground breaking» technology to him. Additional corroborative data was the highest selling ring tone & wallpapers were of the car company’s premier car offering. People want to customize their phones, and they are willing to pay for brands they know and love. Those brands in turn want to further that relationship and provide offerings to not only make money off of the brand, but keep retention. Agencies naturally will use whatever technology to do so, and it seems later this year is ripe for that for more of that in the US. Frankly, I still think that’s Flash Lite 1.1 which I refuse to touch with a 10-ft. pole. Regardless, you know if engineering divisions at large design agencies are charging in, it’s only a matter of time before development firms get involved for more sophisticated offerings.

Suddenly, I knew what I was doing was relevant. Maybe not necessarily now, but it’d only get more relevant over time. As someone who loathes doing things that have no point, suddenly I had nothing holding me back. Even managing to talk to Dale Rankine at MAX 2006 and hearing an honest response that there really wasn’t a business market for what I was doing didn’t matter. While I greatly respect his opinion since he’s one of the few dudes I know actually making money off of Flash Lite, the signs were all there. They have been for years, in fact, so much so Macromedia and later Adobe pretty much deafened us with «It’s coming». It eventually became extremely annoying and turned a few of us to perceive that as a cry wolf scenario. It was a pretty easy rebuttal: «Show me the money.» Oh… well… um… working with Operators… go to Japan… blah blah blah.

Regardless, I’m tired of waiting on the Enterprise to learn that they need Graphic Designers, Flash Designers, and/or someone to mediate the 2 groups in Flex work so figured this was something to occupy my time until things change. Besides, I like a challenge, and Flash Lite is f’ing hard. So much so, it became purely masochistic at some parts of development.

How hard? Well, as I started implementing some component tests around my early successes in talking with Google’s API in Flash, I quickly started running out of RAM and CPU. The script timeout error on a phone is «Problem with Content: 4″. You see that, you’re either using too much CPU or out of RAM. There is no way to check, either, other than running in the emulator, and then testing on your device. There were a plethora of culprits, but I was basically at my first crossroads. Do I use a pure Flash Lite solution, or do I get a middle-tier involved to reduce the amount of data I have to parse on the client, since parsing itself isn’t so straightforward on a phone? For example, if you thought XML.parseXML was bad, try looping through nodes when loops in general have a high propensity to make a stack overflow on your phone. You have to do the whole «parse over frames» bit if you want the code to scale at all. After realizing that I needed to ensure users didn’t have high data bills since T-mobile appears to be the only one currently offering unlimited data plans in the US, I realized a middle-tier to convert the data for me was a very prudent move. While Flash Lite is nice in that it doesn’t suffer from the security sandbox that desktop Flash does if it’s running in the Flash Player on the device, it didn’t really matter. I’d still have to use my server to make the app work. This is what motivated me to write about Flash Lite being a good presentation layer… because I failed to see how the hell it could be anything else if it couldn’t parse simple XML chunks AND show a few components. Apparently many others do just fine, so you can see how very little ActionScript they are using.

However, even smaller XML chunks still made it fail on a lot of the other areas. So, I then tried JSON. I had some initial successes since there were some pretty good JSON libraries for PHP and ActionScript 2. I quickly ran into the same problem, though. Any type of looping quickly taxed the already over burdened CPU, in this case, JSON parsing a string to objects. My second crossroads was to just ditch all XML and JSON, and use basically primitive url encoded variables. LoadVars ‘ decode method is pretty fast, and since it’s done in C inside the player, it’s wicked fast compared to manual ActionScript parsing of XML or JSON over frames.

This is also about the same time my programmer Ego as Branden Hall likes to call it started to take a nose dive. I started finding the more OOP I added (ARP framework, multiple base classes, copious invalidation methods), the less my application scaled. This is contrary to what I’ve learned the past 6 years. Basically, the precept of OOP is that the more object oriented you are, the more your application can scale, and be resistant to change. However, the overhead caused by OOP has a direct impact on the performance and RAM usage of your Flash Lite 2 application. For example, Flash Lite 2 is basically Flash Player 7. You can write in ActionScript 2, but it compiles down to ActionScript 1 prototype bytecode . So, classes are really just prototype objects in a chain. If you call a method that is not on the current class, the player has to walk up the prototype chain. This takes a lot of CPU. Furthermore, prototype classes actually exist as objects vs. traditional classes which are really just blueprints. Therefore, more classes means more RAM usage. Creating instances of these classes uses more RAM than smaller, less OOP versions. You thus are using more RAM with more OOP classes who they themselves use more RAM to actually instantiate, thus leaving you with far less RAM had you used a non-OOP approach. This was the first time I was ever punished by using OOP (well… not counting the time I tried to code nicely during an insane deadline in which I had no chance of winning, but death marches don’t count in this case).

I really started getting frustrated, and feared that over a month’s worth of work was for naught. I managed to see interest in Greg Burch from Adobe’s Mobile division. So, I gave him a call, and discussed my approaches, and asked for advice. It was a great series of conversations. He did, however, eat up my code and spit it out. I had basically taking the Flex 2 component invalidation model where you set a property, set a dirty flag, iterate through all dirty flags next frame, and then run the appropriate invalidation drawing methods. This ensures that you have no race conditions, and that you only draw once per Flash Player frame redraw. The problem? The invalidation framework took too much overhead, and actually detracted from performance rather than shield developers from the complexity of the Flash Player rendering engine. For 80% of the properties of a class, it had an associated dirty flag. While I could potentially not set their default value to false and delete them once validating without even having to change my if then statements, thus saving RAM, their creation during invalidation added to much still. The getter / setters also had overhead. While a wonderfully clean way of accessing components, they themselves added 10 milliseconds of execution time: 5 for the setter, 5 for the automatically called getter. This cascaded on down to other components used in composition.

So, I let Greg take a crack at optimizing my framework. He pretty much deleted all of my dirty flags, and basically gave invalidation an afterthought relying instead one the developer not to set a property 50 times in the same frame. While this significantly reduces approachability… he technically was right about the use case scenario. Most people coding AS2 for phones knew what they were doing. If not, they weren’t doing a lot of coding anyway, and thus wouldn’t have code scalability issues. We debated & discussed various invalidation strategies, and I just settled on the old MX one of calling invalidate. Simple, straightforward.

I tagged the branch in SVN, kissed it goodbye till Flash Lite 3, and proceeded to spend the next 2 weeks re-factoring the entire code base, both the Shuriken component framework, and the Google Calendar code. Upon finally reaching a point where I could compile again and run code, I found my RAM usage was greatly reduced, and I could put more components on stage at one time. During this time I even managed to talk to some developers in the in the Flash agency world to see how they were coding. To my surprise, a lot of the old ways of coding still thrived in the AS2 world, so over another week, I quickly dropped more of my ego and really didn’t mind typing my_txt._width vs. my_txt.width. That underscore may not appear as a big deal, but… well, trust me, it is. It’s really really hard to go back to the old ways of coding when you’ve been taught the hard way how much it screws you over in code scalability & flexibility. In Flash Lite, you don’t have a choice.

This whole time, I’m in way over my head in PHP. I don’t «do» server-side development. I can code Perl, PHP, and Ruby, but they are not my strengths, and I have no intention of improving them. Yet, I didn’t have anyone to make a server-side API for me. Upon searching Google, there were a few code snippets in PHP written to talk to Google Calendar, but none created as an API; most were for use by HTML developers. The majority of PHP out there written for use by HTML devs is typically the integrated kind, meaning tags in HTML; functions being integrated into your display markup. To me, I’m an avid MVC guy, and that stuff is nasty. Ruby on Rails has the sme crap and I hate it. So, I basically had to create my own PHP API to Google Calendar. That itself was wrought with problems that is out of scope of this already verbose blog entry. Suffice it to say I still don’t like server-side development, but I wouldn’t be here today if it weren’t for PHP.

Both angles, on the server, and the client, taught me way too much about time codes, dates, time formats, and other weirdness dealing with time it is relative to «where» you are in the world.

The last bit was just getting the application design down. I had her majesty design me an initial comp based off of my wire frames. We’ve done at least 3 interations since using an application on a small phone screen via your thumbs is totally different than a mouse & keyboard on the large desktop one. I really miss the layout tools that Flex has; doing layout & colors by hand in code sucks and is time consuming to get «just right». The code is also frustrating since making a base class just for design purposes actually has too much RAM overhead.

One great selling point of Flex Data Services was the error handling the Flex team had put in there for returning nice server-side Java exceptions to the Flex client. Without FDS, you have to code those yourselves. I am having the same problem with PHP. There are 10 billion things that can go wrong, and trying to provide something meaningful to the Flash client so it can respond is really really hard. Furthermore, Flash Lite has errors that I can’t even catch, like «Data failed to load». No clue why this happens, it just does intermittently and I have to pray the user clicks «Continue» on the soft key instead of «Abort». Making reproducible test cases for bug fixing is a royal pain too, because debugging on a phone is nigh impossible; even a debugger text field to report debug data is hard because you already are pressed for screen real-estate and system resources. I did my best to handle errors, but a lot of it is faith based; you handle as many errors in the Delegates (using ARP, it’s like Cairngorm) and pray you got 90% of them. Lame, but it’s what we have.

Now I’m done, the first version is off to the contest. I really hope I win in the applications category. Just because it took me 4 months to build a component framework, an application, and a back-end Google Calendar API doesn’t necessarily mean my application is easy to use, looks good, works, and performs well. It doesn’t really matter, though. While I’m all about winning in life, I learned a ton in the past 4 months, and since I got bored of Flex for awhile, it was a nice diversion. I don’t think there is a career yet in Flash Lite 2 development for me. Not so much in deployment since those content networks are improving all the time (Moket, Handango, Verizon’s Brew), and not so much work since I’ve actually seen 2 contract jobs come up for Flash Lite dev work in the past 6 months. Rather, the skill sets expected by the industry right now isn’t up to par with what you typically see in Flex & Flash Development. That translates to lower hourly rates. Bottom line, it’s hard for me to get clients to pay Flex Developer consulting rates for Flash Lite work.

Hopefully that’ll change since the work has the potential be really fun if the scopes of the projects aren’t much larger than your atypical conference app, or my Google Calendar. I don’t see the actual development industry reaching a level of relevance until Flex can output for Flash Lite 3, though. The same reason Adobe made Flex is the same reason there aren’t many Flash Devs specializing in Flash Lite 2 development, never mind the lack of a market to deploy your content too. Even though the market for Flash wallpapers, screen savers, and games is in fact profitable outside of Japan, the portal site market is only slightly growing to relevance, but you don’t need a developer for those types of content. The application market just isn’t there at all yet.

Like I keep telling all of these recruiters & hiring managers, the amount of qualified Flex Developers will increase with time, so things will get better soon. I think the same can be said with Flash Lite applicability. Even if we are sick of hearing the marketing bs, there is no denying more phones are shipping with Flash Lite 2 capabilities, the distribution networks are making great strides in creating partnerships that can give us developers good opportunities to sell content, and that Adobe is fully behind getting Flash on devices. The first part is important to Flash Developers because we can transfer our same skill sets to work on phones, and that’s just rad. There are challenges, yes, but most Flash Devs I know fear nothing and love the challenge. Seeing a SWF run is enough positive reinforcement to justify it.

Comments

Hi Jesse, Great post. Thanks for sharing your thoughts and real world experiences when it comes to developing Flash Lite applications and how it compares to your experiences with Flash and Flex development. I’ll ping you offline to follow-up on some things you mentioned.

Posted by: Bill Perry at March 2, 2007 07:49 PM

Bill–feel free to share stuff here too… I’ll read it.

I have a couple direct comment/questions:

‘Come back in a year’ funny… that line is what Macromedia has said for the last 5 years or so! (Not their fault of course.)

I didn’t know the security model was different in flashlite–is that because Flash 7 is different than 8? I guess I could research it but this is news to me.

OOP is for the developer not the app low end performance. Back in the dark ages, I learned that when they added dot-syntax to Director it was actually slower than the verbose version… that’s fun.

You said scalabiliy… you’re just talking about scalling up the sophistication of the app right? It’s not like you’re concerned with millions of users downloading the app, right?

Do you have a web port for us to check out or maybe just a video of you calendaring? I want to see.

Good luck on the contest.

It’s good to hear your discussion above. Hearing (from you especially) that it’s difficult makes me feel better because I just cranked out these chumby apps to find very quickly that there are a ton of tricks you need to keep the RAM down. The emulators don’t deal with that right?

Finally, did you investigate using Java at all? It seems like such another world but it seems like it’s a worthy alternative. Naturally, I could be off on this subtopic.

Posted by: Phillip Kerman at March 2, 2007 09:28 PM

The security model is the same as Flash 7 running in a Flash Player 7 desktop SWF. So, you can hit any domain you want. This doesn’t count for SWF’s running in a browser, though, only the Flash Lite projector player.

Thankfully, too, it doesn’t have the Flash 8 bs (which is unfortunately justified) of not being able to access both local and remote resources. Betcha $10 bucks, though, Flash Lite 3 does have that restriction. Regardless, for the Symbians, I’ll just throw my customers a SIS, modify their registry, and tell the security sandbox to suck it.

When I was learning dot syntax in Director, I didn’t know anything, so… frankly, I couldn’t tell the difference, hehe.

Yes, correct, scalability of code working with more data or changes in the requirements for the application.

Yes, when I get back from 360 Flex, I’ll put up a demo. I’ll post the app on the 15th of March.

Good luck on the contest.

Thanks!

Frankly, I’m not sure how the emulator gets its data, and I certainly don’t trust it’s representation of Garbage Collection… but memory in Flash has always been a mystery; delete n’ pray.

:: shrugs :: I don’t know about you, but if you’ve ever done an AS2 project vs. an AS3 in the same realm, AS2 is just insanely faster to develop in. Furthermore, stuff that ISN’T supposed to work does meaning you don’t have runtime exceptions ruining your day. If you know the error is harmless, your content just goes on like nothing happened. I’m sure if I was building an Enterprise application, someone could throw the strong-typing angle at me… but:

  1. You can’t
  2. Most apps are small in scope
  3. They are more design oreinated, and more concerned with deadlines vs. ‘how scaleable is the code?’

A conference app for example only needs to work for 3 days… and then maybe even another 4 as people demo it or something.

I mean, seriously, you and I have talked about this; have you gone even 1 day this week where you didn’t get a script error for some Flash Player 9 content?

I can go to newgrounds.com or albinoblacksheep.com and see plenty of amatuer & professional content from a variety of people around the world… and it all works.

What does that have to do with Java? Well…

  1. I have a transferrable skillset that can be leveraged on devices
  2. Flash is easy to design in (not the code part)
  3. My stuff will work on a variety of devices (so I’m told)

So, I know Flash Lite, and can code it now. I don’t have to learn a new toolset. Secondly, I’ve never seen or heard good things about ‘designing in Java’. Doesn’t mean it doesn’t exist, I just don’t hear a lot about it, and thus take that at face value. Third, some of the early components I sent out on the Flash Lite list were tested by dudes on phones all over the planet… and they worked! That’s f’ing hot to know that my content doesn’t need to be modified code wise, only design wise.

Java, from what I’ve seen, is a lot like AS3, and my love of AS2 is that you can put enough loose typing in there to get stuff done, and done quickly. Of course, I’m sure if I met a J2ME dude who knew what he was talking about, he may change my mind. Till then, Flash Lite FTW!!!

Mastering Full Browser Flash (Part 1)

Created By  Benjamin Mace, at  3/22/2005 - 31 comments.

Click to view this author’s website.

What is Full Browser Flash? It’s not an official term or anything… it’s just a term I created to describe using Flash to encompass 100% of the browser window and it’s currently a big trend in Flash site design. Full Browser Flash (we’ll call it FBF) is different from Full Screen or chromeless sites. With Full Screen sites, developers launch a browser window that takes over the user’s entire screen, void of normal browser chrome (outer window elements) and browser controls. Full Browser Flash on the other hand, maximizes the Flash SWF embedded within the HTML to scale to 100% of the window, regardless of the browser’s current dimensions.

Recently there has been a large flux of FBF in the Flash design community. You can see a few examples below:

http://www.sorenhald.com *
http://www.douglasfisher.co.uk *
http://www.matthewmahon.com *
http://www.georgeharrison.com *

It’s not really a new technique whatsoever, but it is a recent trend in my opinion. So what is it all about and what’s the big draw? There are many advantages to using FBF. First off, the technique, in combination with newer stage properties in ActionScript, allows you to have the largest possible amount of real estate in a given browser window. It offers you the designer/developer to present a layout that isn’t entirely restricted to the user’s monitor settings. Designing in HTML often sets restrictions of movie size based on the client’s target demographic, resulting in stamp sized sites in a canned rectangle around 750 pixels wide. FBF is a great advantage for something like OS style GUI applications etc. Real estate isn’t the only benefit though.

Another draw by designers to FBF is the seamless integration of background and foreground elements. Take a site with an embedded SWF size of 700×500 that you would like centered in the user’s browser. Designers are limited to a handful of techniques to present the site without framing or boxing in the content. Using identical background colors in the SWF and the HTML is the easiest method. Sites like Steven Giesler’s portfolio (http://www.stevengiesler.com *) use this technique as we can see by the black on black match. You can tell by right clicking around the content and on the content where the HTML/Flash resides.

Other techniques to eliminate a framed in look of the HTML include using background patterns or surrounding graphics to integrate the background of the HTML as with Agencynet (http://www.agencynet.com *) and Alberto Cerriteno’s portfolio (http://www.albertocerriteno.com *).

Designers will often decide to use pop up windows that are the same dimensions as the SWF such as Robots (http://www.robotsmovie.com/index.php). These pop ups usually will fit the target audience’s machine and allow an end to end fill of the SWF movie at the same size. This creates a focus of the movie without the trouble of having to polish surrounding unused space. Many browsers and ISPs provide pop up blockers which may cause frustration on the user’s part though.

By enabling the FBF method we eliminate as many unwanted layout factors as possible on the web today and we can make a more engaging experience for our audience with minimal frustration. In the next several articles I’m going to discuss how you can employ this technique and the many different methods you can exploit the new stage real estate.

Upcoming Articles:

- HTML Settings & Eliminating Scaling
- Laying Out Content With Listeners
- Creating Background Tiles

*Please note that this article was written 3/2005 and site designs change frequently. Referenced URLs may not demonstrate the fore mentioned technique as time passes.

Recent Articles by  Benjamin Mace
  • Controlling Sound Part 2
  • Controlling Sound Part 1
  • Understanding _root & Scope
  • Using Shared Fonts
  • Optimizing Large Pizza
  • Getting Sloppy With Your Connection
  • http://users.pandora.be/mikejames/intro.fla
  • had to contribute with some more FBF examples:
    http://www.marumushi.com/apps/newsmap/newsmap.cfm
    http://www.revolvercreative.com/flash.html
    and my own portfolio flash system build using FBF:
    http://www.youki.be/demo.cfm
  • Ive been struggling to find the glitch in the intro I made with this technique, my flash objects only go full screen after refreshing the browser window.
    http://users.pandora.be/mikejames/intro.html
    here’s the FLA: http://users.pandora.be/mikejames/intro.fla
    Any help is much appreciated
  • www.turtleshell.com/2000
    this guy is also the creator of
    www.noscope.com
    FBF in your words is not trendy or new to many flash developers at all..this example i first saw over the net used by Asmussen gets us back to year 1998 or spmething(whee i was a kiddo then)
    i lllooovve to see more ‘FBF’ samples (i also use it as an approach of an attractive and artistic way of design in flash) however, it is not ‘yet’ necessary for any company or any client to make such sites :)
  • Ive been struggling to find the glitch in the intro I made with this technique, my flash objects only go full screen after refreshing the browser window.
    http://users.pandora.be/mikejames/intro.html
    here’s the FLA: http://users.pandora.be/mikejames/intro.fla
    Any help is much appreciated
  • so apparently I am a follower of the same trend!
    but with variations.
    in my case my page
    http://www.albertosughi.com/default_april_2005.html
    not only it opens itself throughout the entire browser but also it resises to its minimum size…
    Interesting stuff anyway!
  • Demo
    http://www.ecnnct.com/a2design/a2designDemo.html
  • http://www.palaciodeferiasycongresosdemalaga.com/
    http://www.gen8020.com
  • certain developers have been doing this for (almost) years, or at least since the Stage object has been accesible. credit is certainly due to this guy in particular:
    http://www.yugop.com/
    and some of his FBF projects over the years:
    http://www.intentionallies.co.jp/content_full.html
    https://www.ecotonoha.com/ecotonoha.html
    and more recent:
    http://amaztype.tha.jp/US/Books/Title?q=flash
    http://www.nagaoka-id.ac.jp/gallery/gallery.html
    btw, this ‘add a comment’ functionality is extrememly annoying; when one accidently leaves our the security checker, and then hits ‘back’ on the error page, one’s entire post is lost. grrr.
  • Cool post…Just my two cents on the concept
    A post I made a while back…
    http://www.untitled07.com/2004/06/defining-canvas.php

e Docking ToolBa

14Май07

The Docking ToolBar component that was released by the Adobe Flex Team has been contributed to FlexLib. This component was originally released on Adobe Exchange. The description from the Flex team:

The docking toolbar component collectively helps managing toolbars in an application.

The toolbars can be docked to the top or bottom edges or kept floating within application area. The contents within a toolbar use a flow based layout approach.

A big thank you goes to Matt Chotin at Adobe for supporting the FlexLib project and getting this contribution into the library.

Future updates to the DockingToolBar will be found in the FlexLib project, and bugs and feature requests should be logged here.

Here’s a sample showing off the Docking ToolBar component:

//



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.
Ноябрь 2009
Пн Вт Ср Чт Пт Сб Вс
« Сен    
 1
2345678
9101112131415
16171819202122
23242526272829
30