Flash CS4 Actionscript 3 tutorials

Lets experience Flash CS4 Actionscript 3 together

What are you looking for as tutorials

Hey people, i was thinking about new tutorials and things to get this site up and running. I know i havent been updating too often, damned stressy times lately hehe. But anyways, tell me a bit about what you are after so i can make a list of Flash tutorials i NEED to make! thanks in advance

Been a bit slow lately

Im sorry to be a bit slow lately I cant seem to decide what to do and im doing like a million things at one. One thing i was thinking about doing was to create a book in which i in detail would describe how to work with Flash, PHP and MySql, but im not sure if i should devote my time to that and if it would perhaps stand to make me a dollar. Its a daunting task and im not sure how fast / if i can complete it but i badly would like it hehe

What do you think … would a book about that topic be interesting enough to be sold as e-book form with full online help etc ? I do want to write it so that if one would have read it they would know how to integrate Flash, PHP and a database like Mysql.

I need to find a new way to make some money as my adsense in my sites network is kinda down at the moment of writing this

The as3 getUrl version: navigateToURL

In Actionscript 3 getUrl (which used to open links) has been replaced with navigateToURL navigateToURL in the snippet below opens a _blank link to iwidgetworld.com in your default browser with Actionscript 3 (AS3). the methods are afound in the flash.net.URLRequest and flash.net.navigateToURL classes.

Drawing lines with the AS3 Drawing API

Lets have a look at drawing lines and shapes with the Actionscript 3 drawing API. I always loved it and have been using the Flash drawing API for years now, its just so much fun to play with. Now with CS4 and Actionscript 3 we even have more options and tricks to play with. These days we even get methods to draw circles, rounded rectangles and even ellipses through Flash. I remember back in the days when we had to code most of those things ourselves hehe.

The Graphics class contains the whole set of methods that you can use to create a shape (vector shape). One thing to notice is that you cant make a Graphics object directly from ActionScript code. If you call new Graphics() , an exception is thrown.

If you have used the drawing API before Actionscript 3 you will notice a few slight changes in the main setup, but not that much. So lets starts playing around a bit. Open Flash and create a new Actionscript 3 document with these dimensions: 500px width and 20px height. For this example ill just keep the codes in the Flash environment to keep things more clear.

Before we start, this is a list of arguments we can feed the linestyle method. (which lets us set the colors, thickness etcetera)

In the following examples we will just touch the graphics class a little bit, but there are really many more cool things to do. I will make a lot more tutorials related to the graphics class and drawing with Actionscript 3

Example 1 - draw a short red line

On frame 1 just add this little bit of Actionscript:

Notice how we called the methods like graphics.lineStyle, graphics.moveTo and graphics.lineTo from the graphics class. In older versions of Actionscript you could call them like lineStyle, moveTo etcetera, but in this Actionscript version we have to use grahpics in front of it as those methods now are placed in that class.

This is how it would look like in Flash:

Download : example1.fla - drawing a short red line

Example 2 - making it longer, thicker and purple

Lets now change a few of those values and see what happens. Lets make the line longer, thicker and a different color this time

I only changed a few values in the ablove code to show you what happens when you change certain parts. I noticed in the comments the lines that i changed.

This is how it would look like in Flash:

Download : example2.fla - drawing a longer, thicker purple line

Example 3 - Lets make the line transparant

This is how it would look in Flash:

Download : example3.fla - a drawn line with opacity

AS3 Snippet: get the date in Flash formatted nicely ;)

This little snippet helps you to setup a nice looking date quickly. Just input a year, day and month and it will display it in a nice way. You can ofcourse easily adapt this Actionscript 3 snippet to suit your own need. Hope ya find it useful

I always like to write little snippets of Actionscript because use this blog to store all snippets i would also use myself. My blog is still new at the time of writing this but i really am gearing to be a true resource in any way possible. As i am king of losing my favorite links, snippets and other stuff im glad i decided on blogging. This is the perfect spot to put all pieces of AS3 script and perhaps other snippet i might like and want to re-use!

Anyway im drifting off hehe .. below is the snippet and many more are too follow. Also keep a close eye on the tutorials as i want to add as many as possible. Perhaps signing up for my RSS feed is the best way to keep up to date

Load dynamic images with Actionscript 3 CS4

Hi people, today i thought it would be usefull to show how to load a dynamic image into Flash CS4. I didnt setup a preloader to keep it as simple as possible. This tutorial is just setup to show in a simple way how to get that external image into Flash with Actionscript 3.

Download all tutorial files as zip

Lets create a Flash file

Lets first setup our Flash environment. All code we write will go in an external class file, and in our .fla file we do nothing more then setting the document class to reflect the name of the class file we will write so that Flash knows what to do. So lets openup Flash CS4 and create a new Flash file. I used a 550 pixels by 300 pixels stage width and height, because my image is that size too. You could ofcourse go for whatever width and height you want here.

Now that we created our Flash file, we can go to its properties by file>publish settings or press control+shift+F12 and select the settings of actionscritp 3 (under the flash tab). If you got confused, here is an image that shows you what i mean: publish settings .

Now in the settings tab we only have to enter the class name of the clas we will be writing soon. (that loads in a dynamic image). So in the first input box, where it says “document class” type in LoadExternalImage. Thats the name i will give the class that loads in a picture and thus here we need to tell Flash to set that as document class. Here is a picture again to help you if you got confused: Document class settings . If flash gives you an error like class is not found or whatever, just ignore it. Flash jsut cant find the file yet as we didnt make it yet. We will soon though, so there is nothing to worry about.

So now we have an empty Flash file, which has its document class pointed to LoadExternalImage. Thats all we need for now in Flash, lets proceed to create the actual class that loads in the dynamic images called LoadExternalImage.as

loadExternalImageTest.fla

Lets Actionscript

Let me first show you the code in full and then we can have a more closer look at it.

This file needs to be saved as LoadExternalImage.as and needs to be saved where you saved the .fla file.

A closer look at the code

The first thing we did is create a package and imported the classes needed to make the loading of dynamic images work. The more you work with class files like this the more classes like these you will come across. The more you use them, the more you recognise them and the easier they become to remember. After a while you will get a better idea on what to import. At first it might be a bit difficult, but just accept that these classes need to be imported else it wil not work. If you would not import the URLRequest for example, we could never use that method here to load in that exernal image we want to have loaded, because it wouldnt exist.

In the next few lines of code we setup the class definition and make it extend the Sprite class. (an important main class with loads of important things) Then we create a constructor function and just call a little custom function i created called “ini’t”. As you can see our constructor has the exact same name as out class: LoadExternalImage

Next up is a few little lines of code that will actually load in the dynamic image. I put the loading of the image into a custom function names “init” as you can see, this is because i like the name “init”, its so nicely descriptive The function does not need to return anything thats why we use :void and its private as only with class uses it for now.

In the first line of code inside teh function we create an instance if the Loader class. Again if we didnt setup “import flash.display.Loader;” earlier we could not have done this. But as we did, its now perfectly valid to use With addChild we put the imageLoader in the display list and thus it becomes a visible item. And as last line we use the “load” method to actually load the dynamic image.

I gave it a static url and not a relative one, so you can use the image for testing purposes. Notice that create a new instance of the URLRequest class and feed that as argument to the load method. We just pass the image url as argument to the URLRequest and its done.

If you press control+enter at this point, a dynamic image will be loaded into Flash

Final words

In this basic Actionscript 3 tutorial i hope i have showed you a way to get an external image into Flash CS4. If you liked the tutorial, please spread the word and post it around to your favorite social networks. Anyways, thans for being here and also dont forget to leave a comment

Download all files related to this tutorial:
LoadExternalImage.as | loadExternalImageTest.fla | Download all files as zip

AS3 Snippet: If else conditional short

This is a usefull little Actionscript snippet that shows how you can setup an if else conditional the shorter way. Sometimes its usefull for sake of saving as much size as possible to write code as short as possible. The code below shows you how to do this

Embed Flash movies into Wordpress

I just needed a way to embed Flash Movies into a wordpress blog quickly as i noticed that just trying to add the code rendered by Flash wasnt going to work.

I ran into this a little wordpress plugin which lets you do just that Happy i was by finding it i installed it and started to use it. After you install it you can just activate the plugin and use it like this to embed Flash content into your Wordpress blog posts:

In the above code just change the values to your Flash Movie values and you can embed you Flash Movies.

You can also launch a little help app to setup your embed code by clicking the “Kimili Flash Embed” button which was added after installation.

Although i experience a few problems with it and disabled it now you can go get it yourself here: Kimili Flash Embed for Wordpress

*Kinda important Update*
On thing to take notice of is that what when i added more flash movies to different posts, suddenly this little thingie gave me a script error and put my main blog index on blank. I was not too happy with that. Im checking it out now if i can see why that happens. Im now looking for other ways to get flash in wordpress.

I just played around with it some more and voila this also works and doesnt require any plugins

Using the Timer Class to animate rotation

The timer class is quite a powerful class in Actionscript and thats why i wanted to play around with it a bit. In this article i will just show you a very simple implementation of a Timer. In our case we will create a simple shape, and we’ll use the Timer class to make it rotate. I wanna keep it simple and then perhaps make some follow up tutorials to expand on what we did here!

The Timer class replaces setInterval and setTimeout which were present in AS2.0 and acts as interface to timers, which let you run code on a specified time sequence.

You can use the start() method to start a timer. An event listener can be attached for the timer event to set up code to be run on the timer interval. So with it you could for example make things animate as you will see as we progress through this little experiment.

Preview of what we’ll make

Below is a little preview of the end result. In our case its just a square rotating by using the TIMER class!

Lets setup our environment

The first thing we want to do now is create the .fla file which will be linked to our Timer class. To do this is not hard at all, just open Flash CS4 and create a new Actionscript 3.0 document. Name this fla file something like myTimerTest.fla and store it preferably in a folder somewhere like myTimerTest/myTimerTest.fla.

After you saved it, press ctrl+shift+F12 or just open the publish settings and select ‘Flash’. Then in the next tab select ’settings’ and a new screen will open where you can set the document class. Check this image if you got confused

If you dont fully understand what a document class is or what it does, dont worry, just type in as name: TimerTest and press ok. If Flash wants to spit up an error, something like class blablabla isnt here, just ignore it. Flash just does that because it wants to find a file named TimerTest.as but as we didnt create that yet, it will spit up that error.

Setup a visual

Now go to frame 1, scene 1 in the flash file you just created and draw a 200 x 200 square. After you drew it, select the shape and press F8 to convert it into a symbol. We want to convert it into a MovieClip so we can rotate it and whatnot Also keep the registration point in the center, ceck this image if you need a visual reference . Now after you converted it into a MovieClip symbol, it has no instance name yet, so select the it, and set its instance name to “ourShape”. Again check this image if you are a bit lost.

Notice that we didnt have to set any export for actionscript or anything when we created the MovieClip. This is because we set the instance name for the clip onStage via its properties box and thats enough for us to be able to approach it from the class we will be writing.

So now we have a flash file hooked up to a soon to be created class, in the flash file we created a MovieClip with a 200×200 square inside and its instance name was set to “ourShape“. Because we linked our class to this Flash file earlier (when we set the document class), later inside the class we can address the MovieClip we created just now just by typing its instance name. You’ll see soon

If you dont want to setup your own shape here is the Flash part of the tutorial: myTimerTest.fla

Next up will be creating the actual class file TimerTest.as which holds all the logic that makes up a Timer, so lets proceed to the gooddies

The Actual Timer Class

First ill show you the full code, commented but we will break it down a bit more if you read on. You can code along with me which is best for teh sake of remembering this stuff, but you can also download the sourcefiles at the bottom of the tutorial

TimerTest.as

Closer look at the code

Lets have a closer look at the above code in which we setup our Timer that rotated our little square The first line of code is where we declare our package. Because learning about packages is not inside the scope of this article, just accept that it works and wrap all your class code inside it

In the next few lines after we declared our package, we import the classes needed to make a Timer work. The first class we need to import is the flash.display.MovieClip class. We need to do this as we want to do some things like rotate our shape, and those are functions become available if you import the MovieClip class with the following statement.

Next up are 3 classes we need to import to make it work. In the beginning it sometimes feels a bit daunting to see all these imports and things going on. It might seem to be a bit much to learn, but i must say that in real life you get used to them very fast. If you are dedicated to learning Actionscript you will be writing little experiments a lot, or perhaps even biggers ones.

A fact is that you have to write those import statements a lot and if you did that a few times they tend to stick in your brain and it gets easier to remember. Fow now just accept that by importing these 3 classes you give yoursef access to a whole range of functionalities and cool stuff to play around with.

Next up we create our class definition that will extend MovieClip (again to enable us to use functions like rotate etcetera). Our class is called TimerTest.as thus we set the name of the class to also be “TimerTest”. Notice it starts with a capitol letter, which is what you do with naming your class files and classes.

The next part is fairly straightforward, we create our constructor and in it we just call a custom function called “init“. Again i might be using some un-familiar terms here like a constructor etcetera, but as learning about Object Oriented Programming and dealing with classes is not the scope of this tutorial i cant go to deep into those things. I will be writing more tutorials and address these topics too

Constructor as defined by Wiki A constructor is similar to an instance method, but it differs from a method in that it never has an explicit return type, it’s not inherited, and usually has different rules for scope modifiers. Constructors are often distinguished by having the same name as the declaring class. Their responsibility is to initialize the object’s data members and to establish the invariant of the class, failing if the invariant isn’t valid.

Next up is the init function. This this i could have called anything really, but i like the word “init” and use it very often. If you look at the code you can see its all reasonably straightforward and understandable. The only thing that might seem a little bit strange is the event listener, but if you see it in effect, it will make sense. If it doesnt make sense at all, repeat writing code like this and play with it. Change the settings and try to mess it up. You will learn by falling and standing up, just like in normal life.

First we created a new instance of the Timer class called “timer” (not a capitol T) and as argument we passed 20. 20 in this case means that the timer will trigger every 20 miliseconds. We named this instance of the Timer class “timer“, but we could have named it anything really, so dont get confused there We could create this Timer because we imported all classes that were needed. If you would not have setup those import statements earlier, you couldnt do something like “new Timer(20);”

In the next line we are hooking up an event listener to the timer we just created. We tell this event listener that we want to listen to a TimerEvent with TimerEvent.TIMER. We also tell it that a custom function called “onTimer” is the function we want to have executed.

This next line doesnt really need explaining, we just kickoff our Timer.

Now well write the function we called “onTimer” that will actually rotate the shape we setup earlier in the Flash authoring environment. As you can see we just call the rotation property of the MovieClip we named “ourShape”, which are available because we imported import flash.display.MovieClip; and we made sure our class extends MovieClip. With += 5 we just tell Flash to move this shape to the right 5 pixels, everytime its called. Als we set it to 20 milliseconds, it will rotate 5 pixels every 20 milliseconds and thus gives us a nice looking smooth rotational animation.

Final word and sourcefiles

I hope i could show you at least a little bit on how you could use the Timer class Flash Actionscript 3 offers us. Ofcourse you can do a lot more with it, but this article was just to show you the basics of it. If you liked it, please use the social network and bookmark buttons to share this tutorial with as many people as possible.

Sourcefiles:
TimerTest.as
myTimerTest.fla
timerExample1-files.zip

Thanks for reading and being here, respect Dont forget to Digg and share this tutorial around!

What is this blog about?

My Actionscript4.me blog will deal with my endavours in trying to learn Actionscript 3, comming from a Flash 8 / flash mx kinda background. I will try to do as many tests as possible and this can really range from little Math experiments to Integrating Flash and PHP to Making cool particle effects

Its fun to learn and eventhough i always felt i was very comfortable in Flash, these last changes from AS2 to AS3 made me feel i had to start over a bit. So in this blog i will show you what i do to get a grip on the whole OOP stlye of coding and more in general the whole of Actionscript 3 and Actionscript 4.

The cool thing is that by doing all kinds of excercises and experiments, we will master AS3 / AS4 much better and we can brush upon things that we could use later. With these things i mean physics concepts and math concepts used in Actionscript animations and really whatever you can think off.

Powered by Wordpress | WP Premium theme by XHTML This
Copyright 2009 Flash CS4 Actionscript 3 tutorials. All rights reserved