tutorial 2 - the properties of my class

[Flep]

Last time, we saw how to create an Actionscript 3.0 Class and we saw what is the use of the constructor of a class.
Now, we can see in more details the property of the class we first learnt to define.

The class property allows us to store or save values in that precise class. It would be nothing else than the Actionscript variables we used to define in a flash movie as seen always. The only difference is that inside a class, those variables are called properties.

Those saved values can be called and used on demand during the carrying out (execution/running) of the code.

As an example, let us imagine to have a class which basically loads an external image. Once the image is completely loaded, we can then retrieve its dimensions. Those dimensions should then be stored to be reused when needed.

This is when the properties are used.

So, we declare a property as we would do for a variable. Even more, that property inside the class can have attributes.
Each property of a class is declared before the constructor function. You are not obliged to do so but it is a good practice to declare them outside and before the class so that our class is easier to read and verified while working on it.

Let us carry on

We saw how to define a building function of a class: public function ClassName().
I now create another AS file and save it as 'ìSecond.as, defined as we have seen until now:

package
{
	import flash.display.MovieClip;
	
	public class Second extends MovieClip
	{
		public function Second()
		{
			trace(" The class Second has been instantiated correctly ");
		}
	}
}
I

create the FLA associated to the class Second and save it as second.fla.
At this point, if we publish the SWF, we would have the trace that The class Second has been instantiated correctly.

I declare a property to the class Second the following way:

package
{
	import flash.display.MovieClip;
	
	public class Second extends MovieClip;
	{
		private var ancient:Number=10;
		
		public function Second()
		{
			trace(" The class Second has been instantiated correctly");
		}
	}
}

Pay attention to this line: private var ancient:Number=10;
Yes, it is how it is. I declared a variable (property of the class) named ancient to the class Second.
private is an attribute meaning that the value of that property is not accessible from outside the class itself. There are 3 attributes available. As for now, we will only use the private one and the two remaining one will be explained further on during the next lessons.
var tells Flash to create a new variable
ancient is the name assigned to the property (you could call it anyway you wish)
:Number means that only numbers are accepted as value for that variable
ë=10í assigns the value equal to 10

To retrieve the value of the property ëancientí, we simply need to call it when needed.
For example:

package
{
	import flash.display.MovieClip;
	
	public class Second extends MovieClip
	{
		private var ancient:Number=10;
		
		public function Second()
		{
			trace("The class Second has been instantiated correctly");
			trace( ancient );
		}
	}
}

We can also declare our property and we assign it a value later on, for example:

package
{
	import flash.display.MovieClip;
	
	public class Second extends MovieClip
	{
		private var ancient:Number;
		
		public function Second()
		{
			trace("The class Second has been instantiated correctly");
			ancient=10;
			trace( ancient );
		}
	}
}

We can see that we first have declared the property ancient: private var ancient:Number; and then in the building function, we assigned it to the value 10.
This way, it is easier to understand that once the property is declared, we can interact with it as needed.

Another way is to call or assign a value to the property inside the methods (explained in the next lesson) or via getters & setters (seen much more further on with the lessons)

Let us do another example to make sure we have understood the concept that I am trying to explain:

package
{
	import flash.display.MovieClip;
	
	public class Second extends MovieClip
	{
		private var ancient:Number=10;
		
		public function Second()
		{
			trace("The class Second has been instantiated correctlyî);
			ancient+=10;
			trace( ancient );
		}
	}
}

I declared the property assigning to it immediately the value equal to 10: private var ancient:Number=10; and in the building function I increased its value of 10. The output is as following:
The class Second has been instantiated correctly
20

If once we declared the property and its value and that we are sure that its value will not be modified anymore, we could use ëconstí (as constant) instead of ëvarí:

package
{
	import flash.display.MovieClip;
	
	public class Second extends MovieClip
	{
		private var ancient:Number=10;
		private const modern:Number=30;
		
		public function Second()
		{
			trace("The class Second has been instantiated correctly");
			ancient+=10;
			trace( ancient );
			trace(modern);
		}
	}
}

I use ëconstí to tell Flash that the property will have a constant value and will not be changed next: private const modern:number=30;
If I would try to assign a new value to the constant ëmoderní, flash would return an error.

An important point to remember:

Flash CS3 assign as property of the Document Class any object contained on stage of the FLA associated to the Document Class.

I will explain myself better with an example:
On stage of the second.fla, I create a MovieClip and assign to it an instance name ëclip_mcí.
In the building function of Second.as, I ask for a trace of clip_mc:

package
{
	import flash.display.MovieClip;
	
	public class Second extends MovieClip
	{
		private var ancient:Number=10;
		private const modern:Number=30;
		
		public function Second()
		{
			trace("The class Second has been instantiated correctly");
			ancient+=10;
			trace( ancient );
			trace(modern);
			trace(clip_mc);
		}
	}
}

I obtain this output:
The class Second has been instantiated correctly
20
30
[object MovieClip]

Flash has recognised clip_mc placed on stage in second.fla.

In fact, we can even interact with ëclip_mcí:

package
{
    import flash.display.MovieClip;
    
    public class Second extends MovieClip
    {
        private var ancient:Number=10;
        private const modern:Number=30;
        
        public function Second()
        {
            trace(" la classe Second Ë stata istanziata correttamente ");
            ancient+=10;
            trace( ancient );
            trace(modern);
            trace(clip_mc);
            clip_mc.x=stage.stageWidth/2;
            clip_mc.y=stage.stageHeight/2;
        }
    }
}

I assigned values to the x and y properties of clip_mc:
clip_mc.x=stage.stageWidth/2;
clip_mc.y=stage.stageHeight/2;

To learn more about the interactivity in between the Timeline and the Document Class, I recommend you to read this article: call from the timeline to the Document Class and vice versa.

Source files: