Thursday, March 31, 2011

Flash frame-by-frame animation "fighting"

Simulate my first work in 2003... Of course the drawing is much better than 8 years ago.
Animation is really a time consuming work, especially "frame by frame animation".

Finally finished this work,not perfect because it is so so so time consuming!
I need to go outside to breath fresh air!
Hope you like it.
(if your browser does not support flash, please click following link to check its video version:
http://www.youtube.com/watch?v=b0715KROQPg&feature=plcp






I would like to recommend a Flash MV, made by Chinese students majored in Computer Animation. Really fabulous:



Saturday, March 19, 2011

Flash animation: rainy & snowy (2)

    This is a demo of snowy.I guess after this one, it will take long time to post the next work since the spring break is over. After spending long time on it, I realize lots of homework need to do.
    Anyway, I do not want just use a black background with snow on it to show the snowy effect, which is boring. The store in the animation is one of the most famous  Convenience Stores in Shanghai called "好德" in Chinese. It is just like "Seven Eleven" in US. I spent 4 years to finish my bachelor degree there.So next time if you go to Shanghai, please pay attention to this store to see whether my work is the same as the real one. To interact with this Flash, please click the "arrow" button on the lower right corner. After it stops, you can click "magnifying glass" to view the inner side of the store (press "ESC" on keyboard to quit zoom), or you can click "福" button to back to the begining of the Flash. I am thinking to develop a game and post here if I have time. I will post the code of snowy later. Enjoy~

//The code of snowy effect is below, I am not the creator,just add some comments, the code is a little complicate, but it is the best snowy effect I have ever seen. In order to make the snow look real, it added many properties to the snow. If you want to use it in your work, just copy the code to the action panel of the first frame. Edit the variables: sceneWidth,sceneHeight and snowNum as you want.

function addMasker()
{
_root.createEmptyMovieClip("masker", -2);// I do not think this line is useful
createSnow();
}
function createSnow()
{
var _l1 = 0;
while (_l1 < snowNum)
{
var _l2 = snowSpace.createEmptyMovieClip("s" + _l1, _l1);// create snow MC
var _l3 = Math.random() * 3; // make different snow different size
drawSnow(_l2, _l3);
_l1++;
}
}
function drawSnow(snow, radius)
{
var p = radius * 0.900000;
with (snow)  //define detail properties of snow
{
colors = [13421772, 16777215];
alphas = [100, 100];
ratios = [0, 255];
matrix = {matrixType: "box", x: -Math.random() * 2 * radius, y: -Math.random() * 2 * radius, w: 2 * radius, h: 2 * radius, r: 1.570796};
beginGradientFill("radial", colors, alphas, ratios, matrix);
curveTo(p, -p, radius, 0);
curveTo(p, p, 0, radius);
curveTo(-p, p, -radius, 0);
curveTo(-p, -p, 0, -radius);
endFill();
}
snowProperty(snow, sceneWidth, sceneHeight);
} // End of the function
function snowProperty(snow, w, h)//give the snow rotation
{
snow._x = sideDisWidth + Math.random() * w;
snow._y = sideDisHeight + Math.random() * h;
snow._rotation = Math.random() * 120 + 30;
snow.stepX = Math.cos(snow._rotation * 3.141593 / 180);
snow.stepY = Math.random() * 2 + 1;
setInterval(snowFall, 35, snow);//set the interval to execute snowFall()
}
function snowFall(snow)// make snow fall
{
snow._x = snow._x + snow.stepX;
snow._y = snow._y + snow.stepY;
if (sideDisWidth > snow._x)
{
snow._x = sideDisWidth + sceneWidth;
} // end if
if (sideDisWidth + sceneWidth < snow._x)
{
snow._x = sideDisWidth;
}
if (sideDisHeight + sceneHeight < snow._y)
{
snow._y = sideDisHeight;
}
}
var sceneWidth = 550;//fill your scene width here
var sceneHeight = 400;//fill your scene height here
var sideDisWidth = Stage.width / 2 - sceneWidth / 2;
var sideDisHeight = Stage.height / 2 - sceneHeight / 2;
var snowNum = 70; // you can change the number of snow
var snowSpace = _root.createEmptyMovieClip("room", 1);
addMasker();


To View Flash Rainy Animation:
Flash animation : rainy & snowy (1)

Thursday, March 17, 2011

History Works

    Just back from a trip.I played Flash for alomst 8 years. The works before 2004 were all lost because the computer broke down. Though I backed it up in a memory card, my mother accidently erased it. I was so angry at that time. I am now trying to simulate my first work made in 2003 and will post it here(hopefully I can finish it before May), it was a frame by frame work.
    Below is one of my work in 2004 or 2005 (I was about 15), though the date on it is Nov 11, 2006 (it is the date I edited the work later).At that time, my skill is still so...immature.Every time I watch it, I can not stop laughing. I was a Harry Potter fan, so I made this animation just for fun. If you know Chinese, you may understand the words in it(just some names of Harry's magic). Sometimes, it is interesting to view the things you did several years ago, since you can suddenly realize: wow, you grew up.(This work has sounds, make sure it will not bother you when you click play)
   

Saturday, March 12, 2011

Knitting works (crochet hook & needle)

  Today's topic is a little different. Knitting is one of my another important hobby besides Flash. I post the pictures of my previous knitting works here.Most of them are gifts for others.
                               
    I made this logo for a knitting work exhibition during my undergraduate study, and they never gave it back to me. At that time, it was 2008 Olympic game and Beijing is my hometown, so I decided to make a logo. This work includes three knitting skills. Needle: the word "京" (white/red part) was made using "large needles". Crochet: the Five Rings was made by "crochet hook" skill. Cross-stitch: the words "Beijing 2008" was made by cross-stitch.
                         crochet hook key chain snail.


               crochet hook toy Dolphin. In my mind, Dolphin represents happiness
    This is a gift for my mother in her 51 years old birthday. Since I put it into a birthday cake box and deliver it from Shanghai to Beijing, the candles on the cake are out of shape. There are five candles representing 50, and one flower represents 1. Also there are number"5 1" with purple and blue yarn on the cake.
   This is not a knitting work. I cut a cloth to make it as mom's 50 year's old birthday gift. It is a Tissue Box. From this picture you can not see the bottom, which is a shape of a heart.                                       


Flash Image Gallery

    Here are some images  I drew. Some are I made for desktop background, some are screen-shots from my Flash animation competition. I spent almost 70% of my daily life in front of the laptop, different background can give me different psychological hints.

                            
    I never admit that I know about art.In my deep heart,I even feel contempt about it. I have never dreamed to become painter, musician or other kinds of artists, even not a designer. Although played piano for 5 years when I was very young, now I have totally forgot it, but I can play the main theme of the songs as long as I listen to it repeatedly for 3 times. I have never learned drawing or Flash from teachers or courses. I don't know when Flash has become part of my life. Sometimes, I feel the reason I like it is that when I am drawing or making animation, I can forget the time and all my troubles. But the real life is always cruel.
   

Wednesday, January 12, 2011

Flash animation classical clock

 Hi,this is a new work. I designed this clock for a game, but the boss said it was too antique for children,so I made another colorful one for her. Then, I added code to this classical one to make it a real clock just for fun. Actually I really like the wood style design, although it is not quite lovely, but it looks mysterious and real. I suggest you to stay on this page to check whether this clock runs on time. Maybe there are some differences to the correct time because the time-contol function may have some delay when executing. When the minute hand point 12, the bird will come out of the door and sing! Enjoy it~

Friday, December 31, 2010

Flash animation: rainy & snowy

This is a simple scenario of raining in a cemetery. It reminds me the day I had my 20 years old birthday, I went to the biggest cemetery of my city just want to find a place to think about my life of the 20 years. Not like America, the cemeteries in China are usually located in suburb with large area. I have been to many large or small cemeteries. Some in the villege, it was quite simple, only put a small stone on the mound, and you may even not notice it.  Some were on the hill, white tombstones cover the whole hill, it was so spectacular. I'd like to read the word on the tombs, which described their life. Cemetery is a quiet place for people to think. Think about life and death. Anyway, the code of raining in AS2 is below the demo. It is not a perfect raining code, you will find if you stay on this page for long time, the rain will become heavier :) .



The rainy is not completely controled by code, firstly, you should make a movie clip: draw a short line in grey vertically, make a tweened animation to let it drop a short distance(maybe 1/3 of the height of the stage about 10 frames, then make blank frames, on 25th frame, write code: stop(); in the actionscript window.Name this movie clip :"rain", copy about 8-10 this mc and put it on the stage anywhere.On the first frame of your animation, add the code below:
//code:
function rainy(){
 r=random(200)+20;//choose a bigger number to make different "droplet" has different depth
duplicateMovieClip("rain",r,r);// duplicate MovieClip called "rain"
a=random(550);//You can also set 550-20 to make sure the rain will not out of the stage
b=random(400);//You can also set 400-10 to make sure the rain will not out of the stage
if(a<=550){
   //if a (which is the _x of the droplet is still on the stage (my stage size is 550*400)
  a=a+20;
 }
 if(b<=50){
  b=b+10;
  //Since b is the height when the rain start to drop, it should not be too low
 }
setProperty(r, _x,a);
setProperty(r, _y,b);
//radom produce the rain droplets on the stage
updateAfterEvent();
//make the animation smoothly
r++;
if (r>220) {
clearInterval(raining);
//if the rain is too much, then reset the interval,the chance r=221 is not that big
}
}
raining=setInterval(rainy,120);
//execute this function every 0.12 seconds
The reason why the rain is become heavier is that my swf is only about 160 frames, every time it loops, the MC called "rain" will be duplicated again, the rain become more. There are many methods to control the number of droplet,like make a variable to record the times droplets are duplicated, and when it is more than a certain number, you could use clearInterval() function to reset it.

To View Flash Snowy Animation:
Flash animation : rainy & snowy (2)

Flash animation: Christmas & Birthday

Today, I posted the animation about festival. The angle is made when I took part in a computer competition, while the Christmas tree is made in Christmas last year. I plan to make a Christmas card by using these elements.

             

This birthday cake is made for my mother.Today is her birthday.Since I was 8 years old, I began to make birthday card and birthday gift to her till today no matter where I was in the world. Last year, I knitted a birthday cake for her which was one of my most statisfied gifts. I wish my Mom happy and safe everyday, and I want to do anything to realize it. This is my greatest wish in my whole life and the motivation for me to proceed.
Love u more than my life!
Happy birthday!


            

Thursday, December 30, 2010

Flash animation: Chinese Element " fan" & "scroll"

Today, I will show you two Flash effect about Chinese element. The first one is an "open fan" effect, when you press "open" button, the fan opens and four Chinese characters are written in calligraphy. This four characters are one word which means pursuing lofty ideals.This animation is really time consuming. In order to make the fan open smoothly, I need to animate it frame by frame. 
        


The second one is a scroll, in China, people usually use scroll to decorate ink paintings. In this scroll, if you click "open", it will show you a picture. On the picture is a crawling snail who is flying a kite maybe along the beach. Snail is an special animal. it moves slowly, but never give up. I think the first time I got this name was in my primary school. I was always late for the classes and my bag was always big. Three years ago, it became my nickname officially."Little Snail's Workshop" was also the studio's name when I participated in some competitions. I love snail!
This two flash reflect my characters and my dream.