Project 7: Flash Portfolio

      This is our last project of the year. In this project, we have to use the video that we have created for lab 29, and the pop-ups created in lab 30 and further enhance it into a fully functional Flash e-portfolio that showcases all the labs and projects we created using Adobe Flash CS6. We have to create links of the labs and projects inside this Flash-portfolio. One advice from my teach is to not write the link to the remote server, because if the website is taken down, the links will not work anything.

      In my project I created 3 scenes. The first for the video, the second for the labs, and the last for my projects. The first scene is the same as what is done in lab 30, but I have added the buttons which will be seen and used in every scene. In the project scene, we only did 3 projects with Flash excluding this one, so there wasn't too much to put, so I have just 3 links and an image of each. On the lab scene, I simply just added all the links to it. But it felt too plain and lack of design, so I rearranged every link in the lab scene, made room in the middle and made it a preview space, so when u hover a link, there are images and examples to shown. I posted 2 videos in my web page, the first one is the one without the lab preview option, and the second one is with the preview option so to show the difference.

http://techteach.us/DD2015/HJiahua/Projects/Project7/PR7_Jiahua_DD.html

Lab 30: Flash Pop-ups

      In this lab, we need to use our videos that we just created in the previous lab for our flash portfolio and added pop up symbols using Adobe Flash CS6. This means that we need to learn to code it with Action Script, so we watched a video from adobe of it. It was very helpful. We first need to convert our mp4 or mov file to flv file by using Adobe Media Encoder, because that is the format that works best with Flash. Then in import it into out stage. We get to choose different type of playback buttons to add to our video. Then we set up cue points in the video, which are the time to cue the symbols to come out.

      Now when the video goes to certain length, symbols related to what I am talking about will pop up and disappear after a few seconds. This requires the codes we learned from the video. For example, when I mention something about Photoshop in the video, a symbol that I have created with Flash will pop up in the screen, then disappear after a few seconds. All of the symbols are created through Flash based on the original design with alterations.

Lab 28: Bone Tool

      In Adobe Flash CS6, there is a very interesting and useful tool called the bone tool. Just by the name you might not have guessed what it is used for, but it makes sense after you do. It is the tool to make objects and shapes to move smoothly as an armature which is essential to creating animations. So in this lab, this is what we have to do. Create an short animation of something, anything using the bone tool. To use the bone tool, you need to first create a origin point to be the center point of the shape, then create other points and those points will act like joints, like our body parts.

     In this lab I decided to create a blue robot running...and that's basically it, not much to explain. I first created a few shapes, for the head, body, hand, and legs, and a gradient background. The main part are the legs, because that is the part that I used the bone tool to make it look like it is running by create a center point between the body and the legs, a point each at the knees, and a point each at the foot. Then just move everything like a motion tween. I wanted to make it look like it is a gif the goes continuously, but the timing was too difficult, but I will try again next time.

Lab 29: Self Introduction

      In this lab, we create a video for our flash portfolio with is a future project that will be completed by the end of this school year. This video is ourselves talking about everything we have learned in the web design acadamy in the last two school years as well as introducing what this class is about to the audience. In my video I introduced the academy of web design, explained what it is and what are the benefits of it. Then I talked about the software that I have used and learned in this class, and what I use them fore. I also mentioned a few of work that I have done and talked about how I feel about this class.

      The making of the video was not so easy for my. I am not good at writing, reading, and I already have trouble talking to people, so talking in front of a camera was even worse. I recorded a few times at school, but I messed up every single time, so I ended up filming at home. It was actually better, because I feel more comfortable speaking at home, and I have a good camera and a very nice microphone at home, which can produce a much more higher quality video than using the webcam of the MAC in school. I could even dress up a little for the video, which is a good compromise for my bad talking.

Project 6: Creating a Game

      For project 6 we have to create a game that is attractive, creative, clear, one that has good controls and have sounds. The game should be interesting and fun with contrasting colors and original graphics, clearly written rules, have sounds that feels and reflects the feel of the game, good controls with no errors with Actionscript. I decided to create a simple game targeting a younger ages of audience that mainly forces on good graphics and easy to navigate, so I created all the graphics myself within Adobe Flash CS6. This game is more like a interactive story, but it is also a game. My game is about the character going through a mysterious secret dungeon, but in order to find what he was looking for, the player of the game have to help him to pass all challenges and make the correct decisions.

      The game begins with the character coming to the door of the dungeon with a map on his hand while riding on a futuristic hover board. The user will need to click on the door to go to the next scene. Then the board that the character and the player will see will show what is required to for the character to find the treasure, which is by passing all three levels. This first level is to pass very simple maze where the character have to go to the destination without falling into the rivers. This may seems easy, but this was the scene that require most coding. After this level was passed, next is to answer a very ridiculous question that doesn't make much sense to myself either, but that is the point, to trick the player so the game is not too easy that it become to boring. If the correct question is selected,the player will be presented with the answer, then the scene of where all the treasures are at. But the treasure box is very secure and it needs a very specific object to open it. This is the third level where the player have to choose the correct object in the scene to win the game. But anything went wrong during the three levels, the game can be restated. 

http://techteach.us/DD2015/HJiahua/Projects/Project6/PR6_Jiahua_DD.html

CW Self Reflection

    In the last two marking periods, I felt that I did as I expected. Last semester, I did extremely good. I passed the Dreamweaver Certification Exam,got a few hundreds in a few classes, and had an average of 99.17%. It felt so impossible to have such achievement. For this semester, I want to do the same, but it is becoming more difficult. I have to prepare for more exams coming in the future, such as the SAT and the A+ Certification Exam which I failed at. It had been a extremely long time ever since I have failed at something, but it had helped me realize that I need to work harder to achieve the things I want, because not everything is that easy. I am just so thankful to have another chance to take the certification test, and I will put maximum effort into it.

     In web design class, I felt that I did alright. Wasn't too good or too bad at the same time. Everything required was completed, but not all were done great, and so I will try to change that. I always found myself have just not enough time to complete everything, this is mainly due to my poor time management behaviors. So I will try to maybe set a schedule for myself and maybe it will be better.

Synopsis

      Last you need to have a  synopsis of all the skills needed in the workplace, its like a summary of all the skills we need to succeed  in the workplace environment. When you are applying for a job, a positive attitude, enthusiasm, and a good networking can help you succeed in finding the job and applying for the job. So that there are a higher chance of people to hire you to do the job.

      And in the work place, you need to have good communication skills that you can listen well and knows how to communicate information and ideas to others.Good teamwork skills that you can help each other and complete the work better, which benefits everyone. Good critical thinking and problem solving skills can make your work easier, and more valuable in the employer's eyes. And last, professionalism, and that is to be on time, managing time effectively, and conduct responsibility.

Networking

      Another skill that is very helpful to your career is networking.  A good example of networking is if an intern knows all the information about a company and understand all the requirements and rules, the employer will ask him how did he got in, and he responds by saying that he did a research of the companies that might want him as a worker. He found this company and the owner of this company. He saw that a member of this company will be representing the company in the job fare, so he went to the job fare, introduced himself, and told him that he was interested in his company in result at a follow up interview. 

      In the interview, he will have a much better chance of being hire, because he have a little connections with the company. Networking is important, because network of people you know can really help when you are searching a job, since you get all the information you know from the people around you, and it can be as important as all of your other skills. And in web design, people might not be always out there to look for someone like you, so you have to create a good network to find you a good place to work.

Teamwork

      The next skill your need in the workplace is about teamwork. If woman come in to her co-worker and starts telling what a great work she did in her presentation, and claimed that she will show everyone the presentation and how wonderful it is. Everyone will think she is talking all the bragging about herself and many would not like that. But instead of taking all the credit for the presentation to herself since she is the only there, she told that it wasn't just herself who completed this presentation.

      Instead, she said that it was also a few co-workers that she worked with who gave her ideas, plans, worked together, and helped her in the project. Others will appreciate that she not only gave credit to herself, but also to all of those that helped her to complete her project. So when you get credit for something, always share the with your teammates, because "teamwork is a essential for success at the workplace. And employers look for worker who work well with others." At the same time everyone accomplishes more and benefits. In web design, one person, no matter how smart that person is, can only have a certain amount of ideas. But if it was a group of people working together, they can share many great ideas others can't ever think of.

Critical Thinking And Problem Solving skills

      Another important skills in the workplace is Critical Thinking And Problem Solving skills. When a teacher in a kindergarten school and she was looking for a pair of shoes for a kid, because a another kid stole those shoes, hid them during nap time and can't remember where he hid them.She need to use good critical thinking skills and create a plan for her so she was able to get the shoes back. 

      And since these things happens from time to time she need to create a solution or a plan that works in a long term period. She can use colored labels for all the items to keep them in order. No matter where you work, there will always be problem at the workplace, and good critical think and problem solving skills can help you be better while facing these problems. In web design, there are always errors that pops out without you noticing. So having such skills ready can help you to be able to always solve these problems easily.

Communication skills

       Communication skills are one of the most important soft skill needed in the work place. If you can't communicate well, then how are you going to speak for your self, how are you going to make connections, and show your talents. If a casher was using internet slang in her first day of her job to all her customers and none of them understood what she was talking about. This makes the communication difficult because it's a unusual language to use and it's not a proper language to use in the work place. 

      Communication skills are important because you need to send the correct message to the custom and also to receive the correct message from other, also a good communications skills can create a good relationship which others. In web design, you need to understand what your client requires you to do, and you need to be able to tell them your thoughts on it, maybe it wasn't a good idea, and you need good communication skills to pursue them in your idea to build a better website.

Professionalism

     The Next soft skill you need to have is professionalism. If the new employee shows up to work late, does only the things he was told to do, and when he drop something on the ground, he would not bother to to pick them up until the next day. He would most likely have a very bad impression to his co-workers and employers. The steps of professionalism includes to being on time, do the work that needs to be done even if no one told you to, and conducting yourself with responsibility. 

      In web design some examples of professionalism in class, such as good punctuality, good effort to work, do the things that needs to be done with out something telling you, and good time management. When you are have a website, you need to endlessly developing, fixing errors, and making it better, just because something is not required, that doesn't mean you shouldn't do it.

Attitude and Enthusiasm

    In web design, it is important to have a  correct attitude and enthusiasm in the workplace. If a young men showed up into the interview with unprofessional street cloth, he didn't show a professional attitude, didn't show much respect, and talk on his phone to his friend during the Interview. He would most like not get the job and his co-workers might not like him either. 

      But if the same person showed up in a different situation where is prepared with business attire, gave good respect to the person he was in a interview with, and had a great attitude towards the workplace environment. He will have a better chance to get the job. Attitude and enthusiasm is important, because when you show good attitude and good enthusiasm such as dress professionally, be on time, good facial expressions, and be confident. It will give the those who work with you a good impression and you are more likely to get the job you are applying for.

      

Project 5: Interactive Story

      This is our first project for this marking period, the fifth project of this school year. In this project we have to create a interactive story. Meaning that this animation will require navigation from user in order to proceed or to make certain things to happen in the scene or go to the next scene. This will require much of the coding we have learned from the previous labs and have around 5-10 behaviors in this project. We need graphics that are vivid and give  clear represent the story and the settings. We need to have a good narrative that not only explain the story clearly, the descriptions has to have no errors. And also, it needs to be fun and interesting to interact with.

      In my project 5, I have use coding to make certain elements of the video clickable, to keep the user interested and be active as they are doing something. So I decided to create a story about racing, because I feel like I can reuse some of the elements from the previous labs that I did. My story starts with a guy saying that he is the fastest driver alive, the other doubts it. Since the other guy do not like people to brag, so they enters a race with the same model car. As the user click begin, an animation of the racing will begin. After the race, the user will pick who won the race. If the user picked the right one, he wins the game, if he chose the wrong one, he loses. I really wanted to make more, not just choosing who win, but more story afterwards, but the animation takes too much time, so time wasn't letting me to do so.

 http://techteach.us/DD2015/HJiahua/Projects/Project5/PR5_Jiahua_DD.html

Trip 2: Armory Track

      Just the next week after the trip to New York Historical Society, we headed to the Armory Track where they had a huge large scale CS fair. There were so many large technology related companies colleges there. This trip was provided to the sophomores and juniors of the web design academy as well as the juniors of the apple academy. It was my first time having a trip with the apple academy where some of my very good friends are, so I was rather exited. But as of a result of around 120 students taking the subway, it was really not a good experience. We were required to dress up for this event, so I even went shopping for this. We were also told to create our resume and seek for internship during this event.

      After we have arrived to our destination, we had to wait quit a while outside of the building, standing, in lines. There were just so many people attending to this event. When we finally got in, we were provided lunch, so we ate first, then we began to go on the tracks to look around. What caught my attention right away was the gear vr headset the Verge was providing to let people to test out. I love the idea of virtual reality, I currently have a google cardboard, and was very exited to see the comparison between the two. There was quiet lots of people on the line, so I waited. After so long waiting, I watched a 360 degrees video of an interview if Michelle Obama with the gear vr. It was cool, immersive, and comfortable, but not as good as I expected it to be. I have also talked to the representative of Columbia University about some of the things that this University want from a student. I later on visited other places as well and after a awkward encounter, I kind of went back waiting to leave. I was also somewhat shy, so I didn't succeeded at getting a internship.

Trip: New York Historical Society

      In march 30, 2016, the digital design class had a WBL requirement trip to the New York Historical Society along with Ms. Ramirez and Ms. Deebrah. The trip began after 3rd period ended. We ride the subway from the E train first, then we transferred to the C and got of at 72 st. Before we when to the museum, we walked around central park and had lunch there. Ms. Ramirez talked to us about the famous explorer that was just in front of the central park and the place right across where John Lennon passed away, on that ground, it says "imagine."

     After lunch we moved on to the museum. Right after we go there, we got to watch a short movie about the evolution and history of New York City. What is special and unique about that 20 minute file was that it have separated projector screen that moved up and down to match the video which helped to show additional effects and can show different images at the same time. We then moved on to the Silicon City part of the museum will it shows the history and evolution of computing technology. Some of the exiting technology we saw was the Punched Card System invented by Herman Hollerith in 1890 to help calculate the census 7 years faster than the original. The mouse from the 1950's that was programmed to navigate a maze using binary coding. And many of the inventions of IBM, one of the many technology leading company at the time such as the storage devices and the old version of the computers we use. There were also networking devices, gaming devices like the Tennis for Two, type writers, and music devices.


      According to the guide, navigation of technology used to be jobs that suit women more until it had became very advanced. She also said that New York City used to be the center of development of technology, it was only later that it had shift to LA. There was so much to learn there, but we had only about an hour at the to stay at the museum, so it ended here. It was not bad.

Lab 27 Simple Game

      In the previous lab, we use Flash CS6 to create a interactive movie clip where the user can use the mouse or the arrow buttons we have placed in the clip to move the object. And to add to this, we have created two other scenes in the swf file and when the object reaches certain areas, it would switch to either of those scenes. One of the scenes is the losing scene and the other is the winning scene.  By adding much more action script where we have to write almost all by ourselves this time, we have made a very simple game that when the object reaches a certain point, it will either show you the winning scene or the losing scene depending on the area. And at the losing and winning scene, there will be a restart button the takes the user back to the first scene, so they can play the game again.

      The game I made is to let the dolphin to go back where it belongs. That means that the dolphin should be moved to where there are water, and not the moon. Therefore, when the user navigate the dolphin to the moon, which is where it doesn't belong, it will switch to the losing scene. If the dolphin is navigated to the river, it will switch to the winning scene. Both of the scene 2 and 3 have a restart button that brings the user back to scene 1 to play again. I have also added my minions into the losing and winning scenes, a sad minion at the losing scene and a happy minion at the winning scene to make the these two scenes more interesting and creative.


http://techteach.us/DD2015/HJiahua/Labs/Lab27/LB27_Jiahua_DD.html

Lab 26 Coding

      In this lab, we use Flash CS6 to create a interactive movie clip where the user can use the mouse or the arrow buttons we have placed in the clip to move the object. To make this, we use the code snippets to write our codes since we don't know exactly how to code. Then we just adjust the code to make it work.  This is the first time most of us are using action script, but since I have used c# coding before, I knew the fundamentals of coding, so it was not very difficult to understand. All we needed to make are just 4 functions, each for the buttons, and functions for the keyboard that needed absolutely no adjustments.


      I have created a set of black color buttons in the shape of triangles and have given them an arrangement to make it look like buttons pointing at each directions. My object is the dolphin that I have made in the previous labs. And this object can be moved by either the buttons on the screen or with the arrow keys on the keyboard after the code had been adjusted correctly.

http://techteach.us/DD2015/HJiahua/Labs/Lab26/LB26_Jiahua_DD.html

Lab 24 Mask

      In this lab, we use Flash CS6 to create a short animation using a mask. Similar to the mask we have used in Photoshop CS6 last year. In Flash, the layer with a mask will only show the area the mask is on, and the period of time when the mask is being shown. With the mask you can have an effect of our character thinking about something using mask. This mask will allow only the parts we want to show in a certain moment to show in the area of the mask. For example, you create a mask at the window, the layer of which that mask is on will only show the layer when it is at the area of the window.

      We need to create a short animation with our character having a thought bubble about the cars moving in perspective, so the used the background from the previous lab, and the minion from my projects. And the mask is the idea bubble of the minion of the cars moving. After, I placed the minion on the empty road, I created a thought bubble that will appear after a few second. Then the imported swf file from lab 23 will appear in the bubble, so it looks like the minion is thinking about the cars that was on the road or will be on the road.

http://techteach.us/DD2015/HJiahua/Labs/Lab24/LB24_Jiahua_DD.html

Lab 25 Action Script 3.0

     In this lab, we use Flash CS6 to create a short animation with action scripts. With action script, we can add different commands to do certain actions to our animations. Since this is the first time we are working with action script 3.0, we are only creating something very simple. We need to create 2 buttons that will each show a different animations. Sounds easy, but not so much. We are having the two animations in the same layer, one placed at the first frame, the other at the last, which is the 10th frame. Then we need to have two buttons with action script that when you press it, it will take you to those either the first or the 10th frame to switch the animation.

      To create this, you first have to create three layers, one for the content, one for the two buttons, and one for the action script. First, create the two buttons with an name in the properties. Then add the two animations, one at frame 1, the other at frame 10. I used the car symbols from my lab 23. So one is the front and one the the back of the car, and since it's a bit dull, I made a extra layer of my background, and made the cars rotate. Then on the action layer. we open the action window to type our script in. We have learned that the action scripts are in a order of object.method(argument), but we have not yet learn exactly how to write the code we are using, so all we had to do is to copy it from the handout given by the teacher and change the object name to whatever we named it.

http://techteach.us/DD2015/HJiahua/Labs/Lab25/LB25_Jiahua_DD.html

Lab 23 Perspective

      In this lab, we use Flash CS6 to create a short animation of cars moving in perspective. To do these, we need to trace back at the knowledge in art that we have learned from our studio art class. We need to have a horizon line with a vanishing point on it. And objects must go from large to small as it goes towards the vanishing point. We need to have a bitmap car going away from the vanishing point, so we use the front image of it. Then we need to create a drawing of our own of the back of the car going towards the vanishing point.

(http://www.vertice.ca/wp-content/uploads/vanishingpoint.gif)

      So I created the background first with the pen tool creating an outline and used linear gradient and made the color of the road and the grass in affect of the moon light. I then used the pen tool again to create the yellow lines on the road, and have used one of the old image I created before as the sky with the moon. For the cars, both are the Alfa Romeo 4C. The car on the left is the front side bitmap of the car coming outwards the moon (http://www.topgear.com/sites/default/files/styles/16x9_640w/public/cars-road-test/image/2015/04/Large%20Image_87.jpg?itok=6yoiUV_Y). 

The right car is an animation I traced with Flash base on image going towards the moon (http://www.zendergroup.com/wp-content/uploads/2014/07/alfa_romeo_4c_by_zender_027.jpg).

http://techteach.us/DD2015/HJiahua/Labs/Lab23/LB23_Jiahua_DD.html

CTE EXPO 2016

      The CTE ExPo is a event held by the Web Design Academy and the Video Production Academy to show the new comers of the school about our CTE academy, what they will be learning if they join, and why should they join these academy.  I am a student of Web Design class of 2017 . And I was one of the host of period 2, period 3, and period 4 along with some of the other students in the Web Design class. I chose these periods because in period 2 and 3, I have this class anyway, and period 4, I have weight room, since I am sort of dressed up, it's too difficult to change to gym appropriate outfit. In the room, all the business card project boards that the 10th grades completed are placed on the table in the middle, and the juniors and the seniors have our websites on the computers. And I prepared my website on a computer and ready to go.


      In period two, I prepared myself a little, and as the freshmen came in, me and my classmate welcomed all of them and started to show them what we did. I was a little sleepy in the morning, I wasn't really energetic, so I didn't really tried to introduce myself much at first. I have only talked to a few students at first and not many of them seemed interested to the website. I was showing mostly my favorite movie project, my favorite favorite teacher project, and my respect for all project. I was trying to see if any of them have Ms. Ha's class, and were interested to see my website that is about her. And it worked, few of them came to see Ms. Ha, and some were surprised that she had long hair, others were surprised by her amazing art talent and desirable education in Columbia University, and some were surprised in how young she looked. During the 3rd  period, a student that I recently know came and brought a few of his friends, and we talked a lot, almost about all the projects that I did, and even some of the work for my classmates (shown in this image above).

In the 4th period, Mr. Rollon came with his class, he was my English teacher during my 9th grade, he was a really nice teacher, so I showed him my website. Later on, Ms. Sakhno, which is my English teacher for now came, so I showed my website to them as well. Both really liked my animation in my respect for all project. The result was really good, everyone seems to be enjoying and some freshmen seems to be interested in our academy, which is our goal for this event, and I felt like I did much more better than last year.

Project 4 Respect For All

      This is my project 4, a respect for all project. We are asked to create a short video with Adobe Flash CS6 using the recent skills we have learned in the previous labs that sends a positive message to everything who will watch the video. The video will not be too long, and it needs to be creative, and easy to understand. My story is that "When you look at someone, you only see what is on the surface, but you should never judge until you see what is deep inside their mind. Everyone is different, this is how it is suppose to be. Everyone have struggles in life, everyone have an amazing story behind them, everyone needs respect, so have respect for all, by that, you are making the world a better place."

      To send this message with my video, I used a minion that I created from a previous project and made some adjustments to it. This minion is short, small and different. But that is only on the outside. Inside, he is kind, skillful, honest, caring, nice, helpful, and overall, great personality. But he struggles in life, because he think he has bad grades, feels unsuccessful, have nightmares, and have no friends. Then it shows a book, that book represent the story of his life. In the book, it shows that he does many good things as well. Someone like him needs respect. So respect for all, make the world a better place.

Lab 22 Adding Sounds to Buttons

      In this lab, we use Flash CS6 to add sound into the 10 graphic symbols (The moon, the dolphin, the notebook, the t-shirt, the tree, the fountain pen, the cat, the pig, the grass and the rose.) we have done in the lab 20.  Since we are using Mac, we are using Garage Band to create all the sounds we need. We can record voices or just use those from what is already in there. I never used GarageBand,  and even though I have used Audacity, it still took some time for me to adjust to the way Garage Band works. They are very different and Garage Band just have to many options in terms to sounds to choose from.

      Creating the sounds I wanted was a challenge and took the most time, because as when my teacher demonstrated, there are nature sounds available in the version of Garage Band the she is using. But for us, the students, the nature sounds were just not included in that version that we are using. We can only either record sounds, or just add some very random unrelated sounds to the buttons, which is what I have did. I use the same scene I have been using throughout the last few labs. I simply just took lab 20 and added all those sounds I created for the buttons.  All I need to do for this part was just adding the sounds to the library and drag it to the scene while selecting the desired keyframe.

Lab 21 Converting Graphic Symbols Into Movie Clips

      In this lab, we use Flash CS6 to convert the 10 graphic symbols we have created in lab 19 into movie clips. Similar to lab 20, but this time these symbols will all move on its own after it have been converted into movie clip symbols and at the timeline, add more frames or motion tween to them. This is very similar to the happy faces we have created in lab 19, making things move, except that this time, they will all be a movie clip symbols of its own.

      The ten symbols of my are the moon, the dolphin, the notebook, the t-shirt, the tree, the fountain pen, the cat, the pig, the grass and the rose. Before I began this lab, I have made the same changes and modifications to some of the symbols, background, and scene as I did for previous lab (20). And since I had a river there, I decided to make it apart of the movie clips even though it was not a symbol in the previous lab. First I converted each symbol into a movie clip of its own. Then edited each and gave all a motion tween, so each can have a motion of its own such as rotating, changing positions or the skew.

Lab 20 Converting Graphic Symbols into Buttons

      In this lab, we use Flash CS6 to convert the 10 graphic symbols we have created in the previous lab into buttons. These buttons will change its behaviors when you hover the mouse over it or click it. We need to create a keyframe in Hit, in "over" which is when the mouse hover over the button, and in "under" which is when the button is been clicked on. We need to have something at "over" because this allows the viewer to know that that is a button so they will click on it.

      I have made all 10 of my simples which are the moon, the dolphin, the notebook, the t-shirt, the tree, the fountain pen, the cat, the pig, the grass and the rose into buttons. But before I began this lab, I have made some changes and modifications to improve some of the symbols, and also made a background, and a actual scene out of it. So first, I converted each into a button. Then give each a keyframe at the "over", "under", and "hit." I made few more larger, change around the skew, and sometimes the colors as well.

Lab 16.5 Red Pencil

      In this lab, we use Flash CS6 to create flash generated vector pencils from an imported bitmap pencil image. Like how it was just said, we simply use the vector tools as well as the pen tool, and the color tools from Flash CS6 to create 2 pencils, one red pencil and one in its original color (yellow) according to this image from the internet (http://weknowyourdreamz.com/images/pencil/pencil-06.jpg).

      First, I cropped the white spaces out of this bitmap to make it much more easier to work with in Flash CS6. Then I created a rectangle similar to the size the the body of the pencil. I use the pen tool to add a point at the left side of the body so there is a triangle in the leg with represent where the lead should be. I added two more triangles with the same height of the first one on the right side of the body as the silver part and the eraser of the pencil and made a little curve to it. I used the paint bucket tool to color in each according to its original color using the eyedropper tool. And to make it look more realistic as there are some brighter and darker spots, I made a light somewhere 3/5 above the bottom of the pencil for the body and the triangle part, and colored it with a lighter shade of its original color. And for the silver part, I just create a gradient of white and grey, and rotated it 90 degrees to fit to that area with the effect I wanted. Last, I used the pen tool to randomly curve the border between the body and the triangle, because this is how sharpeners make it look like.


http://techteach.us/DD2015/HJiahua/Labs/Lab16.5/LB16.5_Jiahua_DD.html

Lab 19 10 Graphic Symbols

      In this lab, we use Flash CS6 to create 10 graphic symbols with our creative and artistic mind as well as the skills we have learned from visual design. We need to create 3 animal symbols, 3 plant symbols, 3 object symbols, and one of our own choice. With the use of all the drawing tools, I created a cat, a pig, and a dolphin animal symbols. A tree, a grass, and a red rose plant symbols. And a moon, a t-shirt, a notebook, and a fountain pen as my object symbols. I used mostly the pen and the brush tools to create all of my graphic symbols in this scene, because I find them more comfortable to work with. Since the concept of this lab 19 is very simple, there is nothing much more to talk about.

Lab 18 Happy Face

      In this lab, we use Adobe Flash CS6 to create moving happy face animations. And the most important part is to do this by the use of symbols, which are reusable elements created to store in the library and it can help reduce the size of the swf file. We need to create a symbol for almost every part of the face and create one animation with those symbols. And in total of 3 faces should be done for this lab with animations. Though it may sound easy, this was one of the most challenging lab I have ever done, many of the things were confusing and many of my classmate had struggles with this too.

      First create a symbol for each of the elements that will be used for this happy face such as the eyebrows, outline of the eyes, the eyeballs, the nose, and the mouth. When it is store in the library, drag it out it place it into the stage and create a face. I made a oval outline of the eyes with blue rounded eyeballs. For the animation, I made the eyebrows move up, the outline of the eyes stays the same, the eyeballs move around the outline of the eyes, and the most important part, the curve of the mouth which gives the look of a happy face. After one happy face is completed, copy it twice, so there is 3 in total, all in the same stage. And to make it more organized and interesting, I placed each in a space of their own and change the eye colors a bit, as well as the motions of the eyeballs.

http://techteach.us/DD2015/HJiahua/Labs/Lab18/LB18_Jiahua_DD.html

Lab 17 Flash Bouncing Ball

      In this lab, we are taking our first time in exploring with Adobe Flash CS6 and create short animations in the format of .swf file with it. In total we need to create 9 very short animations of bouncing ball in different speed and different keyframes. Keyframes are an image that in within a frame, so you need to create a keyframe for every position of the bouncing ball. This was not a challenging lab. We need to create one with 3 keyframes in normal speed, with 3 keyframes in faster speed, with 3 slower speed, with multiple frames in each normal, fast, and slow speed and with motion tween that creates movement between the keyframe in each normal, fast, and slow speed.

     To keep everything organized, I have created a table with all the bouncing balls in orders. The first row consist the 3 files of the ball playing with 3 key frames in different speeds. The second row consist the 3 files of the ball playing with multiple keyframes in different speeds. The third row consist of 3 files of the ball playing with motion twin, which moves very smoothly compare to the other two. The first column are the 3 files playing at a very common speed, 30 fps. The second column are the 3 files playing at a slow speed at 15 fps. The third column are the 3 files playing at a faster speed at 60 fps.

http://techteach.us/DD2015/HJiahua/Labs/Lab17/LB17_Jiahua_DD.html

Project 3 Favorite Teacher

This is project 3 of my digital design class. After project 3 that we have used Fireworks to create our favorite cartoon character, we change it up this time and create a website about our favorite teacher of the school with 4 pages. A home page that contains an the basic navigation to the other pages. A biography page that talks about this teacher, and a fun fact page where we show some of the interesting facts about that teacher that usually not many students would know. A general information page about the teacher. And since I have used many images in this website, I needed to have a Copyright page, so its actually 5 pages. But before everything, we had to interview this teacher, so all the information are as accurate as possible.

For this project, I chose Ms. Ha as my favorite teacher which is the major element of my website. This website is created from the same format as my project 1 about my favorite movies. I really loved the keep it came out, so I decided to keep the layout, with the same organizations of the header, navigation bar, and the footer, also, it has 3 large circular buttons created from images with hovering effect. I have chose to use the theme color of lime green and purple, because they were her favorite colors as she said. And for the background I have used for the home page is a image of dolphins also because it was her favorite animals. For the other 4 pages, it is just grey, because it is a very good color that compliments to almost all other colors. On the biography page, I just have a image of Ms. Ha with a long biography that I have wrote about her. On the fun fact page, I have create a multiple tables, each listed her some of the fun facts that I have received during the interview each with a circular image this time created with CSS and text. And the general Information and copyright page is just very simple so there is not much to talk about.

Lab 15 Dropdown

      In this lab, we add new features into our navigation bars, text, and images to make it more interesting. After we have learned how to create a navigation bar, it's time to move farther, so we learn to make dropdown contents. Our task in this lab is to create  a dropdown navigation bar, text, and images. This can be done through the use of CSS with all those dropdown classes. For the navigation bar, we need to use a button class called dropbtn. For the dropdown text, it's just the the same divisions and classes. And for the image, we need to create a desc class there will be text or labels under the dropdown content.

     First, we need to create a dropdown class, then adjust the dropdown contents and other dropdown classes in CSS to the way you desire, so when the mouse is hovered on that element, it will dropdown something that we design it to show. For the dropdown navigation bar, I used the same navigation bar I created in lab 14, and I made a dropdown button using the dropbtn and created a other button, and the contents are the two links to my blog and my teacher's website which will appear when you hover on the button. For the dropdown text, I simply just put Hi! as the dropdown content using span. For the dropdown image, I used a image of flower I took at the amazing Gantry Plaza State Park, and the dropdown content for this is larger version of the image with a short explanation at the bottom using the desc class.

Lab 14 Navigation Bar

      This can be said to be one of the most exiting, fun, yet challenging lab we have ever had. But this is only for most of the other students in my class. Learning how to create a navigation bar was one of my most interested thing that I wanted to know about ever since I started my first project of this year. In result I have already learned how to create this through the help of W3schools and videos from Youtube. Although I already knew how to create this navigation through my research during the process of Project 1, it is nice to have a review of it to help me remember it better. 

       In this lab, I have created this navigation bar similar to the one I used for nearly all of my webpages but this one is somewhat different as it is not created along with a division as I did for all other ones and I have also changed up the colors a little bit, but it is still along the theme color of my website. I have also used the same font and a bit of text shadows as well because I just loved the way it looks. And last, we make this navigation bar appeal in all of the labs and projects that we ever created this year which is just simple copy and pasting from one lab to another.

Lab 13 Wordler

      This is lab 13 where we explore and playing around with new features that we had never knew. As we were told we will be creating a website of our favorite teacher from I.T.H.S as our project 3, I knew we will have labs during this time that is very simple, yet teaches us something new and fun. We were to write a paragraph about of our favorite teacher then use this website wordle.com to make a very interesting collage with the words that was used.

      For project 3, I chose Ms. Ha，my living environment and chemistry teacher in 9th and 10th grade. So I wrote about what I was told during my interview with her. And to make the most important words larger, all I have to do is to make those words appear more than the other ones. Such as "Ms.Ha," it was the most used words in the paragraph, so it appears the largest of then all. After randomizing for quiet a while I had finally found the perfect collage that I was looking for. It is simple, just black and white, but it had a amazing cursive letters which appeal to my eyes
.

Lab 12 New Years Resolution and Dreamweaver Configuration

       Initially this lab was for us to write about our new year's resolutions. But that was until we had a new task that is to be performed during this lab which can take up some time. However, it is very simple. After we finish writing about this new year's resolution, we were asked to create a new site for every single lab and projects in Dreamweaver. But in fact, no change is made into the server at all, we are just creating a quick short cut to all these labs and projects within Dreamweaver.

      To configure all of the labs and projects into site, first go to manage sites, then add new site. Type a name for that site, then put the local location of the folder under it. Then Put in our account of the server in it and the location of where that folder exist on the server. Repeat the whole process until all the labs and project folders and created in a site in Dreamweaver. And last, make sure to check if they are all configured correctly by checking if all of these sites can go to the remote server location where it should be without any issue.