title
Create an Interactive SVG with Adobe Edge Animate
description
http://goo.gl/BBse40 - Design + Code a Professional Android App from Scratch
Project Files: http://www.designcourse.com/videos/create-an-interactive-svg-with-adobe-edge-animate/117 - Use Adobe Illustrator to create a couple SVG graphics, and then animate them based on mouse activity in Adobe Edge Animate.
Follow us:
Facebook: http://www.facebook.com/designcourses
Twitter: http://twitter.com/designcoursecom
Google+: http://plus.google.com/+DesignCourse
Dribbble: http://dribbble.com/designcourse
- - - - - - - - - - - - - - - - - - - - - -
Subscribe for NEW VIDEOS weekly!
My site: https://designcourse.com
My personal FB account: http://fb.com/logodesigner
Coursetro FB: http://fb.com/coursetro
Coursetro's Twitter: http://twitter.com/designcoursecom
Join my Discord! https://discord.gg/a27CKAF
^-Chat with me and others
- - - - - - - - - - - - - - - - - - - - - -
Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.
Now, I focus all of my time and energy on this channel and my website Coursetro.com.
Come to my discord server or add me on social media and say Hi!
detail
{'title': 'Create an Interactive SVG with Adobe Edge Animate', 'heatmap': [{'end': 421.126, 'start': 341.573, 'weight': 0.802}, {'end': 468.425, 'start': 421.606, 'weight': 0.733}, {'end': 506.856, 'start': 489.985, 'weight': 0.719}], 'summary': 'Learn svg animation with adobe edge animate, including mouse over and mouse out events, accessing project files at designcourse.com. create logo animation in adobe illustrator, manipulate svg files, and use edge animate for web animation, including event triggers and responsive scaling.', 'chapters': [{'end': 90.889, 'segs': [{'end': 90.889, 'src': 'embed', 'start': 27.278, 'weight': 0, 'content': [{'end': 29.18, 'text': 'Hello, Gary Simon here at designcourse.com.', 'start': 27.278, 'duration': 1.902}, {'end': 34.967, 'text': "Today we're going to experiment with SVG animations and this time we're gonna use Adobe Edge Animate.", 'start': 29.22, 'duration': 5.747}, {'end': 43.618, 'text': 'And if you have a Creative Cloud subscription, you can install the Creative Cloud desktop app and you can install Edge Animate as a result.', 'start': 35.468, 'duration': 8.15}, {'end': 46.641, 'text': "Just load that up and just click install and it'll install it real quick.", 'start': 43.698, 'duration': 2.943}, {'end': 48.322, 'text': 'And so yeah,', 'start': 47.422, 'duration': 0.9}, {'end': 68.608, 'text': "what we're going to do is get started in Adobe Illustrator and we're going to use the designcourse.com DC letter mark and we're going to make some adjustments and then import it into Edge Animate and then create some mouse over and mouse out events to make it animate in between itself based on that cursor movement.", 'start': 48.322, 'duration': 20.286}, {'end': 72.653, 'text': 'Alright. so, Basically, if you need access to the project files and you do,', 'start': 69.048, 'duration': 3.605}, {'end': 79.047, 'text': "if you wanna follow along they're available for free at designcourse.com and you can find the link at YouTube in the description.", 'start': 72.653, 'duration': 6.394}, {'end': 80.591, 'text': "Alright, so let's go ahead and get started.", 'start': 79.508, 'duration': 1.083}, {'end': 84.145, 'text': 'All right, so go ahead and download the project files.', 'start': 81.383, 'duration': 2.762}, {'end': 90.889, 'text': "And there, if you go to YouTube, you'll find the link directly from designcourse.com where you can download this file.", 'start': 84.865, 'duration': 6.024}], 'summary': 'Experiment with svg animations using adobe edge animate and designcourse.com dc letter mark.', 'duration': 63.611, 'max_score': 27.278, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/O6kNFjOHqGc/pics/O6kNFjOHqGc27278.jpg'}], 'start': 27.278, 'title': 'Svg animation with adobe edge animate', 'summary': 'Covers experimenting with svg animations using adobe edge animate, including creating mouse over and mouse out events, and accessing project files for free at designcourse.com.', 'chapters': [{'end': 90.889, 'start': 27.278, 'title': 'Svg animation with adobe edge animate', 'summary': 'Covers experimenting with svg animations using adobe edge animate, including creating mouse over and mouse out events, and accessing project files for free at designcourse.com.', 'duration': 63.611, 'highlights': ['Experimenting with SVG animations using Adobe Edge Animate The video discusses using Adobe Edge Animate to experiment with SVG animations.', 'Creating mouse over and mouse out events The tutorial involves creating mouse over and mouse out events to make the SVG animate based on cursor movement.', 'Accessing project files for free at designcourse.com Viewers can access project files for free at designcourse.com to follow along with the tutorial.']}], 'duration': 63.611, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/O6kNFjOHqGc/pics/O6kNFjOHqGc27278.jpg', 'highlights': ['Creating mouse over and mouse out events The tutorial involves creating mouse over and mouse out events to make the SVG animate based on cursor movement.', 'Experimenting with SVG animations using Adobe Edge Animate The video discusses using Adobe Edge Animate to experiment with SVG animations.', 'Accessing project files for free at designcourse.com Viewers can access project files for free at designcourse.com to follow along with the tutorial.']}, {'end': 290.878, 'segs': [{'end': 179.445, 'src': 'embed', 'start': 113.198, 'weight': 2, 'content': [{'end': 118.623, 'text': "And I'm gonna scale it down just holding Shift and Alt right around there.", 'start': 113.198, 'duration': 5.425}, {'end': 120.161, 'text': 'All right.', 'start': 119.841, 'duration': 0.32}, {'end': 128.85, 'text': "so basically, when it comes to the animation here we want to only work with two layers, this one and then one where we're going to duplicate this,", 'start': 120.161, 'duration': 8.689}, {'end': 132.074, 'text': "except we're going to get rid of the fill, the blue fill here, and instead add a stroke.", 'start': 128.85, 'duration': 3.224}, {'end': 140.943, 'text': "And then, when it comes to Adobe Edge Animate, we'll go ahead and transition between those two, based on a hover on and hover out effect,", 'start': 132.634, 'duration': 8.309}, {'end': 142.224, 'text': 'or mouse out and mouse on.', 'start': 140.943, 'duration': 1.281}, {'end': 145.026, 'text': "so for this first one we're already done.", 'start': 142.865, 'duration': 2.161}, {'end': 153.81, 'text': "all we have to do is just save this so ctrl s command s on mac and we'll switch to svg, and i've already done this previously.", 'start': 145.026, 'duration': 8.784}, {'end': 155.491, 'text': "so i'm just going to name mine pre-full.", 'start': 153.81, 'duration': 1.681}, {'end': 156.831, 'text': 'you can name yours whatever you want.', 'start': 155.491, 'duration': 1.34}, {'end': 167.217, 'text': "i'm going to overwrite it and then make sure svg profiles is svg 1.1, and then pretty much everything else here can remain the same, All right.", 'start': 156.831, 'duration': 10.386}, {'end': 169.559, 'text': "And then what we'll do is just take this.", 'start': 167.517, 'duration': 2.042}, {'end': 179.445, 'text': "And if we switch to our fill right here, click on this in the swatches panel, if you don't have it open, just go to window in swatches.", 'start': 170.479, 'duration': 8.966}], 'summary': 'Tutorial on creating svg animation with adobe edge animate, using two layers and a hover effect.', 'duration': 66.247, 'max_score': 113.198, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/O6kNFjOHqGc/pics/O6kNFjOHqGc113198.jpg'}, {'end': 290.878, 'src': 'embed', 'start': 211.78, 'weight': 0, 'content': [{'end': 213.16, 'text': 'And this is going to be pre-outline.', 'start': 211.78, 'duration': 1.38}, {'end': 215.201, 'text': 'Yes and okay.', 'start': 214.021, 'duration': 1.18}, {'end': 220.478, 'text': "And that's all that we have to do in Adobe Illustrator for this very simple tutorial.", 'start': 216.656, 'duration': 3.822}, {'end': 223.06, 'text': "So let's go to Adobe Edge Animate.", 'start': 221.219, 'duration': 1.841}, {'end': 227.482, 'text': "And if you don't have this, but you do have a Creative Cloud subscription,", 'start': 223.76, 'duration': 3.722}, {'end': 233.105, 'text': 'you can download that by going to the Adobe Creative Cloud Manager application.', 'start': 227.482, 'duration': 5.623}, {'end': 237.167, 'text': "And what we're going to do is hit Create New.", 'start': 234.286, 'duration': 2.881}, {'end': 241.638, 'text': "We're going to make our width 500.", 'start': 238.068, 'duration': 3.57}, {'end': 248.083, 'text': 'height 500, and this will match exactly the specs of our SVG files.', 'start': 241.638, 'duration': 6.445}, {'end': 262.454, 'text': 'so basically, let me try to drag this down and reorder things so we could see this whole area alright.', 'start': 248.083, 'duration': 14.371}, {'end': 266.177, 'text': 'so what we want to do is go to file and then import.', 'start': 262.454, 'duration': 3.723}, {'end': 280.134, 'text': "take both of those hit open and you'll see they're both placed on over here in our elements, which is basically equivalent of layers in Photoshop,", 'start': 269.028, 'duration': 11.106}, {'end': 286.977, 'text': "and then also a timeline down here which looks pretty similar to Adobe After Effects, if you've ever used that.", 'start': 280.134, 'duration': 6.843}, {'end': 290.878, 'text': "alright. so By default it's just importing both of them.", 'start': 286.977, 'duration': 3.901}], 'summary': 'Tutorial demonstrates creating svg files in adobe illustrator, then importing to adobe edge animate with width and height set at 500.', 'duration': 79.098, 'max_score': 211.78, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/O6kNFjOHqGc/pics/O6kNFjOHqGc211780.jpg'}], 'start': 90.909, 'title': 'Adobe illustrator and svg animation', 'summary': 'Covers creating logo animation in adobe illustrator and adobe edge animate, creating svg outlines, and importing and manipulating svg files with a focus on specific techniques and dimensions.', 'chapters': [{'end': 155.491, 'start': 90.909, 'title': 'Adobe illustrator logo animation', 'summary': 'Explains how to create an animation using adobe illustrator and adobe edge animate, involving a logo designcourse.com lettermark, with a focus on working with two layers and transitioning based on hover effects.', 'duration': 64.582, 'highlights': ['Creating a logo animation using Adobe Illustrator and Adobe Edge Animate.', 'Working with two layers in the animation process.', 'Transitioning between the two layers based on hover effects.']}, {'end': 237.167, 'start': 155.491, 'title': 'Creating svg outline in adobe illustrator', 'summary': "Demonstrates creating an svg outline in adobe illustrator, setting the stroke color and width, and saving the file as 'pre-outline'. it also briefly mentions switching to adobe edge animate for further steps.", 'duration': 81.676, 'highlights': ["In Adobe Illustrator, the tutorial covers overwriting the existing file, setting SVG profiles to 1.1, removing fill, adding stroke of two pixels, and saving the file as 'pre-outline'.", 'It also mentions switching to Adobe Edge Animate and creating a new project.', 'The tutorial briefly mentions the option to download Adobe Edge Animate through the Adobe Creative Cloud Manager application.']}, {'end': 290.878, 'start': 238.068, 'title': 'Svg file import and layer manipulation', 'summary': 'Covers setting the canvas dimensions to 500x500 to match the svg file specs, importing files into the elements/layer panel, and the timeline feature with similarities to adobe after effects.', 'duration': 52.81, 'highlights': ['Setting canvas dimensions to 500x500 to match SVG file specs The canvas dimensions are set to 500x500 to match the specifications of the SVG files.', 'Importing files into the elements/layer panel Files are imported into the elements/layer panel, which is equivalent to the layers in Photoshop.', 'Timeline feature with similarities to Adobe After Effects The timeline feature is present, resembling the functionality of Adobe After Effects.']}], 'duration': 199.969, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/O6kNFjOHqGc/pics/O6kNFjOHqGc90909.jpg', 'highlights': ['Creating a logo animation using Adobe Illustrator and Adobe Edge Animate.', 'Setting canvas dimensions to 500x500 to match SVG file specs.', 'Working with two layers in the animation process.', 'Importing files into the elements/layer panel.', 'Transitioning between the two layers based on hover effects.', "In Adobe Illustrator, the tutorial covers overwriting the existing file, setting SVG profiles to 1.1, removing fill, adding stroke of two pixels, and saving the file as 'pre-outline'.", 'Timeline feature with similarities to Adobe After Effects.', 'It also mentions switching to Adobe Edge Animate and creating a new project.', 'The tutorial briefly mentions the option to download Adobe Edge Animate through the Adobe Creative Cloud Manager application.']}, {'end': 909.553, 'segs': [{'end': 421.126, 'src': 'heatmap', 'start': 341.573, 'weight': 0.802, 'content': [{'end': 349.715, 'text': 'So now what we want to do is we want to click on pre full and we want to add an event here.', 'start': 341.573, 'duration': 8.142}, {'end': 356.55, 'text': 'All right, that reveals, I just moved that over because I wanted to be able to see this.', 'start': 353.066, 'duration': 3.484}, {'end': 364.058, 'text': 'So if we click on this, we can add some type of an event based on if you wanted to click.', 'start': 357.251, 'duration': 6.807}, {'end': 365.059, 'text': 'you want something to happen.', 'start': 364.058, 'duration': 1.001}, {'end': 368.283, 'text': 'double click mouse over touch start.', 'start': 365.059, 'duration': 3.224}, {'end': 372.888, 'text': 'This is like a for mobile and yeah, a bunch of really cool stuff.', 'start': 368.323, 'duration': 4.565}, {'end': 374.47, 'text': "So we're going to focus on mouse over.", 'start': 372.928, 'duration': 1.542}, {'end': 381.829, 'text': 'All right, so it says, insert code to be run when the mouse hovers over the object.', 'start': 375.942, 'duration': 5.887}, {'end': 387.975, 'text': 'Well, by default, if you remember, we, well, I hope you remember, you would have a really bad memory.', 'start': 382.489, 'duration': 5.486}, {'end': 390.758, 'text': "We made sure the autoplay wasn't on.", 'start': 388.456, 'duration': 2.302}, {'end': 392.721, 'text': "So by default, it's stopping the timeline.", 'start': 390.778, 'duration': 1.943}, {'end': 393.662, 'text': "It's not gonna run anything.", 'start': 392.761, 'duration': 0.901}, {'end': 400.806, 'text': 'So what we want to happen is play the current timeline when we have this mouse over.', 'start': 394.322, 'duration': 6.484}, {'end': 402.787, 'text': 'All right, so pretty simple.', 'start': 400.826, 'duration': 1.961}, {'end': 406.469, 'text': 'Let me go ahead and close that out.', 'start': 403.867, 'duration': 2.602}, {'end': 415.982, 'text': 'All right, so we have added nothing basically to this timeline, so even if we hover over it, nothing will happen.', 'start': 407.935, 'duration': 8.047}, {'end': 421.126, 'text': "So that's up to us to go ahead and add some sort of animation.", 'start': 416.522, 'duration': 4.604}], 'summary': 'Demonstrating adding events on mouse over for interactive animation.', 'duration': 79.553, 'max_score': 341.573, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/O6kNFjOHqGc/pics/O6kNFjOHqGc341573.jpg'}, {'end': 468.425, 'src': 'heatmap', 'start': 421.606, 'weight': 0.733, 'content': [{'end': 427.611, 'text': 'So by default, we want the pre-full to be at a zero opacity.', 'start': 421.606, 'duration': 6.005}, {'end': 430.353, 'text': 'so that we only see this.', 'start': 428.832, 'duration': 1.521}, {'end': 431.733, 'text': 'All right.', 'start': 431.453, 'duration': 0.28}, {'end': 433.414, 'text': "So let's go ahead.", 'start': 432.413, 'duration': 1.001}, {'end': 437.895, 'text': 'If we click on this, we can add a pin, which is kind of like a key frame.', 'start': 433.434, 'duration': 4.461}, {'end': 447.839, 'text': 'So if we move this over to around one second, we can make this come back in to 100% opacity.', 'start': 438.235, 'duration': 9.604}, {'end': 452.341, 'text': 'All right.', 'start': 452, 'duration': 0.341}, {'end': 453.441, 'text': 'Very simple.', 'start': 452.841, 'duration': 0.6}, {'end': 456.262, 'text': "So let's go ahead and hit control enter.", 'start': 453.941, 'duration': 2.321}, {'end': 461.84, 'text': 'Oops Let me refresh that and just show you that it does stop.', 'start': 458.257, 'duration': 3.583}, {'end': 465.883, 'text': "Nothing's happening because we haven't mouse entered over that area.", 'start': 462.3, 'duration': 3.583}, {'end': 468.425, 'text': 'We can even come over here and the rest of the HTML document.', 'start': 465.923, 'duration': 2.502}], 'summary': 'Demonstrating setting pre-full opacity to 0, then 100% at one second, with pin/keyframe added.', 'duration': 46.819, 'max_score': 421.606, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/O6kNFjOHqGc/pics/O6kNFjOHqGc421606.jpg'}, {'end': 465.883, 'src': 'embed', 'start': 433.434, 'weight': 1, 'content': [{'end': 437.895, 'text': 'If we click on this, we can add a pin, which is kind of like a key frame.', 'start': 433.434, 'duration': 4.461}, {'end': 447.839, 'text': 'So if we move this over to around one second, we can make this come back in to 100% opacity.', 'start': 438.235, 'duration': 9.604}, {'end': 452.341, 'text': 'All right.', 'start': 452, 'duration': 0.341}, {'end': 453.441, 'text': 'Very simple.', 'start': 452.841, 'duration': 0.6}, {'end': 456.262, 'text': "So let's go ahead and hit control enter.", 'start': 453.941, 'duration': 2.321}, {'end': 461.84, 'text': 'Oops Let me refresh that and just show you that it does stop.', 'start': 458.257, 'duration': 3.583}, {'end': 465.883, 'text': "Nothing's happening because we haven't mouse entered over that area.", 'start': 462.3, 'duration': 3.583}], 'summary': 'Demonstrating adding pin, adjusting opacity, and mouse-enter interaction in animation.', 'duration': 32.449, 'max_score': 433.434, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/O6kNFjOHqGc/pics/O6kNFjOHqGc433434.jpg'}, {'end': 524.154, 'src': 'heatmap', 'start': 489.985, 'weight': 2, 'content': [{'end': 497.129, 'text': "if we click on this little insert trigger, you'll see it adds a little trigger based on where we're currently at,", 'start': 489.985, 'duration': 7.144}, {'end': 506.856, 'text': 'and all we have to do is hit enter and just hit stop, stop at.', 'start': 497.129, 'duration': 9.727}, {'end': 514.221, 'text': "yeah, so you want to choose stop at, and then 1000 frames is where we're at at one second, all right.", 'start': 506.856, 'duration': 7.365}, {'end': 517.972, 'text': "so we'll go ahead and close that.", 'start': 514.221, 'duration': 3.751}, {'end': 524.154, 'text': 'And now we want to add an event for mousing out.', 'start': 519.553, 'duration': 4.601}], 'summary': 'Demonstrating inserting a trigger and setting 1000 frames for a stop event.', 'duration': 34.169, 'max_score': 489.985, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/O6kNFjOHqGc/pics/O6kNFjOHqGc489985.jpg'}, {'end': 621.282, 'src': 'embed', 'start': 592.859, 'weight': 3, 'content': [{'end': 602.444, 'text': 'if we take both of those holding shift and selecting on these lines, hit control C and then, with our timeline right at one second,', 'start': 592.859, 'duration': 9.585}, {'end': 605.446, 'text': 'we can go to edit paste, special paste inverted.', 'start': 602.444, 'duration': 3.002}, {'end': 607.291, 'text': 'All right.', 'start': 606.991, 'duration': 0.3}, {'end': 613.776, 'text': 'So what that does is take whatever the animation that we have selected and it will reverse it.', 'start': 607.371, 'duration': 6.405}, {'end': 615.998, 'text': 'Pretty simple.', 'start': 615.498, 'duration': 0.5}, {'end': 617.039, 'text': 'All right.', 'start': 616.739, 'duration': 0.3}, {'end': 621.282, 'text': "So let's go ahead and hit control enter to preview this in the browser.", 'start': 617.119, 'duration': 4.163}], 'summary': 'Reversing animation by pasting inverted, preview in browser', 'duration': 28.423, 'max_score': 592.859, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/O6kNFjOHqGc/pics/O6kNFjOHqGc592859.jpg'}, {'end': 694.257, 'src': 'embed', 'start': 656.892, 'weight': 4, 'content': [{'end': 659.373, 'text': 'maybe the scale in or rotate for some reason.', 'start': 656.892, 'duration': 2.481}, {'end': 664.716, 'text': "obviously, in a real world scenario that doesn't make sense, but this is just for learning a couple of new things here.", 'start': 659.373, 'duration': 5.343}, {'end': 679.202, 'text': "So what we could do is, if we click on the transform tool right here, you'll notice that we can basically let me come over here,", 'start': 665.877, 'duration': 13.325}, {'end': 681.022, 'text': 'scale this down or rotate it.', 'start': 679.202, 'duration': 1.82}, {'end': 694.257, 'text': "So if we real quickly just move this a little bit, like in we'll see that it adds a scale X and Y.", 'start': 681.942, 'duration': 12.315}], 'summary': 'Learning how to scale and rotate in a digital environment.', 'duration': 37.365, 'max_score': 656.892, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/O6kNFjOHqGc/pics/O6kNFjOHqGc656892.jpg'}, {'end': 816.512, 'src': 'embed', 'start': 760.168, 'weight': 0, 'content': [{'end': 762.97, 'text': 'hover over it, hover off of it.', 'start': 760.168, 'duration': 2.802}, {'end': 766.493, 'text': 'Very simple.', 'start': 765.392, 'duration': 1.101}, {'end': 771.157, 'text': 'So as you could see, you could probably do a bunch of different interesting things with this.', 'start': 767.254, 'duration': 3.903}, {'end': 779.183, 'text': 'This could be used for a variety of purposes, potentially for, I guess you could say banners, display banners.', 'start': 771.177, 'duration': 8.006}, {'end': 781.826, 'text': 'You could also do it for page elements.', 'start': 779.243, 'duration': 2.583}, {'end': 783.787, 'text': 'You can even add these triggers.', 'start': 782.006, 'duration': 1.781}, {'end': 787.27, 'text': "Right now we're just using hover on and hover out.", 'start': 783.967, 'duration': 3.303}, {'end': 796.541, 'text': 'You could specify, I believe, page scroll so when it becomes visible in the viewport, you can make an animation play with your SVG files.', 'start': 787.35, 'duration': 9.191}, {'end': 800.426, 'text': 'And I remember seeing also several more.', 'start': 798.504, 'duration': 1.922}, {'end': 802.149, 'text': 'Let me just come down here.', 'start': 800.446, 'duration': 1.703}, {'end': 807.185, 'text': 'Swipe left, swipe right.', 'start': 805.043, 'duration': 2.142}, {'end': 816.512, 'text': "I even remember seeing one, I'm not sure where I saw that at, for changing the orientation, for example, of a phone from portrait to landscape.", 'start': 808.346, 'duration': 8.166}], 'summary': 'The transcript discusses various interactive triggers like hover, swipe, and page scroll for different purposes like banners and page elements.', 'duration': 56.344, 'max_score': 760.168, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/O6kNFjOHqGc/pics/O6kNFjOHqGc760168.jpg'}, {'end': 909.553, 'src': 'embed', 'start': 886.202, 'weight': 6, 'content': [{'end': 894.307, 'text': "but yeah, if you're going to actually use it in a uh an environment where you have a web page or whatever you have, it's inside of a container.", 'start': 886.202, 'duration': 8.105}, {'end': 898.048, 'text': 'having it responsive scale would be a no brainer, basically.', 'start': 894.307, 'duration': 3.741}, {'end': 901.67, 'text': 'So yeah, that is it.', 'start': 898.789, 'duration': 2.881}, {'end': 908.513, 'text': "So go ahead and check out designcourse.com if you haven't yet and subscribe here on YouTube.", 'start': 901.77, 'duration': 6.743}, {'end': 909.553, 'text': 'All right, see you tomorrow.', 'start': 908.793, 'duration': 0.76}], 'summary': 'Responsive scaling is essential for web page containers. visit designcourse.com and subscribe on youtube.', 'duration': 23.351, 'max_score': 886.202, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/O6kNFjOHqGc/pics/O6kNFjOHqGc886202.jpg'}], 'start': 290.938, 'title': 'Creating interactive svg animation and using edge animate for web animation', 'summary': 'Demonstrates creating interactive svg animation using adobe animate with event triggers for mouse over and mouse out, adjusting object opacity, and controlling the timeline. it also covers using edge animate for web animation, including reversing animations, adding more animations, utilizing triggers, and enabling responsive scaling.', 'chapters': [{'end': 559.237, 'start': 290.938, 'title': 'Creating interactive svg animation', 'summary': 'Demonstrates how to create an interactive svg animation, including setting up event triggers for mouse over and mouse out, adjusting object opacity, and controlling the timeline, using adobe animate. it also highlights the process of adding keyframes and triggers for specific frames, with an emphasis on the importance of each action in ensuring the correct animation behavior.', 'duration': 268.299, 'highlights': ['The chapter demonstrates how to create an interactive SVG animation using Adobe Animate, emphasizing the process of setting up event triggers for mouse over and mouse out to control the animation behavior.', 'An important step highlighted is adjusting the object opacity, setting it to zero initially and then animating it to 100% opacity over a specific duration using keyframes.', 'The process of controlling the timeline and adding triggers for specific frames, such as stopping the animation at a particular frame and playing it from a specific frame, is emphasized as a crucial aspect of ensuring the correct animation behavior.']}, {'end': 909.553, 'start': 560.478, 'title': 'Using edge animate for web animation', 'summary': 'Covers using edge animate for web animation, including how to reverse animations, add more animations, utilize triggers, and enable responsive scaling.', 'duration': 349.075, 'highlights': ["Edge Animate allows for reversing animations, demonstrated by using the 'special paste inverted' feature, providing a simple method for animating in both directions.", 'The tutorial demonstrates adding more animations by using the transform tool to scale or rotate elements, showcasing the practical application of creating keyframes and animations.', 'The chapter explores utilizing triggers like hover on and hover off, and mentions the potential to use page scroll and SVG file animations, providing insights into various ways to trigger animations.', 'It highlights the importance of enabling responsive scaling for web animations, emphasizing the need for practical applicability and responsive design in web development.']}], 'duration': 618.615, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/O6kNFjOHqGc/pics/O6kNFjOHqGc290938.jpg', 'highlights': ['The chapter demonstrates creating interactive SVG animation using Adobe Animate with event triggers for mouse over and mouse out.', 'Adjusting object opacity from 0 to 100% using keyframes is highlighted as an important step.', 'Controlling the timeline and adding triggers for specific frames is crucial for correct animation behavior.', "Edge Animate allows for reversing animations using the 'special paste inverted' feature.", 'Adding more animations using the transform tool to scale or rotate elements is demonstrated.', 'Utilizing triggers like hover on and hover off provides insights into various ways to trigger animations.', 'Enabling responsive scaling for web animations is emphasized for practical applicability and responsive design.']}], 'highlights': ['Accessing project files for free at designcourse.com Viewers can access project files for free at designcourse.com to follow along with the tutorial.', 'Creating a logo animation using Adobe Illustrator and Adobe Edge Animate.', 'The chapter demonstrates creating interactive SVG animation using Adobe Animate with event triggers for mouse over and mouse out.', "Edge Animate allows for reversing animations using the 'special paste inverted' feature.", 'Enabling responsive scaling for web animations is emphasized for practical applicability and responsive design.', "In Adobe Illustrator, the tutorial covers overwriting the existing file, setting SVG profiles to 1.1, removing fill, adding stroke of two pixels, and saving the file as 'pre-outline'.", 'The tutorial involves creating mouse over and mouse out events to make the SVG animate based on cursor movement.', 'Working with two layers in the animation process.', 'Controlling the timeline and adding triggers for specific frames is crucial for correct animation behavior.', 'Utilizing triggers like hover on and hover off provides insights into various ways to trigger animations.', 'Experimenting with SVG animations using Adobe Edge Animate The video discusses using Adobe Edge Animate to experiment with SVG animations.', 'Adjusting object opacity from 0 to 100% using keyframes is highlighted as an important step.', 'Setting canvas dimensions to 500x500 to match SVG file specs.', 'Importing files into the elements/layer panel.', 'Transitioning between the two layers based on hover effects.', 'Timeline feature with similarities to Adobe After Effects.', 'It also mentions switching to Adobe Edge Animate and creating a new project.', 'The tutorial briefly mentions the option to download Adobe Edge Animate through the Adobe Creative Cloud Manager application.']}