Set swf object in your server page

Hello,

Here you are find some easy way to add swf object in your server page.
version 1.0.0 is a refres object value whenever this value is changed swfobject.js is load fresh swf object in your web browser otherwise your browser is loaded old cashing swf object.
you are adding more tha one variable using flashvars object and get this value into your action script code.

Javascript and link part :
======================
<link href="history/history.css" rel="stylesheet" type="text/css" />
<script src="history/history.js" type="text/javascript"></script>
<script type="text/javascript" src="swfobject.js"></script>

<script type="text/javascript">
//            <!-- For version detection, set to min. required Flash Player version, or 0 (or 0.0.0), for no version detection. --> 
//            <!-- To use express install, set to playerProductInstall.swf, otherwise the empty string. -->
//            <!-- set params.wmode = "opaque"; in var params = {} for set direct focus on swf in crome but its create internal scrolling issue with mouase wheel  -->
            
            var swfVersionStr = "10.0.0";
            var xiSwfUrlStr = "playerProductInstall.swf";
            var flashvars = {};
            flashvars.variable1 = "Var1 Val";
            flashvars.variable2 =  "Var2 Val";
            
            var params = {};
            params.quality = "high";
            params.bgcolor = "#ffffff";
            params.allowscriptaccess = "sameDomain";
            params.allowfullscreen = "true";
            params.allownetworking = "all";
            
            var attributes = {};
            attributes.id = "project1";
            attributes.name = "project1";
            attributes.align = "middle";
            swfobject.embedSWF(
                "project1.swf?ver=1.0.0", "flashContent", 
                "100%", "100%", 
                swfVersionStr, xiSwfUrlStr, 
                flashvars, params, attributes);
   <!-- JavaScript enabled so display the flashContent div in case it is not replaced with a swf object. -->
   swfobject.createCSS("#flashContent", "display:block;text-align:left;");
   <!--function getURLOfBrowser(){return  window.location.href;}-->
    </script>
======================
Body part :
======================
<div id="flashContent">
  <p>
    To view this page ensure that Adobe Flash Player version 10.0.0 or greater is installed.
  </p>
  <!--<script type="text/javascript"> 
    var pageHost = ((document.location.protocol == "https:") ? "https://" : "http://"); 
    document.write("<a href='http://www.adobe.com/go/getflashplayer'><img src='" 
        + pageHost + "www.adobe.com/images/shared/download_buttons/get_flash_player.gif' alt='Get Adobe Flash player' /></a>" ); 
  </script> -->
</div>
<noscript>
  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="100%" height="100%" id="Main">
     <param name="movie" value="project1.swf?ver=1.0.0" />
     <param name="quality" value="high" />
     <param name="bgcolor" value="#ffffff" />
     <param name="allowScriptAccess" value="sameDomain" />
     <param name="allowFullScreen" value="true" />
     <!--[if !IE]>-->
     <object type="application/x-shockwave-flash" data="project1.swf?ver=1.0.0" width="100%" height="100%">
         <param name="quality" value="high" />
         <param name="bgcolor" value="#ffffff" />
         <param name="allowScriptAccess" value="sameDomain" />
         <param name="allowFullScreen" value="true" />
         <!--<![endif]-->
         <!--[if gte IE 6]>-->
         <p>
            Either scripts and active content are not permitted to run or Adobe Flash Player
            version 10.0.0 or greater is not installed.
          </p>
          <!--<![endif]-->
          <!--<a href="http://www.adobe.com/go/getflashplayer">
          <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash Player" />
          </a>-->
          <!--[if !IE]>-->
       </object>
       <!--<![endif]-->
  </object>
</noscript>

In Adobe Flex Masking of two images

Hello friends,

I am looking for masking functionality like solid view and when we move move on solid image we are able to show skeleton images of selected portion.
We are googling for masking and find some help.
Below is some action script code of masking gradient ellipse portion in second image.
Here i am taking one group in that i add both images skeleton images on front and solid images on back.
I am applying mask on skeleton image.

Action Script Code :
/ /==============================

// Load an image and add it to the display list.

/* var loader:Loader = new Loader();

var url:URLRequest = new URLRequest("http://www.helpexamples.com/flash/images/image1.jpg");

loader.load(url);

this.addChild(loader); */

// Create a Sprite.

var oval:SpriteVisualElement = new SpriteVisualElement();

// Draw a gradient oval.

 var colors:Array = [0x000000, 0x000000];

var alphas:Array = [1, 0.8];

var ratios:Array = [0, 255];

var matrix:Matrix = new Matrix();

matrix.createGradientBox(200, 100, 0, -100, -50);

oval.graphics.beginGradientFill(GradientType.RADIAL,

colors,

alphas,

ratios,

matrix);

oval.graphics.drawEllipse(-100, -50, 200, 100);

oval.graphics.endFill(); 

/* oval.graphics.beginFill(0x000000,1);

oval.graphics.drawCircle(-100, -100, 100);

oval.graphics.endFill(); */

grp.addElement(oval);

// Set cacheAsBitmap = true for both display objects.

img2.cacheAsBitmap = true;

oval.cacheAsBitmap = true;

// Set the oval as the mask for the loader (and its child, the loaded image)

img2.mask = oval;

// Make the oval draggable.

oval.startDrag(true);

/ /==============================

 I am applying above code on creationcomplete event.
So now when i  mouse over then only see skeleton image's eclipse portion on top of solid image.
 

 

Create custom Circle using Math function

You can use maths trigonometry function to create circle
Below is how to create circle using trigonometry function

drawCircle(Number(txtX.text), Number(txtY.text), Number(txtRad.text), Number(txtSides.text));
private function drawCircle1(centerX, centerY, radius, sides):void
{
vb.removeAllChildren();
var sp:Sprite = new Sprite();
sp.graphics.moveTo(centerX + radius/2 , centerY + radius/2);
sp.graphics.lineStyle(null,0xff0000,1);
sp.graphics.beginFill(0x000055, 60);
for(var i=0; i<=sides; i++)
{
var pointRatio = i/sides;
var xSteps = magicTrigFunctionX(pointRatio);
var ySteps = magicTrigFunctionY(pointRatio);
var pointX = centerX + xSteps * radius;
var pointY = centerY + ySteps * radius;
sp.graphics.lineTo(pointX, pointY);
}
sp.graphics.endFill();
var ui:UIComponent = new UIComponent();
ui.name="currentui";
ui.addChild(sp);
vb.addChild(ui);

}

Flex - Speed Up Performance

Here is some tips for speed up flex application.

1. Always use weak reference when and event is initialize as well as used removefromstage event and in that event clear all object and listener and use System.gc() for release memory.

2. Maximum use ActionScript Class (.as class) instead of used direct component of vbox , canvas etc... so when we need to release memory we easily remove this object from memory.

3. Code Optimization - Create common single instance class for same function of different location as well as try minimize function and create one global function for similar functionality.

4. If application is medium / large then use module and also give separate style sheet on each module and set minimum connection with Main application of this module. When module is no need in memory then remove module and clear all it's object as well as used System.gc() for release memory.

5. Some tips for release memory :

i) When UrlLoader , File , FileReference , ArrayCollection used then after finish of used close / stop / null / finished / removeall this object which is internally given in this object.

ii) Used CatchAsBitmap when object used repeated many times.

iii) Minimum used of BindingUtility and don't forget to clear ChangeWatcher object which is generated when BindingUtility is set.

iv) Possible then separate used .as of each mxml file as well as maximum create object dynamic so after finishing his work you can remove it from parent.

v) Maximum use vector design which are generated in flash or in flash buider 4's skinn or used graphics utility.


6) Try to minimum image load in to your system when any module/object is currently running if it's required to open many high resolution / big sized imaged then load low resolution/ low size version of this image in front so then occupy less memory.

7)Last one use profiler so you know each object's memory size and manage your coding according to size.

Rotate & Scale From Center Using Matrix and mouse scroll

If you want to rotate from center then move center point to 0,0 and then after rotate reset it's to original.

Here is some sample code.

"<"mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="init()"">"
"<"mx:Script">"
"<"![CDATA[
import mx.events.FlexEvent;

private var st:Number = 0;
private var img:Box;

private function init():void
{
systemManager.addEventListener(MouseEvent.MOUSE_WHEEL, doMouseWheel);
can.setFocus();
}
private function mouseDownH(event:MouseEvent):void
{
event.currentTarget.startDrag(false,new Rectangle(0,0,can.width - event.currentTarget.width ,can.height- event.currentTarget.height));
}
private function mouseUpM(event:MouseEvent):void
{
event.currentTarget.stopDrag();
}
private function rotateright():void
{
if(st == 360)
st = 0;
st = st + 5;

var ofx:Number = img.width/2;
var ofy:Number = img.height/2;
var radians:Number = st * (Math.PI / 180.0);
var m:Matrix = new Matrix();

m.translate(-ofx, -ofy);
m.rotate(radians);
m.translate(ofx, ofy);
m.concat(img.transform.matrix);
img.transform.matrix = m;

st = st - 5;
}
private function rotateleft():void
{
if(st == 0)
st = 360;

st = st - 5;

var ofx:Number = img.width/2;
var ofy:Number = img.height/2;
var radians:Number = st * (Math.PI / 180.0);
var m:Matrix = new Matrix();

m.translate(-ofx, -ofy);
m.rotate(radians);
m.translate(ofx, ofy);
m.concat(img.transform.matrix);
img.transform.matrix = m;

st = st + 5;
}

private function complateLoad(event:Event):void
{
Bitmap(event.currentTarget.content).smoothing = true;
event.currentTarget.x = (can.width/2) - (event.currentTarget.width / 2);
event.currentTarget.y = (can.height/2) - (event.currentTarget.height / 2);
}
private function doMouseWheel(event:MouseEvent):void
{
trace(event.delta);
var ofx:Number = img.width/2;
var ofy:Number = img.height/2;
var m:Matrix = new Matrix();
m.translate(-ofx, -ofy);
if(event.delta "<" 0)
{
m.scale(img.scaleX + 0.2,img.scaleY + 0.2);
}
else
{
if(img.transform.matrix.a > 1)
{
m.scale(img.scaleX - 0.2,img.scaleY - 0.2);
}
else
{
return;
}
}
m.translate(ofx, ofy);
m.concat(img.transform.matrix);
img.transform.matrix = m;
}
private function selimg(curimg:Box = null ):void
{
if(curimg != null)
img = curimg;
for each(var objb:Box in can.getChildren())
{
objb.setStyle('borderThickness','1');
objb.setStyle('borderStyle','solid');
objb.setStyle('borderColor','#ffffff');
}
if(curimg != null)
{
img.setStyle('borderThickness','1');
img.setStyle('borderStyle','solid');
img.setStyle('borderColor','#00ff00');
}
}
]]">"
"<"/mx:Script>
"<"mx:Canvas id="can" height="500" width="800" backgroundColor="#cdcdcd" ">"

"<"mx:Box id="imgb1" mouseDown="mouseDownH(event)" mouseUp="{mouseUpM(event)}"
borderThickness="1" borderStyle="solid" borderColor="#ffffff" moveEffect="Blur" ">"
"<"mx:Image id="imgX1" source="GoogleIcon.jpg" complete="complateLoad(event)" click="{selimg(imgb1)}" /">"

"<"/mx:Box">"

"<"mx:Box id="imgb2" mouseDown="mouseDownH(event)" mouseUp="{mouseUpM(event)}"
borderThickness="1" borderStyle="solid" borderColor="#ffffff" moveEffect="Blur" ">"
"<"mx:Image id="imgX2" source="GoogleIcon.jpg" complete="complateLoad(event)" click="{selimg(imgb2)}" / ">"

"<"/mx:Box ">"

"<"/mx:Canvas ">"
"<"mx:Button label="Right" click="rotateright()"/ ">"
"<"mx:Button label="Left" click="rotateleft()"/ ">"
"<"mx:Button label="clear selection" click="selimg()"/ ">"
"<"/mx:Application ">"

Rotate & Resize using Matrix

In the flex matrix object have 6 property a,b,c,d ,tx,ty .
In this matrix a used for scaling on width , d is used for scaling in height ,b is used for tilt ( moving second part on vertical side i.e. right part ) , c is used for tilt ( moving second part on horizontal side i.e. bottom ),tx is used for move x position , ty is used for move y position.

Internally rotate function and filter is also working on this matrix base.

Here is some sample code of that.




"<"mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
width="1200" height="900" applicationComplete="appcomp()"">"
"<"mx:Script">"
"<"![CDATA[
private var mts:Matrix;
private function appcomp():void
{
mts = img.transform.matrix;
if(mts)
{

ha.value = mts.a;
hb.value = mts.b;

hc.value = mts.c;
hd.value = mts.d;

htx.value = mts.tx;
hty.value = mts.ty;



}
}
private function chagneValue():void
{
var mt:Matrix = new Matrix(ha.value,hb.value,hc.value,hd.value,htx.value,hty.value);
img.transform.matrix = mt;
mt = null;
}
private function setOrg():void
{
img.transform.matrix = mts;
appcomp();
}
private function setVal():void
{
setOrg();

/* var oldtx:Number = img.transform.matrix.tx;
var oldty:Number = img.transform.matrix.ty; */

var angNum:Number = Number(ang.text);

var cala:Number = Math.round(Math.cos(angNum));
var calb:Number = Math.round(Math.sin(angNum));
var calc:Number = - Math.round(Math.sin(angNum));
var cald:Number = - Math.round(Math.cos(angNum));

lbSetVal.text = "a. cos("+ angNum +") - > " + cala.toFixed(0) + " b. sin("+ angNum +") - > " + calb.toFixed(0) + " c. -sin("+ angNum +") - > "+ calc.toFixed(0) + " d. -cos("+ angNum +") - > "+ cald.toFixed(0);

var mtn:Matrix = new Matrix(cala,calb,calc,cald);
img.transform.matrix = mtn;
mtn = null;
}
"]]>"
"<"/mx:Script">"
"<"mx:HBox width="100%"">"
"<"mx:Label text="a"/">"
"<"mx:HSlider id="ha" maximum="5" minimum="-5" tickInterval=".1" change="chagneValue()"/">"
"<"mx:Label text="b"/">"
"<"mx:HSlider id="hb" maximum="5" minimum="-5" tickInterval=".1" change="chagneValue()"/">"
"<"/mx:HBox">"
"<"mx:HBox width="100%"">"
"<"mx:Label text="c"/">"
"<"mx:HSlider id="hc" maximum="5" minimum="-5" tickInterval=".1" change="chagneValue()"/">"
"<"mx:Label text="d"/">"
"<"mx:HSlider id="hd" maximum="5" minimum="-5" tickInterval=".1" change="chagneValue()"/">"
"<"/mx:HBox">"
"<"mx:HBox width="100%"">"
"<"mx:Label text="tx"/">"
"<"mx:HSlider id="htx" maximum="100" minimum="-100" tickInterval=".1" change="chagneValue()"/">"
"<"mx:Label text="ty"/">"
"<"mx:HSlider id="hty" maximum="100" minimum="-100" tickInterval=".1" change="chagneValue()"/">"
"<"/mx:HBox">"
"<"mx:HBox width="100%"">"
"<"mx:Label text="Angle"/">"
"<"mx:TextInput id="ang" text="0"/">"
"<"mx:Button label="SET" click="setVal()"/">"
"<"/mx:HBox">"
"<"mx:HBox width="100%"">"
"<"mx:Label id="lbSetVal" /">"
"<"mx:Button label="Set Original" click="setOrg()"/">"
"<"/mx:HBox">"

"<"mx:Canvas id="can" width="1000" height="700" horizontalCenter="0" verticalCenter="0" backgroundColor="#CDCDCD"">"
"<"mx:Canvas horizontalCenter="0" verticalCenter="0" ">"
"<"mx:Image id="img" source="@Embed('Sunset.jpg')" scaleContent="false"/">"

"<"/mx:Canvas">"
"<"/mx:WindowedApplication">"

Set Focus SWF File

Hi,

There are many ways to focus your swf file when it's loaded.

1. Using HTML + Javascript code :
"<" body scroll='no'onLoad="document.getElementById('${appSwfVarname}').focus();" ">"
or
"<" body scroll='no'onLoad="document.getElementById('swffilename').focus();" ">"

2. Using ActionScript Code :

ExternalInterface.call('function browserFocus(){document.getElementById(\'swfname\').focus();}');
txtUserName.setFocus();