All language subtitles for 3. Animation Configuration

Now that we have our animation exported properly we need to go ahead and put that into our ReACT application.

The Jace ON THE BODY MOVE IN exported though actually needs a little bit of tweaking before we can bring

it into our application.

So I'm going to start by walking us through that and then we'll get into actually bringing it into our

code.

But if you had skipped the last video covering all of the body moving stuff you can go ahead and skip

this video as well because we're just tweaking some of the files that were exported from body moving

but in the next video when we go ahead and bring those files into our project we'll just be using files

from the Project 1 files that you had downloaded and they will already be set up correctly so you can

go ahead and skip to the next video if you don't want to go through this configuration and you won't

have to worry.

But otherwise we'll go ahead and get started by tweaking that animation data.

Just a little bit so here on the desktop is where I had exported that animation data.

So I'm gonna go ahead and select that Jason File and I'm going to open that with Adam so that'll open

up in the code editor.

And here it's nicely formatted and if yours isn't try saving it real quick if you have the prettier

setting to refactor your code on save.

And that should make it look better for you and that will make this a little bit easier if you don't

have it looking like this.

Go and look for the assets property and the array of images inside of there.

And that is the important part that we're going to tweak.

Now here is where it is referencing the images that were also exported that contain the different layers

of the animation.

The problem with how this is set up however is that all of the images for all of the animations they

all start at 0 1 2 3 4 and so on for all the different animations.

And so if all of the data files are referencing the 0 1 2 and 3 files well then you can see how it would

get confusing.

And that's obviously why it wouldn't work.

They also are looking for the images at a images U.R.L..

And so the solution that I found for production is that people were hosting in images folder in the

public directory and then referencing the images from there within their code.

But I didn't really like that.

So I kept searching and I found a better solution that I think works a lot better.

We'll start by and go ahead and select all of this code and we'll copy that and then let's start and

create a new file and let's save this real quick.

And I'm actually going to put it on the desktop where the data dot Jason File is and we'll name this

data dot J Yes.

So we'll save that.

And now let's start at the top by importing react from react.

And then underneath the import statement for react let's go ahead and we'll import Image 0 from da slash

images image 0 import Image 1 from dot slash images image 1 import Image 2.

We're just going to do this for all of them image to

improve three

and image four.

OK so we have all of the images loaded in now.

And I keep doing that and it will come down.

And now we will export defaults and then just paste in all of that J song that we had copied.

So we'll scroll back up to the top of this.

And now where it has the image property in this array for all of the U R L's and the paths we're now

going to change it to just reference these images right here.

So now there actually is not a U.R.L. that we're going to be specifying.

So the U R L you can actually just make an empty string.

So go ahead and we'll do that for all of these images.

We will just get rid of that.

Make nice empty string and make sure you just change those top ones.

That's it.

So change all of those EU properties to the empty string.

And now for the P property which specifies the image itself.

Let's go ahead and replace that string entirely with the image zero that we have imported and we'll

do the same for each of these.

Image 1 2

3 3

and 4.

And now if we save this you would now be able to import this and use it directly without having to worry

about whether or not the images are going to be properly included because they're just going to be bundled

within this javascript file.

So this was a really nice solution and there I had found online and you can see if we go into the animations

folder that we had set up out of the project one files we can open this up and you'll see all of these

other little folders.

So save for the landing animation inside this folder you now see the data dot J.S. file like we had

just created the data dot Jason File which was exported by body move in and all of the images that were

exported by body move in as well here I actually got rid of the images folder and just put all of the

images in the same folder so that the data dot J.S. simply imports the images and exports the Jason.

And it actually looks like here I'm not even importing react so I think I don't even need that.

And so we could go ahead get rid of the import react and now it would still work because this is just

plain javascript.

So we'll just be referencing the data files out of the each of these animation folders which have all

already been set up correctly.

So we won't have to worry about that.

We can close out of those and you can go ahead and delete the data.

Jason the images and the data J.S. files that we had just been working with from wherever you had exported

them to so I'm going to go ahead and get rid of those and now we are ready to begin bringing the animation

into the application.