Join Chris Converse for an in-depth discussion in this video Adding your responsive composition to a webpage, part of Edge Animate Essential Training.
- View Offline
- Now once you've completed creating a layout and an animation inside of Edge Animate you'll want to take your project and put it into an existing website. So we're gonna take this responsive design here that we created earlier in the course and we're gonna implement this into an existing responsive design, and put this into the header area. Now we're gonna publish this from this project so that we can take the working project directory which is this folder here and we're looking at this banner an file over here and we're gonna publish this content into this website directory. Then we're gonna take some of the html code we get inside of the banner.html and we're gonna put it into the indexed.html file.
We have our banner.html and we have our index file. Now I'm gonna quickly open the index file up in a browser so we can see the website we're working with. See here how I have this simple responsive design. We can open and close this. We can see that the promo area is here. We'll drop under the content once we get under a certain size. And what we want to do with this particular project is we want to put our Edge Animate Composition up here in the heading area. So back in our Website Directory we're gonna open up the index.html file and the banner.html file up in a code editor.
So here I have banner.html opened up in a code editor. This is the file we got from Edge Animate. Now what Edge Animate does is it adds to html comments. It has an Adobe edge run-time begin and an ending Adobe edge run-time. Everything inside of this content is what Edge Animate needs to run the project. So I'm going to come in here and select from the beginning comment all the way through the ending comment. With all that selected go to the edit menu, choose copy, then open your index.html file.
Inside of here we're gonna put that comment in the heading area. So let's hit a few returns. Simply hit paste. Now we have all of that content inside of here. Now with that in place let's go back to banner.html. Let's scroll down. Inside of the body area we have our div, we have our class, which has the composition ID. You're gonna come in here and just put this on one line. Then let's come in here. Let's select that entire div element. Choose copy. Let's switch back to index.html. Let's scroll down in the page.
And we wanna have this show up inside of the header area. So I left myself a note here that says "Animation goes here" Let's delete that and let's paste in that div element. So with both of these changes in place we can come up here, choose file, save. Let's go back to our working directory. And let's open up index.html up in a browser. So now we can see our animated content showing up at the top So now I'll decrease the width of the browser. Once I get this down into the small screen state, I'll hit reload. Now I can see the sugar cube actually goes in front of the chalkboard.
- Creating a new project
- Preparing content in Photoshop or Illustrator
- Adding text to a composition
- Working with web fonts
- Creating reusable symbols
- Adding HTML5 audio and video to compositions
- Making responsive layouts
- Animating elements
- Targeting elements with actions
- Controlling HTML5 video and audio playback with actions
- Working in the Code panel
- Publishing your project
- Adding Edge Animate compositions to existing webpages
- Using OAM files in other applications