Build Your Own Business Website header image

How to Convert a Static HTML Site to Thesis Part 13 – Transfer Flash Animation

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Applies to -

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

In this session we show how to transfer flash animation. We discuss the process of investigating where the original HTML is, place it inside the site and find the places where the references need to be changed.

Video Transcript

Rick: This is why I don’t make any money as a web designer because I think of this stuff as ‘Oh, that’s a 5-minute problem to solve.” And you know, an hour later, I’m still working on it.

Okay so the next thing to do is to get the Flash video working in here because we’ve got this Flash video that underlies the whole thing, right? And right now, we’ve given it… we’ve told it about the Flash video but we haven’t told it what to do with it. And we don’t have the location of it properly set. So what we’re going to do here is again, go back and look at… not default aspx. You can see it’s saying that the embed src is Flash intro .swf so that’s what we’re going to upload to our Media Library.

So we’re going to add new. We’re going to select the file and then to tutorial sites, Biltmore old site, Flash, intro swf. Okay so now, we’ve got this location in a different spot and we can come back over here to our page and in this src location, paste that. Update it and now, unless I missed my guess, it’s going to work. I may missed my guess. No, I did not miss my guess. It’s working.

Now the only trick to this is that I didn’t fully appreciate the fact that this Flash video was the full width of the page. And so I have this page padding on the homepage. Actually, I think, maybe all I really have to do is get rid of the page padding on the homepage, now that I say that. How much is that page padding? Let’s see, so we’ve got… that is postbox padding. Is that right? Padding top and get rid of the postbox padding top and we can get rid of… oh and that’s margin. Or is it margin? No, that’s still… that is margin. So if we get rid of the margin and get rid of the postbox top, still have margin for postbox, okay.

So anyway, we’re going to say no sidebars… we’re going to say home .postbox no margin and we’re going to say home .postbox padding top 0 em. Oh, here it is. Full width content box page… content box .content box. Okay we may have a little further to go with that but let’s start off with the post box because I think that’s the right place to start.

Yeah okay so back over to our custom CSS. Again, we’re referencing the homepage only. So this is going to be .custom .home and then we’re going to say .postbox. And then we’re going to say margin: 0 px not o px, 0 px and then padding: 0 px. I think that will solve that. Hit save, upload it and let’s refresh it. He shoots, he scores. I guess we got to take this back to 500 pixels so… from the 480. And the custom CSS, we change that 500 to 480 but we’re going to take that back to 500. Save the document, upload the document, test the document. And actually, we might want to go a little further. That almost looks like it wants 505 pixels or… let’s see what happens over here if we make that 505 pixels. Yeah, format text, page container, flash float, do the map… so that’s it. And if we make it 505 pixels… yeah, it looks like that, did it? 505 pixels, it is and we have a working solution for our Flash. Okay, refresh that, see how it looks. Well, maybe not. Maybe that wasn’t the right idea. Let me take a little bit of fooling around on my part yet.

But it works, right? We see the Flash and the Flash does take us to the appropriate page. So okay, I exaggerated. I said it would take us 5 minutes to put this Flash in and it took us 43 minutes to put the Flash in. But you can see the process of sort of sleuthing out where the original HTML is, copying that original HTML, placing it inside the site and then finding those places where the references need to be changed. So you have to upload the image, change the addresses, change the addresses for the links and that kind of stuff. But having done that, with a little bit of minor tweaking you know, we are where we wanted to be you know, with this Flash animation.

0 Comments… add one

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
0 comments… add one

Leave a Comment