Animation for Beginners with After Effects

Since Disney’s hand-drawn animation, nothing has changed when it comes to the basic principles of animation. The success of Disney was not just in the design of Mickey and friends but in the way the characters were put into motion.

At Saturday’s Ycademy Seminar we will explain the

and see, how to apply them with After Effects.

Acceleration and deceleration is created with Easy Ease in and out functions is AE. The effect creates fluid motion.

Anticipation designs the action leading to the actual movement, like the backwards swing before hitting a ball with a golf club. Anticipation prepares the viewer for the action which will occur. Surprise actions can be more effective without anticipation.

Squashing and stretching blows life into a volume. The rule is, not to change the volume while designing the effect: a vertical squash goes with a horizontal stretch.

Objects tend to move along an arc, rather than along straight lines. In After Effects we animate along a path.

Straight Ahead Action refers to drawing frame by frame, while Pose to Pose refers to designing first the key-poses and then filling in the frames in-between, hence the terms of “keyframe” and “tweening”.”

Staging refers to the act of drawing the audiences attention to important actions or events in the movie. It has to do with camera positioning and handling and composition.

Well placed exaggeration can make movements more interesting.

Follow Through refers to the motion of objects after the action while Overlapping Action means that an action does not have to stop when or before another starts.

Secondary action makes the principal action more interesting. While the principal action may be a man walking, secondary actions could be arm swinging, movements with the head and so on.

Speed of action impacts on perception and emotion created. One of the most difficult principles to master, often expressed with the distance between two keyframes in After Effects.

This does not really refer to After Effects but to other programs you may use to draw objects, such as Photoshop.

Objects need to be appealing to draw in the audience. This is not only true for animated characters. The best animation is not eye-catching if what you show is not designed in an appealing or charismatic way.

After Effects is not just about motion, it’s about expression, design, appeal and emotion created. An animation designer is therefore a multi-tasker and the best are multi-talents!

• 12 principles of animation
• principles of animation
• 12 principles of animation after effects
• 12 principle of animation
• squash and stretch after effects
• pose to pose animation after effects
• after effects squash
• 12 animation principles
• Straight Ahead Action and Pose to Pose animation principles
• 12 principles of animation straight ahead

Related posts:

1. Best Auto Parts by GenesBiz
2. Auto Parts Website for WP

After Effects Openers for Global Sports

Two simple and bold openers for Global Sports US. The opener will be used on the Season 2 fashion presentation clip by Listen Up London.

• after effects openers
• sports opener after effects
• after effects sports
• opener after effect
• opener after effects
• sports after effects
• sports effects in after effects
• sports opener after effetcs
• sport opener after effect
• project after effect sports opener

Related posts:

1. Global Sports US Logo Reviewed
2. Global Sports US New Headers
3. Best Nike Kicks at Global Sports
4. Global Sports US
5. Global Sports $1500 Sneaker Artwork

Spectacular 3D Text for Print and Web

Tonight’s Photoshop Workshop will focus on Styling text, namely to give text a 3D aspect. The step by step walk-through will serve as an introduction to some spectacular effects and features of Photoshop.

Effects and Styles

The interest of the exercise is in discovering some smashing effects we can achieve with Photoshop without using the 3D tools.

We wil also see the number of operations needed to perfectly place shine, glow and shadows to give a glossy, high quality impression.

Short Friday Call

Please be on time as this exercise will take at least 1 hour to accomplish and understand. I hope you will be as smashed as I am by the result and this final session of our PS Basics workshops.

Related posts:

1. Book covers and Jewel Cases with Photoshop
2. Photoshop Workshops
3. 3D Photoshop Exercise
4. Resizing Pictures in Photoshop
5. Photoshop Ycademy

Create a smashing Home Page on XO

This tutorial will show step by step how to add a 3D banner to the XO header. As an example we will use Boruch Rappaport’s Ycademy Sandbox.

Preparation of the Project

The ingredients of our Project are first of all a WordPress with the XO theme loaded, then we need a flash component, the 3D banner and finally we need some images to load into the component to display on the home page of XO. Finally we need to properly embed the component.

Implementation

To start with I have loaded XO to Boruch’s ycademy sandbox and activated the theme. Then I have added some content by syndicating some posts from boruchrappaport.net. Quich configuration of XO includes a basic layout, a header and a background (which I copied in rom boruchrappaport.net).

The site width is defined at 1024 px and the sidebar at 300px to which I loaded a featured category using the XO Feature widget.

1 Download, unzip and rename the 3D Component

My asset folder is now called brapbanner and I will load this folder finally to the WordPress root; in this case it will be loaded to the sub-domain root ‘boruchrappaport’ at ycademy.net.

But before uploading we will clean out and configure our banner.

Opening the asset folder, this is what we get:

We delete now what we don’t need and get this:

Let’s go for the images now:

I crop 3 images (banners) to 1024 pixels wide:

… and I call them 01,02,03.jpg.

These Images we paste into the image folder under brapbanner and delete the existing default pictures.

Edit images.xml

Edit the images.xml file and delete lines 11-23; then edit the text as the case may be and you get this:

<images>
	<photo image="images/01.jpg" url="http://www.semiomantics.com" target="_blank">
	<![CDATA[<head>Hello</head><body>Welcome to Brap Design</body>]]></photo>

	<photo image="images/02.jpg" url="http://www.semiomantics.com" target="_blank">
	<![CDATA[<head>Thanks for visiting this site.</head><body>Enjoy!</body>]]></photo>

	<photo image="images/03.jpg" url="http://www.semiomantics.com" target="_blank">
	<![CDATA[<head>Leave some feed-back</head><body>from the contact form.</body>]]></photo>

</images>

Save the modified images.xml.

Edit settings.xml

We adjust width and height and get:

<settings>
  <General_Properties>
    <componentWidth value="1024"/>
    <componentHeight value="495"/>
    <assets value="images.xml"/>
    <preloader value="assets/preloaders/sequence.swf"/>
    <slideShow value="true"/>
    <delay value="2.5"/>
    <imageFitting value="bestfit"/>
    <useCustomColor value="false"/>
    <customColor value=""/>
	<showAbout value="true"/>
  </General_Properties>
  <Loading_Transitions>
    <loadingTrans value="transitions/3D.xml"/>
    <randomTrans value="true"/>
  </Loading_Transitions>
  <Text_Effects>
    <textEff value="transitions/text.xml"/>
    <randomTextEff value="false"/>
  </Text_Effects>
  <Playlist_Properties>
    <position value="BR"/>
    <orientation value="horizontal"/>
    <spacing value="0"/>
    <paddingV value="-20"/>
    <paddingH value="-20"/>
    <skin value="assets/skins/skin6.xml"/>
  </Playlist_Properties>
  <PlaylistBtn_Properties>
    <textVisible value="false"/>
    <textOutColor value="0xa6a6a6"/>
    <textOverColor value="0xd82838"/>
    <textDownColor value="0x424242"/>
    <textActiveColor value="0x0"/>
    <loaderColor value="0x0"/>
    <textEmbedFonts value="false"/>
    <textFontFamily value="Verdana"/>
    <textSize value="0"/>
  </PlaylistBtn_Properties>
  <Text_Properties>
    <textEffectDelay value="0"/>
    <bodyTextDelay value="0.5"/>
    <styleSheet value="assets/css/style.css"/>
    <hPos value="left"/>
    <vPos value="bottom"/>
    <bodyDistance value="5"/>
    <offset value="10"/>
    <width value="0"/>
    <headBgColor value="0xffffff"/>
    <bodyBgColor value="0x000000"/>
    <bgAlpha value="0.7"/>
    <borderColor value="0xffffff"/>
    <borderAlpha value="0"/>
    <borderWidth value="0"/>
    <cornerRadius value="0"/>
    <paddingLeft value="5"/>
    <paddingRight value="5"/>
    <paddingTop value="5"/>
    <paddingBottom value="5"/>
    <embedFonts value="false"/>
  </Text_Properties>
  <Background_Properties>
    <backgroundImage value="assets/skins/skin6/background6.png"/>
    <fillType value="solid"/>
    <backgroundColor1 value="0x000000"/>
    <backgroundColor2 value="0xff0000"/>
    <backgroundAlpha value="1"/>
    <bgCornerRadius value="0"/>
    <gradientRotation value="30"/>
    <gradientRatio value="40"/>
    <gradientPosX value="0"/>
    <gradientPosY value="0"/>
  </Background_Properties>
  <Shadow_Properties>
    <image value="assets/skins/skin6/display.png"/>
    <height value="51"/>
    <width value="600"/>
    <alpha value="1"/>
    <color value="0x444444"/>
    <angle value="74"/>
    <blur value="0"/>
    <offset value="0"/>
  </Shadow_Properties>
  <Shade_Properties>
    <useShade value="false"/>
    <shadeColor value="0x000000"/>
    <shadeAlpha value="0.2"/>
    <shadeRatio value="40"/>
    <shadeWidth value="0"/>
    <shadeHeight value="0"/>
  </Shade_Properties>
</settings>

Rename the swf file

I will now reneme the generic 3DBannerFX.swf to brapbanner.swf

Now we test the banner by clicking brapbanner.swf and we will see the result in Flash player.

We now upload the whole brapbannerfolder to boruchrappaport.ycademy.net using the FTP client (in my case SmartFTP) and we get:

Or, expanded:

Embed the Banner to the XO header

As you can see above, the brapbanner folder is located in the root of the sub-domain boruchrappaport. The path to the component is therefore ../brapbanner/ and the absolute URL is http://boruchrappaport.ycademy.net/brapbanner/.

Let’s now adapt the embed code accordingly to get the following result:

<script type="text/javascript" src="../brapbanner/swfobject.js"></script>
<script type="text/javascript">
var flashvars = {};
flashvars.folderPath = "http://boruchrappaport.ycademy.net/brapbanner/";
var params = {};
params.scale = "noscale";
params.salign = "tl";
params.wmode = "transparent";
var attributes = {};
swfobject.embedSWF("../brapbanner/brapbanner.swf", "BrapBanner", "1024", "495", "9.0.0", false, flashvars, params, attributes);
</script>

Watch now:

on line 1 we define the path to the swfobject.js – we add the relative path to the component’s folder.

on line 4 we enter the absolute url to the components folder, followed by a trailing slash!

on line 10 we first enter the relative path to the brapbanner.swf then we name the div “BrapBanner” (you can use any name here) and we set the width and height (without pixels or px)

This piece of code goes into your theme’s header.php, right before the closing </head> tag, in our case on line 34 of the XO header.php

Now the banner is enabled, we now need to define where we want to embed it and for that we just insert into the <body> part of the header a div like so:

<div id="BrapBanner"></div>

Now we need just to place the div where ever we want: before the header, after the header banner, after the navigation? In any case, you should place it in the header container and not before, which means now you insert it AFTER line 122 of the modified header.php!

For the purpose of the exercise I will insert it below the navigation on line 160:

For some cosmetics we can edit the settings.xml of the banner.

Here is the result:

Hope this helps:-).

Author: Yorgo Nestoridis, Media Marketing & Publishing, Founder of YORGOO Publishing, YORGOO Press and Semiomantics. If you enjoyed reading the above, please consider following future tips and strategies by RSS reader, Email delivery, or Kindle subscription.

Related posts:

1. Banner Rotator for Semiomantics
2. Thesis Tutorial Header Banner Rotator
3. Install XO 2011 on Ycademy Sandbox
4. Christmas Skin for XO 2011 WP Theme
5. Semiomantics XO 2011 for WordPress

3D Design

The advantages and disadvantages of 3D Design for websites will be the topic of tonight’s YORGOO Call at yorgotalk.

Author: Yorgo Nestoridis, Media Marketing & Publishing, Founder of YORGOO Publishing, YORGOO Press and Semiomantics. If you enjoyed reading the above, please consider following future tips and strategies by RSS reader, Email delivery, or Kindle subscription.

Photoshop CS5 and 3D

Photoshop CS5 provides some important improvements, amongst them a more developed 3D design engine.

Here a quick sample of what can be done with just a few mouse-clicks:

3d1

Sample 3D in Photoshop

Join us for a relaxed Ycademy Photoshop 3D intro session next Monday at 9 pm London time at yorGOtalk.

Author: Yorgo Nestoridis, Media Marketing & Publishing, Founder of YORGOO Publishing, YORGOO Press and Semiomantics. If you enjoyed reading the above, please consider following future tips and strategies by RSS reader, Email delivery, or Kindle subscription.

Create Your animated 3D Logo Tonight

Let’s have some fun tonight at our relaxed Friday session: create your 3D Logo and make it spin!

For tonight’s participants we have a great logo creator in store which you may want to try out … and keep for future use.

bianca

Bianca Logo

or click on the below to see the animation:

bianca

Bianca 3D Logo

The Download link will be disabled in 3 hours from now!

Author: Yorgo Nestoridis, Media Marketing & Publishing, Founder of YORGOO Publishing, YORGOO Press and Semiomantics. If you enjoyed reading the above, please consider following future tips and strategies by RSS reader, Email delivery, or Kindle subscription.

Create your 3D Logo

Ever wanted to create your own 3D logo? And get one of these Hollywood looks or glow like on Broadway?

Well, it’s possible!

yorgo1

Yorgo Logo

A bit of color, a nice font, a bit of bevel, some light and a shadow and you are in the race. Of course you can choose some more fun colors and textures or even neon light, your imagination is the limit.

Once you have finished your basic design, add some animation to give it this touch of the rotating Big Mac on next corner’s Junk Food kiosk. An axe to rotate around, a .GIF format, a background to drop the shadow on, yeahhh you may even add some music and you are ready to rotate on top of the Empire State Building … or as the case may be on the Eiffel Tower.

yorgo2

Yorgo 3D Logo

As these images may stress my transparent image handler on this site, I have loaded the two images to a separate page HERE.

PS: If you are interested in learning how to create your logo in animated 3D format, just register for the March 2010 Ycademy Seminar and build the most smashing site you have ever owned!

Author: Yorgo Nestoridis, Media Marketing & Publishing, Founder of YORGOO Publishing, YORGOO Press and Semiomantics. If you enjoyed reading the above, please consider following future tips and strategies by RSS reader, Email delivery, or Kindle subscription.