(⁎⁍̴̛ᴗ⁍̴̛⁎)

My final work is about the Chinese traditional culture of the zodiac, which is very representative of Chinese traditional culture because the constellation contains not only Chinese conventional stories, but also, Zodiac is also the embodiment and essence of China’s outstanding morality.

Including the user test, I think there are many things about the success of this work. First of all, I tried to restore and express the meaning of the Zodiac, the Zodiac appears to be twelve animals, but each animal represents a good virtue, for example, kindness and intelligence. I used AE to make animation, Flash to make code and interactive buttons. Users can not only learn the keywords of Zodiac through button interaction but also clearly understand the story of each zodiac through sound. Moreover, this work incorporates Chinese paper-cut and shadow play culture in the way of expression, which is one of China’s outstanding traditional cultures, rich in content at the same time, very convenient to operate, accompanied by Chinese conventional musical instruments, and has a healthy Chinese style. Very different. It is suitable for people of all ages and occupations, and the content of the work is positive, spreading positive energy. This work sets English as the primary language, which can also be easily used and viewed by foreign users. My device was inspired by a Tokyo digital art museum video on Youtube. One part is that the viewer steps on the ground, the ground will bloom with the footprints, very creative, and it is direct interaction. This is also why I want to add an interactive part to my work

As a deficiency, first of all, I did not show a good animal running posture. Because each animal has a different way of running, there are some unusual animals, and I don’t have an excellent idea to capture their movements, so some of the animals’ running animations seem to have a little bit of a scratch. As for the technical part, the compatibility conditions between AE and Flash are harsh, and I have to split the video into thousands of images. At the same time, making the code is a challenging part, and I spent a lot of time modifying the wrong part of the system that I wrote, which went beyond the scope of my plan and made my time very tight. It caused me to cut down some props and shadows when I arranged the installation, and I felt very sorry that I did not show the best effect of the work. But it was still my most satisfying work in college, and I realized that I should give more time to some problematic parts of time management.

I very thank Dr Ian Willcock、Dionysia Mylonaki、Michael Davidson. Thank you for their advice and help. I wouldn’t have been so satisfied with my work if they hadn’t given me such good advice.

Reference：

A digital exhibit opens at a new interactive museum in Tokyo, created by Japanese collective teamLab, known internationally for their innovative “digital art” that combines projections, sound and carefully designed spaces to create other-worldly and immersive experiences. [ AFP news agency]

AFP news agency (2018). Tokyo digital art museum looks to ‘expand the beautiful’. 

 Available at: https://www.youtube.com/watch?v=zb06QTUTnq8

My user testing began after I completed all the projects and installations [including security testing]

In fact, I ran into a lot of trouble, because my computer is not loud enough, especially in the crowded environment, it is very difficult to hear the sound, so I went back to the dormitory, used my new speaker, and connected to the computer. It turned out to be my satisfaction.

In the meantime, I found my friend to help me with the test. They thought it was interesting, especially the keyboard, and I used a game keyboard, so when they hit the button, the button can make a special sound, which sounds comfortable and cool.

Of course, they also gave me some advice. They think it's hard to find a button in a dark environment because it's small. So I went to Amazon to buy a bottle of a safe luminous agent, so when I closed the curtains and turned off the lights, the user could see a completely different effect-some glowing words [about my zodiac]

My button is made. 

I removed the keyboard and bought a 20m wire in Amazon to connect.

I use special heating tools. Weld one end of the wire to the button and reconnect the other end to the keyboard

This is the most difficult step.

I meat two problems here.

 First of all, I prepared about a few thousand pictures, which was too big for the flash software to run, so I had to go back to the AfterEffect software and adjust the quality of the pictures, which consumed a lot of my time.

I then imported the 12 animals' running animation into the Flash software so that they could run around the centre of the circle.

Next, it's the hardest part.

I use code to control the animation. For example, I set the keyboard A as a mouse. So, when I touch keyboard A, it starts the mouse's text animation and plays the sound, but when I touch it again, the sound and animation need to return to the first second and start all over again.

It's really hard, because I find I can't control them back to the first frame, and they're always pausing in the middle.

I tried many times, but fortunately, I asked some of my classmates who could program code, and they helped me a lot. And I finally managed to write the right code！！

To make the visual look richer, I animate the text represented by each animal, such as dog-loyalty

I export each animal's text animation separately, in the format of PNG-RGB A.

Next, I started writing scripts.

Because I wanted my homework not only to be an animation but also as a cultural exchange so that more foreign students and friends could understand and like Chinese traditional culture. So I looked up a lot of materials and articles about the Zodiac, as well as some authoritative films, and completed a script in the picture. Each animal represents a different character in Chinese culture. Monkeys, for example, are smart representatives. Dogs represent loyalty and courage. So I wrote the story of every animal alone.

I used software to turn these scripts into sounds, allowing users to use buttons to interact with animations while listening to stories about traditional Chinese culture.

This is my second step.

I think the first step and the second step are the preparation for the final work, so I have to finish the work seriously. In general, this work is not technically difficult, because I will use the software Aftereffect, but the whole work is still very complicated.

Because my project is 12 constellations, I have to do 12 jobs.

I put the layers I had broken up in Photoshop into the After Effect to recombine the layers into the animal look. I set six keyframes to simulate how animals move their joints and bully their bodies while running. For example, snake: snake's head, body, tail, including the tongue, I have carefully animated

The first week was a busy week because I had to start my final project.

So picture one, you can see some Zodiac pictures, this is my theme. I used Photoshop for secondary painting and added paper-cut art from traditional Chinese culture to enrich my picture.

Zodiac is one of Chinese traditional culture, however, Zodiac is twelve animals. So, in order to do the next step of animal running animation, so I had to split the animal into different layers according to what I wanted, according to the animal's joints, which is really complicated, but the good thing is, the technology of this step is not difficult. I can do it easily, but I just need more time.

This is my first week of work, and it's going well！！！

Project prototype

This is my favorite video so far, from youtube:Learn how to create an ethereal geometric design in After Effects.

Compared with previous videos, this video is the simplest and easiest to read. First of all, this video effect is very attractive to me, which is what I want, I can learn the above method, and practice in my work, it is very interesting, and provide a lot of knowledge

Very good method, let the picture adjust the color directly in AE [do not need to put in ps] more convenient, can carry on processing of the picture of my zodiac, make the effect more better

URL:

And this is also from Geometric Motion-After Effects,. Fortunately, I found a lot of videos on youtube！！

Compared with the video [15], this video has corresponding subtitles and translations. This gives me a better understanding of each step and why. That's good. It's very clear.

The last video is mainly about self-fit movement, which occupies a large part of my video works. But this video is about linear motion, and it's not much involved, but I want to try to add some linear light and animation to enhance the visual effect.

Unfortunately, this video is really too long, which makes the steps very many and complicated. I followed his steps to find out that there was a mistake in my production, but it was so complicated that I couldn't find anything wrong.

URL:

https://www.youtube.com/watch?v=1T7drroJM8g

This is a complete series of 75 chapters from Geometric Motion-After Effects, and I was watching a After Effects video about him three years ago. 

Have to say, this video is very good, the idea is very clear, the teaching method is also relatively simple, also more practical. Most of them are geometric figures.

But this video is English teaching, and what bothers me a little bit is that it doesn't have English or Chinese subtitles, so I can't keep pace, so I just have to pause and take notes. It took me a lot of time, so later, I would choose some Chinese teaching videos to help me improve quickly.

URL:

https://www.bilibili.com/video/av10102914/

Reference images

Chinese zodiac has a lot of expression, but I think paper-cut is the most representative. At the same time, in my works, I use the method of light and shadow to represent the zodiac, so using paper-cut is also the simplest.