Uploading an image into flash without server side script using flash player 10
Posted on June 3, 2010 by Sameera Thilakasiri
According to my last post, Flash Player 10 has updated FileReference class with some new featured methods. My last post explaining how some one can download an image from flash to user Cheap Amoxil file system without using any server side scripting. In this post i am going to show you another power of flash player 10, that is uploading an image into flash player without using any server side script.
The FileReference class in flash player 10 has a new method : FileReference.load() which provides the power of uploading the image, text file etc into flash player without any server side script.
Before proceeding with FileReference.load() method, we need to call FileReference.browse() method so that user can select a file to load a selected file into flash player. Once the file get loaded into flash player you can access the loaded data by using a property of FileReference.data.
The data loaded at FileReference.data property is commonly a type of ByteArray. we want to convert it to bitmap. so the trick is to use the loader class; loader.loadBytes() method. The method converts the ByteArray to a loader image object. once it completes loading we can add the loader object to display list to display the image. so here we go;
Note: the example has been created in flash cs4 and targets flash player 10;
settings:
1) create a blank flash document in flash cs4.
2) create a folder named with “flexScript” and copy and paste the below code to a new actionscript file and save the file into “flexScript” folder with the name “uploadImage”.
3) put a button component on the stage and put a instance name as “upload_Image”;
4) set the document class as “flexScript.uploadImage”; and run the application where to buy cialis without prescription and check the magic;
package flexScript {
import flash.display.Sprite;
import flash.events.MouseEvent;
import flash.net.*;
import flash.display.*;
import flash.events.*;
import flash.utils.ByteArray;
public class uploadImage extends Sprite {
private var jagFileRefSave:FileReference = new FileReference();
private var loader:Loader = new Loader();
private var imagesFilter:FileFilter = new FileFilter("Images", "*.jpg;*.gif;*.png");
public function uploadImage(){
super();
upload_Image.addEventListener(MouseEvent.CLICK,onClickSave);
}
private function onClickSave(e:MouseEvent):void{
jagFileRefSave.browse([imagesFilter]);
jagFileRefSave.addEventListener(Event.SELECT, selectedFile);
}
private function selectedFile(e:Event):void{
jagFileRefSave.load();
jagFileRefSave.addEventListener(Event.COMPLETE, loaded);
}
private function loaded(e:Event):void{
var rawBytes:ByteArray = jagFileRefSave.data;
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, getBitmapData)
loader.loadBytes(rawBytes);
}
private function getBitmapData(e:Event):void{
addChild(loader);
}
}
}
Author
By Sameera Thilakasiri
,is a front-end developer based in Colombo, is a blogger and a lifestyle photographer.
Follow him Twitter and Google+. Check out him.
Tags: addChild() | contentLoaderInfo | FileFilter() | FileReference() | Loader()
AS3 XML Loader Utility Class
Posted on June 3, 2010 by Sameera Thilakasiri
I have developed this XMLUtility class in conjunction with a CustomEvent Class which returns me the loaded XML/String Data along with the complete event firing. You can download the sources from here. Following is the code you need to write when you want to load this class
//------------ Import Classes
import com.flexcomps.utils.CustomEvent;
import com.flexcomps.utils.XMLLoaderUtil;
//-------- Create instance of loader class
var xmlLoader:XMLLoaderUtil = new XMLLoaderUtil();
xmlLoader.addEventListener(CustomEvent.ONLOADED, onXMLLoaded);
xmlLoader.load(xmlPath);
//----- Method to handle the returned data
private function onXMLLoaded(evt:CustomEvent) {
xmlData = evt.data as XML;
trace(xmlData);
}
Author
By Sameera Thilakasiri
,is a front-end developer based in Colombo, is a blogger and a lifestyle photographer.
Follow him Twitter and Google+. Check out him.
Solution for Canvas having rounded corner and a background
Posted on June 3, 2010 by Sameera Thilakasiri
I have faced a problem when i tried to have a canvas with rounded corner and having an image. I doesn’t want to make the rounded corners in image as the content is going to be scaled. After doing some research on Net i found a good solution to the problem. it is a kind of trick where you put the rounded corner canvas as a mask on your image and it works perfectly 🙂 . Following is the code for the same
<?xml version="1.0" encoding="utf-8"?>
<mx:Application <a href="http://loanscreditandinsurance.info/images/index.php">can you buy viagra in stores <a href="http://amoxilbuysale.com">Order Generic Amoxil Online without Prescription</a> | buy cialis brand | levitra drugs</a> xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Image <a href="http://onedollar.mm-project.com/images/">buy cialis jelly</a> source="../bin-debug/assets/bg.jpg" x="10" y="10" mask="{maskCanvas}" height="80%" <a href="http://blogtorn.com/images/">where do you buy viagra | buy cialis phentermine | cheap levitra online</a> width="80%" maintainAspectRatio="false" />
<mx:Canvas id="maskCanvas" x="10" y="10" width="80%" height="80%" cornerRadius="10" <a href="http://spropecia-online.com">propecia generic</a> borderStyle="solid">
</mx:Canvas>
</mx:Application>
Do remember to create an asset folder having a “bg.jpg” image when trying this solution.
Author
By Sameera Thilakasiri
,is a front-end developer based in Colombo, is a blogger and a lifestyle photographer.
Follow him Twitter and Google+. Check out him.
Creating a custom formatter
Posted on May 28, 2010 by Sameera Thilakasiri
You create a custom formatter by creating a class that extends the mx.formatters.Formatter base class, or by creating a class that extends one of the standard formatter classes, which all extend mx.formatters.Formatter. The following example shows the class hierarchy for formatters:
Like standard formatter classes, your custom formatter class must contain a public format() method that takes a single argument and returns a String that contains the formatted data. Most of the processing of your custom formatter occurs within the format() method.
Your custom formatter also might let the user specify which pattern formats the data. Where applicable, the Flex formatters, such as the ZipCodeFormatter, use a formatString property to pass a format pattern. Some Flex formatters, such as the NumberFormatter and CurrencyFormatter classes, do not have formatString properties, because they use a set of properties to configure formatting.
Creating a simple formatter
This example defines a simple formatter class that converts any String to all uppercase or all lowercase letters depending on the value passed to the formatString property. By default, the formatter converts a String to all uppercase.
package myFormatters
{
// SimpleFormatter.as
import mx.formatters.Formatter
import mx.formatters.SwitchSymbolFormatter
public class SimpleFormatter extends Formatter
{
// Declare the variable to hold the pattern string.
public var myFormatString:String = "upper";
// Constructor
public function SimpleFormatter() {
// Call base class constructor.
super();
}
// Override format().
override public function format(value:Object):String {
// 1. Validate value - must be a nonzero length string.
if( value.length == 0)
{ error="0 Length String";
return ""
}
// 2. If the value is valid, format the string.
switch (myFormatString) {
case "upper" :
var upperString:String = value.toUpperCase();
return upperString;
break;
case "lower" :
var lowerString:String = value.toLowerCase();
return lowerString;
break;
default :
error="Invalid Format String";
return ""
}
}
}
}
You can use this formatter in a Flex application, as the following example shows:
<?xml version="1.0" ?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:MyComp="myFormatters.*">
<!-- Declare a formatter and specify formatting properties. -->
<MyComp:SimpleFormatter id="upperFormat" myFormatString="upper" />
<!-- Trigger the formatter while populating a string with data. -->
<mx:TextInput id="myTI" />
<mx:TextArea text="Your uppercase string is {upperFormat.format(myTI.text)}" />
</mx:Application>
Author
By Sameera Thilakasiri
,is a front-end developer based in Colombo, is a blogger and a lifestyle photographer.
Follow him Twitter and Google+. Check out him.
About data representation, Data binding, Data models, Data validation, Data formatting
Posted on May 28, 2010 by Sameera Thilakasiri
Adobe® Flex® provides the following set of features for representing data in your applications: data binding, validation, and formatting. These features work in conjunction with the Adobe® LiveCycle™ Data Services ES and Vega features for working with remote data. Together, they allow you to perform the following tasks:
- Pass data between client-side objects.
- Store data in client-side objects.
- Validate data before passing it between client-side objects.
- Format data before displaying it.
The following steps describe a simple scenario in which a user provides input data and requests information in an Adobe Flex application:
- The user enters data in input fields and submits a request by clicking a Button control.
- (Optional) Data buy cialis tadalafil binding passes data to a data model object, which provides intermediate data storage. This allows data to be manipulated and passed to other objects in the application.
- (Optional) One or more data validator objects validate the request data. Validator objects check whether the data meets specific criteria.
- The data is passed to a server-side object.
- The server-side object processes the request and returns data or a fault object if a valid result cannot be returned.
- (Optional) Data binding passes data to a data model object, which provides intermediate data storage. This allows data to be manipulated and passed to other objects in the application.
- (Optional) One or more data formatter objects format result data for display in the user interface.
- Data binding passes data into user interface controls for display.
The following diagram illustrates what happens in Flex for two different user input examples. In one example, the user enters ZIP code data, and Flex validates the format. In the other example, the user requests the current temperature in Celsius.
Data binding
The data binding feature provides a syntax for automatically copying the value of a property of one client-side object to a property of another object at run time. Data binding is usually triggered when the value of the source property changes. You can use data binding to pass user input data from user interface controls to a data service. You can also use data binding to pass results returned from a data service to user interface controls.
The following example shows a Text control that gets its data from an HSlider control’s value property. The property name inside the curly braces ({ }) is a binding expression that copies the value of the source property,
<mx:HSlider id="mySlider"/>
<mx:Text text="{mySlider.value}"/>
Data models
The data model feature lets you store data in client-side objects. A data model is an ActionScript object that contains properties for storing data, and that optionally contains methods for additional functionality. Data models are useful for partitioning the user interface and data in an application.
You can use the data binding feature to bind user interface data into a data model. You can also use the data binding feature to bind data from a data service to a data model.
You can define a simple data model in an MXML tag. When you require functionality beyond storage of untyped data, you can use an ActionScript class as a data model.
The following example shows an MXML-based data model with properties of TextInput controls bound into its fields:
<?xml version="1.0"?>
<!-- datarep\DatarepModelTag.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Model id="reg">
<registration>
<name>{nme.text}</name>
<email>{email.text}</email>
<phone>{phone.text}</phone>
<zip>{zip.text}</zip>
<ssn>{ssn.text}</ssn>
</registration>
</mx:Model>
<mx:TextInput id="nme"/>
<mx:TextInput id="email"/>
<mx:TextInput id="phone"/>
<mx:TextInput id="zip"/>
<mx:TextInput id="ssn"/>
</mx:Application>
Data validation
The data validation feature lets you ensure that data meets specific criteria before the application uses the data. Data validators are ActionScript objects that check whether data in a component is formatted correctly. You can apply a data validator to a property of any component. For models in a remote procedure call (RPC) component declaration, properties to which a validator component is applied are validated just before the request is sent to an RPC service destination. Only valid requests are sent.
The following example shows MXML code that uses the standard ZipCodeValidator component, represented by the <mx:ZipCodeValidator> tag, to validate the format of the ZIP code that a user enters. The source property of the ZipCodeValidator validator indicates the property that it validates.
<?xml version="1.0"?>
<!-- datarep\Validate.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:TextInput id="input" text="enter zip" width="80"/>
<mx:Model id="zipModel">
<root>
<zip>{input.text}</zip>
</root>
</mx:Model>
<mx:ZipCodeValidator source="{zipModel}" property="zip"
listener="{input}" trigger="{input}"/>
</mx:Application>
Data formatting
The data formatting feature lets you change the format of data before displaying it in a user interface control. For example, when a data service returns a string that you want to display in the (xxx)xxx-xxxx phone number format, you can use a formatter component to ensure that the string is reformatted before it is displayed.
A data formatter component is an object that formats raw data into a customized string. You can use data formatter components with data binding to reformat data that is returned from a data service.
The following example declares a DateFormatter component with an MM/DD/YYYY date format, and binds the formatted version of a Date object returned by a web service to thetext property of a TextInput control:
<?xml version="1.0"?>
<!-- datarep\Format.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:WebService id="myService" destination="Shop"/>
<!-- Declare a formatter and specify formatting properties. -->
<mx:DateFormatter id="StandardDateFormat" formatString="MM/DD/YYYY"/>
<!-- Trigger the formatter while populating a string with data. -->
<mx:TextInput
text="Your order shipped on {StandardDateFormat.format(myService.purchase.result.date)}"/>
</mx:Application>
Author
By Sameera Thilakasiri
,is a front-end developer based in Colombo, is a blogger and a lifestyle photographer.
Follow him Twitter and Google+. Check out him.
Tags: Data binding | Data formatting | Data models | Data validation
Community presentations of the blogger
Sameera at LinkedIn
BIOGRAPHY
Sameera Thilakasiri is a front-end developer and UX Architect based in Colombo, Sri Lanka, specialist in User Interface Design, User Experience, Usability and Accessibility, Information Architecture, Responsive Web Design, Interactive Design, Search Engine Optimization, Trainging and Public Speaking.
In his profession, follow the best practices, W3C web standards and guidelines, responsive, semantic, usable, accessible, SEO friendly to cutting edge cording using XHTML/HTML5, CSS and jQuery for Pixel-perfect cross browser compatibility.
In his leisure blogging for technical articles and lifestyle photographer.