From Flash to GWD ?

[Bernd Hopp]

Hello, I am a GWD-newcomer, working yet with Flash. Attached find zip's, showing an animation in Flash (ShowFlash.zip = Flash result working with Firefox and Chrome), (SourceFlash.zip = Flash construction files) and my try with GWD (ShowGoogle.zip = GWD result), (SourceGoogle.zip = GWD construction files). The GWD-Files as Banner 640x360 pxl with DoubleClickStudio work basically but there are some functions from Flash which I search in GWD:

- Flash Window is a functionally mask, no position outside the working stage can be seen, that is ideal,

- the two reverse animations of the earth below and the sky above is infinite and works without problems,

- Flash can work with groups of symbols wich do not increase the files size, GWD needs images of full size,

- the PDF-file in the SourceFlash.zip shows the Flash settings with fixed percental windows of high quality,

- fitting exactly windows, the animation everytime concentric and constantly with an equal frame etc.

But the downside of Flash today is, less and less systems will work trouble-fre with Flash in future, such as Windows 8.1 with his Internet Explorer 11, and still more the modern equipments to go. What can I do to get simular GWD results like this above Flash uses ?

Greetings to all from the GWD-newcomer Bernd of Germany.

[Nivesh Rajbhandari]

Hi Bernd,

Thanks for posting your example so we could take a look at it. Please see my answers in blue below:

- Flash Window is a functionally mask, no position outside the working stage can be seen, that is ideal,

NR: "When you Preview your content, GWD adds a lightbox CSS style that hides any overflow so you get a sense of what your content will look like within a specific viewport size. It masks/clips like you expect.
However, when you publish, GWD does not export this style since an ad may be authored for multiple device sizes utilizing content-aware techniques to show more content for bigger devices. Since most ads will be shown within an iframe or web view of a set dimension that you specify (like in DoubleClick Studio), the overflowing content will be hidden by that view.

But, if you are sure you want to hide the overflow, you can manually add that style to the following CSS style in Code View:
.gwd-page-wrapper {
  background-color: rgb(255, 255, 255);
  position: absolute;
  -webkit-transform: translateZ(0px);
  overflow: hidden;
}

Note that since our stage is just a browser rendering the content, this will also affect how the content displays at authortime -- that is, it will hide the overflow at authortime as well. That is why we don't do this by default. Several beta users have asked this same question that I think we should expose this as a setting that will automatically add this style at publish.

(I attached some examples. But in my examples, I created a standard HTML file instead of an Ad. I then used a DIV element with the appropriate styles.)

- the two reverse animations of the earth below and the sky above is infinite and works without problems,

NR: You can set your animation to repeat infinitely (loop forever) in CSS as well. However, you need to make sure your end state of your animation looks the same as your initial state. In the Timeline's Advanced mode, you can set the animation's loop options - https://support.google.com/webdesigner/answer/3228643?hl=en&ref_topic=3181123.

 

- Flash can work with groups of symbols wich do not increase the files size, GWD needs images of full size,

NR: We are exploring ways on allowing users to create and reuse assets within GWD.

Having said that, the browser already reuses images if you have multiple IMG tags with the same src attribute, similar to how Flash re-uses symbols. If you drag just one image into GWD, you should be able to reuse the image path for multiple IMG tags' src attribute.

However, currently if you drag the same image multiple times, I think GWD will create a new copy of that image on your file system instead of re-using an existing copy.

- the PDF-file in the SourceFlash.zip shows the Flash settings with fixed percental windows of high quality,

NR: That is a great suggestion. Some other beta users have asked for the ability to have the content resize with the browser window. We are exploring ways to add better flow layout support, which should help our users create this type of content. I have created an example using Code View that resizes similarly to your Flash example. Since, I don't have the Flash assets, I can only go by the images you have posted. In Flash, the vectors will scale nicely. In HTML, the images will pixellate as you scale. You can try replacing the images with SVG versions if you have them.

Note that I also clipped the content within the view by creating a container element that has overflow set to hidden. Since overflow is set to hidden, the content will not show at authortime in design view.

- fitting exactly windows, the animation everytime concentric and constantly with an equal frame etc.

NR: I have not found any issues with the frame rate in HTML animations that use CSS. If you want to match the 25fps from Flash, you will have to set your animation duration to match that fps. I think in your case you are animating 1280px. Thus, the duration of that animation should be about 51 seconds.

Also, to get smooth animations, you will probably want to animate the 3d values instead of left and top. You can read more about how to get smooth animations in HTML at http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/

I have created two versions of your file, one using left and top but for 30 seconds (since left and top don't animate as smoothly) and one using translateX for 51 seconds. The translateX is much smoother. However, I noticed that when I resize the browser window from a larger size to a smaller size, the translateX version doesn't resize as well. If you resize from a small browser size to a larger browser size, the resizing is fine.

The browser should probably force a recalculation of the animation upon a window resize, but doesn't. The browser is always doing recalculations when animating left and top, that is why it resizes correctly ... and that is why it is also slower.

But the downside of Flash today is, less and less systems will work trouble-fre with Flash in future, such as Windows 8.1 with his Internet Explorer 11, and still more the modern equipments to go. What can I do to get simular GWD results like this above Flash uses ?

Greetings to all from the GWD-newcomer Bernd of Germany.

Thanks for trying out GWD. We would love to hear more feedback on what type of content you create and how we can help.

Thanks,
Nivesh

(GWD team)

[Bernd Hopp]

Hi Nivesh,

Thank you for your interesting post. Additionally to my Flash problems you can see here a further example ...

www.dipl-ing.bernd-hopp.de

but -> "This is not shown - on the iPhone !"

Greetings,

Bernd.

[Bernd Hopp]

This above shown "under-construction-website" from me is made in Flash inclusive sound, animation, flexible mask window, and pure endlessness without any picture unterruptions, and this html- and swf-upload is only 135 kB big inclusive any pictures and animations.

Now I am working to have simular results in GWD, because Flash seems to be to be a little bit out in the future ?

I think Google's GWD should provide more animation functions and should invest in more compressions for smaller but clearer image files.

Greeetings to all HTML5-GWD-Fans from "Berny of Germany".

(Sorry about my little strange English).

[Bernd Hopp]

You can have full Video happyness with this Flash website in a smaller window of a mobile (when Flash works), but also in HD or in FHD 1920x1080 pxl, and all this with a HTML of  2 kB space and a SWF of  max. 700 kb for animations, sounds and movable  texts

-> look ...

www.inventions.bernd-hopp.de/

The special of this website gag is, you can draw and pan this window whow you want it. I would make the same  with  GWD.

Greeetings from "Berny of Germany".

[Bernd Hopp]

And there is now smaller quality with full screen.