Nekyouto-Tech: Flash AS2

Showing posts with label Flash AS2. Show all posts

Wednesday, November 28, 2012

Empty String != null

For some of us out there, we might be assigning an empty string to various types of variables thinking that nothing might go wrong. However, that isn't the case. For different types of objects / components and for different types of variables or properties, by assigning an empty string might give you some unnecessary troubles. For example...

Time for some source codes: ImageSourceIssue.mxml

If you are using firebug or Charles or any other types of Web Developer Tools, you can easily identify the differences in the results for the 3 buttons. :)

* Click here for the demo shown in this post.
^ Click here for the source files for the demo.

Friday, September 7, 2012

AS3: In Search of the missing ReleaseOutside

In the older flash, or during the AS2 era, there's a onReleaseOutside that allows you to click on a button and release it outside. However, in AS3, one could easily find MouseEvents like MOUSE_DOWN, MOUSE_UP, CLICK, etc... but there isn't a RELEASE_OUTSIDE action, so how do work around it?

Time for some source files - SimpleMouseReleaseOutside.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
      xmlns:s="library://ns.adobe.com/flex/spark" 
      xmlns:mx="library://ns.adobe.com/flex/mx"
      creationComplete="creationCompleteEvent(event)">
 <fx:Script>
  <![CDATA[
   import mx.events.FlexEvent;
   
   //Upon creation complete, setup the button event of the button
   //and setup the check box
   protected function creationCompleteEvent(event:FlexEvent):void
   {
    btn1.buttonMode = true;
    btn1.label = "Select Me Please";
    btn1.addEventListener(MouseEvent.MOUSE_DOWN, btnMouseDownEvent);
    
    chk1.buttonMode = true;
    chk1.label = "Click me to enable 'ReleaseOutside' on the btn.";
    chk1.selected = false;
   }
   
   //Upon performing a MOUSE DOWN action on the button, add the 
   //listeners for MOUSE UP and if the checkbox is selected, we
   //will be adding a MOUSE UP listener for the stage (This
   //will perform like a ReleaseOutside event in as2.
   private function btnMouseDownEvent(event:Event):void
   {
    btn1.label = "I'm selected";
    btn1.addEventListener(
     MouseEvent.MOUSE_UP, btnMouseUpEvent);
    if(chk1.selected)
    {
     stage.addEventListener(
      MouseEvent.MOUSE_UP, btnMouseUpEvent);
    }
   }
   
   //Upon performing a MOUSE UP action on the button or anywhere
   //in the file, we will be removing the listeners for the button
   //away.
   private function btnMouseUpEvent(event:Event):void
   {
    btn1.label = "Select Me Please";
    btn1.removeEventListener(
     MouseEvent.MOUSE_UP, btnMouseUpEvent);
    if(chk1.selected)
    {
     stage.removeEventListener(
      MouseEvent.MOUSE_UP, btnMouseUpEvent);
    }
   }
   
  ]]>
 </fx:Script>
 <s:VGroup width="100%"
     height="100%"
     horizontalAlign="center">
  <s:Spacer height="100%"/>
  <s:Button id="btn1" 
      width="200"/>
  <s:Spacer height="100%"/>
  <s:CheckBox id="chk1"/>
  <s:Spacer height="100%"/>
 </s:VGroup>
</s:Application>

* Click here for the demo shown in this post.
^ Click here for the source files for the demo.

Thursday, December 8, 2011

Flash: Disabling default scaling of your flash file

I was browsing through my previous post and I was looking at the demo that I had created. There seems to be something amiss in the example that I had created. After taking a good look at it, I realised that there were white borders appearing on the left and right side of my flash file. and on top of it, the text of the Google Map Component appears to be very blur. I also realise that all of the above were caused by the default property of scaling the flash file. Hence, I have thrown in a fix to it and everything looks much better now. :)

I only make a minor change into the html file and the following would be the source file for the html file.

<html>
 <head>
<style type="text/css">
<!--
html{height:100%}
body {margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px;}
#flashContent {width:100%;height:100%;}
-->
</style>
    
   <!-- Include support librarys first -->  
  <script type="text/javascript" src="jsScript/swfobject.js"></script>
  <script type="text/javascript" src="jsScript/swfforcesize.js"></script>      
  <script type="text/javascript" src="jsScript/swfaddress.js?tracker=null"></script>    


  </head>
  <body>
    <div id="fb-root"></div>
    <table cellpadding="0" cellspacing="0" border="0" width="100%" height="100%">
    <tr><td align="center">
    <div id="flashContent">
         <h1>You need at least Flash Player 10.0 to view this page.</h1>
                <p><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></p>
    </div>
  <script type="text/javascript">
   function createSWF(){
    var now=new Date();
    now = Date.UTC(now.getYear(),now.getMonth(),now.getDate(),now.getHours(),now.getMinutes(),now.getSeconds());
    var swfURL = "swf/Main.swf?date=" + now;
    var flashvars = {};
    //Remove default scaling of the flash file
    var params = {scale :"noscale"};
    var attributes = {};
    attributes.name = "flashContent";
    swfobject.embedSWF(swfURL, "flashContent", "100%", "100%", "10.0.2", null, flashvars, params, attributes);    
    swfobject.addLoadEvent(function(){
     var obj = document.getElementById("flashContent");
     if(obj){
      var forcesize = new SWFForceSize(obj, 800, 600);
      forcesize.onLoadDiv();
     }
    })
   }
   createSWF();
  </script>    
     </td></tr></table>  
</body>
</html>

* Click here to view the previous example.
^ Click here to view the demo of this example.
~ Click here for the source files of this demo.

By the way, if you are adding or embedding a Flash file into a webpage or website, I would highly recommend you to use the Javascript classes known as SWFObject to add or embed your Flash file into a webpage or website.

- Click here to find out more about SWFObject.

Sunday, October 30, 2011

Creating your own Screen Saver is as easy as ABC

Are you getting bored with the default screen savers that comes with your personal computers? Have you heard of an interactive screen saver before? Or a screen saver that works is a game like snake, pac-man, etc? Or ever had a dream of creating or customizing a screen saver yourself? This seems to be a dream but you can now have your dreams fulfilled by using...

The above logo was taken from the website of Screentime Media.
Screentime Media.

So why do are my reasons for recommending Screentime Media?

Supports OS like Windows and Mac
Gives you an option of creating a screensaver that can only be closed either by a mouse movement or a keyboard input
Allows the screensaver to detects for the existence of an internet connection
Customizable installation settings like preview window, installer window, settings window, etc
and much much more...

* Click here for the website of Screentime Media.

Saturday, June 11, 2011

Flash: Unblocking the barrier between your local Flash files (*.swf) and the Web

I am certain that from time to time we will encounter situations where you have a flash file and upon clicking on a button of the flash file, it should point you to a web page. This would make your life difficult especially when you need to upload the files to a server before you can test the functionalities of the button. I will be teaching you how to unblock the barrier between your local Flash Files (*.swf) and the web.

Let's begin shall we?

Download a Archive file from here.
Next, extract all the files and open up the flash file (*.swf) by either double clicking on the Flash file or by dragging the Flash file into your browser.
Click on the graphic in the Flash file to open a webpage.
If you encounter the following error, do not panic.
In order to fix the problem, you can either click on the "Settings" button on the alert box or visit the following URL before moving on to the next step.
After all the contents of the web page had been loaded, click on the button with the label of "Always allow" before clicking upon the "Edit Locations" drop down menu.
Note: Please click on the following image to have an idea how the web page will look like.
You should be given a list of items that you can choose and change. Select "Select Location" to change the settings of the file or folder that you want to remove the barrier.
Note: Please click on the following image to have an idea how the web page will look like in this step.

After selecting the button in the previous step, you will get a popup prompting you to select the folder or file that you would like to remove the barrier. After making a selection, click on the "Confirm" button to apply the changes.
Note: Please click on the following image to have an idea how the web page will look like in this step.

The results that you are getting should looks similar to the following image.

Now, try re-opening the Flash file(*.swf) that you have downloaded from this blog and you should not have any difficult opening a new web page from the Flash file in your local machine.

Thanks for reading this post and please write your comments here if you still have problem of opening a web page from the Flash files in your local machine.

Saturday, June 4, 2011

Flash AS3: Making your clickable Movieclip to show the Mouse Cursor

Moving on from Flash 8 to the latest version of Flash, which was 5.5, one might have encounter difficulties like the following. When you have created a Button with a 'Movieclip' type, you will realize that the button will not show the mouse cursor, even you have added all the Eventlisteners.

In as2, an individual will not encounter the following issue:

button1.onRelease = function(){
 //by adding a onRelease function on a Button or a Movieclip, the mouse cursor will appear automatically.
}

But in as3, you need more than adding just an EventListener:

//By adding this line, you will force the mouse cursor to appear on the 'MovieClip'.
button1.buttonMode = true;
//Adding a click event to a Movieclip or Button and point it to a function once the user trigger the event.
button1.addEventListener(MouseEvent.CLICK, clickEvent);

//This function will be triggered when the user clicks on the above button.
function clickEvent(event:Event){
 //Some actions to be done here.
}

After coding for a few years, I preferred using a function to bind the whole 'Button' and 'MovieClip' with the respective EventListeners

//Setup button1 of type 'MovieClip' with all the basic EventListener and show the mouse cursor
setupNormBtn(button1);
//Setup button2 of type 'Button' with all the basic EventListener
setupBasicBtn(button2);

//Function to call to setup the basic EventListeners of a MovieClip
function setupNormBtn(tempMc){
 tempMc.buttonMode = true;
 tempMc.addEventListener(MouseEvent.ROLL_OVER, rollOverEvent);
 tempMc.addEventListener(MouseEvent.ROLL_OUT, rollOutEvent);
 tempMc.addEventListener(MouseEvent.CLICK, clickEvent);
}

//Function to call to remove the basic EventListeners of a MovieClip
function killNormBtn(tempMc){
 tempMc.buttonMode = false;
 tempMc.removeEventListener(MouseEvent.ROLL_OVER, rollOverEvent);
 tempMc.removeEventListener(MouseEvent.ROLL_OUT, rollOutEvent);
 tempMc.removeEventListener(MouseEvent.CLICK, clickEvent);
}

//Function to call to setup the basic EventListeners of a Button
function setupBasicBtn(tempMc){
 tempMc.addEventListener(MouseEvent.CLICK, clickEvent);
}

//Function to call to remove the basic EventListeners of a Button
function killBasicBtn(tempMc){
 tempMc.removeEventListener(MouseEvent.CLICK, clickEvent);
}

//Function will be called when the user rollover a MovieClip
function rollOverEvent(event:MouseEvent){
 event.target.gotoAndStop("over");
}

//Function will be called when the user rollout a MovieClip
function rollOutEvent(event:MouseEvent){
 event.target.gotoAndStop("up");
}

//Function will be called when the user clicks on the MovieClip or Button
function clickEvent(event:MouseEvent){
 if(event.target == button1){
  //do actions for button1
  trace("button1");
 }else if(event.target == button2){
  //do actions for button2
  trace("button2");
 }
}