8 Motion Graphic Tips for Beginners

8 Motion Graphic Tips for Beginners


Hello this is Riverside Studios and today and get a little over some
basic motion graphic tips. so first one is this pop effect. you’ll see here. this simply is
between 80 and 100 percent scale the simple go like one frame before the 100 percent and put in something like 110 percent and you get this interesting pop effect. the second tip is ColourLovers.com the link is in the description. It’s a site
where you can find Color Palletes what’s nice about this, is it gives you the hex values, which you can copy and paste into your program Also if that feels like your
cheating you can also search by color and you can see a whole bunch of different hues and what you can use and then use those hues to make a
palette and then I’ll this find a whole bunch of
different colours and save it for later projects The third tip is to use CGtextures.com The link is also the
description it gives you a lot of royalty-free images use Within your motion graphics and you can just download them and like right here I can just throw this onto this motion graphic Put it on top and scale it up. and adjust the opacity tip number four – use Epic Rap Battles of History really use it on Spotify can listen to
what you do much graphics up tip number five motion blur Motion Blur is pretty important this enables motion there for the entire
project and then you need to add it for each individual layer and i really suggest using motion blur
on anything layer that has movement Tip Number Six Easy Ease right now this is a linear movement however if you add easy ease to it by simply by clicking going to be easy ease on this will add a slowdown in the
beginning And a slow down at the end tip number seven Helvetica Nue Font Font and white line things I so the most important font to use that you’ll probably be using in most motion graphics is Helvetica Nue you any and to switching between using uppercase letters Bold Font, ultralight
font it just gives you a variety of what to use and you can really up your motion graphics by adding these little
white lines just moves I’ll move stuff around ’em till I get something that looks cool Number Eight Words Coming Out of Stuff so here’s my Riverside Studios logo you can see it’s coming out of this White bar there on the right this is pretty simple you just I’m just
using me a mask here and putting a key frame at the and the position the frame and wanted to be
anywhere it begins its movement and just moved it over to adjusts that hides it’s behind the white bar and one thing the make sure it is if
you’re using easy easy added to both the motion path and the position key frames you can use the same concept for having a object swipe over some text to reveal it Which is a cool effect Alright please subscribe and or at least watch my last video Slider Love

HTML5 + CSS3 Special Effects for Your Website

HTML5 + CSS3 Special Effects for Your Website


with the introduction of html5 and css3
there is a whole bunch of special effects that we can include in our web
page designs without a single PHP jquery or JavaScript and that’s a good thing
right in this series of short html5 and css3 classes we’ll explore a whole range of
special-effects to brighten up our websites as well as showing our site
visitors what we want them to do in this class will create a set of
interconnected spinning Cogwheels the result isn’t really useful but it looks
cool and we get to use some of css3 keyframes and explore the use of the
class plus class properties. This class is one of a series where we create
special effects with html5 and css3 that you can use on your website today just
like this hi I’m Jeb Riordon a project manager
turned html5 and css3 web developer, but that’s enough about me, right? if you want to brighten up your website
make it more fun for your readers then follow along with this series of classes
because coming soon are fancy buttons sliding images and carousels so enroll
in the class and let’s make some spinning cog wheels

Actor Sequence Tutorial UE4 (Sequence within a blueprint) | UE4 Tutorials

Actor Sequence Tutorial UE4 (Sequence within a blueprint) | UE4 Tutorials


Hello everyone today I will show you a tutorial on how to make a canvas sequence play for the play character on an event I’ve got a new fresh clean Project. I’ve just added the animal source back from the Unreal Engine 4 marketplace Go to your marketplace search in animation starterpack, and add it in to your project Open your project Now we will be using the animation starterpack because it has a death animation Open up your ue4 asp character Which I have already opened Let’s open up the capsule component, and tick hidden in-game You don’t have to do this it just makes it look nicer. Now, go to the viewport and First open up your Plugins Go to built-in search in actor Sequence editor and enable it and it will tell you to restart the engine Now close it add a component of the type actor sequence Now we will open it in a tab We will add a new track for the component player camera Now this adds a track for the player for the camera Which means it will add a track for the animations where you can add keys and keyframes for transforms We will add a track for the player camera select transform Now all these other ones, You can make a camera. You can select the aspect ratio field of view all these nice things Set other things Now here open up transform select this little key and It will make a new key for a transform Now what we want to do is We want to Add a key Or actually, I’ll leave it at 10 Now this will make a key which is like a keyframe it makes it so that at the beginning of the animation it will set the cameras location to location rotation scale to 0 0 10 0 0 0 Now what we want to do is we want to add We want to add a new key for the X axis We want to move to the end of we won’t damage the sequence to be about three seconds long So we want to scale this down to 3 seconds long Add new key at the call time and make it at about 175 Now this will make it so that at the end of the sequence the cameras X location will be at 175 Now as you can see it will interpolate between the values we also want to add a set of Around 210 and a pitch of negative 90 Now once we have done all that We want to compile and we will see that the camera will look like this now You will say that it’s a bit behind That’s okay because at the end of the death sequence on the desk the death animation The play will be laid back so we will be at around the center of the player now, let’s add any input One for example and we’ll type in the play Montage Now open up your onion salt pack Search in Death you will find this animation right? Click create Create any montage. I’ve already created one here Now go back select your montage death montage drag in your mesh Drag plug it into in skeletal mesh component now we want to drag in our actor sequence Type in sequence select get sequence player And drag off from here and select and type in play Once we’ve done this we Will add a delay Five three seconds or 3.5 seconds and uncompleted Quit game Now we want to disable the input when when the player dies so we’re a go from here Disable input now. This will make it so that the player cannot do anything after it’s dead Get player controller Drago from play controller Now compile and oh, yeah, we forgot that It will play as the third person character So Go to window, I’m a Mac. So if you can’t find it, you’ll find it around here on windows. I think go to window Take world settings Go to world settings. You’ll find here game mode override override two third person game mode Open up select again would select ue4 ASP character Now delete this coin and play Believe that we have the Unreal Engine 4 AFV character Now you will see that it will play I See an animation the Montalbano it should play the animation montage But it’s not for some reason so Type in Plug down to that Delete This.type in death one Compiled your blueprint Now we should see that they place our camera sequence Oh Fine nice and dandy Thank you for your thank you for watching this tutorial I hope I will be helpful and I will see you in the next one

How to create loading animation in HTML & CSS[easy]

How to create loading animation in HTML & CSS[easy]


[Music]
hi everyone welcome to my channel. this is Abarna I’m a front-end developer
and in this tutorial we’re going to see how to create the loading animation in
HTML and CSS. these are the three easy and quick loading animation that you can
create in no time the first one is a circle animation the second one is a
three dot animation and the third one is a grid animation let’s see how to create
them. here I use brackets as the code editor and the live preview option right
here to see the output as we code I open up index dot HTML and I’m going to start
with the usual HTML HEAD and BODY tags [Music]
I’m going to give a link to the style sheet. now let’s give it a background
color [Music]
all right the first animation that we are
going to see is a circular loading animation [Music]
so let’s go ahead and create a div container for that with a class called
circle now let’s style them. let’s give it a
margin width and height [Music]
the auto in the margin is going to Center them horizontally and the top and
bottom is going to be 70 pixels wide. let’s give this a background color that
is almost transparent [Music] now let’s give the border radius as 50%
to make it circular and let’s give the border top color. now all we have to do is to spin them
rotate them at 360 degrees to do this we’ll use a keyframe followed by the
animation name and using the transform property we will rotate it at 360 degrees at 100%
now let’s add this animation to our circle using animation attribute, the
animation name, the time and infinite so it would keep spinning. if you notice the
speed is not same from the starting to end, so for this we will specify the
animation timing function as linear. alright we have created the circle
loading animation. now let’s move on to the three dot loading animation. to
create this I am going to give a a div container and a separate div
container for each dots. everyone will have a common class dot and a separate
class dot1 dot2 and dot3. to identify them individually first let’s
give the basic width and margin for the complete container [Music]
and specify width and height for each dots. I will give display as inline-block
and for now let’s give background color as white so it will be visible. By
default the display is block for every div container so we’ll change it to
inline-block so that it would appear next to each other. now we’ll give border
radius as 50% to make it circular alright now I’ll remove the background
color and give separate background color for each dots using the separate
class names [Music] alright there’s the three dots as you
can see in this animation the dots kind of jump up and down, one after the other
so let’s define the animation using @keyframes followed by the animation
name jump up and we will move it along the y-axis using transform property
okay now let’s specify the animation first the animation name the time it
takes and I’m going to give a delay of 0.1 second followed by the timing
function and infinite. for the second dot I’m going to give 0.2 seconds as the
animation delay and for dot 3 it is going to be 0.3 seconds, so they will jump up one
after the other and not at the same time alright there it is
[Music] now for the last one, brick block loading
animation let’s go back to index.html and similar to the previous one
we are going to give a div class container and a separate class for each
block now let’s give the width and height for each box and I’m going to
give the background color that is lighter than the body background [Music] again we’ll specify the display as
inline-block. if you notice the container is of width 40 pixel and each block is
15 pixel, so the third block would automatically come down. okay now
for the animation, this is very simple, we just have to toggle the opacity on and
off so let’s mention that and specify the animation to our box. I’m
going to mention it as ease-in for a slow start. now all the boxes are toggling
opacity on and off now let’s specify the direction as
alternative so each time it alternates the direction from forward to backward
n vice-versa also let’s mention the animation delay for box2 and box3
so you would get the desired effect. alright so there it is, the three
types of loading animation that you can create in CSS. hope you liked it.
share your feedbacks in the comments down below and thanks for watching!!

HTML5, CSS3, and DOM Performance

HTML5, CSS3, and DOM Performance


PAUL IRISH: Well, hello. My name is Paul Irish, and I
wanted to share some things with you about performance,
specifically HTML5, CSS3, DOM-type stuff about
performance, things happening in the front end, the browser,
things that could be slow and could be faster. And so we’re going to talk about
these kind of things. First we’re going to talk
about reflows, hardware accelerated CSS, animation, web
workers, benchmarking, and a little bit about
build scripts. Sound good? Great. OK reflows, let’s just
look at this diagram. This is a diagram put together
by Stoyan Stefanov. When we’re talking about
reflows, we’re talking about the render tree. That’s the really
important part. And the render tree
is made from– well, it comes from two
different things. So we have the DOM tree. The DOM tree is the result after
you tokenize and parse your HTML markup. It gets parsed into the DOM. And that’s what you see in
Chrome Developer Tools or Firebug, all the elements,
right? Of course. At the same time, we have
styles coming in. And so we have styles coming
in from the style sheets and so on. And when those two combine,
we get the render tree. And the difference between the
DOM tree and the render tree is that the render tree– let’s say that we have an
element that is display:none. Not present in the
render tree. So it’s in the DOM tree, but
it’s not in the render tree because we don’t see it. It’s just not even there. Or if we manipulate the window
size or change the font size, the full-page zoom, that, of
course, changes the render tree most of the time, whereas
the DOM probably is staying the exact same. So the render tree is what
you see, and the DOM is underneath it. A reflow is a change that
necessitates a recalculation of the render tree. And it might recalculate just
the very bottom of it. But it might recalculate
the entire thing. And reflows can be cheap. But at the same time, they
can be expensive. Specifically on mobile devices
or old IE, they can be quite expensive, and you don’t
want to do a reflow if you don’t have to. And there’s ways
to avoid them. So first, well, let
me show you this. This right here– ah, this is so cool. This is a debug version
of Firefox, I believe. And it’s actually laying out
the mozilla.org homepage, calculating the layout and the
position of absolutely everything. This is awesome. It figured out where
it all goes. And then once it’s all done and
the browser’s figured out it, there we go. Pretty cool. But let me show you this
one part in here. It’s right about here– finish off the footer. And then all of a sudden,
something happens. And then it has to recalculate
the whole thing all over again. And I don’t know why
that happened, but it didn’t need to. And we were basically
done at this point. And now we have to wait another
30% of our time so that it can recalculate the
layout of absolutely everything when it should
have been done. And so this is the kind of thing
that we want to avoid. We don’t want to have a full
page reflow that invalidates the entire render tree. We want to get that finalized
render tree out to the user as fast as possible so that they
can interact with your DOM. So what causes reflows? A lot of people have wondered. And a lot of people have
thought, well, checking the element.offsetWidth is
normally the trick. But Tony G. On the Chrome
team dug into this and tried to answer it. So Tony dug in, just opened up
Google Code Search and looked for Update Layout, Ignore
Pending Style Sheets– and this is essentially what
does a reflow in WebKit– and found all these items, and
then just listed them out. So what we get is this. These are all the properties
and methods that will cause a reflow. And so the offsetWidth, which
is kind of the one that most people know, that’s
certainly here. But there’s a lot
of other ones. And interestingly, innerText
appears to cause a reflow whereas innerHTML does not. I’m not exactly sure
about that. scrollTo on the window does. So these are all the things
that by calling, you would trigger a reflow. But what are the kind of
typical operations that would do it? Of course, manipulating the DOM
tree is definitely going to cause a reflow. Yeah, definitely. If you hide a DOM node with
display:none, that will manipulate the render tree. It will cause a reflow. But then any changes to
that element once it’s display:noned won’t. Whereas over with
visibility:hidden, if you just take an element,
visibility:hidden it, there’s no recalculation of the page. The geometry of the page
stays the same. So actually there’s no reflow. We just repaint that one little
box and keep going. If we’re animating anything
across the page, of course we’re doing reflows. It depends on maybe you could
overflow:hidden it, a container, so that it’s kind of
encapsulated a little bit. Adding new styles, and then any
sort of user interaction like resizing the window,
changing the font size, even scrolling causes reflows. So here’s a little example about
a small optimization that you could do to avoid
causing excess reflows. So what we’re doing, this is
just some simple little jQuery code, right? We are grabbing an element, and
we’re just grabbing the left style property off of it. And then we’re going to take
that left and apply it to something else. And then we have to do that
to another one as well. So we get it here, set it,
get it here, and set it. The problem here is that
actually checking our style property is going to trigger
a recalculation of the styles in a reflow. And because we set something
here, it has to do it all over again. So a way to avoid this is we
can just bunch our gets together and then our
sets together. I’ll show you. This is kind of what it looks
like over in the Chrome Dev Tools Timeline view. So here we are. We have Recalculate
Style and Layout. And these kind of go together. Recalculate Style is essentially
the prerequisite for a reflow. In WebKit and in other
browsers, a reflow is called a layout. Mozilla uses the term
“reflow.” It’s just terminology really. What you’ll see here is that in
that first example, we kind of do this thing twice before
we’re able to paint out what the changes are. Whereas in the second one when
we bunch them together, we can get away with just doing
a single reflow before we’re all set. And then we can paint it out. And I will point out the scale
looks a little weird here. But we finished the second time
at about 3 milliseconds. Whereas the first time we
finished maybe about 4 to 4 and a 1/2 milliseconds. So the third one, in addition
to having less reflows, is actually indeed faster. So there’s a few strategies
for avoiding reflows. The first is batching your
DOM changes together like we just did. Other ways we can do it is you
can clone the existing element, work off DOM with
that element, and then– because any manipulations while
it’s off DOM are not going to cause a reflow. And then once you’re done
manipulating it, you can replace that one that was
already there and check the new one in. If you hide anything with
display:none, it will cause a reflow. But if you then manipulate it,
all those manipulations while it’s display:none will not cause
reflows, except in IE. However, you can take
an element. Instead of doing display:none,
you can just take it off DOM, hold it in documentFragment,
do your manipulations in documentFragment, and then put
it back in when you’re done. You only get the reflow when
you are manipulating the actual DOM. And when things are off
DOM, you’re fine. So that one you’re fine in
IE and everywhere else. Cool? OK, there’s a few more resources
I would like you to just check out if you’re
into this stuff. Stoyan Stefanov has done
a lot of research on reflows and repaints. and so he’s got some
great stuff here. BrowserScope has a few tests to
see what triggers reflows. Like we were just seeing,
there’s a lot of small details that are different
across browsers. David Baron had a really great
Google Tech Talk about browser internals and specifically
aiming that talk at web developers. And so this is, I think, an
hour-long talk that you should check out. And WebKit, about five years
ago, did a five-part series about how rendering works. And it’s so cool. It’s from five years ago. But it’s totally
relevant today. I definitely recommend
checking that out. OK, I think we’re done
with reflow. Let’s move on. Hardware accelerated
CSS, yeah. All right, getting into
some sexy here. So we’re just going to skip
right into the demo. This is Isotope by
David DeSandro. Let’s see, I’m going to change
the sort a little bit. And then I’m going to insert
some new elements. Click around here. Yeah, like this. This is good. Even resize the window, and that
responds really nicely. So what’s actually happening
here is that we’re actually using CSS transitions and CSS transforms to do these changes. Now, normally you might think
you’re going to manipulate the position of where things go. And you’ll probably be like,
oh, it’ll be absolutely positioned. And then I’ll just manipulate
left and top and tell it where it’s going to go now. The trick here is that
we’re actually using 2D transforms translate. So we’re using
webkit-transform:translate, and then we’re just changing
the x and y of translate. Then we’re also using
a CSS transition. And as a result, we’re able to
get all these operations hardware accelerated, which
means super-high frame rates, really high-fidelity animations,
and they look basically as good as they can. You’re writing it in a
declarative way so that the browser can be like, oh,
yeah, I got this. Let me take this. I’m going to take this down to
my friend the GPU and optimize this for you. And so it’s going to
look really good. The cool thing here in Isotope
is that David wrote it in a way that it can detect support
for transforms and transitions. And if there’s not support,
then it’ll go back to a jQuery-based animation style. So if your browser is new and
good, we’re going to do the right thing. And if it’s a bit older, it’ll
still look OK, but not as high fidelity as possible. So this is kind of the power
of animations of hardware-accelerated CSS. Now, those were 2D transforms,
and everything was just moving around on a 2D plane. And normally, 2D transforms and
operations on the 2D plane don’t get hardware-accelerated
by browsers and by WebKit specifically. But there’s a trick. And there’s a trick to make
the browser do it. Let me show this clip
from Remy Sharp. [VIDEO PLAYBACK] -OK what I’m about to show
you is a CSS animation. And it’s engaged using
JavaScript and just the normal touch gestures. But the first effect I’m going
to show you now is one without a 3D transform. So this is just doing a scale
and nothing else. And you see it’s just
a little bit jumpy. That’s the actual animation
jumping. And if I show you the same
version but just with the translate3d set on the element
that I’m zooming, you can see it’s completely smooth. And all I’ve done is
said the image– so the image element that I’m
pinching and zooming on, I’ve just added a CSS property
to say translate 3D. [END VIDEO PLAYBACK] Yeah, so that’s it. It’s kind of a total hack. You can use either WebKit
transform, translateZ(0) or do translate3d. Depending on your use case, one
will probably make more sense for you. And all of a sudden, the
browser’s like, oh, cool. Let’s throw this on the GPU. And as a result, we can get
much higher-fidelity manipulation on the 2D
plane, just like we saw in this video. It’s pretty cool. There’s a few really good ways
when you’re working with this kind of stuff to debug it
a little bit better. Over in Safari, there’s a
development flag to turn on some colors. This actually stands
for core animation. I’m going to load this up over
the iPhone simulator. And I’m actually going
to load this page. This is a tutorial on HTML5Rocks
by Malte Ubl. And we’re going to show
this little demo here. And what we’re actually doing is
we’re detecting support for CSS transitions and
transforms. And if we have support, we’re
just going to use a transform along with the transition. Otherwise, we use
jQuery animate. So here in Chrome, we’re using
a transition transform. And you see that moves
across the screen. I’m going to show this in
the iPhone simulator. You can see the OS
is accelerated. Scroll down, here we go. So I’m just going to click. And you’ll see– yeah. And the trick here is that
we actually use that translateZ(0)– we call it the silver
bullet here– trick to make that hardware
acceleration happen. Over in Chrome, we have a
somewhat similar thing. Over in about:flags, we
have this setting. And let me bring this up. In about:flags, there’s a bunch
of really crazy stuff. I recommend you dig into
this some time. We have composited render
layer borders. And well, let me just show
you what it does. Here’s this presentation that
we’ve been looking at but with this setting turned on. And you can see we get borders
around of all the layers that are composited. Pretty cool. So this helps a lot to just
verify that yes, this actually is being composited
on the GPU. And then also in this 3D case,
we have a nice little debug view of what’s going on. I will point out that this
used to happen as a command line flag. So it didn’t used to be nice and
handy in this about:flags. But yes, it used to have to run
the Chrome executable with a command line flag. And this page over on Peter
Beverloo’s site maintains a list of all the active command
line switches or flags. And so I recommend you
checking this out. One of the ones in here
is a show-paint-rects. And so this actually draws
little borders whenever a section of the DOM
gets repainted. Why that’s interesting is
because you want to know– kind of when we were talking
about reflows, you want to know exactly how much of the
DOM is being invalidated or the render tree is
being invalidated when there’s a change. And so with show-paint-rects,
you can see that when you make a change, only the part that
needs to be recalculated and repainted is being changed
rather than a much larger chunk, which would be
kind of unexpected. So show-paint-rects is another
very helpful flag to use when you’re debugging some of this
advanced rendering stuff. This tutorial has a number of
other recommendations around graphics optimizations that
you can make and also digs into JavaScript profiling. So dig into that a little bit
more if you’re looking to eek out some better performance of
your HTML5 app and these recommendations are not
good enough for you. But next we’re going to dig into
requestAnimationFrame. So requestAnimationFrame
basically came about because browsers were like, hey, we
know that you’re doing animation in the browser. And we know that you’re just
abusing setTimeout and setInterval loops to do it. And that’s not cool. It’s not really cool. Because you know what? A browser can optimize animation
better than you writing a setInterval loop, just
trying to peg the CPU as fast as it will go. Browser is smarter. So one of the things that it can
do is it can batch things into a single reflow
and repaint cycle. So let’s say that you had a
JavaScript-based animation. You had an absolute position
element, and you’re updating the left and top or something
like that. The browser can now synchronize
that along with the concurrently running
CSS transition. Or if you had some SVG SMIL
animation running at the same time, it can kind of make sure
that those are all going at the same time. It’s going to optimize it for 60
frames per second, which is the refresh rate of
most displays. And so you’re going to get the
best frame rate possible. 60 Hertz is kind of the perfect
target for everything that you want going
on in the browser. And the really cool thing is
that you’re really friendly to your users’ batteries. Because what happens is that if
the tab is not visible, it gets skipped. So let me load this
up right here. This is a– whoa! Yeah, OK, here we go. So we got this WebGL demo. And you see here we got a lot
of action over on the GPU. And this is the JavaScript
running inside this page. It’s pretty heavy. Gonna move this around. Now I’m just going to switch
to another tab. You see that instantly
dropped. Because the
requestAnimationFrame is being used, the browser is like,
hey, you’re not even viewing this tab. We don’t need to be wasting the
browser, the CPU, the GPU in order to make this happen
because we know that they’re not looking at it. Whereas if this field demo had
been using a timer loop, it’d still be going. It would still be eating
down my battery here. So I bring that back up. And our use of the
CPU returns. So if you’re doing any
sort of animation, use this if you can. This actually just
landed in jQuery. So this is going to
be in jQuery 1.6. And it’s also in Grit. And it’s in a few other
libraries at this point. So I definitely recommend it. This is available in both
Chrome and also in Firefox, Firefox 4. Over on my blog, we have a
nice little shim layer to handle this. We basically feature detect
to see if the native support is present. And if not, we’re going to use
a setTimeout loop that optimizes for 60 frames
per second. And that’s how you use it. Cool. Web Workers, the idea here– and I don’t want to cover
this too much. The idea with Web Workers that
you’re probably familiar with is we want to move heavy
computation, expensive tasks outside of the UI thread. Pretty much all JavaScript
runs in the UI thread. And if something is taking a
long time, the user can’t interact with the page. The page becomes
non-responsive. And in the case of Chrome, we
get a sad, freezing cold tab. He’s so cold. And we don’t want that. No, that’s bad. And we want to avoid that. And without Web Workers,
we can. I’m going to show this. This is a little bit more
advanced use of Web Worker. But I think it’s really cool. First, normally the way that
you instantiate a brand-new Web Worker is you would
be like, new Worker, myworker.js, there. This is where the code
is going now. You pass it a file name. And then it goes and
gets that file. And then it uses that file. And that’s your worker. It has its limitations. This here is an example
of creating a worker on the fly, basically. So here we have– oops– our worker code, and it’s
a script of type worker. So this is going to get skipped
by the browser. So we’re just kind of using it
to hold some text right now. And then down here on our
script, we’re going to use the file API. And we’re going to use
BlobBuilder, create a new BlobBuilder. Then we’re going to grab the
text of this script node, throw that into the blob. And then when we create our
worker, we’re going to use URL.createobject URL with the
blob, and check that in. Essentially, we create a file
on the fly and then instantiate the worker
with that. And so now we have the advantage
of having a little bit more control over the worker
in case we want to change it or something
like that. And then also we avoid
an HTTP run trip. So from a network layer,
we’re a little bit more optimized as well. So that is just kind of a cool
example of where you can go with workers combined
with the file API. Some places where you might
want to use workers, text formatting of a long document,
syntax highlighting maybe, maybe not, depends
on your use case. If you’re doing heavy image
processing or dealing with large arrays, also the audio
API, for instance, the WebKit Web Audio API or the Mozilla
Audio Data API, depending on kind of the analysis that you’re
running, a worker might make sense. Also, the FileSystem API, which
is available in Chrome, has had support for workers
for a while now. And this is really good. You might be dealing with large
binary data, and you don’t want that holding up
the UI thread at all. You want to just let that
happen as it does. And so letting Web Workers
handle the interaction with the file system is the right
way to go there. Cool. Want to touch on JSPERF
real quick. Yeah, this is real cool. So JSPERF, if you don’t
know, is a site for performance tests. And so we have a few things
going on here. We have a nice human
readable URL. And oftentimes, with a URL like
join-concat, this is now the definitive join versus
concat string concatenation test. And there’s revisions as well. So within the page we have our
variations of the code that we want to test. So this is the age-old
concatenation with plus equals or array.join, which
is faster. And I believe it’s IE 6 and 7
are faster with the array join, and absolutely everyone
else is faster with a straight-up concatenation
augmented in a string. So don’t use a array.join
anymore. But the nice thing here is that
we can run the test and get our results and figure
out kind of what it is. And so the site is used
by a lot of people. In fact, jQuery has been
using it for the library development recently. So let’s say there’s
a few different variations of DOM traversal. The nice thing here is that we
can do our tests with a few variations, kind of see what’s
going on, and then the results get reported to BrowserScope,
which kind of handles what user agent it’s coming from,
what are the numbers, and kind of give us a really
comprehensive table of what the story is across all browsers
and where is each thing faster. And so I’m running it here. This is WebKit Nightly. And we see, well, in this case,
we have these traversal, and we have some different
results. So JSPERF is really good. I like it a lot because it’s
kind of like the clearinghouse of performance best practices. People will say, oh, well, you
should use triple equals instead of double equals
because it’s faster. And now we can actually find
out, hey, are they right? And are they right across
all browsers or not? It’s powered by benchmark.js,
which is a very finely tuned and calibrated benchmarking
script that works not only in the browser but in Node and
Narwhal and Ringo and all these different environments
and is definitely the right way to be benchmarking different
variations of code. So a quick touch on the
HTML5 Boilerplate. It’s a project that
I work with. And recently, we put
out a build tool. The build script is just
an Ant script. But the cool thing is that when
you use it alongside one of the web server
configurations, like for Apache or Nginx, you’re
basically going to get a 90% on your score for Google
PageSpeed or YSlow. There’s all these things
that you’ve heard. And you’re supposed to be
doing like combining and minifying your JavaScript,
your CSS, your image optimization. And the script does
all these things. It also does HTML
minification. It revs your file names so that
we can cachebust when there’s a new version. And then we upgrade the web
server configuration to use far Future and Expires headers
because now we have unique file names. So it does all these
things for you. And we can basically take what
was a C and B grade website and bring it up to some
much higher scores. So I definitely recommend you
dig into that if you’d like to not have to repeat all these
performance optimizations every time you make a site. And let a script handle
it for you. All right, I guess
that’s it for me. If you have any questions, you
can leave a comment or hit me up on Twitter. I’d also recommend to check
out html5rocks.com. We have a lot of tutorials on
there of really good stuff. And we have a lot that are
focused on performance and a lot of the things that I’ve been
talking about here, so plenty more to read
and learn there. So I guess that’s it. Thank you very much
for watching.

Greenhouse Effect | #aumsum

Greenhouse Effect | #aumsum


Greenhouse Effect. What happened? Why are you shivering? No sun rays. Before. I will go and check what happened. What happened? Now. Before. Sun. Earth. Greenhouse gases. Sun rays. The sun’s rays warm the earth. A part of the sun’s rays is absorbed by the earth. A part of the sun’s rays is reflected back in space. Greenhouse gases. A part of reflected rays is trapped by greenhouse gases. The trapped radiations of the sun warm the earth. Carbon dioxide. Methane. Nitrous oxide. Greenhouse gases. Why are they called greenhouse gases? Don’t worry. I will explain to you. Have you ever seen a greenhouse in a nursery? No. Ok. I will show you. Nursery. In a greenhouse, the sun’s heat can come in. but cannot go out. The trapped heat warms the greenhouse. It is very hot inside here. This trapped heat helps in controlled growth of plants. In a greenhouse, the sun’s heat can come in but cannot go out. The trapped heat warms the greenhouse. Similarly, as these gases trap the sun’s heat, they are called greenhouses gases. If there were no greenhouse gases to trap the sun’s radiation the earth would be a very cold place where we would not survive. Where are the greenhouse gases? Greenhouse gases party. What are you doing here? The earth needs you. Thank you. This trapping of heat to keep the earth warm is called greenhouse effect. Thank you. The End.

How to Work With Blueprints and other Reference Images – Blender Tutorial 2.72 / 2.73

How to Work With Blueprints and other Reference Images – Blender Tutorial 2.72 / 2.73


hello welcome to another tutorial from the team here @ BlenderTek.com today we will show you how to work with
blueprints in blender. how to cut them how to align
them perfectly and different ways to do it this will
allow you to create 3d models in accurate ways and in the right
proportions as you can see here everything is lined
up nicely and our car will come out working perfectly as a result of that so I hope you learn something here’s the
rest of the video don’t forget to subscribe and like the video also visit BlenderTek.com for more
articles tutorials how tos, and downloads for
Blender today we wil be showing you how to use
blueprints to create a model. using blueprints gives you a reference
to create your model from this allows you to have lines already there that you can use instead
of guessing and constantly editing your Vertex’s and
changing the lines around. This way you can
essentially just retrace over the lines and you have
basic shapes there and then you can work on them to perfection in 3d so you’re going from a 2d image to a 3d
image this may seem un-intuitive at first but
actually it is very intuitive when you have all
views of something that your designing. cars are
the most common because you can find top front back and side views of the car and cars are usually in 99 percent of
cases symmetrical this means you can use mirror
modifiers to create 1/2 your car, mirror it, and your other half is instantly there.
this saves you time and modeling and allows you to create more models
quickly especially if you’re using these models in a game one of the the great web sites for
finding car blueprints I found very easy is carblueprints.info a it usually is in Russian when you open
it to get in English just go over and hit
the English button another good one is the-blueprints.com I believe just google the blueprints it has blueprints for all sorts of
things from cars trucks guns thing however a lot of them are paid and
the unpaid ones are in lower resolutions your last option is to go to Google
Image in just type in what you’re looking for followed by
blueprint and it’s helpful if you add on an advance search modifier to
be large or larger than a certain size. The
larger blueprint the more detail you have to work with easier it will be if your trying to work from tiny images it’ll be pixelated and it’s not
easy for you that’s why the-blueprints.com sells
vector blueprints which let you can scale them up as big as you need so at carblueprints.info you can search the car and and find a good one for example I’m gonna be showing you a Ford Mustang
my first car i purchased was a 2005 Ford
Mustang so I’m gonna be working with that today we will go to ford then we’re gonna
find the car that were looking for I am looking for a Ford Mustang so
here’s all the Ford Mustangs you have everything from 1964 all the way up to the 2011 so 2005 was the first year of the fifth generation Mustang now on the
right hand side here you have what views are available front top rear and side you wanna find
something with all four sides this is gonna make things extremely easy so click on the link that
has all for views and you will see it
download the blueprint and we’ll move on to the next step so here
you can see I’ve downloaded my blueprint to its own individual folder
i reccomend you do everyone in its own
individual folder because you’re gonna have multiple files
for each view you’re not gonna do it just from the
single image with all views so let’s preview here you can see the car blueprint that I have downloaded
it’s a 2005 Mustang GT again this is the first car
i bought so I’m very familiar with it. I can tell that all lines are in good
proportion this blueprint is a specially special
because it has front side top and rear views but it also has the rear
and front views scaled to the same size as the top and I believe the
side views so this makes easier for you when you
import them into blender however I’m just gonna be using the
full-size front and back views they are the exact same images in this
instance are just scaled down and rotated so let’s go ahead and edit this emits that we can import them into blender you
can use any image program you use Photoshop camp pain dotnet I’m dis can use MSP for now
because it’s quick easy soul for example leave the back to you
here what we do is we would drag as carefully as we can rate around the
image you want to get as close to the borders
as possible and then all we do is we copy or cut the
image now in a new instanceof torture working
in polled shopper damn inner in a new file or even a new layer peace what you’ve just cuddled here we go now
this is where you have to do a little bit of cleaning up from Pratt Park the more proper you do in the more
accurate you do this the better your results again be an
easier your modeling is gonna be in blender as
well as lining it up blunder so let me show you
what I mean let’s zoom into the very corner rate by
the wheel and Mary here what we wanna do is we want to drag that as in resizing the image so that’s right on the edge %uh the mir
pixels and its prey on the bottom of the tire
pixels likes so as you can see in the bottom
here the very bottom of our edge touches the
very bottom of the wheels can we go to the far side of the image
which are the mayor’s you can see the just touch the ejup the
pixels the mir was this way the image is gonna be in
exact proportions now we need to do this to their top left corner of the image what we’re
gonna do is we’re just gonna move the image to do this so I’m zoomed in as far as I
can hear so that I can see the far left-hand side
the image again the mir and the very top of the image which is
the herbs section of the roof and so again all we’re going to do is
move the image sluts pixel perfect lined up to the edges the
image so we’re gonna move it up just till
touches the pixels rate there and member gonna move it to the left
again tell just touches the pixels again you cool
one more because as a little bit of pixelation in
the image so now our damage is perfectly cut-out to the very edges %uh the blueprint if you cap and the blueprints you’re
looking for you can use photos however try to find one that has the least
amount of perspective possible perspective will ruin all the lining up
you do in blender make your job a lot harder if you cannot find a perfectly orthographic line drawing you can even drive yourself whatever you
do the proportions have to be as close as
possible if not perfect especially if you’re just
starting that way as I said you can just trace
essentially now that I’ve lined up the top left hand
corner of the image I am going to use zoom out again and
just make sure that the bottom right corner is again
lined up with the bottom of the tire and the side
at the mir so if we zoom mode again you will see
now left all edges are lined up with the edges love the image in question so now save
this to our folder recreated has a simple file name: just call it for example this the backfield just call
it back DAW extension someone save it is back dot PNG now back on our mean image we’re going to do the same for the front
view here we have the prime be finished we’re going to continue now at the side
view the stock are key in blender is for the rave feel what would happen to
be the driver’s side switch your blueprint is above passenger
side like it is here all you need to do is
rotated horizontally and then you have the drivers side now I
have an old list actually is the driver side because on this model Mustang the gas tank cap on the driver
side so rotated so that the front is pointing to the lapd that way year
front view in your back view will line up properly when you
select the different views in blender lastly were gonna do the top you missus
where the more steps are involved now that we
have the top you Cairo pixel perfect you have to remember
one thing imagine your blueprint as I’ll rectangle in 3d space you got your
front view on the front your back to you on the back yours side
view on each side the top you harbor in its current
orientation which is horizontal would not fit direct angle it’s what we
need to do is we need to simply rotated 90 degrees this is an important step a lot of
people forget and then they end up having to go back
can re-edit we now have all four sides finished you can see what I mean about rotating
talk to you this way its up and down just like the front and back view are a good way to check if you did good
cutting jobs n if your blueprint is in perfect proportions is to check the dimensions of the image
so fully chief select just the back and front
views we can see that their dimensions are both 690 by 482 pixels they’re both its shockley the same size this is gonna
make our job much much easier in blender the same
idea applies to the side and ha views if you notice the side is its sixteen +91 pixels long now the top view is 1691 pixels tall the talk to use side is gonna line up with the side views
side over the front and back if they’re the
same values that is most important you’re in good clean business your job is gonna be easy
is cream in blender so now let’s go into blender and show
you how to work with these blueprint images I suggest you switch
your view from user perspective to orthographic
perspective by pressing jump at five this prevent any
perspective from being shown in fact I suggest you do
most if not all of your modeling in orthographic perspective this will
prevent you from making any mistakes dude perspective now
there’s two ways to work was blueprints in blender the first way is to insert the image as a plane a plane is
justice single square face four vertices four
lines one face and it will in sir you’re image on top of that plane essentially so
let’s start with hot perspective because that’s what
we’re gonna be doing most the VAR tracing with so Press Phnom Penh had seven to move to top perspective as you can
see now that we’re in orthographic perspective there is no perspective to the view this
is how most had modeling is done and it keeps your proportions correct and it makes
modeling a lot easier inserting an image is a plane is no I enabled by default because it’s
not the best way to do this if you want to do it this way however
bring up your user preferences by from the File menu or press Control all you now under the add-ons hab search for image and simply enable the import-export
import images planes at on so now that import images planes is
an able let’s go had mash images planes or the hockey control a mash images as planes it will now bring your to selection
window where you can select your images from so let’s not have gate
where r images are stored as you can see we owe
back Frank side in top I save them in PNG format because that’s
the main format their blender uses so lets choose that tarp image because we are using the heart view soldiers click import images
as planes and you will now see if resume in there’s nothing there what is the
problem the problem is we’re and sold JI this is just the plane’s solidly textured we
wanna go into texture because technically blinder is
texturing you’re playing with the simple image that you selected
if you move OTW textured mode into salwar or wireframe you’re not gonna be able to see your
image that’s why this is not good choice if you don’t know what
orthographic view is person’s perspective to a quick
Google search on a or view one of my other videos and I
will describe I will leave a link annotation to that
video at the position where it’s described
once I have that video upload now you could continue adding images
planes from the top view the front view and the side view which is right in our instance to view the back view hit control and then non-paid 1 and that will bring it to the back
whereas just heading one will bring you to the front same
with that taught view heading non-paid 7 brings you to
the top players control server brings you to the bottom again on the
right side view non-paid 3 brings you to rate view and
controls 3 brings you to left few now the best way to user images as blueprints is to use
them as well lender calls background images this is how i’ve seen all tutorials time
this how I do it and this gives you the most flexibility
or for your images let me show you how to do this
Press and opened and many I’m sure this menu
has a name but I have no idea what it’s called so I discipline called and menu open up to and menu and in
naval background images by clicking the radio checkbox now expand the panel and you will see we have an option to
add an image which has the description add a new
background image so let’s add the talk to you again since
again that will be the one that we will be working with the most Press at image and you’ll see all these
options the first thing to do is choose your
axis since working in harp you first click on the drop down list select hob to you and if you click on browse image: to be linked this button
rate here you can choose one that you’ve already imported but if we haven’t done that already this
will be empty so instead we’re gonna hit the
Open button now again browse to where you have the
images stored and shoes the hop image and again open image now our top image is opened and its axis is a line the top you may be saying to
yourself we can’t see the images again that’s
because we’re in our own view mode we need to move to the top demoted be able to see this suppressed
seven again there’s our image rate there this image
is not a mash it’s just simply overlaid so well my
interact with any of the objects you create now most
people take the size of Shin and change from 5 21 this just keeps your units in line so that one blender
unit goals all the way across your image as well this helps in aligning the view
that axe option here as you can see moves it
in the axe axis left and rates we’re going to be
using this to line up our images very soon but for now just leave
it at 0 why does the same thing it moves up and down the OP City changes home dark the images compared to the background most people
leave this up the stock setting %uh 0.5 so that they can see the
image while there’s a problem with that the lines in your images are dark dark dark
black and since will be tracing missed lines you won’t be able to see them very well
will be working in wireframe view a lot so this makes it hard to see
so for that reason I usually change male
PCB down to a bo 250 or a little less earl or more
depending on the brightness of the screen and how your user interfaces laid out if you have your user interface let
lines are a different color are you have a different background
color you can change the OP City for the best settings for you again this
will take some playing around with obviously the eye button here allows you
to see or not see the images top mood this
is good if you need to have the same image copy twice but in a different orientation for example let’s see your front viewed
in quite lineup you would open the front view again site
you have to front pews and you use one at a time stoop anywhere
you need them to be lined up your second one for
example if you lined up perfectly with the top
view you would use that when you’re working in the top and front view but if you’re first one lines up for the
side view then you would use that one and the side
view if since they’re lined up now let’s
continue adding in our images the other views let’s drop down the top
view and let’s add another image let’s click
add image again this time we’re gonna do this side so select right because remember we
aligned our side view to be the driver side and also because
pressing number had 3 sorry pressing number had three brings
you to rate orthographic to you this saves you from having a press
controls 3 if you’re working from the left side but
if your view is from the left side and obviously you
do from the left or a few oven imager both size because
differences between them and they’re not symmetrical you would use both right am left but
usually you just can use right as a side view here we do the same steps
as before we simply hit open navigate to our images and open the right image for the axis which
happens to be side there you go since we’re already in rate
orthographic view or for incall side view since it’s our
side image we now see our side which again for now
let’s leave the settings all the same I’ll continue adding the images now
until we have the front and back aligned to their own
respective axis as you can see now we have our front and back views added distant worktop inside I licked order it in order of how often I use the image to
use the top inside views the most often followed by the
front you and I usually do the back of the car
last so I leave that at the very bottom so we have our top
view we have our front view we have our site
view or rates and we have are back hitting control Phnom Penh one cap from from do you all wanna show you
a quick little trick if you take the of the city which
happens be the back and change it to all views you will now see the back view is
overlaid over hop the from to you this can show you
very quickly if your views are lined up burn so now the first step in aligning our image
let’s start with the side view because it has a good
representation of where the vehicle at the city the
bottom the wheels what we’re gonna do is drop
down the side view now we’re gonna move the image up till
the wheels just touch the line no don’t forget to change all your scales one now since it’s killed 21 all I had to do was moved up one blender unit in the said direction up and its almost
perfectly lined up you can see where of by just less than half square so just play with values until it’s perfect there you go where Bo
bang on you know I’m actually a new 991 playing around here in getting right
bang on is how you gonna be able to Madhu car easily more the fastest and in the rape proportions so on the
rest to the views just make sure that the tires airline
aligned and your size and scale to one a minute
continue doing this for the front and back views because they have used the
tires as you can see in front view by moving
up just one blender unit we’re almost perfectly lined up in shacks in
sweet color image out so well in our image-editing program it is perfectly
lined up we do not have to move it anymore this keeps things simple in back
to you can see we didn’t do as perfect for jobs cutting so we’re
gonna have to play with the value a bit there we go perfectly lined up
with her X axis the wheels now n all the users have wheels are
perfectly lined up now the most important part of lining up
our images lining them up in 3d space with the 3d cursor which eaten moved by
left-clicking if you don’t know so choose a par on your image that is available in both front and back views a good place to
start is the mir’s a minute zoom in animate shoes very corner I’ll the mir from the back to you now we move to the front view we check to
make sure that it’s lined up very corner mir as you can see it’s
within apec slurs to use a light is darn close enough for the girls I go with this means that our images in
perfect proportions and everything will be modeled nicely on
we create are mere from front view it will be
perfectly aligned in back to making our job so much easier just double check a few places to make
sure you images in the right proportions now the tougher part is to get the top view aligned with the front view and the side you what we
wanna do starting with the side view is again
choose something to line when I think a minute shoes and what
you’re usually can use is the mayor’s in the side view of many
choose very toppled the mir since we’re in
orthographic mold and since we’re only moving in the y
axis now moved back to front view and as you can see its not aligned with very top the mir this is because
we’ve only aligned it in the side view let’s move to the top view and place the
3d cursor in the same spot where would be so let’s move it again to the very hopper the mayor now go back
to your side view and you can see that it’s still in line with the mir but it’s not where we expect it be have to
go to front view again it its not waste not where should be read in the top year to fix this we’re gonna need to resizer
images let’s enter our images now to make sure
they’re centered zoom in to the very man to love your
image I like to start again with the talk to
you zoom in be a very very close to the center point and picks up think that is senator in
the car in all cars something is in the center this
blueprint is great because it has ahold crease going down the Mary Center
the car as you can see we need to move it over
just the hair so let’s move it move along X axis to the rate just a little bit C
00 5 as you can see that was too far when
he double half for that let’s pretty darn close I would see a
boat 25 which is how them 0.00% 5 as you can see were now closer than the experts word hair to the metal you can
keep tweaking towards perfectly in the middle but
blender does not have them out to the accuracy now let’s do this for the rest to the
views I’ll be moving to front view next again lets choose
something that’s centered that for example the pony would be
centered but I happen to know that the grill is
centered as you can see again it’s pretty darn
close but the gap on the right side is bigger
soul let’s close top view go to front view
and let’s move it over let’s try the same value against
their small 0037 we need to go on the cops directions
negative serious users /url 3 12 that is again close enough for the girls
like well with some now are from use aligned let’s go to the back open upper back view and switch
to back view control one and choose something in the
center this image is harder because it has
nothing at the bottom or the very top two lines
up with a lotta blue prints will leave center
line for you to line up in their images but this one doesn’t
however I happen to know that’s GATT symbol is exactly Center in the trunk lid as
you can see it’s not white perfect it needs the
rating between the G in the T so let’s try the same values that’s as
close as we’re gonna need for the front and back views so now our views are aligned
horizontally so at the Lumiere perfectly as well as vertically school at tires are all
touching the ground now we need to line up our images in 3d
view choose a point in 10 the views I’m in the back now a manic
close this panel just so it’s over the way in choosen point that’s a good reference that is in polls images on most cars
this will be the mayor’s so I’m gonna choose the very corner the
mir in the back few let’s move to the front
view and as you can see it’s really dark
close to where we selected on the back now the mir’s might be tapered or the
drawing might be of I suggest however you choose as many
spots as possible to see if it lines up so now let’s align
the top view with the front and back views going to top the UN choose another point
that is available on all views to go from again were probably
in the use them your so I’m any use the corner edges Amir coolant front view and you can see that
it’s right on the edge so that means I didn’t talk to you the
edges the mir is aligned with the edge in the mayor in front view is
well if we got back view you can see that a
free fall that lineup again it hits the very side in the mir
so lots aligned as well now a two-line the side views this is
where it gets top if we choose the top edge I’ll the mir and moved to front view you can see that
its whale of it’s not where it should be if
you’re back view same result if you go to top
view same result it’s not where it should be
we want to choose the corner of the mir in
top view and in the side you but the just born lineup for us everything seems to be
often every view this means we need to rescale are images so since the front and the back view are the same proportion since we already checked them
are gonna leave them the same size since the talk to you is an image that
we’re going to use most often we’re gonna leave it the same because it lines up perfectly with are front and back the news lets choose one more point to see if
this lines up in 3d space I’m gonna choose the top of the
windshield now since we’re working in 3d space as
good a side view and let’s click for the top to the
windshield would be we go back to talk to you you can see
it’s not quite right and front view it’s whale so what that means is we have to
move one of these views so that everything
lines up rates since the top of the windshield
lines up License Center and at the very top in ha view and in friend few I’m gonna
leave these two along we’re gonna have to resize from peers
you can see that’s where the top for the windshield should be the 3d cursor so don’t move it and go
into your side view settings an play around with it until you get the
size to where it needs to be so you’ll have
to change the size and then you’ll have to move it back up
slut the wheels lineup but the ground you can usually do once clicked on size and then one click on why group I did
two backs and that will keep everything aligned as you can see now
its aligned with the Mary Center at the very
top the windshield in the side for your top
view mode its alignment very top view in the
center up to view will realign this distant
double check every goal it’s nice and centered and
we’re gonna move back to the side view just double check close enough for the
girls I go with who are from view now lad is pretty
darn close I actually think the front view image is
not quite centered perfectly I think this grill wasn’t drawn in the
right proportions I think I should’ve aligned it was
something else but it’s so darn close it’s not been a
matter too much so choose a few more spots to make sure
your images rate lets choose the top but the Mary
can remember we had problems with that earlier summer choose the corner the mare im
from few a move to Parkview numba move it for the
corner the mir would be am I gonna side view seen our lines up
the side view the mir now everything is in proportion everything lines up so there you have
your images are now aligned in 3d view as well as 2d you and you can go ahead and start
modeling had match play what who we are a room really well really the car ruling real who fellini dues online on your points in all news
who and you’ll hear me sing me when you
ruled for you low the National just play with us kneeling and get everything lined up
perfectly are the real world model everything a room the movers lose are the real world career counselor today store Lawrence
and Linda ruled you learn something the with the rule least ruling Peru really subscribe to my channel term more
venues like styling lower release today views a day please visit our site at BlendTek.com and there we post more articles those
things download and other stuff for Blender that’s all for now if you disliked this
video please leave me a comment why so that I
can improve my videos in the future if you decide that this Lee button and
don’t tell anybody why that does no one any good because values
will continue being crappy you am they will continue being crappy other people’s views so tell me why he
didn’t like the video if you didn’t and I will fix it future so that I can
try it be perfect to as many users as possible again that’s all for now from BlendTek.com, Remember… CREATE YOUR WAY!

Unreal Engine 4 – OPEN DOORS – blueprint

Unreal Engine 4 – OPEN DOORS – blueprint


WHAT’S UP GUYS, WELCOME TO ANOTHER VIDEO MY NAME IS SPARCKMAN TODAY WE ARE GOING TO CREATE AN AUTOMATIC DOOR SELECT THE DOOR CINEMATICS LET’S GO TO MATINEE LET’S CALL THIS … SUPER DOOR AND LET’S ADD A NEW MOVEMENT TRACK LET’S HIT ENTER I’M GOING TO DRAG THE PLAY NEEDLE TO .. 2 SECONDS LET’S EXTEND THE RANGE LET’S MOVE THE DOOR WOW I’M COUGHING A LOT AND LET’S ADD A NEW KEYFRAME LET’S PLAY THIS WOW THAT WORKS FINE SO WE ARE GOING TO NEED A TRIGGER TO OPEN THE DOOR LET’S FIND THE TRIGGER IT’S GOING TO BE A BOX TRIGGER LET’S MAKE THIS SUPER BIG AND THAT SEEMS NOT TOO BAD THERE I HOPE I’M NOT GETTING THE FLU I DON’T THINK YOU CAN GET THE FLU OVER THE INTERNET, CAN YOU? WITH THIS SELECTED LET’S OPEN THE BLUEPRINT OUR LEVEL BLUE PRINT SO WE ARE GOING TO NEED A COLLISION ADD EVENT TRIGGER COLLISION ON ACTOR OVERLAP LET’S GO TO THE LEVEL AGAIN AND LET’S FIND OUT MATINEE MOVIE WHICH IS OVER HERE LET’S SELECT IT AND LET’S FIND PLAY WHERE IS PLAY? CINEMATIC, PLAY NOW ALL WE HAVE TO DO IS CONNECT THE OVERLAP TO THE PLAY BUTTON COMPILE THIS AND LET’S RUN IT LET’S WALK UP TO THE DOOR WOW AND IT OPENS WOW BUT WHEN I WALK AWAY FROM THE DOORS, IT DOESN’T CLOSE AGAIN LET’S FIX THAT LET’S SELECT THE TRIGGER AGAIN AND LET’S GO BACK TO THE BLUE PRINT AND THIS TIME IS GOING TO BE WHEN THE ACTOR IS NOT OVERLAPPING THE OBJECT ACTOR END OVERLAP LET’S SELECT OUR MOVIE AND LET’S FIND REVERSE REVERSE, CINEMATIC REVERSE LET’S CONNECT THE END-OVERLAP TO THE REVERSE MOVIE COMPILE CLOSE THIS AND LET’S TRY IT OUT LET’S WALK TO THE DOOR WOW IT OPENS AND IT CLOSES BEHIND US THAT WAS SO SIMPLE OPEN AND CLOSE DOWN BELOW YOU CAN SEE A SUBSCRIBE BUTTON SUBSCRIBE LIKE THE VIDEO AND I WILL SEE YOU IN THE NEXT EPISODE BYE NOW