Flex Project – SWF files not displaying after the project is exported – How to Solve it ?

June 23, 2009 - One Response

Hi All. One common problem many would have got while developing web applications in Adobe Flex is, SWF files not getting displayed after the project is exported. Don’t panic, it’s very simple to kick away that problem. Just follow these steps.

NOTE: Every MXML file created in a Flex project will be compiled into a SWF file and such SWF files will get displayed without any problem after the project is exported. Here we are dealing with external SWF files that are loaded using SWFLoader Component.

After creating a project in Flex Builder(Let me assume that, this project uses SWFLoader component which loads external SWF files here),  do the following steps.

1) Right click on the project folder in the Flex Navigator tab and in the menu that appears, click Properties .
2) Click Flex Compiler in the Properties Pop Up Window.
3) Type -use-network=false in Additional compiler arguments text input box.
4) Click Apply and then Ok.

SCREENSHOTS:

Please click any image to enlarge it.

STEP 1 - Right click on project folder - Click Properties

STEP 1 - Right click on project folder - Click Properties

STEP 2 - Click Flex Compiler in the Properties Pop Up Window

STEP 2 - Click Flex Compiler in the Properties Pop Up Window

STEP 3 - Type -use-network=false in Additional compiler arguments text input box

STEP 3 - Type -use-network=false in Additional compiler arguments text input box

STEP 4 - Click Apply and then Ok

STEP 4 - Click Apply and then Ok

Categorized in Adobe Flex Tutorials
Tags: , , ,

How to override preloader/download progress bar in Adobe Flex ?

June 20, 2009 - Leave a Response

Hi All. Let me tell you how to override preloader/download progress bar in Adobe Flex. Just download the PreLoader.rar project folder from the box that appears at the extreme bottom of this blog and follow the below things.

Project Details:

1)This “PreLoader” project shows how to override default preloader with a customized preloader swf in Flex.
2)This project needs the developer to customize the default preloader by creating a class “MyDownloadProgressBarSWF” by extending Sprite class.
NOTE: Open the MyDownloadProgressBarSWF.as file inside the myComponents folder and have a thorough look to understand the code.

Follow these steps to run PhotoShow project in FlexBuilder:

1) Open the Code folder and copy all the files.
2) Create a new project in FlexBuilder and paste the those files inside the newly created Flex project folder.
3)Replace the already existing files(if any) in the newly created project folder with the copied files.
4)Save the project and run the PreLoader.mxml file.

How it works?

1) Run PreLoader.mxml file.
2) Now you can the default preloader is overrided by our customized preloader.

To know more about my micro lectures in Flex and to stay in touch with me please visit my website
http://www.snipersn.ucoz.com

Categorized in Adobe Flex Tutorials
Tags: , , , , , ,

How to use FlashVars property in Adobe Flex ?

June 20, 2009 - One Response

Hi All. Let me tell you how to use FlashVars property in Adobe Flex. Just download the FlashVars.rar project folder from the box that appears at the extreme bottom of this blog and follow the below things.

Project Details:

1)This “FlashVars” project shows how to send FlashVars variables to ActionScript during runtime in Flex.
2)This application includes Flex UI components Panel and Button.
a)Panel – to display Button
b)Text Area – to display flashVars variables
3)This project needs the developer to modify index.template.html file which is in the html-template folder.
Open index.template.html file in a text editor.

NOTE: Steps 4 through 6 are already done in this project and need not to repeat. Do it only if you are creating your own project.

4)Modify flashVars property in the <object> tag. Here i set two variables, ‘name’ and ‘site’ with values “Vinodh” and “hoksum.com” respectively.
5)Between the <body> tags find AC_FL_RunContent() function.
6)Include ‘”FlashVars”, “name=Vinodh&site=hoksum.com”‘, as an argument of  AC_FL_RunContent() function.

Follow these steps to run PhotoShow project in FlexBuilder:

1) Open the Code folder and copy all the files.
2) Create a new project in FlexBuilder and paste the those files inside the newly created Flex project folder.
3)Replace the already existing files(if any) in the newly created project folder with the copied files.
4)Save the project and run the main.mxml file inside src folder.

How it works?

1) Run main.mxml file inside the src folder.
2) Now a panel appears with the flashVars variables in the Text Area. Here “Variable 1 : Vinodh Variable 2 : hoksum.com” appears.

To know more about my micro lectures in Flex and to stay in touch with me please visit my website
http://www.snipersn.ucoz.com

Categorized in Adobe Flex Tutorials
Tags: , , , ,

How to invoke a ActionScript function from JavaScript in Adobe Flex ?

June 20, 2009 - Leave a Response

Hi All. Let me tell you how to invoke an ActionScript function from a JavaScript function in Adobe Flex. Just download the InvokeASfromJS.rar project folder from the box that appears at the extreme bottom of this blog and follow the below things.

Project Details:

1)This “InvokeASfromJS”[AS-> ActionScript,JS-> JavaScript] project is a shows how to invoke ActionScript code from JavaScript in Flex.
2)This application includes Flex UI components Panel and Button.
a)Panel – to display Button
b)Button – to invoke a JavaScript function, which in turn invokes an ActionScript function
3)This project needs the developer to modify index.template.html file which is inside the html-template folder.

NOTE: Steps 4 through 6 are already done in this project and need not to repeat. Do these steps only if you are creating your own project.

4)Open index.template.html file in a text editor and between the <body> tags include the following line “<script language=”JavaScript” src=”externalInterface.js”></script>”.
5)Now create a file called externalInterface.js in src folder.
6)externalInterface.js file should have the JavaScript function which is called by and which calls the ActionScript file.

Follow these steps to run PhotoShow project in FlexBuilder:

1) Open the Code folder and copy all the files.
2) Create a new project in FlexBuilder and paste the those files inside the newly created Flex project folder.
3)Replace the already existing files(if any) in the newly created project folder with the copied files.
4)Save the project and run the main.mxml file inside src folder.

How it works?

1) Run main.mxml file inside the src folder.
2) Click ActionScript –> JavaScript –> ActionScript button in the Panel.
3) Now an alert box appears with a message “ActionScript invoked from JavaScript”.

To know more about my micro lectures in Flex and to stay in touch with me please visit my website http://www.snipersn.ucoz.com

Categorized in Adobe Flex Tutorials
Tags: , , , ,

How to invoke a JavaScript function with parameter(s) from Action Script in Adobe Flex ?

June 20, 2009 - Leave a Response

Hi All. Let me tell you how to invoke a JavaScript function from Action Script in Adobe Flex. Just download the InvokeJSfromASwithParam.rar project folder from the box that appears at the extreme bottom of this blog and follow the below things.

Project Details:

1)This “InvokeJSfromASwithParam”[AS-> Action Script, JS-> JavaScript] project shows how to invoke JavaScript function with parameters from Action Script in Flex.
2)This application includes Flex UI components Panel and Button.
a)Panel – to display Button
b)Text Boxes – to get input from user
c)Button – to invoke a JavaScript function

3)This project needs the developer to modify index.template.html file which is in the html-template folder.

NOTE: Steps 4 and 5 are already done in this project and need not to repeat. Do it only if you are creating your own project.

4)Open index.template.html file in a text editor and between the <body> tags include the following lines
<script language=”JavaScript” type=”text/javascript”>
function addTwoNumbers(a,b)
{
var c = parseInt(a)+parseInt(b);
alert(“Sum of “+a+” and “+b+” : “+c);
return c;
}
</script>
5)You can replace addTwoNumbers(a,b) function with your own function.

Follow these steps to run PhotoShow project in FlexBuilder:

1) Open the Code folder and copy all the files.
2) Create a new project in FlexBuilder and paste the those files inside the newly created Flex project folder.
3)Replace the already existing files(if any) in the newly created project folder with the copied files.
4)Save the project and run the InvokeJSWithParam.mxml file inside src folder.

How it works?

1) Run InvokeJSWithParam.mxml file inside the src folder.
2) Enter two numbers in the two text input boxes[one number in each text input box].
2) Click Add button in the Panel.
3) Now a JavaScript alert box appears with a message “sum of 10 and 20 : 30″[say you have entered 10 and 20 in text input boxes].

To know more about my micro lectures in Flex and to stay in touch with me please visit my website
http://www.snipersn.ucoz.com

Categorized in Adobe Flex Tutorials
Tags: , , , , ,

How to invoke a JavaScript function without parameters from Action Script in Adobe Flex ?

June 20, 2009 - Leave a Response

Hi All. Let me tell you how to invoke a JavaScript function from Action Script in Adobe Flex. Just download the InvokeJSfromASwithNoParam.rar project folder from the box that appears at the extreme bottom of this blog and follow the below things.

Project Details:

1)This “InvokeJSfromAS”[AS-> ActionScript,JS-> JavaScript] project shows how to invoke JavaScript code from ActionScript in Flex.
2)This application includes Flex UI components Panel and Button.
a)Panel – to display Button
b)Button – to invoke a JavaScript function
3)This project needs the developer to modify index.template.html file which is in the html-template folder.

NOTE: Step 4 and 5 are  already done in this project and need not to repeat. Do it only if you are creating your own project.

4)Open index.template.html file in a text editor and between the tags include the following lines
<script language=”JavaScript” type=”text/javascript”>
function sayHelloWorld()
{
alert(“HelloWorld!, from JavaScript”);
}
</script>
5)You can replace sayHelloWorld() function with your own function.

Follow these steps to run PhotoShow project in FlexBuilder:

1) Open the Code folder and copy all the files.
2) Create a new project in FlexBuilder and paste the those files inside the newly created Flex project folder.
3)Replace the already existing files(if any) in the newly created project folder with the copied files.
4)Save the project and run the InvokeJSWithNoParam.mxml file inside src folder.

How it works?

1) Run InvokeJSWithNoParam.mxml file inside the src folder.
2) Click Invoke JavaScript button in the Panel.
3) Now a JavaScript alert box appears with a message “HelloWorld!, from JavaScript”.

To know more about my micro lectures in Flex and to stay in touch with me please visit my website
http://www.snipersn.ucoz.com

Categorized in Adobe Flex Tutorials
Tags: , , , , ,

How to create a photo gallery in Adobe Flex ?

June 20, 2009 - 5 Responses

Hi All.  Let me tell you how to create a photo gallery in Adobe Flex. Just download the PhotoShow.rar project folder from the box that appears at the extreme bottom of this blog and follow the below things.

Project Details:

1)This “PhotoShow” project is a simple image gallery created in Flex.
2)This gallery includes Flex UI components Image Control and Link Button.
a)Image Control – to display image(Expanded) and image thumbnails
b)Link Button – to show/hide image thumbnails
3)This gallery uses built-in effects in Flex to improve the aesthetics of Image and thumbnails.

Follow these steps to run PhotoShow project in Flex Builder:

1) Open the Code folder and copy all the files.
2) Create a new project in Flex Builder and paste the those files inside the newly created Flex project folder.
3)Replace the already existing files(if any) in the newly created project folder with the copied files.
4)Save the project and run the PhotoShow.mxml file.

How it works?

1) Run photoshow.mxml file.
2) Click show thumbnails link button in the bottom left corner of the image.
3) Now thumbnails get visible. Click any thumbnail to view it fully.
4) Click hide thumbnails to make thumbnails invisible.

To have a visual guidance for this project please click the following link

http://www.youtube.com/watch?v=YC9MtqPINdo

To know more about my micro lectures in Flex and to stay in touch with me please visit my website http://www.snipersn.ucoz.com

Categorized in Adobe Flex Tutorials
Tags: , , , ,

Follow

Get every new post delivered to your Inbox.