Flash Animation/Effects Tutorial 1: Motion Tweens
Feb 8th
Flash can create two types of tweened animation using timeline:
- Motion Tween
- Shape Tween
Creation of Motion/Shape tween using timeline is the basics of Flash.
Motion tween is nothing but tweening a Symbol’s movement from one position to another.
To implement Motion Tween all that you have to do is, provide Flash with Symbol’s initial position and the end position. Rest is taken care by Flash. Isn’t it really simple.
For example in this demonstration, I have converted the pencil object to a Symbol. Provided Flash with its initial and the end position, intermediate tweening is done by Flash. Motion Tween animation is as simple as that \:\)
Okay, you ready to learn how to create motion tween. All you have to do is just follow this tutorial step by step.
Please note:
- You need to have Flash Player 7.0 or higher installed to view the Flash animation.
- Flash MX 2004 must be installed in your system to download the .fla file.
Steps to follow:
- Open a new flash file (Ctrl+N).
- New Document window will appear
- Select General panel and choose Type: Flash Document . Press OK.
- If your timeline window is not open, press (Ctrl+Alt+T).
- Now you can see a single Layer called “Layer1″ in your timeline Window.
- Select the first frame. Import your image onto stage, upon which you would want to implement motion tween. File>Import>Import to Stage, or just press (Ctrl+R) or you can even draw your own object, you can either choose Rectangular tool or Oval tool from the tool box and draw your desired shape.
- Now select your object on the stage and press F8 to convert this image to a Symbol. Convert to Symbol window will pop-up.
- Name your Symbol what ever you like.
- Select Graphic behavior and press OK.
- Right now your Symbol is in frame1 of Layer1. Select frame 20 and press F6 to insert a new keyframe.
- Still keeping playhead on frame 20, move your Symbol to any other position other than the present one.
- Select any frame between, 2 to 19 and select Motion from the tween pop-up menu in the Property inspector. Now your Layer will look something like the one shown below.
- Now press (Ctrl+Enter) to view your motion tween.
Note: You can create motion tween only on symbols. So any object upon which you would want to implement motion tween, First convert the object to a Symbol.
Flash Tutorial 8: AI Enemies Type 2
Feb 5th
If you have already made a moving character (type 2), this Tutorial will be very easy for you.
Set up your new AI enemy exactly as you did your moving character (make sure that everything in the main movie clip is CENTERED). Give it the instance name “AI2″ and use the following script to control it (instead of key down detection):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 | onClipEvent(enterFrame){ var AI_speed = 6; //the higher this number the faster the AI moves var reaction_distance = 300; //this higher this number, the farther the AI can "see" your character from. var AI_width = this._xscale / 2; var AI_hight = this._yscale / 2; if(this._y < _parent.character._y){ var view_direction2 = "down"; var y_dif = _parent.character._y - this._y; this._xscale = 100; if(y_dif > x_dif){ gotoAndStop("down"); } } else { var view_direction2 = "up"; var y_dif = this._y - _parent.character._y; this._xscale = 100; if(y_dif > x_dif){ gotoAndStop("up"); } } if(this._x < _parent.character._x){ var view_direction = "right"; var x_dif = _parent.character._x - this._x; this._xscale = 100; if(x_dif > y_dif){ gotoAndStop("right"); } } else { var view_direction = "left"; var x_dif = this._x - _parent.character._x; this._xscale = -100; if(x_dif > y_dif){ gotoAndStop("left"); } } if(view_direction == "left"){ if(x_dif > AI_width + 100){ this._x -= AI_speed; } else { if(y_dif < AI_hight + 1){ trace("you've been hit!"); } } } else if(view_direction == "right"){ if(x_dif > AI_width){ this._x += AI_speed; } else { if(y_dif < AI_hight){ trace("you've been hit!"); } } } if(view_direction2 == "up"){ if(y_dif > AI_hight){ this._y -= AI_speed; } else { if(x_dif < AI_width + 1){ trace("you've been hit!"); } } } else if(view_direction2 == "down"){ if(y_dif > AI_hight){ this._y += AI_speed; } else { if(x_dif < AI_width + 1){ trace("you've been hit!"); } } } } |
Flash Tutorial 7: AI Enemies Type 1
Feb 4th
This is for action-script 2.0.
Well, if you’ve gone though my moving character tutorials, or if you already know how to make moving characters…you may be wondering “How can I make an AI enemy? A monster if you will.”. As always, I’m here to help!
First things first, make sure your character movie-clip (as I am assuming it is already made) has the instance name “character”.
Now, lets make the movie-clip for the AI (give it the instance name “AI1″ (It is set up very similarly to your character movie-clip). In fact, set it up EXACTLY as you did your character, except use this script in the “AI1″ movie-clip. And you MUST have everything in the AI1 movie-clip placed at 0,0.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | onClipEvent(enterFrame){ var AI_speed = 1.5; //the higher this number the faster the AI moves var reaction_distance = 500; //this higher this number, the farther the AI can "see" your character from. var AI_width = this._xscale; var AI_highth = this._yscale; if(this._x < _parent.character._x){ var view_direction = "right"; var x_dif = _parent.character._x - this._x; var y_dif = _parent.character._y - this._y; } else { var view_direction = "left"; var x_dif = this._x - _parent.character._x; var y_dif = this._y - _parent.character._y; } if(y_dif <= reaction_distance){ if(view_direction == "left"){ gotoAndStop("jumping"); } else { gotoAndStop("crouching"); } } if(x_dif <= reaction_distance){ if(view_direction == "left"){ this._xscale = -100; this._x -= 2; if(_global.jumping != "yes"){ gotoAndStop("walking"); } } else { this._xscale = 100; this._x += 2; if(_global.jumping != "yes"){ gotoAndStop("walking"); } } } }//end on Clip Event |
Basics of CSS Part – #9
Feb 3rd
Today we’re going to talk about list styles. Lists are a vital commodity to web site creation. Most side-navigation menus and inline menus are actually lists that are simply listing the things we want them to. From there, we can add styles to these lists and manipulate them however we please.
Lists
In HTML there are two types of lists:
- Ordered Lists <ol>
- Unordered Lists <ul>
Ordered Lists are usually marked with numbers or letters whereas Unordered Lists are usually marked with bullets or squares.
List Type
We can change how a list looks by using the list-style-type property. Consider the following code:
ul {list-style-type:circle;} ol {list-style-type:upper-roman;}
The CSS code above will make all ul elements have a list style type of a circle and all ol elements have a list style type of upper roman numerals. The output will look like the following:
- Item 1
- Item 2
- Item 1
- Item 2
Properties
We can have a few properties for list types and those properties operate the same way the background properties
| Property | Description | Values |
|---|---|---|
| list-style | This is the all inclusive property where you can define all of the values | list-style-type list-style-image list-style-position |
| list-style-type | This property will define type of list style you wish to have in the <li> element. |
none disc circle square decimal decimal-leading-zero armenian georgian lower-alpha upper-alpha lower-greek lower-latin upper-latin lower-roman upper-roman hebrew cjk-ideographic hiragana hiragana-iroha katakana katakana-iroha |
| list-style-image | This property will allow you to define an image as the list marker. | url(image url) none |
| list-style-position | This property will allow you to specify whether you want the list to be inside or outside the content flow. | inside outside |
We can also narrow down the list-style and list-style-type properties for each list element.
Unordered Lists
For unordered lists we can use the following values:
- circle
- disc
- square
- none
Technically we can use any of the values listed in the table above, however, the purpose of the unordered list would cease to exist.
Ordered Lists
We can have many options for the ordered list. Out of the 23 values we posted for list-style-type, only three were solely for unordered lists. We can use the following values:
|
|
Using images with lists
Using images can spice up just a standard web page by a lot. It is very easy to create your own bullet, circle, square, or a small arrow pointing toward the item you are showing in the list. We can use the all-inclusive,
list-style:url ("image/bullet.png"); /*OR*/ list-style-image:url ("image/bullet.png");
This will replace the default bullet in the unordered list with an image of our choice.
To see these properties in action feel free to download lists.zip(9.75KB)
Flash Tutorial 6: A Moving Character Type 2
Feb 2nd
This is for action-script 2.0
There are two types of moving character. As I like to classify them, full 2D and semi 2D. This tutorial is for the semi 2D type.
(A popular example being the original Zelda game.
To make it you need the following:
animations:
-top view facing forwards (1 frame animation)
-top view facing backwards (1 frame animation)
-top view facing right (we can make it face left with action-script) (1 frame animation)
-top view walking facing forwards (standard 2-3 frames)
-top view walking facing backwards (standard 2-3 frames)
-top view walking facing left (we can make it face right with action-script) (standard 2-3 frames)
Detection Scripts:
-Detect the pressing of the UP key
-Detect the pressing of the Down key
-Detect the pressing of the Left key
-Detect the pressing of the Right key
Action Scripts:
-Flip the character
-Make the character move left/right/up/down
so, how do we set this up you ask?
First, lets put the animations in order and set up their action-script. In all of your “view facing” animations (use the facing right animation for facing left, so you have the same animations for left and right) (they should only be one frame), put the following script in the first frame:
for facing right:
1 2 3 4 5 | stop(); if(Key.isDown(Key.RIGHT)){ this._x+=_global.walking_speed; gotoAndPlay(2); } |
for facing left:
1 2 3 4 5 | stop(); if(Key.isDown(Key.LEFT)){ this._x-=_global.walking_speed; gotoAndPlay(2); } |
for facing forward (back of character to you):
1 2 3 4 5 | stop(); if(Key.isDown(Key.UP)){ this._y-=_global.walking_speed; gotoAndPlay(2); } |
for facing backwards (front of character facing you):
1 2 3 4 5 | stop(); if(Key.isDown(Key.DOWN)){ this._y+=_global.walking_speed; gotoAndPlay(2); } |
Now, you know those 2-3 frames of walking animation you have? places them after the first frame of their corresponding facing directions. For example, the walking right three frames of animation I have would be pasted into the three frames after the first frame of my view facing right frame. Making a total of 4 frames. (Again, make sure facing left and facing right / walking left and walking right animations are the same in everything except the script on the first frame).
At this point you should now really only have 4 animations (yes, two are the same [left and right]. Make a movie-clip called “character” and make 4 blank frames in it. label the frames “right”, “left”, “up”, “down”. Now put the 4 animations you have in their corresponding frames. (switching left and right doesn’t matter). the animation with your character’s back shown goes in “up”. The animation where their front is shown goes in the “down”.
now, put this script in the “character” movie-clip itself:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | onClipEvent(enterFrame){ _global.walking_speed = 2; //you can change this number to change the walking speed. if(Key.isDown(Key.RIGHT)){ this._xscale = 100; gotoAndStop("right"); }//end Key down RIGHT if(Key.isDown(Key.LEFT)){ this._xscale = -100; gotoAndStop("left"); }//end key down LEFT if(Key.isDown(Key.UP)){ gotoAndStop("up"); }//end Key down UP if(Key.isDown(Key.DOWN)){ gotoAndStop("down"); }//end key down DOWN }//end on Clip Event |
and you’re done!
Flash Tutorial 5: A Moving Character Type 1
Feb 1st
This is for action-script 2.0
There are two types of moving character. As I like to classify them, full 2D and semi 2D. This tutorial is for the full 2D type.
(A popular example being the original Mario game.
To make it you need the following:
animations:
-right view standing (1 frame)
-right view walking (standard of 3-4 frames)
-right view jumping (standard of 12 frames (tween up and down))
-right view crouching (1 frame)
(there are no left view because action-script can change it’s direction dynamically).
Detection Scripts:
-Detect the pressing of the UP key
-Detect the pressing of the Down key
-Detect the pressing of the Left key
-Detect the pressing of the Right key
Action Scripts:
-Flip the character
-Make the character jump
-Make the character move left/right
so, how do we set this up you ask?
First, make a movie clip for each of the animations (all 4).
Then, Make a new movie clip called “character” and give it the instance name “character”. Make 4 blank frames in the “character” movie-clip and put one of the animation movie-clips in each of them. Then put the Stop(); command on all of the 4 frames. Now, label each frame as appropriate to its animation “walking” “standing” “jumping” “crouching”.
now It’s time for the action-script! (To be placed in the “character” movie-clip).
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | onClipEvent(enterFrame){ if(Key.isDown(Key.RIGHT)){ this._xscale = 100; this._x += 2; if(_global.jumping != "yes"){ gotoAndStop("walking"); } }//end Key down RIGHT if(Key.isDown(Key.LEFT)){ this._xscale = -100; this._x -= 2; if(_global.jumping != "yes"){ gotoAndStop("walking"); } }//end key down LEFT if(Key.isDown(Key.UP)){ gotoAndStop("jumping"); }//end Key down UP if(Key.isDown(Key.DOWN)){ gotoAndStop("crouching"); }//end key down DOWN }//end on Clip Event |
Now for the last bit of scripting.
Make sure you put the stop command in the last frame of every animation except “walking”;
Now put:
at the first frame of your jumping animation.
and:
Code:
at the end of your jumping animation.
and you’re done!
Flash Tutorial 4: Fun with the Cursor!
Jan 29th
This tutorial is in action-script 2.0
First, lets make a cursor.
Draw a cursor and turn it into a movie clip.
open up the actions window for the movie clip and place this action-script in it:
now go into your first frame’s actions window and type:
congratz! you now have a custom cursor!
but, lets do a little more now.
go into your cursor’s movie-clip and make two dynamic text boxes next to your cursor. now, give one box the instance name mousex and the other the instance name mousey.
now, select your cursor image (not the text boxes) and make it into a movie-clip again, so you have a movie-clip inside a movie-clip. in the actions of your new movie clip, type:
1 2 3 4 | onClipEvent(enterFrame){ _parent.mousex.text = _root._xmouse; _parent.mousey.text = _root._ymouse; } |
Now you can see the coordinates of your mouse!
Networking
Jan 23rd
Note: Some things are changed for ease of example.
For this tech tip, we’ll be looking at the different problems/consequences of handling wireless networks as well as looking at the benefits of a wireless network.
If you’re running windows vista then your gateway to the wireless and wired world for networking lays in the the dual computer icon like so: (the icon in the middle, parallel to "Friday").
If you right click on this icon, you’ll get an array of options you can choose. The most important option is the very last one entitled Network and Sharing Center. It will look like so:
The fist thing I would like to highlight is the first choice on the left side menu, View computers and devices option that enables you to see computers and other hardware connected to the network whether wirelessly or hard wired. If you click on the option, a window like the image below will appear:
This allows you to see all devices that your computer sees. This includes other computers on the same network as you (router or hard wire), shared printers, wireless router(s), and other devices. This particular option can be beneficial if you need to quickly know the IP address of your router (you can do this by right-clicking on your router and then selecting properties) or if you want to access your router via web you can right-click and it’ll take you to the necessary web page. If you have more than one computer on the same network you can explore them and share content between the two systems easily and you could also print wirelessly too.
This next part deals with the connections that you can potentially connect to. The networks that my computer picks up on are wifi signals from my router as well as my neighbor’s router. I have the choice to connect to either one if I wanted; however, If I wish to connect to my neighbor’s I would need a password in order to access his wireless internet hence, Security-Enabled Network.
The next part is vital to fixing a common problem encountered by many people that are new to a wireless networking system. If you ever get an error stating that you cannot connect due to previous internet settings for this network, your problem and your solution are in the same place. Example: Let us say that Jon is our best friend so we go over to his house a lot and we do all sorts of things and one of those things is that we enjoy looking for deals online. Jon, one day, decides to purchase a new router and cable modem and decides to set up a 128 bit encryption so no one steals his internet anymore. You help him set it up and later on he messes up on the settings so he resets the wifi router and starts from scratch. You come back the next day, like every other day, and you see how he’s doing along with the wife, kids, grandparents, etc. You try to connect but a window pops up stating that you cannot connect because you have previous settings for this particular wifi system. Your solution is to delete that particular wireless network that is saved on your computer by clicking on the Manage Wireless Networks option on the left hand menu of the Network and Sharing Center. Select the network that is giving you trouble (in this case Jon’s Network) and delete it. Go back to the Connect to a Network option and then select the proper one and enter the correct information and it’ll work like a charm! Note: "Security WEP" isn’t really lime green, it was highlighted to make it known that for these connections you must enter in a password, passphrase, or some type of code.
Setting up an internet connection and be done in various ways but it isn’t always necessary either. Depending on your needs, you can set up a home network with a broadband connection, wireless connection, setting up a router, wireless ad hoc connection, etc. These are all relative to your type of internet connection of course.. So here’s the down low on all of the options. Connect to a Network is the same procedure as connecting to a network through the connect to a network as mentioned previously; however you’ll need to specify wireless, broadband, or dial-up. If you choose wireless then you will follow the same procedure as mentioned before. For Broadband (PPoE), you will need to enter in the username and password that your ISP provides for you and enter in that information. For Dial-Up, you’ll need the phone number, username, and password your ISP gave you in order to connect to the internet. Note: For Dial-Up, you will need to enter some additional information before you setup the connection.
The next option on our list is to Setup a wireless router or access point. The access point is usually for small businesses so the business can have printer and file sharing via the access point. For most folks, you’ll want to set a wireless router. Windows will provide you with the necessary information on setting up a wireless router and the security that is needed to protect your personal information.
Wireless and access point setup
You can manually connect to a wireless network by providing all the necessary information in order to connect to the wireless router. You’ll need the correct network name, the correct security type, encryption type (which is relative to the security type), and the Security Key/Phassphrase.
Manually connect to a Wireless network
The next option is something called an Ad Hoc network setup in which small businesses can be connected to the same network and be able to share info between them easily. The computers must be within 30 feet of each other, however…
The next and final option is setting up a network through a workplace. You’ll have to decide whether or not you wish to simply "dial into" your workplace or get through via a VPN (Virtual Private Network). A VPN is defined as a network that connects one or more computers to a large network, such as a business network, using the Internet. A VPN is encrypted, so only authorized people have access to it.
Basics of XHTML Part – #6
Jan 22nd
Today we are going to talk about List types in HTML. There are three lists that HTML supports:
- Unordered Lists
- Ordered Lists
- Definition Lists
Unordered Lists
An unordered List is a list that have bullets in front of the list item (normally little black circles). The Unordered List starts with a <ul> tag and each new item starts with an <li> tag. The syntax is as follows:
<ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul>
The browser output will look this:
- Item 1
- Item 2
- Item 3
You can put unordered lists inside paragraphs, line breaks, links, images, lists, and other non-block level elements. We would use an unordered list if we wanted to create a list that didn’t have any specific order, like a grocery shopping list.
We can also change how the bullets look without using style sheets or inline css. Within the <ul> tag we simply add an attribute called type and add the value we want. Here are the values we can put:
- disc
- circle
- square
Here is the syntax:
<ul type="disc"> <li>Item 1</li> <li>Item 2</li> </ul> <ul type="circle"> <li>Item 1</li> <li>Item 2</li> </ul> <ul type="square"> <li>Item 1</li> <li>Item 2</li> </ul>
The browser output is like this:
|
|
|
Ordered List
An ordered list is a list that is marked with numbers instead of bullets. The ordered list starts with an <ol> tag and then each list item (like the unordered list) has the <li> tag around the item. The syntax is as follows:
<ol> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ol>
The browser output will look this:
- Item 1
- Item 2
- Item 3
You can put unordered lists inside paragraphs, line breaks, links, images, lists, and other non-block level elements. We would use an ordered list if we wanted to create a list thathas a specific order. A good example would be if you were creating a step by step guide.
Like the unordered list, there is a way to change the list type without using styles or inline css to an ordered list. Here is the syntax:
<ol type="A"> <!--Upper Alpha--> <li>Item 1</li> <li>Item 2</li> </ol> <ol type="a"> <!--Lower Alpha--> <li>Item 1</li> <li>Item 2</li> </ol> <ol type="I"> <!--Upper Roman--> <li>Item 1</li> <li>Item 2</li> </ol> <ol type="i"> <!--Lower Roman--> <li>Item 1</li> <li>Item 2</li> </ol>
The browser output will look like this:
|
|
|
|
Definition List
A definition list isn’t really a list but rather a list of items (terms) and each item (term) has a description.
The definition list begins with an <dl> (definition list) tag.
Each term starts with a <dt> (definition term) tag.
Each term description starts with a <dd> (definition description) tag.
The browser output will look like this:
- Item 1
- Description 1
- Item 2
- Description 2
- Item 3
- Description 3
Creating an .iso file
Jan 21st
In this tech tip, we will be looking at the iso files and how to create them and why .iso files are easy and convenient.In this process, I’ll be using a program called poweriso, which can be found here.
Step 1
In order to create our iso image, we need to gather the necessary folders and/or files that will make up the .iso. You want to drag the folders and files into the main window like the image below: Please note that you can insert a disc that already has information on it and compile the cd into an iso file by using the copy function or by saving the information as an iso file as discussed in step 2.
and then you’ll see a few things happening that we want to be aware of. The first thing is the blue bar at the bottom where it says the total size of the contents of the disc, which in our case is a CD that will have 608MB or 86% of that CD to be filled. If we happen to exceed 700MB, poweriso will automatically change to a DVD for storage.
Step 2
Once we have our necessary files, we can burn the iso image onto a CD or DVD (depending on the size of the data), insert the proper media into your disk drive and then we need to save the file as an .iso by going to file > save as > <filename>.iso. Once our iso is saved on our hard drive, click on the burn button and then you’ll see a dialogue box appear like the image below:
Using the .iso image that we just saved on our hard drive, if it is not already selected, select the image file, select the drive that you media is in, autodetect the media, burning speed is relative to the job (usually max is fine), and if you wish to verify the data thereafter then check the checkbox and then hit burn! For creating ad burning an .iso it is as easy as step 1 and step 2!
The benefits of having an .iso file is that it is popular for creating an image of a disc, it can be compressed and optimized, and it is very user friendly.













