Go to Properties tab and press Edit button and set the width of your document to 820 pixels and the height to 620 pixels, set frame rate to 28 fps and select any color you want as background.
Change the layer name to images ( double click on it ).
Add another layer and double click on it to change his name to AS3
Step 2
Select the images layer and import all 4 images (same size) ( File -> Import -> Import to Library ) (
Drag your images individually onto the stage see the picture below.
Step 3
Click on the top left image and convert it into a movie clip (F8) name it image1 and select the top left registration point.
Click on the top right image and convert it into a movie clip (F8) name it image2 and select the top right registration point.
Click on the bottom left image and convert it into a movie clip (F8) name it image3 and select the bottom left registration point.
Click on the bottom right image and convert it into a movie clip (F8) name it image4 and select the bottom right registration point
Change the instance name for all images and give them the instance name : image1_mc , image2_mc, image3_mc, image4_mc .
Step 4
Final step , we will move to AS3 layer.
Select first frame and hit F9 to open AS3 panel and copy/paste the following code:
//Imports the tweenlite plugin. import com.greensock.*;
//The orginal width and height of the images. var imageWidthOriginal:uint = 400;
var imageHeightOriginal:uint = 300;
//Array to hold the image instances. var imageArr:Array = new Array(image1_mc,image2_mc,image3_mc,image4_mc);
//This loops through all the images in the array with mouse over and mouser out event. for(var i:uint = 0; i < imageArr.length; i++){
imageArr[i].addEventListener(MouseEvent.MOUSE_OVER, sizeImage);
imageArr[i].addEventListener(MouseEvent.MOUSE_OUT, reduceImage);
}
//This function increases the width and height of the image until it reaches //the stage boundaries. function sizeImage(event:MouseEvent):void {
TweenLite.to(event.target, 1, {width:stage.stageWidth, height:stage.stageHeight}); //This sets moused over image to the highest index position. setChildIndex(MovieClip(event.target), numChildren – 1 );
}
//This function restores the images back to the original size. function reduceImage(event:MouseEvent):void {
TweenLite.to(event.target, 1, {width:imageWidthOriginal, height:imageHeightOriginal});
}
Go to Properties tab and press Edit button and set the width of your document to 440 pixels and the height to 175 pixels, set frame rate to 12 fps and select any color you want as background.
Change the layer name to clock text fields ( double click on it ).
Add another layer and double click on it to change his name to AS3
Using the text tool (T), make 3 text columns for the output.
The first column will have the Instance name : now_txt ( present date)
Second column will have Instance name : newyear_txt (new year date )
Last column the biggest column will have : timeString ( time left )
Step 3
Final step , we will move to AS3 layer.
Select first frame and hit F9 to open AS3 panel and copy/paste the following code:
//Create a date object for newyear Morning var newyear:Date = new Date(2010, 11, 31, 0, 0, 0, 0); //Current date object var now:Date = new Date(); // Conditional to snap to frame 3 if it is xmas or past New Year if (now >= newyear) {
gotoAndStop(3);
} // Set the difference between the two date and times in milliseconds var timeDiff:Number = newyear.getTime() – now.getTime(); //Convert the timeDiff(which is in milliseconds) into regular seconds-minutes-hours-days
//The Math.floor is the closest rounded integer that is less than or equal to the decimal number var seconds:Number = Math.floor(timeDiff / 1000);
var minutes:Number = Math.floor(seconds / 60);
var hours:Number = Math.floor(minutes / 60);
var days:Number = Math.floor(hours / 24); // Set the remainder of the division vars above hours %= 24;
minutes %= 60;
seconds %= 60; // String all vars together for display var timeRemaining:String = “Days= ” + days + “ Hours= ” + hours + “ Minutes= ” + minutes + “ Seconds= ” + seconds; // Display everything in their dynamic text fileds timeString.text = timeRemaining;
now_txt.text = “Now = ” + now;
newyear_txt.text = “New Year = ” + newyear;
Select Frame 2 press F9 and copy/paste the following code:
gotoAndPlay(1);
Select Frame 3 press F9 and copy/paste the following code:
Click on the plus icon New flash file > “Flash file” > Change the name of project <Untitled File>.fla
Select the Selection Tool V
Go to Properties tab and press Edit button and set the width of your document to 500 pixels and the height to 100 pixels, set frame rate to 24 fps.
Select #999999 color as background .
Change the layer name to background ( double click on it ).
Take the Text Toll (T)
Set the size of static text to 56.0 pt, and any color.
Write any text.
While the image or object is still selected, hit F8 key (Convert to Symbol) to convert it into a Movie Clip Symbol (Name it “My Text”)
Change the instance name to “myText“.
Step 2
Draw a circle of size 30×30 on the stage. Convert it to a movie clip named “My Circle” and set the registration point to the center, change the instance name to “myCircle”
Linkage the circle to a class named “MyCircle” on Flash CS4 right click the movie clip in the library and select “Properties”.
Step 3
Press F9 to open actionscript panel and enter this code :
The Date() constructor returns a Date object containing the current date and time, in local time based on your time zone. Here’s an example:
var now:Date = new Date();
2nd example,The Date() constructor treats that as the number of milliseconds since January 1, 1970,
and returns a corresponding Date object. Note that the millisecond value you pass in is treated as milliseconds since January 1, 1970, in UTC. However, the Date object shows values in your local time zone, unless you use the UTC-specific methods to retrieve and display them. If you create a new Date object using a single milliseconds parameter,
make sure you account for the time zone difference between your local time and UTC.
The following statements create a Date object set to midnight on the day of January 1, 1970, in UTC:
Go to Properties tab and press Edit button and set the width of your document to 510 pixels and the height to260 pixels.
Select black color as background .
Change the layer name to background( double click on it ).
Take the RectAngle toll (R) and create a recentangle covering the stage , for this use no stroke and any color.
Convert it to a movie clip and call it background.
Place this background movieclip onto the center of the stage leaving a boarder
Step 2
Create another layer and name it header
Take the Text Toll (T) and create a header using any font you want.
Create another layer and name it text imput.
Take the RectAngle toll (R) and create 2 text input areas (height 200px and weight 30px, triangle options of 7.8)
Now place both text boxes and on top of each other, and place a dynamic text field on top of each of them
Change the Instance name to userTxt (for username), and passTxt(for password)
Create another layer and name it text.
On the right for each text input in the text layer, place the text USERNAME(top text input), and PASSWORD for the lower text input.
Above the text input you will place a dynamic text field (message layer), (any message you want ) and change the Instance name to messageTxt.
Create another layer above the text layer and name it button.
Take the RectAngle toll (R) and create a square(80X 25) and place the text login in the center , convert it to movieclip simbol with the name login_btn.
Step 3
Create keyframes for the second frame of the movie.
We will only have the header, below the header will be a text field with a message, and below this another text box(telling people to remember to logout when they are done) to the right of the text box is another movieclip of a button, but this one has the text logout instead of login, and has an instance name of logout_btn.
I also made the text white just to be a little differrent.
Step 4
Create the last layer and name it actionscript.
First we use the stop command, so the movie does not loop by default, then some button handling
Now for the log out, to send them back to the login page. The logic here is when the button is clicked, send them back to the login page(frame 1).
Click on the plus icon New flash file > “Flash file” > Change the name of project <Untitled File>.fla
Select the Selection Tool V
Go to Properties tab and press Edit button and set the width of your document to 300 pixels and the height to 100 pixels.
Select #CCCCC color as background .
Change the layer name to digital( double click on it ).
Take the Text Toll (T) and draq 3 dynamic text, first for the hours (with instance name hours_t) second for the minutes ( with instance name minutes_t) and third for the seconds(with instance name seconds_t)
Set the size of dynamic text to 50.0 pt, and any color.
Add glow filter to the text:
Step 2
Create a new layer and change the name to actionscript
public function getCharBoundaries(charIndex:int):Rectangle
First you have to get the position of a character in a string. e.g. “FLASH”, then “F” corresponds to 0, “L” corresponds to 1, etc. This is the parameter charIndex. You will get back the rectangle that bound the character at the location charIndex.
Limitations
It can only search for a single character but not a string.
The position of the bounding rectangle is not very exact.
Not work well if the string is split into 2 lines.
To solve the first problem, you can get the rectangle of the first and the last character of the string you want, then you can calculate the length of the string. So the code will be sth like this:
var rect1:Rectangle = TextField.getCharBoundaries(firstCharIndex);
var rect2:Rectangle = TextField.getCharBoundaries(firstCharIndex+StringYouWant.length-1);
// The rectangle that bound the string you want
var rect3:Rectangle = new Rectangle(rect1.x,rect1.y,rect2.x+rect2.width-rect1.x,rect1.height);
For the 2nd problem, the rectangle has about 2px of deviation from the exact location (i.e. it cannot cover the whole string completely). It would not be neat to have a little part of the string not covered by the yellow rectangle in the above example. I think this is probably due to the 2 px gutters of textfield.
To correct this in my example, I add 2 to the x,y coordinate of rect3 (as follows).
