Tweening in AS3

I have started developing small apps over the past couple of weeks using AS3. To my surprise, it is a lot simpler than I thought it would be. This is mainly because Flash 5.5 offers the tools needed to export applications to Android or Apple devices. Luckily, all I have to do is adjust my publish settings and I practically have an application made! One of the biggest issues that I've seen with exporting my old Flash movies to my tablet is the animations. My keyframed animations really bogged down my tablet's performance (the program also crashed a couple of times too). So, I decided to read up on this issue. Upon reading up on the topic, I realized that I was treating my tablet device like a computer. You cannot do this when developing apps. Mobile devices and tablets, simply don't have the same processing power as a computer. So, I had to remove my keyframed animations and use code instead.

Now, I am very accustomed to using keyframe animation, but I was open to coding my animations as well. I extensively used the Republic of Code site to find out more information about the Tween class. A tween is basically an increase or decrease of a property over a set time period. This change over time creates the animation.Once I replaced all my animations in my timeline, I then republished my movie and loaded it onto my tablet. It worked out successfully.

Here's a brief look at what I did:



This is the code that I used to achieve the animation. It's pretty short and to the point:

stop();
import fl.transitions.Tween;
import fl.transitions.easing.*;
import fl.transitions.TweenEvent;

//Creates a new variable to change the transparancy of the movie clip.
var myTween:Tween = new Tween(AnimationName, "alpha", Strong.easeIn, 1, 0, 2, true);

//Creates another variable to have the movie clip move off screen.
var myTween2:Tween = new Tween(AnimationName, "x", Strong.easeOut, AnimationName.x,AnimationName.x-350, 5, true);

By the way, I'm using the same methods for my final project that focuses on building ethical competence. I was tempted to post the animations that I've created for this project here, but I decided to hold off for now. I'm not quite done with it and I think you'll really enjoy it.  In any case, I hope to be able to use this technique to for all of my projects so that they can be accessible on practically any device.

Me... Posing?

 The other day I was reading a previous post. Someone suggested that I create a character using the pictures of myself in Poser. I decided to take on the challenge! I attempted to create a model in the past before, but it really never came out the way I wanted it to. Keep in mind, you can create a model that looks similar to you using one of two methods. The first method involves taking a front and side shot of yourself. You then place (or map) the images over a model and then manipulate the face by manipulating constraints in Poser. The second approach involves solely manipulating a model in Poser.

I ended up taking the "easy way out" so to speak by just manipulating the face. I think that this method is easier  than the other method. The following are a few reasons why I don't really care for the first method: 1) your images have to have good lighting, 2) you have to adjust the skin color of the model to match the face, 3) your image has to be a certain size or it will look too big or small on the model, and 4) you have to have a direct front and side picture; if you're off then your picture then it will reflect on the face.Of course I'm not saying that you shouldn't try the face mapping method. It takes time and patience to achieve a desired result Here's a little example of what this face mapping approach looks like in Poser if you're curious:

Moving on, I started by choosing and adding a model to my scene. I then selected the model's face and changed constraints on the figure. I had to frequently look at a reference picture to compare. I then added lights to the scene. I even added glasses on my face.

You're probably wondering what's going on with the hair?! Well, I was about to add hair on my figure when my program crashed on me. I had to restart from my last save--which didn't make me happy. Maybe there is a glitch in the program, but every time I tried to add new hair or change the materials, Poser crashed.Instead of starting over, I did what anyone would do...keep going. I decided to add a generic hair prop into the scene. It's not a perfect match, but I think I look okay with shorter hair, what do you think ;)?

 

Image Pan in Flash (AS3)

Well this week I'm finally moving away from 3D so I can discuss some interesting Flash techniques. As you already may know, you can create almost anything in Flash. It is an authoring tool that can be used to create websites, animations, and interactive applications. At my job, I  work a lot in Flash building educational simulations. In a previous project of mine, I had to develop an interactive simulations of the inside of one of the radar shelters. Before beginning any of the actual coding, I had to decide how I would capture the learners attention. So, I decided to give the learners the option of panning around the picture of shelter.  It would not only look interesting, but it would also simulate a person actually going inside the shelter and looking around. Below is a brief example of what the end product is:



Now, I had a few ideas on how I would approach the problem: 1) I could apply a mask over the picture so that a portion of the picture would show at a time, or 2) I could have the image move as the mouse moved; this way the picture would always stay in the main view of the stage. I tried both methods and I would have to say the second method works the best. The first method requires more steps, whereas the second method requires a few lines of code.

I was inspired by this code that I found in the actionscript forum. However, this particular post only focused on as2; my code needed to be in as3. So I took the basis of the code and I changed it around so that it will work for my project. You're probably wondering how to actually set everything up in Flash. The following paragraphs list the steps that I took to reach my end result. Keep in mind, this isn't the best way of achieving this, but it is one way:


Step 1: Import a picture (or create a vector graphic) that is larger than your stage size. For instance, my image is 800x1066 and my stage size is 480x800.

Step 2: Convert your image into a MovieClip and name your MovieClip in the properties panel. For my project, I named it MovieClipName, but you can name it whatever you want.

Step 3: Align you picture to the top left of your stage. Use the Align tab for precision.

Step 4: On a new layer, copy and paste the following in actions panel:

var myTimer:Timer = new Timer(100); // 1 second

//Add the timer event
myTimer.addEventListener(TimerEvent.TIMER, CheckMouse); 
function CheckMouse(event:TimerEvent):void{

//Specify your MCs X and Y position as the mouse moves
MovieClipName.x = (stage.mouseX / stage.stageWidth) * ( MovieClipName.width - stage.stageWidth) * -1;
MovieClipName.y = (stage.mouseY / stage.stageHeight) * ( MovieClipName.height - stage.stageHeight) * -1;
    }

//Starts timer
myTimer.start();

Step 5: Publish your document (CTRL+enter)


You should now have a panning image (it takes a few minutes to load). Be creative, you can do quite a lot with this technique.

Animating Quadrupeds

So I typed up a post for this topic the other day. However, when I was editing a previous post, it deleted the content of this post. Not sure what happened but I'm not too happy about typing this over again (I will probably start typing this information in a word document and coping it over so I don't have this problem again). With much ado, I present to you my blog on animating quadrupeds!

In the past I've animated bipeds figures in 3Ds and Poser, so I'm relatively comfortable with these figures. This week I attempted to try something a bit more trickier: animating quadrupeds. These figures have two extra appendages that you have to consider. I decided to animate a horse quadruped model  (who I have named Bob) for this mini project. For starters, I added Bob to the scene. Bob started off in a regular zero position. Zero pose means that he is in a default position at the center of the scene for those of you who don't know.

Instead of animating Bob in a static position, I decided to create a run cycle. Technically, he's still in a static position when I moved his appendages; his front and hind legs are just moved in a different position. Once the animation is complete, then Bob can be exported as a transparent image sequence and then manipulated in another program such as AfterEffects (you simply can't talk about video editing without AE!). Bob was a lot of fun to work with and he really didn't take that much time to complete. It wasn't as frustrating as I assumed it would be. I was also lucky that Poser didn't crash on me this time.

To help assist me in the animation process, I used preset BIPs. A BIP is a preset animation or pose that helps the animator. Basically, you apply the BIPs to the figure and most of your animation is done.  You may be thinking well why don't all animators use BIPs then if they're so easy to use? Well my friend, the BIPs don't always go with the figure you're working with. Overall, the animator should also take some time to make further corrections or tweaks to the animation. If you're still confused as to what a BIP is, click here for an example.

Below is the final product of Bob. Keep in mind, I slowed the frames down so you can better see the placement of Bob's appendages. It's not the best run cycle, but it's a start:

Posing in Poser

This week I will take a closer look at 3D. Not too long ago, I took a 3D workshop. In this class, I was introduced to Poser, a program that can manipulate 3D models. More specifically, Poser allows users to animate and render 3D polymesh humans and animal models. Poser also allows users to load figures, props, scenes, lighting, and cameras into a designated scene.

Moreover, I have used this program before for simple animation procedures. For the most part, I used the preset models and clothing to achieve my goals. Although I don’t know how to create my own models in the program, I decided to manipulate other elements of the model in the program.

My project this week focused on creating dynamic hair. Dynamic hair refers to hair that is realistically affected by the figure as well as gravity. In other words, if the character is animated using a walk cycle, the hair follicles will move with the figure. Notably, this hair is also looks more realistic when rendered.

Rationale
The reason that I decided to examine creating dynamic hair is because I want to be able to manipulate the 3D models to my liking. Knowing how to effectively manipulate elements can help me develop unique characters. Due to my inexperience with the program, I am starting on something that is not overly convoluted or complex. After I learn the basics of manipulation, I can then use my characters in other  projects.


Materials Used
I solely used Poser 10 to build my project. I started by importing a preset 3D model into the scene. Notably, the model started off without any hair. Afterwards, I went to the Hair tab to begin editing my model’s hair. I started by clicking on the New Growth Group to create a layer where the hair should be added. Using the selection tool, I selected several polygons on the model’s head for the growth group. Finally, I then manipulated the hair length and number of hair strands on the character.

Below are two images that were taken to illustrate the polygon selection process. The image on the left was the original hairstyle that I gave to my character. Obviously, her hair would look a bit odd if I left the strands sticking out like that. I manipulated the strands and the end result was the hairstyle located on the right.

Technical Difficulty

This project was a lot harder than I initially thought it would be. I am accustomed to doing 2D animation procedures, so I jumped on the opportunity to manipulate 3D objects. Getting the character’s hair in the right place was a daunting task. I had to add and delete layers to make everything work properly.

Closing Thoughts
I think this project taught me the importance of being patient. A few times, the program crashed and I lost my work. Although this project took me a little longer than I anticipated, it was a lot of fun. My character looks a lot more pleasant with a full set of hair. Admittedly, 3D is a very challenging and time consuming process, but the end result is worth it.

Tips and Other Comments
One website that inspired me to learn how to do 3D is CG Society. This site offers users with tutorials, workshops, and a place for professional digital artists to post their work. I like to look at this site every now again to see this amazing artwork. This is one of my favorite 3D works.

Final Product

In Space No Once Can Hear...Your Name?

This week, I decided to further examine the capabilities of After Effects. As I mentioned in my previous post, AE has a lot of useful filters and plugins that developers can take advantage of. One filter effect that I've always tried to create was a particle system effect. This effect can be used in many situations to create snow, rain, hair, flowing water, clouds, fire, and fog to name a few. I also was interested in testing out the animation presets that the program has to offer. I decided to develop a short video project that incorporates these elements to display my name in a unique fashion. The tone of the video has a somewhat eerie undertone that draws the audience in to the unexpected. The video actually takes place in space where a mysterious blue light simmers, inviting you to take a closer look. My name slowly fades into the scene in a seemingly cryptic language. At the end of the video, the text then is dispersed across the screen to bring the back into their reality.

Rationale
I was also inspired by viewing a commercial by Video Copilot that was posted on Youtube. In this commercial we see a lot of 2.5 animation procedures, including text animations. I did not attempt to achieve the same text animation styles that were shown in this video; however, I did try fiddling with the other animations that were listed in the Effects & Presets panel. 

Materials Used
I mainly used AfterEffects to develop this project. I started by creating a new composition for the project. I then moved on to creating a solid background so I could apply my particle system effect. I accomplished this by using the Particle Playground option. This part took me the longest because I had to adjust the settings so that the particles looked like they were moving at a slower speed.

Technical Difficulty
I think this project would have been more difficult if I used another video editing program, such as Premiere. I could have created these animations using an animation software program and import them into the the project; however, this would have defeated the purpose and take too long to achieve.

Closing Thoughts
This was a fun project, but it also took took me a lot longer than I had intended. I remember not knowing what I would do for this week's blog. I started by opening the program and I played with the settings. I developed some really interesting videos--I also created some that were not as mentionable. Up until now, I don't fully grasp the capabilities that this program has to offer. There are so many things that I can do in this program; I just don't always know where to look.


Final Product

Photo Montage

Starting off for this week’s blog I’ve developed a simple cross-fading project that includes pictures that I took at the recreational park located in downtown Lawton. Although I don’t consider myself a professional photographer, I do enjoy getting out and taking pictures of nature. The overall theme for my cross-fade project is tranquility of nature juxtaposed with mankind. The first half of the video shows both of these subjects; however, artificial devices are concealed by elements of nature. Following this, I display rust and decay of the man-made objects. I finish the video by further emphasizing the relevance of nature and how both coexist with one another.

Rationale
The reason that I created this cross fade project was to improve my photography skills and showcase my skills in an aesthetically pleasing manner. Instead of creating a static image gallery, I thought that it would be beneficial to create an intriguing video. I believe that an animated video will capture and engage others.

Materials Used

I started by first taking images using my Nikon CoollPix L120 camera. I imported the images to my computer and reduced the size using Photoshop. I then developed the cross-fade video in one of my favorite video editing programs, Adobe After Effects (AE).

Technical Difficulty
Surprisingly, the video editing task was not as difficult as I assumed it would be.  I’ve had similar projects in the past where I had to develop cross-fading videos using Flash. This process is somewhat time consuming because I would have to keyframe each image to fade in and out. However, AE had a very handy Effect that I dropped on each of the pictures; the process was basically done for me. Moreover, AE has so many different features that I never had the chance to really explore  the various plugins and effects that the program has to offer.

Closing Thoughts
This was also a reflective process for myself. I not only learned how to use effects in AE more effectively, I also improved as a photographer.  As I was integrating the images into the program, I singled out the best photos that I had and discarded the ones that were not up to par. I considered content, contrast, use of elements, and theme. As you will notice in many of my shots, I incorporated some long-shots and quite a lot of close ups. I believe that close ups to me are very personal and allow the viewer to get a better feel on the intended content. A lot of my photos have are closeup shots.

Tips or Other Comments
I recently learned about AE when I took my first 3D course at Cameron University and I fell in love with it! For those of you who aren’t familiar with the AE, it is a digital motion graphics and composting software program that can be used for 2D and 2.5D animation.The program offers a variety of features and plugins to make video editing a less daunting task. Of course, it has its draw-backs--one being that it is very CPU intensive. However, it is overall a great program that I would recommend.

Final Product

Introduction

Hello, my name is Dominique Thomas and this is my first blog. My I’ve never thought of making a blog before. Personally, I prefer to keep to myself; however, I’m open to new experiences.

More specifically, I’ve created this blog for my Theory/Pedagogy/Tools-Online Learning class. Although this is my first blogging experience, this is not my first time being a part of a Virtual Community. A virtual community is comprised of individuals who share common interests, ideas, or feelings. These individuals interact over the Internet or other networks.  Virtual  communities also consist of diverse individuals from different cultural backgrounds who have various skill sets and motivations. A community that does not foster individual thought makes little room for advancement (socially or academically). This is because there is no further inquiry being made beyond a particular topic. Although it is good to have a shared sense of identity in a given community, it is also prevalent that the participants of a virtual community  have his or hers own individual identity. This autonomy allows the individual to submit mindful and personal posts on a designated topic.
 
Throughout the course of this semester, I will list some of my hobbies and develop projects about my learning experiences. The purpose for this assignment is twofold. I will not only reflect upon what I have learned, I will also provide an insightful understanding of how I reached a certain end product. This blog will also help others better understand who I am. I hope that my posts can inspire or change the mindset of others, improve the community relationship, promote self-reflection, and participation. I hope that this blog will be an open experience for all who are willing to join. Remember, if you have questions or concerns, please feel free to email me. As always, stay tuned for future posts.