RiaCodes » Flex

Create a Show/Hide Sliding Panel using Flex

admin — Thu, 19 Nov 2009 15:16:15 +0000

This tutorial will show you how to add a nice hide/show sliding panel at the top of your flex application that when clicked will reveal itself.

1. Create a new flex project named SlidingPanel, set the name of the main MXML application file to Main.mxml and set its layout to absolute.

2. First let’s create the top panel. To do so add a Canvas component and give it an id of “panel”. To make it open or close, add a Button at the bottom of the canvas and set its properties as shown in the code below. Its click event will be handled by the toggleBtn function that we are going to create later.
When the application will be launched we want only the button “Open” to be visible so in order to do that set the canvas y property to -180.

We let you put your own content inside this panel.

3. To make the panel appear and disappear we need to create 2 Move effects, one to slide out and the other to slide in.
The first one will be used to open the panel. To do so set its yTo property to 0 so that the panel is fully visible and when its effectEnd event will occur we set the label property of the button to “Close”.
Follow the same process for the second Move effect that we’ll use to close the panel.
To make these effects more eye-catching, we add a bounce easing.

4. Next add a Script section to create the toggleBtn function. In this function we check whether the panel is opened or not and we play the corresponding Move effect.

5. Finally we add some CSS to custom the app.


		Application{
		   backgroundGradientColors: #E2DEDE, #3C2580;
		}
		LinkButton {
		   rollOverColor: #000000;
		   selectionColor: #000000;
		   color: #ffffff;
		   textRollOverColor: #ffffff;
		   textAlign: center;
		}

Here’s the final code, run your application to see it in action.




	
		Application{
		   backgroundGradientColors: #E2DEDE, #3C2580;
		}
		LinkButton {
		   rollOverColor: #000000;
		   selectionColor: #000000;
		   color: #ffffff;
		   textRollOverColor: #ffffff;
		   textAlign: center;
		}

Build an Automatic Slideshow with Flex

admin — Sun, 15 Nov 2009 11:47:28 +0000

This Flex tutorial will show you how to build a slideshow that will change the images automatically with a special appearance effect.

1. Create a new flex project named Slideshow, set the name of the main MXML application file to Main.mxml and set its layout to vertical.

2. First add an Image component and give it an id of “img”. Everything else will happen in the Script section.

3. Add a Script section.
Create 2 variables, one as an array that contains the pictures and the other that keeps track of the image that will be displayed.
Put your image files inside an assets folder.

4. Create an init() function that will be called for the creationComplete event of the Application.

In the init() function, load the first picture and increment the index variable. Next declare a Timer variable and add its event listener that will be handled by the changeImage function.

private function init():void{

	img.load("assets/"+pictures[0]);
	index ++;

	var timer:Timer = new Timer(5000);
	timer.addEventListener(TimerEvent.TIMER,changeImage);
	timer.start();
}

5. In the changeImage function we simply load the next image and increment the index variable if the array’s limit hasn’t been reached.

private function changeImage(e:TimerEvent):void{
	img.load("assets/"+pictures[index]);
	if(index
6. So far if you test your app, all should work fine but to make it more special we will add an Iris effect to the image’s  appearance.
private function init():void{

	img.setStyle("completeEffect",Iris);

	img.load("assets/"+pictures[0]);
	index ++;

	var timer:Timer = new Timer(5000);
	timer.addEventListener(TimerEvent.TIMER,changeImage);
	timer.start();
}

7. Here’s the final code, run your application to test it.

Build a XML Driven Accordion Image Gallery

admin — Sat, 07 Nov 2009 11:15:58 +0000

The following Flex tutorial will show you how to build an accordion image gallery populated using XML datas.

The photos showcased in our gallery are part of “35 (Really) Stunning Photos and Pictures” Smashing magazine list.

1. Create a new flex project named AccordionGallery, set the name of the main MXML application file to Main.mxml and set its layout to vertical.

2. All of the informations about the images showcased in the accordion gallery are stored in an XML file. Create an xml file that match the following structure and save it as datas.xml in the src directory :



	
		Photo by Simon Shareef
		1.jpg
	
	
		Photo by In Cherl Kim
		2.jpg
	
	
		Photo by Perico Terrades
		3.jpg
	
	
		Photo by Frank Daske
		4.jpg

3. Next, create an assets folder and put your image files inside.

4. In the main.mxml file, use the HTTPService component to load the Xml datas:

5. Next create a Script section. Declare a variable named pictures as an arraycollection and defined as bindable. This variable will hold the datas retrieved from the xml in the serviceHandler function :

6. In order to finish the xml datas’ loading , don’t forget to call the HTTPService’s send method :

7. Now we just have to create the accordion. To do so, first add an Accordion navigator and set its width and height.
Next use a Repeater and bind its dataProvider with the pictures variable.
Inside the Repeater, add a VBox component and bind its label property to the picture’s title. Inside the VBox add an Image component and bind its source to the file property of the picture.

8. To custom the accordion change its openDuration property and set its creationCompleteEffect to an Iris effect so that the accordion’s appearance will be more attractive.

9. Finally we add some css to custom the app.


		Application {
			verticalAlign : middle;
			backgroundGradientColors:#5F73EF,#02072B;
		}

		Accordion {
   			headerStyleName: "myaccordionHeader";
		}

		.myaccordionHeader {
		   color: #02072B;
		   fontFamily: Georgia;
		   fontSize: 14;
		   fontStyle: italic;

		}

10. That’s it, here’s the final code, run your application to test it.




	
		Application {
			verticalAlign : middle;
			backgroundGradientColors:#5F73EF,#02072B;
		}

		Accordion {
   			headerStyleName: "myaccordionHeader";
		}

		.myaccordionHeader {
		   color: #02072B;
		   fontFamily: Georgia;
		   fontSize: 14;
		   fontStyle: italic;

		}

Create a Custom Animated Cursor for your Flex app

admin — Wed, 04 Nov 2009 11:03:33 +0000

In this Flex tutorial, let’s see how to replace the default arrow cursor with an animated cursor created in Flash using the CursorManager class.

1. Create a new flex project named AnimatedCursor, set the name of the main MXML application file to Main.mxml.

2. Our custom cursor is a swf file, so open Flash and create your own custom cursor. Set the framerate to 24 to match with the Flex framerate. Here we simply draw an arrow by hand and create a tween to change its color which is quite boring but we leave it to you to make a more creative one.
Publish your swf file.

3. Back into Flex, add a Checkbox component that for its change event call the toggleCursor function that we’are going to create.

4. Add a Script section. First, embed your swf file that will be used as the custom cursor.

[Embed(source="cursor.swf")]
private var AnimatedCursor:Class;

5. In the toggleCursor() function, we check whether the checkbox is selected.
If true, call the setCursor() method of the CursorManager class and pass it a reference to the class of your embedded swf cursor.
The setCursor() method returns an ID for the cursor being set that you need to store as we’ll need to pass the ID to the removeCursor() method.

 import mx.managers.CursorManager;

 private var cursorID:int;

 private function toggleCursor(e:Event):void{
          if (e.currentTarget.selected)
            	cursorID = CursorManager.setCursor(AnimatedCursor);
          else CursorManager.removeCursor(cursorID);
 }

6. Here’s the final code, run the application to test it.

Build a Drag-and-Drop XML Image Viewer

admin — Thu, 22 Oct 2009 17:34:18 +0000

In this Flex tutorial, we are going to create a drag & drop xml driven image viewer that when the user drags a thumbnail and drops it inside a box it will display the image’s bigger version.

1. Create a new flex project named GalleryDragDrop, set the name of the main MXML application file to Main.mxml and set its layout to vertical. Set its horizontalAlign property to “center”.

2. All of the informations about the images showcased in the gallery are stored in an XML file. Create an xml file that follows this structure and save it as datas.xml in the src directory :



	marilyn1.jpg
	marilyn2.jpg
	marilyn3.jpg
	marilyn4.jpg
	marilyn5.jpg

3. Next, create an assets folder, and inside it create a “thumbs” folder where you store your thumbnail image files with names matching the xml file, and create a “big” folder to put the big images.

4. To load the datas from the xml use the HTTPService component :

5. Next create a Script section. Declare a variable named images as an arraycollection and defined as bindable. This variable will hold the datas retrieved from the xml in the serviceHandler function :

6. In order to finish this process of loading the xml datas, call the send method of the HTTPService :

7. To display the thumbnails use a Repeater and bind its dataProvider with the images variable.
Inside, add an Image component to display the thumbnail.

8. Beneath, add a VBox container with a black background that will be the drop zone for the thumbnails. Add an Image component with an id of “bigImage” to diplay the big image.

9. Now let’s add the drag and drop interactions between the thumbnails and the black box.
In order to be able to drag the thumbnails, add a mouseMove event listener.

10. The initiateDrag function handles the mouseMove event. Inside this function, we instantiate a dragInitiator, a dragSource that holds the data being dragged and we also specify a dragProxy which is displayed while the object being dragged.

private function initiateDrag(event:MouseEvent,value:String):void{

       var dragInitiator:Image= event.currentTarget as Image;   

       var dragSource:DragSource = new DragSource();
       dragSource.addData(value, 'value');

       var dragProxy:Image = new Image();
       dragProxy.source = event.currentTarget.source;
       dragProxy.width = 100 ;
       dragProxy.height = 100 ;

       DragManager.doDrag(dragInitiator, dragSource, event, dragProxy);
}

11. Next, in order to have a functional drop black box to display the big image, add the dragEnter and dragDrop event listeners.

12. The dragEnterHandler function determines whether the data being dragged is in a format that the target accepts. If so, to accept the drop, we call the DragManager.acceptDragDrop() method.

private function dragEnterHandler(event:DragEvent):void {
     var dropTarget:VBox =event.currentTarget as VBox;
      if (event.dragSource.hasFormat('value')) {
            DragManager.acceptDragDrop(dropTarget);
      }
}

13. Finally the dragDropHandler function, which is called when a thumbnail is dropped inside the black box, set the source of the big image to the appropriate value.

private function dragDropHandler(event:DragEvent):void {
       var value:String = event.dragSource.dataForFormat('value') as String;
       bigImage.source = "assets/big/"+value;
}

14. Here’s the final code, run your application to see it in action.

Build a XML PopUp Image Gallery

admin — Thu, 15 Oct 2009 00:18:15 +0000

In the following Flex tutorial, we are going to create an xml driven popup image gallery that when we click on a thumbnail it will open a bigger version of the image in a popup window.

1. Create a new flex project named GalleryPopUp, set the name of the main MXML application file to Main.mxml and set its layout to vertical. Set its horizontalAlign property to “center” and its verticalAlign property to “middle”.

2. All of the informations about the images showcased in the gallery are stored in an XML file. Create an xml file that follows this structure and save it as data.xml in the src directory :



    
    	titanic.jpg
    	Titanic
    	1997
    
    
    	shakespeareinlove.jpg
    	Shakespeare in Love
    	1998
    

    ...

    
    	slumdogmillionaire.jpg
    	Slumdog Millionaire
    	2008

3. Next, create an assets folder, and inside it create a “thumbs” folder where you store your thumbnail image files with names matching the xml file, and create a “posters” folder to put the big images.

4. To load the datas from the xml use the HTTPService component :

5. Next create a Script section. Declare a variable named movies as an arraycollection and defined as bindable. This variable will hold the datas retrieved from the xml in the serviceHandler function :

6. In order to finish this process of loading the xml datas, call the send method of the HTTPService :

7. To display the thumbnails use the TileList component and bind its dataProvider with the movies variable.
Inside, add an inline itemRenderer to display the movie’s thumbnail picture and the movie’s date.

8. Create a new MXML Component named Window, based on the TitleWindow component. This component will display the movies’s big poster image and its title.
Add an image component and bind its source with a sourceImage String variable declared as public. Create a closeWindow function that will handle the close event.

9. Also to make the popup window more handy, we want to be able to close it just by clicking on it. To do so, we need to dispatch a CloseEvent for the click event listener.

10. We have finished with this component, return to the Main.mxml file
Add a click event listener to the TileList component that will be handled by the launchPopUp function.

In the launchPopUp function, create a new Window component and set its title and sourceImage properties to the values of the movie that has been clicked. Use the PopUpManager class to display the window.

private function launchPopUp(e:MouseEvent):void {
        if(moviesList.selectedItem){
              var win : Window = new Window();
              win.sourceImage = "assets/posters/"+moviesList.selectedItem.pic;
              win.title =  moviesList.selectedItem.title;
              PopUpManager.addPopUp(win,this,true);
              PopUpManager.centerPopUp(win);
        }
}

11. Finally as usual, we add a Style section to custom the appearance of the whole application :


    	global{
	 		modalTransparency : .8;
			modalTransparencyColor : #000000;
	 	}
	 	Application{
	 	 	backgroundGradientColors: #ffffff, #ffffff;
   			backgroundGradientAlphas: 1, 1;
	 	}
        TileList{
            selectionColor:  #717070;
            rollOverColor: #CCCCCC;
            borderStyle : none;
        }
        TitleWindow{
	 		borderColor : #C1C1C1;
	 		borderAlpha : .8;
	 		fontSize : 14;
	 		fontFamily :Georgia;
	 		fontWeight : bold ;
	 		color : #FFFFFF;
	 	}
	 	Label{
	 		color : #000000;
	 		fontStyle : italic;
	 	}

12. Here’s the final code, run the application to see it in action.

Main.mxml




    
    	global{
	 		modalTransparency : .8;
			modalTransparencyColor : #000000;
	 	}
	 	Application{
	 	 	backgroundGradientColors: #ffffff, #ffffff;
   			backgroundGradientAlphas: 1, 1;
	 	}
        TileList{
            selectionColor:  #717070;
            rollOverColor: #CCCCCC;
            borderStyle : none;
        }
        TitleWindow{
	 		borderColor : #C1C1C1;
	 		borderAlpha : .8;
	 		fontSize : 14;
	 		fontFamily :Georgia;
	 		fontWeight : bold ;
	 		color : #FFFFFF;
	 	}
	 	Label{
	 		color : #000000;
	 		fontStyle : italic;
	 	}

Window.mxml

Watch Adobe Max 2009 Sessions

admin — Mon, 12 Oct 2009 08:42:57 +0000

Watch and learn from videos of Adobe MAX 2009 sessions that are available for free at the Adobe TV.

These sessions covers topics like

MAX 2009 DEVELOP
http://tv.adobe.com/show/max-2009-develop/

Practical Actionscript 3.0 For Flash CS3 and CS4
What’s new in Flash Player
Things every flash developer should know
Actionscript 3.0 Tastes Good (And is Good for You Too !)
The Advantages of Flex
Killer Text in Flash with The Text Layout Framework
What’s Coming in Adobe AIR 2

MAX 2009 DESIGN
http://tv.adobe.com/show/max-2009-design/

Secret Session : Flash Professional
Multi-Touch and the Flash Platform
Flash Professional, Flash Catalyst, and Flash Builder : Fact, Features and (Work)Flows

and so much more …

Build a PopUp Window with Flex

admin — Fri, 09 Oct 2009 15:25:43 +0000

In this Flex tutorial, let’s see how to create a Popup window.

1. Create a new flex project named PopUpWindow, set the name of the main MXML application file to main.mxml and set its layout to vertical.

2. In the main.mxml file, add a button that when the user clicks on it will launch the window by calling the launchPopUp function.

3. Before writing the launchPopUp function, create a new MXML Component named Window, based on the TitleWindow component and set its size as you want. You have now a Window.mxml file inside your src directory.
Open this file and add some content inside the TitleWindow component, in our case we’ve added an image.

4. So far we’ve created the window, now let’s it pop up when the button is clicked.
Back with the main.mxml file, add a Script section to the application to create the launchPopUp function.
This function creates a Window object, the component we’ve created before and uses the PopUpManager class to display it.

5. At this point, if you test the application, clicking on the button should launch the popup window.
But how to close the window you might ask?
To resolve this issue, let’s edit our Window component (window.mxml file).
The WindowTitle component has a showCloseButton property that you need to set to true to view a close button. Next add a close event listener to handle this event.

6. Add a Script section to write the closeWindow function. We use the PopUpManager.removePopUp method to remove the window.

7. Alright, now all is good to go. Finally we add to the main application some css to make the application more to our taste.

8. Here’s the final code, test the application to see it in action.

main.mxml :




 
	 	Application{
	 	 	backgroundColor: #000000;
	 	}
	 	global{
	 		modalTransparency : .3;
			modalTransparencyColor : #ffffff;
	 	}

Window.mxml:

Build a XML Image Viewer with Flex

admin — Mon, 07 Sep 2009 10:31:06 +0000

The following tutorial shows how to build a driven xml image viewer in Flex which allows the user to navigate through the images using a previous and next buttons.

1. Create a new flex project named Image-viewer, set the name of the main MXML application file to main.mxml and set its layout to vertical.

2. All the datas about the images are stored in a XML file. Create an xml file that follows this structure and save it as data.xml :



    
    	1.jpg
    	Warhol & Basquiat
    
    
    	2.jpg
    	Beethoven Yellow Book
    
    
    	3.jpg
    	Marilyn Monroe
    
    
    	4.jpg
    	Zebra
    
    
    	5.jpg
    	Campbell's Soup I

3. Create a folder named assets. Inside it, create a subfolder named “images” and put in the images which filenames are given in the xml file .

4. Open the main application to start adding the code.
To load the datas from the xml, use the HTTPService component :

Next open a Script section and declare a variable named images as an arraycollection and defined as bindable. This variable will hold the datas retrieved from the xml.
Then write the serviceHandler function :

In order to finish this process of loading the xml, call the send method of the HTTPService:

5. Declare a currentIndex variable that will keep track of the index of the image currently on display and set its value to zero.

[Bindable]
private var currentIndex : Number = 0

6. Now let’s add the elements, a Text component to display the title, an Image component and two buttons.
We bind the text property of the Text component with the title of the current image by using our currentIndex variable. And we do the same with the source property of the Image.

7. Now let’s write the previousImage and nextImage functions that will change the index of the image to be displayed.

private function nextImage(e:MouseEvent):void{
	if (currentIndex < images.length - 1){
        currentIndex++;
    }
    else {
        currentIndex = 0;
    }
}

private function previousImage(e:MouseEvent):void{
	if (currentIndex != 0){
		currentIndex--;
    }
    else {
        currentIndex = images.length - 1;
    }
}

8. Finally create a css file and save it as style.css in the src directory. For the next and previous buttons, we place their 3 different states images inside a folder “style” inside the “assets’ folder.

Application {
   backgroundColor: #000000;
}

.previousBtn{
    upSkin:Embed("/assets/style/left_up.png");
    overSkin:Embed("/assets/style/left_over.png");
    downSkin:Embed("/assets/style/left_down.png");
}

.nextBtn{
    upSkin:Embed("/assets/style/right_up.png");
    overSkin:Embed("/assets/style/right_over.png");
    downSkin:Embed("/assets/style/right_down.png");
}

.title{
   color: #ffffff;
   fontFamily: Times New Roman;
   fontSize: 16;
   fontWeight: bold;
   fontStyle: italic;
}

Apply the style to the components :

...

9. Here’s the final code. Run the application to test it.

Get your free Flash & Flex Developer’s magazine

admin — Fri, 04 Sep 2009 11:00:25 +0000

Get tutorials, expert articles, reviews of products, as well as greatest Flash & Flex advice, news and opinions with Flash & Flex Developer’s magazine for FREE.

Here is their message : “Since September 2009 FFD Magazine becomes online magazine. What is important – it will be also FREE of ANY charges . The only thing you need to do is to sign up to our Newsletter :
http://www.ffdmag.com/prt/view/subscribe-to-newslet.html.
If you’re not sure if you like the idea – try out the magazine – 4 back issues to download :
http://www.ffdmag.com/prt/view/back-issues.html.
Check this out! Let’s build the biggest Flash and Flex Developer’s Community!”
www.ffdmag.com