Highlighted

Best Practice: Interactive Animation in Dreamweaver

New Here ,
Jun 13, 2018

Copy link to clipboard

Copied

Hi Dreamweaver Community,

I have just started experimenting with the Dreamweaver software and trying to include an Adobe Animate Interactive in the basic page.

Are there any best practices, or things to avoid when using a HTML5 interactive import into dreamweaver? Things to avoid, or even best workflow from Animate CC to Dreamweaver CC.

I can get simple animations running (2 shapes - 2 interactions) however when larger animations are built (Single frame - 10 shapes - 10 interactions) it freezes Dreamweaver every time.

Thank you in advance.

The main point to remember when creating interactive animations using Animate, is to keep it simple and obvious.

Why obvious? Simple, your interactive animation will be viewed and hopefully used on mobile devices. Such devices do not have a mouse so there is no feedback to the end user regarding the functionality of any item,as all they have is touch gestures. If your interactive animation relies on hover actions then without extra javascript programming which Animate does not include the end user has no idea what any of your graphics actually does. Even with the extra javascript the end user still requires descriptive feedback as to the functionality of each item.

Then we come to bandwidth on mobile devices. Animate files are extremely large for what they do, this means increased file size(s) that the end user must download. So for anyone on a limited downoad plan, Animate created animations should only be used when absolutely necessary, (4+Mb downloads are excessive, though many Animate, Muse and some framework users think otherwise).

Views

357

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Best Practice: Interactive Animation in Dreamweaver

New Here ,
Jun 13, 2018

Copy link to clipboard

Copied

Hi Dreamweaver Community,

I have just started experimenting with the Dreamweaver software and trying to include an Adobe Animate Interactive in the basic page.

Are there any best practices, or things to avoid when using a HTML5 interactive import into dreamweaver? Things to avoid, or even best workflow from Animate CC to Dreamweaver CC.

I can get simple animations running (2 shapes - 2 interactions) however when larger animations are built (Single frame - 10 shapes - 10 interactions) it freezes Dreamweaver every time.

Thank you in advance.

The main point to remember when creating interactive animations using Animate, is to keep it simple and obvious.

Why obvious? Simple, your interactive animation will be viewed and hopefully used on mobile devices. Such devices do not have a mouse so there is no feedback to the end user regarding the functionality of any item,as all they have is touch gestures. If your interactive animation relies on hover actions then without extra javascript programming which Animate does not include the end user has no idea what any of your graphics actually does. Even with the extra javascript the end user still requires descriptive feedback as to the functionality of each item.

Then we come to bandwidth on mobile devices. Animate files are extremely large for what they do, this means increased file size(s) that the end user must download. So for anyone on a limited downoad plan, Animate created animations should only be used when absolutely necessary, (4+Mb downloads are excessive, though many Animate, Muse and some framework users think otherwise).

Views

358

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jun 13, 2018 0
Adobe Community Professional ,
Jun 13, 2018

Copy link to clipboard

Copied

Use an iframe to run the animation as per Display an Animation on a Webpage using iframe - YouTube or Google th subject.


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 13, 2018 1
Adobe Community Professional ,
Jun 14, 2018

Copy link to clipboard

Copied

Animations exported from Animate CC tend to be rather large files.  I wouldn't inflict too much gratuitous animation on users if I could avoid it.   A lot of interactive stuff can actually be done directly in DW with CSS and JavaScript code resulting in a much smaller footprint.

As an example, Wow.js library animates elements on scroll with only 3KB of bandwidth.

https://mynameismatthieu.com/WOW/

Nancy O'Shea, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 14, 2018 1
LEGEND ,
Jun 15, 2018

Copy link to clipboard

Copied

The main point to remember when creating interactive animations using Animate, is to keep it simple and obvious.

Why obvious? Simple, your interactive animation will be viewed and hopefully used on mobile devices. Such devices do not have a mouse so there is no feedback to the end user regarding the functionality of any item,as all they have is touch gestures. If your interactive animation relies on hover actions then without extra javascript programming which Animate does not include the end user has no idea what any of your graphics actually does. Even with the extra javascript the end user still requires descriptive feedback as to the functionality of each item.

Then we come to bandwidth on mobile devices. Animate files are extremely large for what they do, this means increased file size(s) that the end user must download. So for anyone on a limited downoad plan, Animate created animations should only be used when absolutely necessary, (4+Mb downloads are excessive, though many Animate, Muse and some framework users think otherwise).

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 15, 2018 1
New Here ,
Jun 17, 2018

Copy link to clipboard

Copied

Thankyou all

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 17, 2018 0