With each project having been published with responsive HTML settings in mind, it will be very easy to integrate both of them within our website. Here, we have a basic HTML page using Bootstrap and a responsive grid. We’ll employ iframe elements to include our published projects.
- [Instructor] With each project having been published…with responsive HTML settings in mind,…it will be very easy to integrate both of them…within our website.…Here we have a basic HTML page using Bootstrap…and a responsive grid.…We'll employ iframe elements to include…our published projects.…So first let's have a look at the website…as it looks right now.…So we can see that we're using Bootstrap…and it's very responsive.…If I click Inspect, here's my console,…and we can actually toggle the device toolbar here…and see how responsive this actually is.…
So pretty nice.…You'll notice, though, that we have a placeholder…for our banner and one for our interactive,…so let's go ahead and add those Animate projects…into our responsive website.…Going back over to my editor,…we can see that this is the index.html…that we just looked at.…In terms of the project, we have our images,…which in this case there's only one real image…and that's the little bug bitmap…used in the interactive frame.…
We also have a number of different sounds that are used.…
- Implementing desktop and mobile interactions
- Designing an animated web banner
- Creating titles
- Programming the banner
- Publishing the banner
- Designing, programming, and publishing an interactive animation
- Importing visuals and audio
- Integrating Animate animations into a responsive HTML website
Skill Level Intermediate
Learning 2D Animation Principleswith Dermot O' Connor2h 25m Beginner
Adobe Animate CC for Web Designerswith Paul Trani1h 21m Beginner
2D Animation: Walk Cycles Basicswith Dermot O' Connor57m 24s Intermediate
1. Desktop and Mobile Interaction
2. Design an Animated Web Banner
3. Program the Animated Web Banner
4. Design an Interactive Animation
Import visuals and audio2m 52s
5. Program the Interactive Animation
6. Website Integration
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.