Carbon Nanotube Project
FLASH 8 and ActionScript 2.0
Flash 8 and ActionScript 2.0 is used to animate the results of the project "Design of a Nano-scale Electromechanical Switches". Flash 8 creates two dimensional videos in .swf format. You can upload it easily to a website by using the following structure. Consider we have a flash movie called ourflashmovie.swf that is 800 pixels in width and 400 pixels in height.
<object width="800" height="400"> <param name="movie" value="ourflashmovie.swf"> <embed src="ourflashmovie.swf" width="800" height="400"> </embed> </object>
If you have Dreamweaver 8 on your computer, you can go to Insert>Media>Flash or use the shortcut Ctrl+Alt+F to insert a .swf file to your webpage.
When you open a flash file, you will see the timeline of the file on top, and one layer called Layer 1. A flash document consists of layers, that are on top of each other. It is beneficial to use multiple layers, probably one for at most two or three objects, because layers make it easier while you are working with multiple objects.
When you create a shape, it is better to convert it to a movie clip. In this way, it will be in the library and you can use it any time you want. This is done by Convert To Symbol which you can access by pressing F8. There are three symbol types -movie clip, button, and graphic. Movie clip and button are used more generally, and you can convert shapes that will not be a button to movie clip. Similarly, movie clips can also be clicked. However, the handlers for both events are different. For example, when the user clicks, onRelease is called for button, and for a movie clip, onPress is called. The following is the structure for defining handlers:
home_button.onRelease = function(){
getURL("http://steflikk6.cs.binghamton.edu/~nano/index.html");
};
home_movieClip.onPress function(){
getURL("http://steflikk6.cs.binghamton.edu/~nano/index.html");
};
Here, home_button and home_movieClip are instance. A symbol defines the shape's function whether it is a button or not, but in order to access that symbol from ActionScript, you need to define an instance of that object from Properties window.
You can also change the appearance of button when it is clicked. To do so, click on the button and four frames will appear on timeline : up, over, down, and hit. 'Up' frame will be the object itself. However, you need to copy that frame to over, down, and hit by using F6. Then, you can click on over, and change the name on the button. Therefore, when the mouse is over the button, its name will change.
There also exists filters in Flash. These are used to drop shadow on, blur, bevel, or glow the symbol. The reason why I said symbol is that the shape must be a text or a symbol in order to apply filters. To apply a filter, select the object, and go to Filters tab, which should be located next to Properties tab. If not, go to Window>Properties>Filters. You can add multiple filters on the same symbol, or cancel them by clicking on - on top.
In this project, we have three animations done in flash. The first two are for linear beam deflection, nonlinear beam deflection, and the last one is to compare linear and nonlinear beam deflection. The only parameter set by the user is the voltage, which is set by sliding a scroll bar horizontally.
A slide show is done for project description in Flash 8. In this page, there are the subjects that user can click, and as he/she clicks on the subject, a page appears on the right. Then, by navigating with previous and next buttons, one can view the entire document.
Another slide show is created for screenshots of 3D images. In this page, there are two buttons for cantilevered and fixed-fixed beam image snapshots, and they can navigate with next and previous buttons for more images. Moreover, they can click on the image and see it in a larger scale.
Actually, the web pages are also done in flash, and HTML and CSS are only used to put them together.
a. Linear Beam Deflection (senior_presentationLinear.fla)
In this animation, the beam deflection changes according to the selected voltage value. In order to do this, we need to have multiple frames. A keyframe is used to identify the frame is changing. In this case, we will use keyframes when changing from one voltage to another. Each keyframe will include the ActionScript code to draw the beam. You can enter this code by going to the frame and pressing F9, which is the shortcut for ActionScript code window. This code will be in one layer, and we need to create another layer to insert stop(); code to stop the frames playing further. Insert these keyframes one frame before the actual code frame, because you don't want to execute next frame's code.
Data for linear beam deflection is obtained by team member Lian Xin Huang by using MATLAB and ANSYS. An Excel file is prepared for each case, which you can find it under the directory ../nanotube/lines/linear. Then, one array for X and one array for Y values of the points are constructed. The beam is composed of 200 points and we connected two points by using drawLine(X,Y) function. Here is the sample code for drawing lines:
this.createEmptyMovieClip("name_mc",10); //10 is the depth of the movie clip, and one layer has multiple depths.
name_mc.lineStyle(5,0xFF0000,100); //defines the style for a line. movieclip.lineStyle(thickness, color, alpha); name_mc.moveTo(455, 55); //It moves the drawing position of the movieclip to point (455,55). for(var i:Number=0;i<xP.length;i++) { name_mc.lineTo(xP[i]+455,yP[i]+55); //a loop to draw lines from one to another point, starting from (455,55). }
Alpha parameter of lineStyle function determines the opacity of the line. Alpha of a value 100 means that the color that you choose (0xFF0000 in this case) is opaques, i.e. not transparent. However, an alpha value of 0 indicates that the line is completely transparent and has the color of its background.
xP and yP are the arrays for x and y values of the beam at a specific voltage value. We have one frame for each voltage value, and by dragging the scrollbar, we are moving from one frame to another. In order to drag the bar only on horizontal axis, we need to use the following code, where sliding_mc is the name of the draggable movie clip :
var left = sliding_mc._x;
var top = sliding_mc._y;
var right = sliding_mc._x + 300 - 28.6; // 300 = length of the constraint rectangle that user can drag the object in.
// 28.6 = width of the draggable movie clip, sliding_mc.
// right variable specifies the maximum X value that the movie clip can dragged to.
var bottom = top;
sliding_mc.onPress = function() {
this.startDrag(this,false,left,top,right,bottom);
};
The startDrag function parameters are :
this - the movie clip to be dragged
false - movie lip is locked to the point where the user first clicked on the movie clip
left, top, right, bottom - coordinates of the movie clip's parent that specify a
constraint rectangle for the movie clip.We set top=bottom, in order to prevent vertical scrolling.
In the previous code, how to start dragging a movie clip is shown. However, in order to give it a command when the draggable movie clip is released, we need to use the following code. Here, you can use if conditions such as if(sliding_mc._x<100) {something();}. This tells that if it is dragged to a position whose X value is smaller than 100, then do something. Another thing to note is that there are two functions that enables the coder to go to another frame. One of them is gotoAndStop(frame_no); which will go to the frame specified by frame_no number, and stop. Only one frame will be played. However, when you use gotoAndPlay(frame_no); function, then it will go to that specific frame and play the frames until the one that contains stop(); function.
sliding_mc.onRelease = function() { // when the user stops dragging and releases the mouse
this.stopDrag(); // the dragging will stop
this._x = sliding_mc._x; // movie clip will move to the position where it is dragged. We do not need to specify Y value since it has dragged horizontally.
gotoAndPlay(10); // and it will go to frame 10 and play it until a stop(); command is found.
};
b. Nonlinear Beam Deflection (senior_presentationNonlinear.fla)
This animation has the same structure with linear beam deflection animation. The only different thing is the voltage values and the beam deflection. These numbers are in the excel sheet under .../nanotube/linear/nonlinear/Data.xls.
c. Linear versus Nonlinear Beam Deflection (senior_presentationBoth.fla)
This animation is created to compare linear and nonlinear beam deflections at the same voltage value. There are three voltage values in this case, 1, 2, and 3. The challenge in this animation is that you need to have two movie clips, one for linear and one for nonlinear at the same coordinates. What we have done is the flash frame itself is a movie clip. So, I just created one movie clip for linear beam deflection line, and used this (the flash movie itself) for the nonlinear beam deflection line. However, when you use it, you should not have any other object on that spot because the object will always be on top of it.
d. Project Documentation (documentation.fla)
This animation is created for a brief project description. In this video, I used motion and shape tweens. In order to create a tween, you first need to have two keyframes with more than one frames in between. Then, right click on any in-between frame, and select Create Tween. Then, you will see the frames on the timeline will change color and have an arrow on them. Click on any in-between frame, and go to Properties window. It will show the properties of the tween. You can either choose motion or shape tween from here. And, set Ease property to 100 to have a smoother transition.
First, choose motion tween and go to first keyframe. Now, the objects on this layer and on this frame will be in a blue box. You can create a fading effect by moving the object to a location, and changing its Alpha. Then, Flash will automatically move the object to its location on the second keyframe and change the alpha gradually. You can also make the object smaller and it will gradually transfer it to its size on the second keyframe.
If you choose shape tween -which I used for two lines in the document, you need to put each object into different layers. Then, the same steps with motion tween is followed.
e. Snapshots (snapshots.fla and snapshots-fixed.fla)
This animation consists of images for cantilevered and fixed-fixed beam. A cantilevered beam is fixed on one hand, and a fixed-fixed beam is fixed on both ends. These beams are constructed in Google Sketchup along with the distribution of the charges.
There are two buttons on this file, Cantilevered Beam and Fixed-fixed beam. When the user clicks on the cantilevered beam button, then he/she is directed to web page that has snapshots.swf file in it. In order to go to a URL, the following function is used:
getURL("http://gotothiswebsite.com", "_self");
It also has an optional second parameter, where you can specify where to open this website:
value meaning _self open in the current window _blank open in a new window _parent open where the parent of the current frame is _top open where the top-level frame in the current window
CSS (Cascading Style Sheets) Files
In my website, I only use css to set a background for my page and to center the flash video always. In order to center a division in an HTML file, the following code is used:
body
{
background-color:#4B4B4B;
min-width:800px; //you can specify a minimum width for the body
}
#centralize
{
width:800px; //should correspond to the width of the .swf file
margin:0px auto; //auto determines the margin of the web page, so that it will be centered always
}
In order to attach a style sheet to an HTML web page, you need to include the following code in the <head> tag.
<head>
<link href="mystylesheet.css" rel="stylesheet" type="text/css" />
</head>
And, to centralize your .swf file, use the following code:
<body>
<div id="#centralize">
<!-- put your .swf file here -->
</div>
</body>
Google SketchUp
Two google sketchup (.skp) files, one for cantilevered and one for fixed-fixed beam is created. As already mentioned, cantilevered beam is a beam that is fixed at one end, so when you apply voltage, the open end gets closer to the infinite substrate beneath the beam. Therefore, the charges on the open end is more than that of on the fixed side. These charges on the beams are positive, and they are denser at the bottom. Therefore, if we look at the substrate, the charges in the middle -which corresponds to the bottom of the beam- is more than the others since positive charges attract negative ones.
Fixed-fixed beam is a beam that is fixed at two ends, and when you apply voltage, the center of the beam gets closer to the infinite substrate. Therefore, there are more positive charges at the bottom and center of the beam, than that of at the fixed ends. Therefore, the negative charges on the substrate are attracted and they will be more in the middle, and less at both ends.
Google SketchUp (version 7) is a software that is used to create three dimensional models. You can download it from http://sketchup.google.com/download/. It takes time to get used to a 3D modeling tool. The most useful tool in this software for me was pull/push tool (shortcut: P). When you have a rectangle or circle, you can apply this tool and make a cube or a cylinder. Charges are in the form of sphere, and I used the following link to create one : http://www.youtube.com/watch?v=DBEzRkTcdFQ . Another useful tool in SketchUp is Follow Me tool. It is used to duplicate the profile of a face along a path. For example, if you have a cube and want to make it a table, you can put a little cube on one part, and go through the path with this tool. It will create borders for the table. Rotate tool is another tool that is used frequently to rotate the images at a specific direction and angle.
In Google SketchUp, you can define shortcuts for the tools you usually use. This can be done by Windows>
