Technology Lesson

Free Rotate An Object Select the Object that you wish to Rotate.  8 Black Arrows will appear around the Object when it is selected. These are Resizing Handles. Clicking on the Object again will change the Resizing Handles to Rotation and Skew Arrows.  The Rotation Arrows are at the 4 Corners of the Object. Move the cursor over any one of them, hold the mouse button down, and turn the mouse in a Clockwise or Counter-clockwise direction to Free Rotate. Rotate Object To A Specified Degree

Go to the Menu Bar and select Object > Transform.  This will open the Transform Window which has 5 Tabs, namely Move, Scale, Rotate, Skew, and Matrix.   Select the Rotate Tab. Where you see Angle, you will type in the Degrees you would like the Object to be Rotated. Keep in mind that to Rotate the Object Clockwise, you will have to enter a Negative Number (e.g. -30).  To Rotate the Object Counter-clockwise you will have to enter a Positive Number (e.g. 30). Click on the Apply Button when finished.

Rotate Object in 90 Degree Increments Select the Object you wish to Rotate.  Go to the Menu Bar and select Object > Rotate 90 Deg CW. This will move your Object forward in a Clockwise Direction at 90 Degree Increments each time you use it.   To Rotate in a Counter-clockwise Direction go to Object > Rotate 90 Deg CCW.  This will move your Object backward in a Counter-clockwise Direction at 90 Degree Increments each time you use it.

In this beginners Flash sound tutorial, were going to talk about the basics of how to add sound in Flash. Adding sound to your Flash projects can make them a little more interesting. You can use audio files to add voice over narrations, background music and sound effects, for example. One way of being able to work with sound using Flash is by importing the sound files into your Flash document. Some of the audio formats that Flash gives you the ability to import include, but are not limited to:

• MP3
• WAV
• AIFF

1. From the main menu, choose File > Import > Import to Library
   
2. When the Import to Library dialog box comes up, navigate to the folder that contains the audio file, select the file, and click on Open
   
3. Once Flash finishes importing the file, you should be able to see it in the Flash documents library
   

You can preview the audio file by selecting it in the library, and then clicking on the play button in the preview window.

In the next article, were going to learn how to add imported audio files to a Flash documents timeline. That article is also going to talk about the difference between the Flash Event Sound and the Flash Stream Sound options - two options for synchronizing sound in Flash.

NEXT: Adding Sound to Flash Movie Timeline and Choosing Flash Sync Sound Options - Flash Event Sound vs Flash Stream Sound

If you want to learn how to create an account on Facebook and youre looking for resources about Facebook - instructions, guides, tips, and training - check out these free Facebook video tutorials below. These are from the Facebook Essential Training Course by lynda.com. It will teach you the basics of creating an account on Facebook and managing it. It has topics on: finding and adding friends, liking pages, reading the News Feed, writing on a friend’s wall, updating your status, posting videos and links, creating a page for a business, protecting privacy and staying secure, deactivating an account, and more. Check out the free videos below to see start learning. To view the entire course, become a lynda.com member or sign up for a FREE 7-day trial.






Sign-up for a lynda.com membership today to learn how to how to create an account on Facebook and to view all the Facebook instructions, guides, and Tips from this excellent video training course.

Exercise File
Start_Quiz_App.fla

In this tutorial, we are going to learn how to create a quiz in Flash using ActionScript 3. Were going to make use of arrays and for loops in order to complete this project.

This tutorial comes with an exercise file (the download link can be found at the top of the article). Lets go ahead and open it and take a look at its contents. This Flash movie has 2 frames. The first frame contains the elements needed for the user to take the quiz. The second frame contains elements that will display the results (answers and scores). The Flash movie should start at frame 1, and stay there until the user finishes answering all the questions. Once the user is done, the Flash movie goes to frame 2 where the answers are checked and the score is given. Since the quiz and the results are separated into two different frames, then the code will be separated as well. Frame 1 will contain the code that is needed to run the quiz (displaying questions and storing the answers submitted by the user), while frame 2 will contain the code that is needed to check the answers, compute the results and display them.

So first, lets go ahead and work on frame 1. Frame 1 contains 3 objects:

1. questions_txt - This is a Dynamic TextField that will be used to display the questions. In the Properties Inspector, this TextField has been set to be multilined.
2. answers_txt - This is an Input TextField where the user will type in the answer. In the Properties Inspector, this TextField has been set to have a border and to be a single line TextField.
3. submit_btn - This button will be used by the user to submit each answer.

The first thing well do is to stop the Flash movie on frame 1. If we dont, then the movie will just continue looping between frames 1 and 2. So select frame 1 of the actions layer, then go to the Actions Panel and put in a stop action.

stop();

Next, lets create a couple of objects:

stop();

var nQNumber:Number = 0;
var aQuestions:Array = new Array();
var aCorrectAnswers:Array = new Array("Jupiter", "Mars", "war", "Titan");
var aUserAnswers:Array = new Array();

What are these instances for?
nQNumber
We will be storing the quiz questions in an array. Each question will therefore be numbered starting at 0. This nQNumber variable will be used to move through each of those quiz questions. After the user answers one question, we will have this number increase by one and use that number to retrieve the next question.

aQuestions
This is the array that will be used to store the questions.

aCorrectAnswers
This is the array that stores all the correct answers. Of course we will have to be the ones to provide what the correct answers are, which is why this array is already populated with values. When the array was created, the values were also declared in the array constructor, therefore populating the array. The first value will have an index of 0, the second value will have an index of 1, and so on... You will notice that the aQuestions array, which is supposed to store the questions, has not been given any values yet. Dont worry, well provide those values shortly using array access notation instead.

aUserAnswers
This array will be used to store the answers given by the user. Each time the user (the quiz taker) submits an answer, then that answer will go into this array. So we just create this array first, but we dont put any values in it initially. Well have to wait for what the user will input in the answer field and use those to populate this array instead.

Next, lets go ahead and create the questions. Weve provided 4 answers when the aCorrectAnswers array was created, so well need to provide 4 questions as well. Make sure that the order of the questions corresponds to the order of the answers as well (question index 0 should match answer index 0, question index 1 should match answer index 1, and so on...). We will populate the aQuestions array using Array Access Notation:

var nQNumber:Number = 0;
var aQuestions:Array = new Array();
var aCorrectAnswers:Array = new Array("Jupiter", "Mars", "war", "Titan");
var aUserAnswers:Array = new Array();

aQuestions[0] = "What is the biggest planet in our solar system?";
aQuestions[1] = "Which planet in our solar system is the 4th planet from the sun?";
aQuestions[2] = "Mars is named after the Roman god of ___.";
aQuestions[3] = "What is the name of Saturns largest moon?";

So now that weve created all the needed objects and have added all the questions and answers for this first part of our project, lets now go ahead and create the actual quiz functionality.

The first thing well do is display the first question in the questions_txt TextField. So what we can do is get aQuestions[0] (the 0 index corresponds to the first item in the array, and therefore the first question) and assign it to the text property of our TextField like so: questions_txt.text = aQuestions[0] . But the problem here is that wed like to be able to update to the next question after the user finishes answering the first one. So instead of manually inputting the index number, we can make use of a variable instead. And then we can just update that variable whenever needed. This is where our nQNumber variable comes in. Initially, it has a value of 0, so typing in questions_txt.text = aQuestions[nQNumber] will be the the same as typing in questions_txt.text = aQuestions[0] . And then later on, well add some code that will increment the value of nQNumber every time the user submits an answer, thereby updating to the next question. But first, update your code so that the first question will be displayed in the questions_txt TextField:

aQuestions[0] = "What is the biggest planet in our solar system?";
aQuestions[1] = "Which planet in our solar system is the 4th planet from the sun?";
aQuestions[2] = "Mars is named after the Roman god of ___.";
aQuestions[3] = "What is the name of Saturns largest moon?";

questions_txt.text = aQuestions[nQNumber];

So now, if you test the movie, you should see the first question displayed in the TextField.

And now that we have that, the next thing we need to fix is how our Flash movie is going to respond whenever a quiz taker types an answer in the input field and clicks on the submit button. So lets break it down. When the user clicks on the submit button, our flash movie should:

1. get the users answer (what he or she inputs in the answer field) and add it to the aUserAnswers array
2. update to the next question

Since we want all this to happen whenever the user clicks on the button, well have to create a CLICK event handler for submit_btn. And lets give the event listener function the name quiz.

questions_txt.text = aQuestions[nQNumber];

submit_btn.addEventListener(MouseEvent.CLICK, quiz);

function quiz(e:MouseEvent):void 
{
     // This function will be responsible for:
     // 1. pushing the users answers to the aCorrectAnswers array
     // 2. updating to the next question
}

Lets first work on how to get the users answer and add it to the aUserAnswers array. To do that, well use the push() method of the array class. Well get the contents of the answers_txt TextField using the text property, and then well pass that to the push() method like so: aUserAnswers.push(answers_txt.text) . So whatever text is inside the answers_txt TextField at the time the submit button is clicked will be added to the aUserAnswers array (the first value that is pushed to the array gets an index of 0, the next one after that will get an index of 1, and so on...). Then after each answer is pushed to the array, make the input TextField blank again, clearing it for the next question. So heres how the updated event listener function will look like:

function quiz(e:MouseEvent):void 
{
     aUserAnswers.push(answers_txt.text);
     answers_txt.text = ""; // This line puts an empty string, making the TextField appear empty again
}

So after the user submits the answer, the next question should then be displayed. To display the next question, well need to retrieve it from the aQuestions array and assign it to the questions_txt TextField. Recall that we used questions_txt.text = aQuestions[nQNumber] (where nQNumber is initially equal to 0) in order to display the first question. The next question that follows has an index of 1. So in order to retrieve that next question, we will need to increment the value of nQNumber by 1 so that it goes from 0 to 1. Once it is incremented, well then assign aQuestions[nQNumber] to the questions_txt TextField once again. And then the next time the user clicks on the submit button, then nQNumber gets incremented by one again, allowing us to retrieve the item with the next index, and so on... Heres the updated event listener function:

function quiz(e:MouseEvent):void 
{
     aUserAnswers.push(answers_txt.text);
     answers_txt.text = "";
     nQNumber++;
     questions_txt.text = aQuestions[nQNumber];
}

But wait! We arent done yet. There are still some fixes that we need to put in this function. Recall that we have a limited number of questions. In this example, we only have 4. A problem will arise when the user clicks on the submit button for the fourth time.

Why will there be a problem? There are 4 questions, so naturally, the user will end up clicking the submit button for a total of 4 times.
Yes that is true. But the 4th time the user clicks on the button, nQNumber will be increased to 4. And recall that our array index numbers start at 0, not at 1. So the last question is actually at aQuestions[3]. And aQuestions[4] is actually for a fifth question. But there is no fifth question, and trying to retrieve one from the array will cause an error.

So what do we do then?
Well need to put an if statement that will tell our Flash movie to no longer try to retrieve any more questions, once we get to the last one.

So lets do that now. We need to get the line questions_txt.text = aQuestions[nQNumber]; and place it in an if statement. The if statement needs to check if nQNumber is less than 4. If nQNumber is still less than 4, then go ahead and retrieve the next question. If it is no longer less than 4, then we dont want our code to retrieve any more questions. So we can type in if(nQNumber < 4) as our condition. But... thats actually not what well do. Instead of typing in 4, well use aQuestions.length instead. The length property of the array class tells us how many items there are in the array. So if an array has 5 items, then the array length will be 5. If it has 6 items, then the length will be 6. In this particular example, our array has 4 items, and therefore has an array length of 4.

Why cant I just type in 4? Is there a benefit to using the length property instead?
Well, no one is stopping you from hard-coding in a value of 4, but the great thing about making use of the length property instead is that if you decide to add more questions (or maybe remove some questions), then you wont have to go back to the if statement and hard-code in a new value. The length property will automatically update itself once you add or reduce items in the array. This will be especially useful if you had numerous items in your code that need to reference how long your array is. Imagine if you hard-coded the data numerous times in different parts of your code. Then every time you decide to add or subtract items to the array, then youll have to go back to all those hard-coded parts of your code, and manually change the value. That would not be very efficient.

So our updated event listener function will now look like this:

function quiz(e:MouseEvent):void 
{
     aUserAnswers.push(answers_txt.text);
     answers_txt.text = "";
     nQNumber++;
     if(nQNumber < aQuestions.length) 
     {
          questions_txt.text = aQuestions[nQNumber];
     }
}

Great! So once the user gets through all the questions, what do we do next?
We then tell the Flash movie to go to the next frame where the user will get the quiz results. To do that, we just add an else clause to our if statement that will instruct our Flash movie to go the the next frame. We will use the nextFrame() method of the MovieClip class to move the playhead to the next frame. So basically, what were telling our Flash movie is that if nQNumber is no longer less than aQuestions.length, then it means that we dont have anymore questions and the quiz is done, and it can now move to frame 2 where the results will be displayed. So finally, our updated event listener function will look like this:

function quiz(e:MouseEvent):void 
{
     aUserAnswers.push(answers_txt.text);
     answers_txt.text = "";
     nQNumber++;
     if(nQNumber < aQuestions.length) 
     {
          questions_txt.text = aQuestions[nQNumber];
     }
     else 
     {
          nextFrame();
     }
}

In the next part of this tutorial, we will work on the code that will display the answers that the user submitted alongside the correct answers. We will also work on the code that will check the answers and calculate and display the users score.

Heres the frame 1 code in full:

stop();

var nQNumber:Number = 0;
var aQuestions:Array = new Array();
var aCorrectAnswers:Array = new Array("Jupiter", "Mars", "war", "Titan");
var aUserAnswers:Array = new Array();

aQuestions[0] = "What is the biggest planet in our solar system?";
aQuestions[1] = "Which planet in our solar system is the 4th planet from the sun?";
aQuestions[2] = "Mars is named after the Roman god of ___.";
aQuestions[3] = "What is the name of Saturns largest moon?";

questions_txt.text = aQuestions[nQNumber];

submit_btn.addEventListener(MouseEvent.CLICK, quiz);

function quiz(e:MouseEvent):void 
{
     aUserAnswers.push(answers_txt.text);
     answers_txt.text = "";
     nQNumber++;
     if(nQNumber < aQuestions.length) 
     {
          questions_txt.text = aQuestions[nQNumber];
     } 
     else 
     {
          nextFrame();
     }
}

NEXT: How to Create a Quiz in Flash - ActionScript 3 Tutorial - PART 2

Today Ill show you how to create a simple skin set.

By skin set I mean a few skins of the same design, but different functionality and goal.

For example, today well create 3 skins of one design for warning messages, information messages, and confirmation windows.

You can see the final results in the end of this tutorial.

The source code for todays tutorial can be found here.

You can unpack the package now and look at the contents. Youll see that the AdvAlert class is stored in the com folder, and there are 3 pictures and 2 sounds in the rsrc folder. The code of the example is in main.as file of the root folder.

The pictures and sounds from the rsrc folder are embedded into the final swf file. You can see that embedding resources and using them as dynamic content does not require you to use Flash IDE.

I will now explain what each part of main.as code does.

You can see that the first thing we do is declare the essential variables. Theres only one in this case - AlertManager:


Then we embed each resource:


And then we declare 6 variables for 3 skins:


In the init() function we first set AlertManager to a new AdvAlertManager:


And then proceed to stylize the 3 skins:


I also have this bit of code that just displays the alert windows as an example, one after another (with some interaction involved). This code functions called confirm, warn, and info, which we will create shortly.


Then we create 3 functions - warn, info and confirm, which use the 3 different skins:


And thats it! Now we can use these handy alert windows of different types in games and applications with minimum number of lines.

Using this principle, you can create your own skin sets and introduce new window types.

Thanks for reading!

Today Ill explain how to style tooltips made using EasyTooltip class.

To change the appearance of tooltips, create a new TooltipStyle object, set its properties and then apply it to the EasyTooltip instance using EasyTooltips setStyle() method.

To edit the text appearance, use the textAlpha, textFormat and textPadding properties of the TooltipStyle object.

To change the position of the tooltip relative to mouse, use the offsetX and offsetY properties.

You can use minWidth, maxWidth, minHeight and maxHeight to set size limits for your tooltips.

You can apply an array of filters to the filters property of the TooltipStyle object.

The remaining 3 properties are backgroundRect, backgroundStroke and dynamicContent. Lets start with dynamic content.

Normally, you wouldnt need to edit contents of the dynamicContent array manually. Theres a method that lets you add a visual element to the tooltip (such as an icon) without having to touch the array. The method is called addContent().

There are 3 parameters in the function - class of the visual object, x and y offsets. The class is passed instead of a class instance, because objects of that class will be created automatically. In the example below, myIcon is the name of a class that extends MovieClip and just contains a small image.




There are 3 background fill types for the tooltip box, and 3 background stroke types. Those are solid color fill and stroke, gradient color fill and stroke, and bitmap fill and stroke. Any fill type can be used in combination with any stroke.

You can set the backgroundRect property value to an instance of SolidColorRect, GradientColorRect or BitmapColorRect class. Similarly, youcan set the backgroundStroke property value to an instance of SolidColorStroke, GradientColorStroke or BitmapColorStroke class.

Use the properties of these classes to customize your tooltip appearances. Below are 3 examples using all of the classes:










Using all these tools you can customize your tooltips to look the way you want them to.

Thanks for reading!