I am having troubles still though with responsive scaling of an embedded youtube video. Responsive repositioning of elements var r = this
#ADOBE EDGE ANIMATE CC EXAMPLES CODE#
Responsive scale code as expressed by modified by page_body = document.getElementsByTagName("body") Responsive scaling ignoring aspect ratio /* Page_ = ((window.innerWidth - newWidth) / 2) + "px" Page_ = ((window.innerHeight - newHeight) / 2) + "px" Scale = newWidthToHeight / widthToHeight Var newWidthToHeight = newWidth / newHeight Var widthToHeight = stageWidth / stageHeight Viewport = document.createElement('meta') Var head = document.getElementsByTagName('head') Var viewportContent = 'width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0' Var viewport = document.querySelector('meta') Var page_canvas = document.getElementsByTagName("canvas") Responsive scale code as expressed by page_body = document.getElementsByTagName("body") Responsive scaling while respecting aspect ratio /* Here are standalone code examples if you would rather reference these in stead of downloading the FLA files above! Responsive scaling ignoring aspect ratio.Responsive scaling while respecting aspect ratio.
#ADOBE EDGE ANIMATE CC EXAMPLES DOWNLOAD#
You can download the 3 FLA files used in the video with all the code you need: That said, there are other tools like Dreamweaver, Muse, and the like which do responsive DOM focused stuff today… and these are not going anywhere. Edge Animate was very restrictive (HTML5 DOM only) and Animate CC is completely agnostic in regard to platform (Flash Player, AIR, iOS, Android, HD Video, WebGL, HTML5 Canvas, Windows, OS X, GAF, Away, SnapSVG, et cetera) providing huge amounts of creative freedom not possible in Edge Animate. In the end – Edge Animate and Animate CC have very different ways of working with content. Though I have no knowledge of any plans like that at the current time (which means nothing except that I don’t know). Here is a video demonstration of 3 different scaling methods based upon browser window resize using Animate CC HTML5 Canvas output:Ĭonsidering that Animate CC has a fully extensible SDK for creating custom publish formats… and that SnapSVG Animator (one of the most popular) actually does output an SVG DOM… there is really no reason why Animate CC cannot, in the future, output an HTML DOM as well. It was all done through a little code and worked great – even before browser-based responsive DOM was even a thing! In the days when Animate CC (as Flash Professional) only output to SWF, I used to dynamically scale and reposition elements across the document at runtime in many of my projects – especially regarding things like video players and other size-variable modules that would exist as embedded web content. The main difference is that you’ll have to write some JavaScript to accomplish this as there are currently no GUI elements in Animate CC to make it a visual task. However – being able to scale and reposition elements within an Animate CC HTML5 Canvas document is absolutely possible. So a lot of things like media queries and such, as employed by the Edge suite, go out the window. Animate CC is platform-agnostic (not specifically an HTML tool) and works differently in terms of targeting a single element when targeting HTML5 Canvas (the canvas DOM element). So many, in fact, that I decided to produce a number of demonstration projects, record some video on each one, and write this little article.įirst, I’ll just emphasize that the way Edge Animate handles things like element scaling and sizing is very DOM-oriented… because it works within the very narrow focus of the browser DOM. I’ve received a lot of inquiries by Edge Animate users as to how to make items responsive within Animate CC.
0 kommentar(er)
