Learn how to create an interactive infographic using Adobe Animate
Вставка
- Опубліковано 20 лип 2024
- Follow along in this tutorial and learn how create an interactive infographic using Adobe Animate. In this lesson, learn how to add motion tween animation to windmills and clouds in the infographic presentation as well as set up interactive buttons.
Full tutorial w/notes: bit.ly/3gTaMpy
Gibson Font Download: fonts.adobe.com/fonts/gibson
0:00 - Intro
0:30 - Creating a new document
1:06 - Importing Illustrator file to stage
2:40 - Adding motion tween animation to windmills
8:39 - Adding motion tween animation to clouds
12:43 - Adding classic tween animation to info boxes
16:18 - Adding Stop actions to info box animations
25:10 - Adding Play actions to buttons to trigger info boxes
29:18 - Viewing the final animation
Want to learn more about Adobe Animate? Check out these videos!
Learn how to create animated digital ads using Adobe Animate:
• Learn how to create an...
Learn how to create a script text animation in Adobe Animate: • Learn how to create a ...
Really clean tutorial without useless info in it. Easy to follow along with and extra thanks for making your assets available to try myself. Thank you sooo much!
honestly the best soft tutorial ive ever seen. short and straight to the point ! i love it
Your Adobe Animate tutorials are fantastic. I'm so glad I've found your content. 😊
Excellent tutorial! Very informative and easy to follow.👍🏼
I've looked at a couple tutorials on how to create interactive buttons for an infographic using Adobe Animate, but nothing has been as helpful as your video! Thank you SO much!
Very welcome! I am glad it was helpful! 🙂
@@AngeloMontilla Your Link doesn't work. Can you provide the link of this illustrator file?
Nice video man, clear and concise explanation! Thanks a lot!
Literally am going from using Ableton to soft and tNice tutorials helped trendously as a beginner. Thank you so so much for tNice tutorials!!
I've been looking for a tool like this for years!
Angelo, how could you be this incredible? Thank you!
You are too kind Olise! You're very welcome. Getting messages like this and knowing I was able to help you learn something new is rewarding for me. Thank you!
Great tutorial. Thanks so much!
Hello, new subscriber here! A great tutorial and easy to follow. Thank you so much!
Really helpful tut, thanks a lot, mate!
'fantastic your pace is excellent, thank you
Exactly what I was searching for! ✔ Thanks Angelo !
Glad I could help!
You are the man!!!!! Thank you!!!
Fantastic tutorial!
Cannot wait to try it out myself!
You're welcome! Have fun!
Thank you! This was incredibly helpful.
Glad it was helpful! Thanks!
Finally someone who explains it and I understand it. You are amazing,!
Thank you! Glad it helped you!
Hi Angelo thank you so much for this tutorial it is really helpful
I am glad you found it helpful. Thank you!
very useful brother thank u so much...
Believe in yourself, our determination is sotNice tutorialng that never lets us down
Thanks for the video its helping me come along with my hw!
Awesome! Glad it helped!
That Guy Thanks, I will look into it later.
Man, I've been using Animate since it was Macromedia Flash 3 (even coauthored a book on Flash MX when it came out) and learned XML solely for my love of what SVGs could possibly do (late 90's I think? I'm old, I dunno, lol).
Anyway, this just came across my feed and I felt compelled to give you some props for a really well done informative/introduction type video on this.
As an old gen-x head, it's really cool to see a knowledgeable young gun like yourself being hyped on a painfully underrated program and introducing folks to a world of keyframing (and nesting, lol) unlike that of video (if you want it to be).
It's just funny as there was always a lot of anti-Flash sentiment when .swf files were ubiquitous (some of it justified), and I remember a huge "Flash is dead, hooray!" sentiment once Steve Jobs refused to let it run on iPhone. Still, there's sooooo much great stuff created in the Flash/Animate environment, people just don't know.
Sorry for the rambling, mate- I just like your demeanor end energy, and it brought me back a bit. Cheers from Louisiana, fam!
Thanks for sharing that bit of history! That's so cool.
I only started using Animate a year ago when I discovered the power it has to produce HTML5 infographics, ads and presentations. You're right, it's very under rated and I am hoping to bring more attention to this awesome program on UA-cam! Thanks again!
Great work, super informative
Thanks Sean! Glad it helped you.
Hi angelo, thank you for this informative video. Is it possible to make an image pop up instead of text when you click the + symbol? Thanks!
Hi Angelo, thank you so much for the awesome tutorial! I downloaded the file and it only appears one layer, Layer 1 and no animation, I can't seem to make the other layers show, is there a way where I can adjust that? I tried ungrouping and nothing works. Thanks in advance :)
super , thanks a lot , for your job
You are welcome!
thank you 👍
Really great and easy to follow your tutorials
Happy to hear Mo! Lots more coming so hope you can keep learning! 🙂
@@AngeloMontilla I used to be terrified of Flash, it brought me anxiety, but bro, you helped me get over that anxiety. Now I am creating interactive Infographics, impressing my manager 🙂
@@MoE-il8yw I love hearing stories like this! Glad you have found them helpful! 🙂
This is great. Quick question, how would you set a timer on the popups? Let's say someone clicks one of the buttons and leaves. After a certain amount of time, you want the popup to go away. Is that something set in the main timeline's Actions layer or the popup Action layer? It would seem like you'd want to check to see if the playhead of the popup layer is at frame 15 for X seconds. If it's it plays again to reset it.
Beautiful!!! Angelo
Many thanks!
very nice, i love that, i want publish infographic in my site, what can i do?
Hi there - thank you for these helpful videos. Is it possible to perform an action using a mouse over instead of a mouse click for the pop outs you've created?
your ti to explain sotNice tutorialng
Hi Angelo, This is really clean tutorial. Thank you so much for sharing this information.
I have one question, for some unknown reason, I am not able to export the file in GIF or Video format. It gets saved in the following order: One Image (without animation), One HTML document and One JavaScript file. Can you pls let me know if any additional settings I have to do in order to get the proper GIF or Video file?
Hey there! To export as a video, you will need to also download Media Encoder. In Animate, go to File > Export > Video/Media and in the format, ensure it's set to .H264. Export and that will launch Encoder which will convert it to an MP4 and save it to your computer. Please note, that for this project specifically the windmills will look fine in the video but the button actions/animations will just loop forever. This project can't be exported for GIF. But if you wanted to export a project for GIF, you'd also use the same process - File > Export > Export Animated GIF. All the best!
@@AngeloMontilla yes i tried to export it by using the same method both for gif and video.. I also have encoder but it doesn't get exported with animation... Is there any specific settings I have to do?
I fucking love you mate!! I saw a lot of videos for soft but tNice tutorials one is handsdown the best one! Love how your super calm and really take
Thankyou so much
You are so welcome! 🙂
Thanks Angelo, Can you please explain how you would use this or in what format would you export it as. This is rather exciting to amp up future projects.
Hey Roger! Animate is a great tool for multiple exporting/publishing options. Here are just a few to consider:
• Firstly, if you wanted to create a simple animation for social or email, you can export as Animated GIF by going to File > Export Animated GIF. Note you can also import this in your InDesign projects.
• Alternatively, you can also File > Export > Video/Media to export as .H264 (otherwise MP4) to share on social, email, etc.
• Finally, you can go to File > Publish Settings to set your Javascript/HTML settings for export. This creates js, html5 and image folders on export for a developer - or yourself if you know how to implement this on your own site.
I hope this helps you! Take care.
@@AngeloMontilla Hi Angelo, I have tried to export this and the click button triggers don't trigger the popout text when exported. But it does work in the test - any way you can help resolve this?
@@amieshannon9083 Hey there! The exported project at times won't fully work locally outside of Animate unless it's hosted on server.
• Go to @t and download the software
• Go to File > Open Folder and choose the folder that you published from Animate with HTML, js and images.
• Go to File > Live Preview to view the work with the working buttons.
I love this guide. However I’m having a really hard time. I did everything you said and when I test my inanimate graphics are not showing up. What am I doing wrong?
You are awesome!!
Thanks and I am glad you found it helpful!
Excellent Tutorial, very Clear, great Video thanks! Just one question now that the interactive infographic is created how or where can I export it so as all elements, including the interactive buttons will work. When I "test" the file all works great but if I say export to HTML only the animation runs and no access to the buttons. What format or software would I be able to present a similar file (animations & Interactive buttons) to a client that they can see, run and use by clicking on the buttons? Again great tutorial will be following for more! and many thanks in advance.
Hi Kieren, it's because when you publish as HTML, it has to be hosted on a server. It won't work if you try to view the HTML file from your local drive. I use a program called Brackets to test out the project. Open Brackets and then add the folder containing the HTML, js and images. Go to File>Live Preview and it should work from there. All the best.
@@AngeloMontilla Thank you very much for your response Angelo much appreciated and again great video and advice
If you use Davinci Resolve, could you please reveal how you create the animated rectangles (frames) in 0:50 ?
you are the best!
😊
thats a good sign imo
Bless u ❤❤❤❤❤
Hi there!, great tutorial, loved it! Just a quick question, when i export the animation as movie swf. the buttons will not work, when i preview in html they work just fine, but in swf format the text box just loops on and off. How can I fix this, i think all the coding is just right, i don´t know if it is a matter of export maybe?
Hi Francesca! You have done everything correctly. However this project is meant for HTML viewing, not Flash. Also Adobe has phased out flash over the years so it's harder to view these types of projects in a web browser or even flash player. I would suggest Publishing the HTML/js and images instead. Hope that helps you. Best of luck!
Why did you use motion tween for the clouds rather than a classic tween? Just wondering when to choose one vs the other
Keep on doin what u doin
Do you have a video showing how to edit softs????
like you add your own sample to the soft roll and when you play it it always plays longer than what is shown in the soft roll and
I love it Sir can you help to edit
Hi Angelo, i'm more impressed with your layout and styles which is more mordern and minimal. After viewing all your tutorial have a question
"why do we need to create interactive pdf with InDesign alone why not with adobe XD?". Is there any technical reason in it. I thought idesign is for print media. And rich media or interactive media is in epublishing file formats like rtf, ppt, XML, where more event and action placed with video player
Help me in my doubt, i don't know industry standard about interactive pdf creation
Hi Raj! Xd is not meant for digital publishing, but more user experience design (web, mobile, etc). That being said, PDF interactive cannot handle the rich media it once could, such as video, audio, etc. That is why the Digital Publishing tools built into InDesign are very useful in taking your layouts and publishing them directly to the web or exporting for EPub (Fixed Layout). It works off HTML interactivity, and not Flash, which is the main reason it won't work for PDF any longer.
@@AngeloMontilla thanks for reply.
As you said pdf don't take rich media and animation any longer is there any other tool to create such html interactivity pdf. Does InDesign is only tool to work with.
arrow forward once to get "Analog app 1 TE" like he uses in the video or simply find one you'd like to use alternatively instead.
Mylosp thanks man
I’m overwheld it’s soooo much
Can I integrate this in programs like Articulate Storyline?
Hi Angelo; I am Graphic Designer who is new to Adobe Animate and your tutorial is the only one closest to what I have been tasked with doing! I have to create an external presentation. Our video person thinks adobe animate would work well for this, but I have not seen now you can create slides, and have someone be able to move through it as a presentation?
Hi Stacie. Sorry I am just catching this comment now. I am going to have a video coming out soon on how to do this, but basically it would be working with the Scenes panel. Stay tuned for the video and I hope you'll be able to implement it to your future projects.
@@AngeloMontilla thank you!
thanks for the tutorial! can adobe animate export the works into an app format? I'm currently learning how to make interactive children book app so there's a lot that I haven't know yet
Hi Karlina! For anything UI/UX related where you'd be designing and prototyping for mobile application - you should consider using Xd for that.
@@AngeloMontilla Can this be placed into a website?
Thank you so much for this video, it really helped a lot, could you also please let me know how to export this file in HTML format?
because when i publish, i am not able to find the interactivity in the file.
Hi there! Go to Publish Settings, and then choose JavaScript/HTML. Also choose "Make Responsive" to ensure it can be viewed on all devices. Click Publish. You are probably opening the HTML and seeing that much of the animation is not working. This is because the project should be hosted on a server. I use a program called Brackets, but you could use Dreamweaver.
In Brackets, open the folder containing the js, html and images. Then go to File > Live Preview, and you will notice that the interactivity and animation will work as you set it up in Animate. In terms of getting it live to your own site, you'll need help from a developer.
@@AngeloMontilla that was a really great help thank you so much. one last thing, how can i share that file with someone if i need to share the output for the developer
please its a request can you help me on this
Loving your tutorials! Only problem is when I finished it the info bubbles don't stay open they just quickly open and shut. Any reasons why that might be? I've done it three times and it keeps happening. Hoping you might have some insight! Keep it up though, loving these animate tutorials.
Hey there! How are you exporting?
@@AngeloMontilla I was exporting it as HTML but I started it again from scratch and realised I missed a keyframe! They work perfectly now. Not sure how I kept missing it but I'm glad I solved it. Thank you for your reply. Can't wait to see what other tutorials you produce!
@@alexm7574 Love to hear it! Thanks!
Will these be responsive on mobiles as well?
are you exporting as a Flash file? What format is your final deliverable?
Thank you very much for the seful video! I am synchronously working on this video but when I test it, the windmills doesn't rotate after opening up in the browser. What do you think I am doing wrong 🤔
Hey there. It has to be published to a server for the animation and interactivity to fully work. I use a program called Brackets. Upload the HTML, js and Images in one folder then go to Live Preview. You will see once it is hosted on a server, all the animation will work.
@@AngeloMontilla thank you very much for the explanation. My problem was choosing the graphic not movie clip. Many thanks,
The truth is that the unknown scares all of us, but we just have to practice so we can get well with the software.
is this then exported as a gif? or other type of file?
All tutorial shows the interactive preview, but no one dimostrate how to use the exportations on the web or on other advice or in the same computer.
Infact the preview inside Animate always works. Not the same outside.
one confusion is there, how to get the swf file from this animation? please let me know
Hi Angelo, I followed this tutorial and it all seems to work fine, but when I try to publish (export) my project I only get a .js and .html file. I get no image asset folder.. Have you had this problem before and do you maybe know how to solve this?
How to export this interactive inforgraphics I am clicking on the html that was created but nothing is happening in that even though js is linked in the html but it's not functioning.
2 years passed damn
I fucking love you man you saved my ass at the last minutes im giving back my homework in an hour 🙏🏻🙏🏻🙏🏻🙏🏻
So glad to hear this Abdennour. Happy to hear it helped you!
Can anyone give a link to download crack soft soft ?
I'm sorry for being such an ignorant. But can this interactive illustrations made with Adobe Animate be embeded in a website? For example WordPress using Elementor Pro. Thanks in advance!
Rafael, don't apologize for asking a good question! In Animate, you can go to File > Publish Setting. Ensure that the JavaScript/HTML box is checked and publish the project. This will create folders with HTML and js as well as the images included in the project. You can use the code in WordPress backend. I hope that helps you.
@@AngeloMontilla I don't know about Rafael but it helped answer my question. I work with Wordpress & Elementor Pro. Great work. Just one other thing though does it not create code bloat? I have several ideas but am worried about page load etc.
Renewable_Energy file doesn't work on my PC
I can't find the file. The Link dosn't work.
Is this only to display on a website as an html5. Or could I export it in a format that could be sent to someone to view on phone or an email
Hey there. What are you thinking? Back in the day this would work in Flash Player but not any more.
With support from a developer, you could actually send inside an email. But I think your question is, is there a program that will open the project. The short answer is no. That is why I always suggest HTML5 vs. ActionScript. I am sure there are third-party apps out there, but I don't know of any.
Hi, is it possible to export the animation as a pdf , or will it lose all the animation?
Hi there. No, animation will not work for PDF.
Does the same thing apply if I'm using action script instead of html or is there a different method for action script?
ActionScript 3.0 is still supported but JavaScript (HTML5 Canvas) is more modern and widely used.
My animate animations does not worl on browser Crome. Why?
where would you host this? or could you place this into an interactive ebook?
You can export the HTML/js and host it on your own site. You'd need some help from a developer to implement the code to your site, if you're not familiar with that.
I want to make my own stock market charts with my own custom tools. Could I do this with Adobe Animate?
Where are you making the stock market charts? When you say Custom Tools, what software are you using?
@@AngeloMontilla 1. I have my own overlays similar to MACD I want to plot.
2. On top of that I want to plot the outcomes of my analysis tools over historical data for bug testing of analysis tools.
3. I want to have those analysis tools run interactively as I scroll over the plots showing micro plots and statistical data in real time.
I tried things like TradeView but it just doesn't have the capabilities that I want to customize it the way I want it unfortunately
I figured I would need some some sort of program that plots things like vectors
@@Kokoda144 Ok so the graphics are already built? If you save them in an Illustrator doc and import that into Animate, yes you will be able to animate your charts.
Cal Toe Productions It’s worth it
the canadian accent is strong
Thanks, eh! It's ironically Canada Day today! 🍁🇨🇦
Add using wizard is greyed out I don't know what to do?
Hi there. You're probably working in an ActionScript 3.0 document. Go to File > Export to > HTML5 Canvas.
@@AngeloMontilla Thanks
I already made a soft in like 3 hours its that hard
Can photoshop works instead of illustrator?
Yes you can import layered PSDs to the stage as well.
Can you email the interactive infographic and still have all the animation work?
Hey Phatsany! Projects using just animation can be exported as an animated GIF (File > Export > Animated GIF) or Mp4 (File > Export > Video/Media) and certainly can be included in email. All the best!
@@AngeloMontilla thank you! Love your work and learning lots from your videos!
angelo i've published to html, but the buttons stop worked :( how do I share this?
Hey Mariana! The project at times won't fully work locally outside of Animate unless it's hosted on server.
• Go to Brackets.io and download the software
• Go to File > Open Folder and choose the folder that you published from Animate with HTML, js and images.
• Go to File > Live Preview to view the work with the working buttons.
@@AngeloMontilla thank you so much for your feedback. doest it work on a pc? im currently working on one. thank you so much angelo
@@AngeloMontilla ohh i see its like visual studio code
I'm having an issue. I created the symbol but after I double clicked, the right-clicked to select motion tween, I got asked again to convert into a symbol!!
It will typically re-ask you to convert to symbol again. If you already converted to Symbol, you should be fine.
better, but is also more professional
Where your part2 video???
Hello, can you help me? When I test my infographic, it works perfectely, but if I pubblish it, it doesn't work. How can I solve this?
Hi Sara! The infographic buttons won’t work locally and has to be uploaded to a server to test the button interactions. You can download the software Brackets and upload the folder containing the html, js and images that you publish from Animate. Once uploaded in Brackets, go to File > Live Preview and that will launch in Chrome with the buttons operating properly.
@@AngeloMontilla Thank you very much! You're amazing. I'll try immediately 😊
But I have a question! !
and just pay more attension. I envy you mate.
Hello sir! New subscriber here, I would like to know if this can be put in email please?
Very helpful, but please don't be afraid of silence. The music behind is annoying. sorry to say that!
🍀 Promo`SM!
Nah, too