Learn how to create animated digital ads using Adobe Animate

[@TyraFromSaigon]

Never thought I'd have to attempt another animation in my life. This takes me back to the Flash classes back in my 20's! Thanks so much for this super easy to follow tutorial!

[@remymartin8185]

Great tutorial, been trying to dust off my 20 year old graphic design skills and this made concise work of learning to use animation in adobe👏👏

[@phillipdraper657]

Great video. Painfully endured a couple bad ones on Skillshare. This was a million times more helpful.

[@AngeloMontilla]

Any time Phillip. Glad it helped you!

[@beenamanoj67]

im just starting and tNice tutorials video was perfect.Well explained and easy to follow for a beginner.I never understood soft soft till i watched tNice tutorials.

[@szigethyorsolya]

It was very useful, thank you very much! But I would like to know how to prepare it as an html advertisement according to Google's requirements, so that the compressed file should be no more than about 200 kbyte.

[@ohpaulanina]

This was so helpful, thank you! Your videos are the best!!

[@AngeloMontilla]

Thanks Paula!

[@HazelM-v7n]

Love this tutorial! The only problem is every time i export it turns out blurry. Any ideas?

[@efpdesign]

How to publish the banner after exporting, do I need to put it on a server? What are the available options?

[@AngeloMontilla]

Hi Elton. To publish as html, go to File > Publish. This will package all the images, html and js in folders. Just keep in mind that some of the animation and interactivity won't work when you try to preview it in a browser on your local drive after it's published, so you'll have to host the html on a server in order for it to work as intended. I use a program called Brackets. If you want to export as gif or Video, go to File>Export>Export Media/Video or Export Animated GIF.

[@joshbrooks4658]

Great vid thank you. Does this cover how to export designs and assets for HTML5 banner ads? Or just gif/mp4? Thanks

[@kimberlymiller3689]

I love all of your videos. It has helped me so much in escalating my design work. Please continue being awesome and sharing awesome content!

[@AngeloMontilla]

Thanks Kimberly! So glad to hear they are helping you!

[@ydco.]

hi! you have amazing tutorials! thank you! How do you set the stage colour from libraries? When I open my cc library, and try to set the stage using one of my colours nothing happens. I have to choose a colour from the colour swatches in adobe animate itself. How did you set your blue colour from the cc libraries? thank you so much again!

[@AngeloMontilla]

Thanks for the question! You know what? I am having the same issue now. I am wondering if this is a problem in the newest version of Animate. The workaround for now is: • Click the color from your CC Libraries, which will set the Fill to the color in the Tools panel. • Next, click the Stage background color in the Properties panel. • With the eyedrop selector, click the Fill color in the Tools panel. Does that make sense? I am going to look into why you can't directly select the color from the CC Libraries and share any updates.

[@findyourspot2nite]

This walkthrough was soooo helpful for me in getting started in Adobe Animate. Thank you so much!

[@AngeloMontilla]

You're very welcome Claire. Glad it helped you get started!

[@shahidrasool1414]

producer's version? I just want to make sure I get the right one for .

[@jeffdowns9513]

Great tutorial - very well explained and brilliant to follow- thanks

[@AngeloMontilla]

Thanks Jeff! Glad it helped you!

[@rogerngu830]

Thanks Angelo! Great tutorial. Very clear and easy to follow. I'm going to apply this to a web banner.

[@AngeloMontilla]

That’s great! Thanks Roger!

[@Achro717]

where do you get the graphics from? Great video btw!

[@Andreas-x2r]

How would your workflow look to convert it to a 600x300 banner instead? :) Once you are done and you need to make it in 3-4 different screen sizes, what's the next step then?

[@dillonkay1683]

Thank you so much, Angelo, huge help!

[@andy0245]

Could the finished file - be exported and used for digital billboards

[@AngeloMontilla]

Hi Andy. The exporting options in this case would be video and gif. I guess it would depend on the type of file the billboard company you're working with would require.

[@andy0245]

@@AngeloMontilla okay thanks. Something to definitely ask them - great work btw 🙂

[@tedz2000]

Can u add a url to the learn more text or any text great video,,,,

[@AngeloMontilla]

Hey Tedz! Yes, I cover that here: kzbin.info/www/bejne/o5CQfYOuiLaIbbs

[@wossenufisseha4806]

Excellent vid!! Very thorough and easy to follow. The best vid I have ever watched!!👌

[@AngeloMontilla]

I am very glad to hear you found it helpful. Thanks!

[@AndreaCinnamondCreative]

Can these be used in social media as videos? I imagine they can be.

[@AngeloMontilla]

Yes! You sure can. Same process: File > Export > Export Video/Media. It typically runs through Adobe Encoder on export so you may need to download that app as well. Once you have the vid, you can share on your social feeds.

[@victornguyen2549]

How to add hyperlink video on banner GDN. Help me plsss

[@sammy5294]

Excellent video ...............................Thank You !!!

[@nanaofosu542]

Hi I love this tutorial, which is easy to understand. I wanted to find if you can animate whatsapp Conversation too

[@AngeloMontilla]

Seems like quit a bit of work, but it's possible. I'd actually consider using After Effects for something like that.

[@inez2423]

Oh my God, this is so easy to follow. There are some parts missing but that can be fixed by ourselves. So happy! Thanks a lot!!!

[@harry486]

Isn't there a better way to set the total length (like in AE) than to set a column of blank keyframes? When I do that I get a blank white frame at the end of my animation.

[@angeljr572]

i really apreciate your help with dowloanding this software

[@DrinkCola]

I wish that you teach us how to make a game like GTA5

[@richiemadrid734]

Great video - Thanks a lot for sharing!!!

[@AngeloMontilla]

Thanks Richie! Glad you found it helpful.

[@manigraphic4630]

As always great and beautiful

[@AngeloMontilla]

Thank you so much 😀

[@andreas_triant]

So google ads need a typical gif file that can be made even in After Effects or Photoshop, is that right?

[@AngeloMontilla]

That is correct Andreas. If you're just adding your own GIF that directs users from the ad to the URL, you can create using Ae or Ps - both great options - and upload to Google Ads.

[@AngeloMontilla]

Just keep in mind that the image should be maximum size of 150 KB.

[@andreas_triant]

@@AngeloMontilla I thought they needed html files, can you also make those with adobe suit?

[@AngeloMontilla]

@@andreas_triant Sorry I misunderstood your initial question. Yes, you'll need the compressed HTML/js/images folder to upload creative to Google. To do that in Animate, you'd go to File > Publish and those assets will be created for you. There are some extra coding steps like adding meta tags to the HTML before uploading to Google, but that is why using Animate is a good option. You won't have that HTML publishing option in Ae or Ps. I hope that answers your question. Take care.

[@andreas_triant]

@@AngeloMontilla wow yeah that's in depth, thank you!

[@timaging]

I see you did not export as HTML5. Any particular reason for that? I've found a bug too, where you can't see the HTML5 animation on a machine using Zscaler

[@gavinrain7824]

Quick question if I may. When I use actionscript "click to go to web page' on the button to link to a website it does not test properly. All it shows is the dark background with non of the other elements. As soon as I remove the actionscript it tests properly again. It is really annoying and frustrating!. I followed the tutorial properly and the final part of adding the script does not work. Kind Regards

[@sunrose6372]

Thank you for the tutorial! This is my first time using Adobe Animate. I have a question, I'm making a vertical ad that I want to turn into a gif, and place into an iphone mockup in Photoshop (I'm creating a conceptual TikTok ad.) I created a canvas with the Half-page ad dimensions you mentioned in this video, but when I exported my file as a gif the image/animation quality was a bit blurry. I was wondering what pixel dimensions you recommend I use for this project?

[@AngeloMontilla]

The half page ad size would be too small for TikTok. Make it 1080x1920 and you could also double the dimensions if you want to increase the quality (2160x3840). The other option is keeping it 1080x1920 and increasing the quality on export to GIF. I hope that helps!

[@JandoFra]

ITS REALLY WORKED LOL THANK YOU DUDE

[@carsonnewman7310]

When Uploading to google your animations must be under 5fps, is there a way to do that without it being so choppy? Should i create the animation at a normal frame rate and slow it down in another software?

[@12stem-lamundaoruztomk.92]

I bought the Fruity Edition and tNice tutorials tutorial helped out a lot!

[@rajnipaul8754]

Please continue your animate cc tutorials 💓

[@AngeloMontilla]

Thanks Rajni. That is the plan!

[@rajnipaul8754]

@@AngeloMontilla i am a student of graphic design and 2d animation from a reputated institution in India but I can say I literally learned interactives (InDesign) from your channel. Thank you. And thank you for your sweet reply.

[@mahmoudhamzawy2389]

What program are you using?

[@AngeloMontilla]

Adobe Animate

[@vw3005]

Super Helpful! Thanks for the tutorial :)

[@AngeloMontilla]

Very welcome!

[@SupernovaSites]

How much do you charge for one of these animate ads?

[@CloudsLikeThese]

Great video. Can any of these Adobe Animate be incorporated into Adobe InDesign 'publish online' documents?

[@andrearodriguez6017]

now i am in a good mood

[@AbuAya245]

Thank you sir. Very helpful tourturial 🙂!

[@AngeloMontilla]

You're welcome Ahmad. I am glad it helped!

[@marlenekernwebdesign]

Thank you Angelo, your tutorial is great♥

[@AngeloMontilla]

Thank you! There's much more to come! I am glad they are helping you!

[@marlenekernwebdesign]

@@AngeloMontilla They are helping so much, you explain it fantastically❣️👏🏻👏🏻👏🏻

[@tylergoscha4428]

the issue that I have is that the files need to be 200kb gifs and it can be hard to get a gif that small. any insight on how to do that? thanks

[@zeny18]

thank you straight to the point

[@themirproject]

why dont do this premiere?

[@AbhayBelavadi]

Wouldnt it be better to use After FX instead?

[@AngeloMontilla]

Hi Abhay! Great question. Yes, you definitely could do it in Ae. However Animate allows you to export for HTML5 as well. Animate is a tool for incorporating video footage into presentations for the web and mobile devices, whereas Ae is focused more on video production. Hope that answers your question. Take care.

[@AbhayBelavadi]

@@AngeloMontilla I did my VFX for adobe suite. So with regard to animate the knowledge I know is for frame by frame animation. But with AE there are ways to reduce the size while exporting for web even as a gif.

[@rahulv5345]

Thank you so much🤍

[@alexanedda3960]

Great job

[@matalankhoma9099]

Hi Angelo. Would i be right to suggest that Adobe animate is the former Edge Animate?

[@AngeloMontilla]

Hi Matala! It was formerly Adobe Flash Professional. With Flash being phased out, Animated focuses more on HTML5.

[@brooketier8411]

How do you export to a certain file size? When using html5 for digital ads they must be below 150KB which seems impossible for animation :(

[@lovejko]

Thank you!

[@fortunelifeinsuranceplc2947]

thank god i finally know how to rena stuff

[@jambokofficial]

Very Nice, but why would I do this with Animate if it is possible to do it in Premiere Pro ? Thanks fot the video Anyway !

[@AngeloMontilla]

Hey Boki! Great question. I suppose you could very well do this example in Premiere Pro for video use. I will be adding interaction in upcoming videos, such as clicking and hyperlinking buttons. I hope you can join in on those. Take care.

[@sharonlewis1108]

I like this because not everyone understands how to use Premier Pro. So this is a start for me to understand animation is the simplest form.

[@Pinguin14]

Thank you

[@marccruz8495]

The reason for my asking, is due to crackling/distorting soft, whenever the drum/snare, or whatever is playing. TNice tutorials was the case off

[@MoistFireCracker]

wanting. The idea was to get a midi keyboard and use the softs programd into soft soft, however, if I can't find tNice tutorials core soft, I

[@clarisaramos2154]

THANK YOU

[@bearsvalleyroofing]

Can anyone tell me why when I export the quality is poor?

[@AngeloMontilla]

Hey there! You can double the render size in this case for better quality vid. When exporting, change the render width to 600 and height to 1200.

[@bearsvalleyroofing]

@@AngeloMontilla Thank you for the quick reply. That worked!

Perfect 👏👏👏

[@pukoh1523]

no symbols?

[@webzzotservice1389]

Thats helpful

[@AngeloMontilla]

I am glad it helped you! Thanks!

[@NalinDubey]

Bckgroud music is not required. Its causing distraction.

[@joseph-the-seventh]

Only problem is these GIF and video files are too large to use as banner ads in the real world. I thought the benefit of Adobe Animate was to being export animated banner ads as HTML5?

[@AngeloMontilla]

Hey Joseph, you sure can. To publish as html, go to File > Publish. This will package all the images, html and js in folders. Just keep in mind that some of the animation and interactivity won't work when you try to preview it in a browser on your local drive after it's published, so you'll have to host the html on a server in order for it to work as intended. I use a program called Brackets.

[@johndavidmonterey229]

ok thx!!!

[@DerekOdahl]

seriously need a video about publishing HTML5 AND UPLOADING TO A WEBSITE. There is nothing anywhere for this.

[@tinabasim6676]

cant even get past the part on how to make a w file lmao

[@cijohnbaby6885]

norman is that you

[@muhammadfaridrahman1902]

--- I got a good computer

[@MoE-il8yw]

Please remove the background music, it's distracting. Thanks

[@sekolahkebangsaansungaiach5195]

thank you so much , it worked 