da...@touchpaper-digital.co.uk
While researching it, I came across a load of, let's say, eccentricites. Is there a feedback form anywhere, so I can log them for you, the developers. Posting a bug list here seems mean and wrong, especially for a version 1 beta piece of software.
Tony Mowatt
da...@touchpaper-digital.co.uk
Anyway, do you want me to put a list here, or in individual posts so they can be done one by one?
Tony Mowatt
da...@touchpaper-digital.co.uk
1) If you set a variable size text box and then increase the font size, then the box grows accordingly. However, if you reduce the font size back down from a larger size, the container will not look like it reduces back. For some reason, swap to Code View and back to Design View and it will reduce.
2) Drag and drop of image files to the Carousel component shows files added, but they do not always then appear in the file list when you close the dialog and aren't really added.
3) Carousel component appears to add small white rectangle with curved corners sometimes; these appear bottom left and bottom right of the component. Only occurs in published files in Firefox. Appears correct in Chrome. When you drag the image to move between images, the box appears and disappears on release.
4) YouTube component doesn't work in Firefox, even when published. Simply displays black box. Tested multiple times, and I can't get it to work at all.
5) Map Component - Advanced settings. I suspect this is by design, but there's no way to determine heirarchy. So, you can't set the Zoom level, because if there are more markers to display in the searcg radius it zooms out to diplay them. Search radius has a minimum of 1000, so if you choose a search with multiple results, it can be impossible to get the map zoom you want. It would be good to be able to determine which of these fields you want to be the primary, secondary and tertiary controls. Also had instances where default location marker doesn't load in Firefox.
da...@touchpaper-digital.co.uk
Kishore Subramanian
da...@touchpaper-digital.co.uk
I've been writing a piece today on Google Web Fonts, with particular interest in the implementation in Google Web Designer: http://www.touchpaper-digital.co.uk/using-google-web-fonts/ I've put the notes in that piece, but briefly, there's 3 things that you might want to add to look at (again, only trying to be helpful here, not nagging!)
1) Given GWD can implement fixed width <divs> for text, then often the preview with a web font doesn't show final results. I had it when using GWD for my own project. I placed the absolute positioned div, sized it, wrote up the text in the font, previewed it, finished off the project. But when I published it, of course, in other browsers (Firefox again), the font rendered slightly different which meant it didn't fit to the fixed width.
Now, I grant this is more a problem with web fonts than GWD, but in a UI that makes so much use of absolute positioning, it would be awesome if some magic solution could be found to ensure this didn't happen. Adding additional space as required in the UI?
2) Removal of unused fonts: you can add fonts to a project, but
a) Why include unusued fonts in the published file? Seems like addition to page load.
b) No way I can see outside of Code View of removing a font from the drop down list once added in the UI.
3) The <link> is added as the last element in the <head> tag. This seems to be the opposite of what Google Web Fonts recommends due to IE: https://developers.google.com/fonts/docs/technical_considerations
More on this in the blog I wrote, but I hope some of it is useful.
Thanks.
Dave
Sukhbir Kaur
1) If you set a variable size text box and then increase the font size, then the box grows accordingly. However, if you reduce the font size back down from a larger size, the container will not look like it reduces back. For some reason, swap to Code View and back to Design View and it will reduce.
> I was able to reproduce this issue and I have logged a bug for this .
2) Drag and drop of image files to the Carousel component shows files added, but they do not always then appear in the file list when you close the dialog and aren't really added.
> I was not unable to reproduce this issue . If you can reproduce this every time in new file ? Please send us more details . Is there any specific File/ File Type which is not added in the list when you drag and drop images ?
3) Carousel component appears to add small white rectangle with curved corners sometimes; these appear bottom left and bottom right of the component. Only occurs in published files in Firefox. Appears correct in Chrome. When you drag the image to move between images, the box appears and disappears on release.
> I'm unable to reproduce this issue . Could you please send us a screenshot ?
4) YouTube component doesn't work in Firefox, even when published. Simply displays black box. Tested multiple times, and I can't get it to work at all.
> YouTube component works fine for me in Firefox . Can you please provide Firefox and Flash player version and OS details .
Thanks
Sukhbir
(GWD Team)
Sukhbir Kaur
2) Removal of unused fonts: you can add fonts to a project, but a) Why include unused fonts in the published file? Seems like addition to page load.
> Thanks for this issue and I have logged al bug for this on your behalf .
b) No way I can see outside of Code View of removing a font from the drop down list once added in the UI.
> You can remove the WebFonts from the drop down list with the following steps
- Invoke the WebFont dialog by clicking ( F+) button
- For removing the Fonts click on Fonts in right side column under Added Fonts or click on (x) button next to the Font name .
- Click ok to save the changes
3) The <link> is added as the last element in the <head> tag. This seems to be the opposite of what Google Web Fonts recommends due to IE: https://developers.google.com/fonts/docs/technical_considerations.
I have logged a bug for this .
Thanks
Sukhbir
(GWD Team )
William Cousert
David Taylor
Sukbir, I haven't had a chance to work through your answers yet, or get the screenshots. Been out all day doing digital marketing consultancy, but I will go through them when I get time (tomorrow hopefully).
William Cousert
rachid...@gmail.com
GetSystemDefaultLocalName not found ... Kernel32.dll
David Taylor
3) Carousel white rectangle weirdness:screen below
4) Windows 7 SP1 64-bit; Firefox v.24.0; Flash: 11.9.900.117
Really doesn't want to work for me. Just tried it again with different YouTube videos.
I did have it working when I was writing the book, but cannot get it to work now in Firefox, possibly since 24 release (not sure). Rebooted, etc.
ewschang
andra...@gmail.com
Thx Elod
Andras Elod
Do not know why but on my PC does not work the animation on another computer or phone work fine..
But I have another question :D If there would be a problem, is possible make an animation to start only when you press a button (example a square moves from left to right and only when you press a button to start) Now if i press Play then starts the animation directly.
Thx Elod
David Taylor
Andras Elod
But I have another question, how can save a page to which I would like to work later ? If i push the Save button then only html is saved. And If i publish the then again it's not good that I say error 400 (pictures that I put the not appear when puse save or publish why ??
Andras Elod
Sukhbir Kaur
The main reason for the 400 error is that the path of the image is wrong.
1) Did you enter the path of the image by hand? If yes, can you please verify that the image path is correct relative to the HTML?
2) Try adding the image by dragging and dropping the image on stage. This will add images under /images folder where your file is saved .
Thanks
Sukhbir
(GWD Team)
Andras Elod
2) Try adding the image by dragging and dropping the image on stage. This will add images under /images folder where your file is saved . (Done, its`works... the picture appeared but still the same error 400)
My pictures are near the index.html file in a Folder.
And this is the Code what i made..
<!DOCTYPE html>
<html>
<head data-gwd-animation-mode="proMode">
<meta name="generator" content="Google Web Designer 1.0.1.1025">
<meta name="template" content="Banner 1.0.5">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
html, body {
width: 100%;
height: 100%;
margin: 0px;
}
.gwd-page-container {
position: relative;
width: 100%;
height: 100%;
}
.gwd-page-content {
background-color: transparent;
-webkit-transform: perspective(1400px) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-webkit-transform-style: preserve-3d;
position: absolute;
}
.gwd-page-wrapper {
position: absolute;
-webkit-transform: translateZ(0px);
background-image: none;
background-color: rgb(0, 0, 0);
}
.gwd-page-size {
width: 1000px;
height: 700px;
}
.gwd-img-n05f {
position: absolute;
top: 40px;
left: 50px;
width: 901px;
height: 563px;
opacity: 1;
}
.gwd-img-wazp {
position: absolute;
top: 40px;
left: 50px;
width: 901px;
height: 563px;
opacity: 1;
}
.gwd-img-reu4 {
position: absolute;
top: 40px;
left: 50px;
width: 901px;
height: 563px;
opacity: 0.3;
}
.gwd-img-mzqc {
position: absolute;
top: 40px;
left: 50px;
width: 901px;
height: 563px;
opacity: 0.3;
}
.gwd-img-9g1e {
position: absolute;
top: 40px;
left: 50px;
width: 901px;
height: 563px;
opacity: 1;
}
.gwd-img-t3z4 {
position: absolute;
top: 40px;
left: 50px;
width: 901px;
height: 563px;
opacity: 1;
}
.gwd-gen-ekpn .gwd-gen-kl5dgwdanimation {
-webkit-animation: gwd-gen-kl5dgwdanimation_gwd-keyframes 0.3s linear 1s 1 forwards;
}
.gwd-gen-ekpn .gwd-gen-l1bcgwdanimation {
-webkit-animation: gwd-gen-l1bcgwdanimation_gwd-keyframes 1.3s linear 0s 1 forwards;
}
.gwd-gen-ekpn .gwd-gen-dk8xgwdanimation {
-webkit-animation: gwd-gen-dk8xgwdanimation_gwd-keyframes 1.2s linear 0.2s 1 forwards;
}
.gwd-gen-ekpn .gwd-gen-oqjbgwdanimation {
-webkit-animation: gwd-gen-oqjbgwdanimation_gwd-keyframes 1.1s linear 0.4s 1 forwards;
}
.gwd-gen-ekpn .gwd-gen-b3kagwdanimation {
-webkit-animation: gwd-gen-b3kagwdanimation_gwd-keyframes 1s linear 0.6s 1 forwards;
}
.gwd-gen-ekpn .gwd-gen-7rzegwdanimation {
-webkit-animation: gwd-gen-7rzegwdanimation_gwd-keyframes 0.2s linear 1.2s 1 forwards;
}
@-webkit-keyframes gwd-gen-l1bcgwdanimation_gwd-keyframes {
0% {
top: -569px;
left: 50px;
width: 901px;
height: 563px;
opacity: 0;
-webkit-animation-timing-function: linear;
}
23.0769% {
top: 40px;
left: 50px;
width: 901px;
height: 563px;
opacity: 0.3;
-webkit-animation-timing-function: linear;
}
84.6154% {
top: 40px;
left: 50px;
width: 901px;
height: 563px;
opacity: 0.3;
-webkit-animation-timing-function: linear;
}
100% {
top: 40px;
left: 50px;
width: 901px;
height: 563px;
opacity: 1;
-webkit-animation-timing-function: linear;
}
}
@-webkit-keyframes gwd-gen-dk8xgwdanimation_gwd-keyframes {
0% {
top: -565px;
left: 50px;
width: 901px;
height: 563px;
opacity: 0;
-webkit-animation-timing-function: linear;
}
25% {
top: 40px;
left: 50px;
width: 901px;
height: 563px;
opacity: 0.3;
-webkit-animation-timing-function: linear;
}
83.3333% {
top: 40px;
left: 50px;
width: 901px;
height: 563px;
opacity: 0.3;
-webkit-animation-timing-function: linear;
}
100% {
top: 40px;
left: 50px;
width: 901px;
height: 563px;
opacity: 1;
-webkit-animation-timing-function: linear;
}
}
@-webkit-keyframes gwd-gen-oqjbgwdanimation_gwd-keyframes {
0% {
top: -346px;
left: 50px;
width: 901px;
height: 563px;
opacity: 0;
-webkit-animation-timing-function: linear;
}
27.2727% {
top: 40px;
left: 50px;
width: 901px;
height: 563px;
opacity: 0.3;
-webkit-animation-timing-function: linear;
}
81.8182% {
top: 40px;
left: 50px;
width: 901px;
height: 563px;
opacity: 0.3;
-webkit-animation-timing-function: linear;
}
100% {
top: 40px;
left: 50px;
width: 901px;
height: 563px;
opacity: 1;
-webkit-animation-timing-function: linear;
}
}
@-webkit-keyframes gwd-gen-b3kagwdanimation_gwd-keyframes {
0% {
top: -328px;
left: 50px;
width: 901px;
height: 563px;
opacity: 0;
-webkit-animation-timing-function: linear;
}
30% {
top: 40px;
left: 50px;
width: 901px;
height: 563px;
opacity: 0.3;
-webkit-animation-timing-function: linear;
}
80% {
top: 40px;
left: 50px;
width: 901px;
height: 563px;
opacity: 0.3;
-webkit-animation-timing-function: linear;
}
100% {
top: 40px;
left: 50px;
width: 901px;
height: 563px;
opacity: 1;
-webkit-animation-timing-function: linear;
}
}
@-webkit-keyframes gwd-gen-kl5dgwdanimation_gwd-keyframes {
0% {
top: 40px;
left: 50px;
width: 901px;
height: 563px;
opacity: 0;
-webkit-animation-timing-function: linear;
}
100% {
top: 40px;
left: 50px;
width: 901px;
height: 563px;
opacity: 1;
-webkit-animation-timing-function: linear;
}
}
.gwd-img-fv73 {
position: absolute;
width: 901px;
height: 563px;
left: 51px;
top: 40px;
}
.gwd-canvas-p6gz {
position: absolute;
-webkit-transform-style: preserve-3d;
top: 50.25px;
left: 84.981230017px;
width: 796.0375399660002px;
height: 154.5px;
-webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
opacity: 0;
}
.gwd-gen-ekpn .gwd-gen-r5m9gwdanimation {
-webkit-animation: gwd-gen-r5m9gwdanimation_gwd-keyframes 1.8s linear 0.9s infinite forwards;
}
@-webkit-keyframes gwd-gen-r5m9gwdanimation_gwd-keyframes {
0% {
top: 50.25px;
left: 84.981230017px;
width: 796.0375399660002px;
height: 154.5px;
-webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
opacity: 0;
-webkit-animation-timing-function: linear;
}
11.1111% {
top: 50.25px;
left: 84.981230017px;
width: 796.0375399660002px;
height: 154.5px;
-webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
opacity: 0.02;
-webkit-animation-timing-function: linear;
}
16.6667% {
top: 50.25px;
left: 84.981230017px;
width: 796.0375399660002px;
height: 154.5px;
-webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
opacity: 0;
-webkit-animation-timing-function: linear;
}
88.8889% {
top: 50.25px;
left: 84.981230017px;
width: 796.0375399660002px;
height: 154.5px;
-webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
opacity: 0;
-webkit-animation-timing-function: linear;
}
100% {
top: 50.25px;
left: 84.981230017px;
width: 796.0375399660002px;
height: 154.5px;
-webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
opacity: 0.02;
-webkit-animation-timing-function: linear;
}
}
.gwd-canvas-4ym2 {
position: absolute;
-webkit-transform-style: preserve-3d;
top: 334.75000000000165px;
left: 706.7500000000068px;
width: 139.5px;
height: 150.5px;
-webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
opacity: 0;
}
.gwd-gen-ekpn .gwd-gen-12chgwdanimation {
-webkit-animation: gwd-gen-12chgwdanimation_gwd-keyframes 1.3s linear 1.3s infinite forwards;
}
@-webkit-keyframes gwd-gen-12chgwdanimation_gwd-keyframes {
0% {
top: 334.75000000000165px;
left: 706.7500000000068px;
width: 139.5px;
height: 150.5px;
-webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
opacity: 0;
-webkit-animation-timing-function: linear;
}
15.3846% {
top: 335px;
left: 706.7500000000068px;
width: 139.5px;
height: 150.5px;
-webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
opacity: 0.05;
-webkit-animation-timing-function: linear;
}
84.6154% {
top: 335px;
left: 706.7500000000068px;
width: 139.5px;
height: 150.5px;
-webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
opacity: 0;
-webkit-animation-timing-function: linear;
}
100% {
top: 335px;
left: 706.7500000000068px;
width: 139.5px;
height: 150.5px;
-webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
opacity: 0.03;
-webkit-animation-timing-function: linear;
}
}
.gwd-canvas-z8ua {
position: absolute;
-webkit-transform-style: preserve-3d;
top: 121.25px;
left: 264.25px;
width: 32.5px;
height: 16.5px;
-webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
opacity: 0;
}
.gwd-gen-ekpn .gwd-gen-y9u4gwdanimation {
-webkit-animation: gwd-gen-y9u4gwdanimation_gwd-keyframes 2.1s linear 2.1s infinite forwards;
}
.gwd-canvas-x8hd {
position: absolute;
-webkit-transform-style: preserve-3d;
top: 162.5px;
left: 360.5px;
width: 26.5px;
height: 24.5px;
-webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
opacity: 0;
}
.gwd-gen-ekpn .gwd-gen-y77fgwdanimation {
-webkit-animation: gwd-gen-y77fgwdanimation_gwd-keyframes 2.5s linear 2.3s infinite forwards;
}
@-webkit-keyframes gwd-gen-y9u4gwdanimation_gwd-keyframes {
0% {
top: 121.25px;
left: 264.25px;
width: 32.5px;
height: 16.5px;
-webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
opacity: 0;
-webkit-animation-timing-function: linear;
}
9.52381% {
top: 121.25px;
left: 264.25px;
width: 32.5px;
height: 16.5px;
-webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
opacity: 0.35;
-webkit-animation-timing-function: linear;
}
47.619% {
top: 121.25px;
left: 264.25px;
width: 32.5px;
height: 16.5px;
-webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
opacity: 0;
-webkit-animation-timing-function: linear;
}
95.2381% {
top: 121.25px;
left: 264.25px;
width: 32.5px;
height: 16.5px;
-webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
opacity: 0;
-webkit-animation-timing-function: linear;
}
100% {
top: 121.25px;
left: 264.25px;
width: 32.5px;
height: 16.5px;
-webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
opacity: 0.35;
-webkit-animation-timing-function: linear;
}
}
@-webkit-keyframes gwd-gen-y77fgwdanimation_gwd-keyframes {
0% {
top: 162.5px;
left: 360.5px;
width: 26.5px;
height: 24.5px;
-webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
opacity: 0;
-webkit-animation-timing-function: linear;
}
8% {
top: 162.5px;
left: 360.5px;
width: 26.5px;
height: 24.5px;
-webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
opacity: 0.35;
-webkit-animation-timing-function: linear;
}
76% {
top: 162.5px;
left: 360.5px;
width: 26.5px;
height: 24.5px;
-webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
opacity: 0;
-webkit-animation-timing-function: linear;
}
100% {
top: 162.5px;
left: 360.5px;
width: 26.5px;
height: 24.5px;
-webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
opacity: 0.35;
-webkit-animation-timing-function: linear;
}
}
@-webkit-keyframes gwd-gen-7rzegwdanimation_gwd-keyframes {
0% {
top: 40px;
left: 50px;
width: 901px;
height: 563px;
opacity: 0;
-webkit-animation-timing-function: linear;
}
100% {
top: 40px;
left: 50px;
width: 901px;
height: 563px;
opacity: 1;
-webkit-animation-timing-function: linear;
}
}
.gwd-div-5ywu {
position: absolute;
height: 8px;
border-width: 1px;
border-top-left-radius: 13px;
border-top-right-radius: 13px;
border-bottom-left-radius: 13px;
border-bottom-right-radius: 13px;
overflow: visible;
border-style: none;
width: 450px;
background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0.521569) 0%, rgb(0, 0, 0) 100%);
left: 533px;
top: 603px;
}
.gwd-div-sgfv {
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
border-width: 0px;
border-style: none;
background-image: -webkit-linear-gradient(left, rgb(0, 0, 0) 0%, rgb(100, 100, 100) 66%, rgb(255, 255, 255) 100%);
top: 603px;
left: -463px;
width: 450px;
height: 5px;
opacity: 0;
}
.gwd-div-8osc {
border-width: 0px;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
border-style: none;
background-image: -webkit-linear-gradient(left, rgb(255, 255, 255) 0%, rgba(100, 100, 100, 0.509804) 56%, rgb(3, 1, 1) 100%);
top: 603px;
left: 1001px;
width: 450px;
height: 5px;
opacity: 0;
}
.gwd-gen-ekpn .gwd-gen-jqqvgwdanimation {
-webkit-animation: gwd-gen-jqqvgwdanimation_gwd-keyframes 0.2s linear 1.4s 1 forwards;
}
@-webkit-keyframes gwd-gen-jqqvgwdanimation_gwd-keyframes {
0% {
top: 603px;
left: -463px;
width: 450px;
height: 5px;
opacity: 0;
-webkit-animation-timing-function: linear;
}
100% {
top: 603px;
left: 60px;
width: 450px;
height: 5px;
opacity: 1;
-webkit-animation-timing-function: linear;
}
}
.gwd-gen-ekpn .gwd-gen-zqidgwdanimation {
-webkit-animation: gwd-gen-zqidgwdanimation_gwd-keyframes 0.2s linear 1.4s 1 forwards;
}
@-webkit-keyframes gwd-gen-zqidgwdanimation_gwd-keyframes {
0% {
top: 603px;
left: 1001px;
width: 450px;
height: 5px;
opacity: 0;
-webkit-animation-timing-function: linear;
}
100% {
top: 603px;
left: 510px;
width: 450px;
height: 5px;
opacity: 1;
-webkit-animation-timing-function: linear;
}
}
</style>
<script type="text/x-serialization" id="gwd-serialization">
{
"version": 1,
"content": {
"type": "rad.ad.RichMedia",
"properties": {
"environment": "@environment"
},
"children": [
"@page1"
]
},
"objects": {
"environment": {
"type": "rad.environment.DoubleClickStudio",
"properties": {
"isBanner": true
}
},
"page1": {
"type": "rad.ui.Page",
"decorates": true,
"properties": {
"width": "1000px",
"height": "700px",
"introAnimationSequence": "@intropage1",
"expanded": false,
"isDefault": true
},
"children": []
},
"intropage1": {
"type": "rad.animation.CSSAnimation",
"properties": {
"cssClass": "gwd-gen-ekpn",
"elementCount": 12
}
}
}
}
</script>
<script type="text/x-serialization" data-gwd-canvas="serialization">
{"useCanvas":1,"useWebGl":0,"data":["{\"version\":0.1,\"id\":\"351z1n3z\",\"fov\":45,\"zNear\":0.1,\"zFar\":100,\"viewDist\":5,\"webGL\":false,\"lightAmount\":0.3,\"children\":[{\"anchors\":[[[7.5,22,0],[7.5,22,0],[7.5,22,0]],[[0.5,116,0],[0.5,116,0],[0.5,116,0]],[[34,126.5,0],[35,126.5,0],[36,126.5,0]],[[39,117.5,0],[39,117.5,0],[39,117.5,0]],[[62,115.5,0],[62,115.5,0],[62,115.5,0]],[[80,123.5,0],[80,123.5,0],[80,123.5,0]],[[79,79.5,0],[79,79.5,0],[79,79.5,0]],[[99,77.5,0],[99,77.5,0],[99,77.5,0]],[[100,68.5,0],[100,68.5,0],[100,68.5,0]],[[132,68.5,0],[132,68.5,0],[132,68.5,0]],[[226,66,0],[225,66,0],[224,66,0]],[[243.49,131.89,0],[265,137,0],[272.03,138.67,0]],[[274.63,116.1,0],[283,106,0],[298.62,87.16,0]],[[311.95,116.96,0],[335,123,0],[338.16,123.83,0]],[[343.85,100.41,0],[347.08,101.16,0],[368.58,106.15,0]],[[391.41,109.24,0],[413,108,0],[417.1,107.76,0]],[[404.9,61.27,0],[409,61,0],[430.83,59.59,0]],[[456.14,58.62,0],[475,56,0],[476,55.86,0]],[[472.94,40.11,0],[473.93,39.97,0],[476.53,39.61,0]],[[482.81,146.5,0],[515,154,0],[515.92,154.21,0]],[[536.07,107.76,0],[537,108,0],[537.57,108.14,0]],[[534.06,40.52,0],[534.64,40.67,0],[540.47,42.24,0]],[[546.61,44.31,0],[553,47,0],[566.23,52.57,0]],[[545.87,90.9,0],[561,104,0],[574.4,115.61,0]],[[623.32,102.33,0],[635,104,0],[641.61,104.95,0]],[[644.76,63.1,0],[651,64,0],[698.29,70.83,0]],[[722.26,75.12,0],[732,75,0],[733.32,74.98,0]],[[725.59,145.98,0],[730,143,0],[730.51,142.66,0]],[[770.46,100.37,0],[771,100,0],[788.62,87.81,0]],[[792.62,30.22,0],[794,30,0],[819.74,25.96,0]],[[540.56,28.77,0],[542,26,0],[544.49,21.22,0]],[[367.35,14.9,0],[370,10,0],[373.13,4.2,0]],[[275.29,18.2,0],[277.78,13.88,0],[278.52,12.58,0]],[[279.3,11.21,0],[280,10,0],[231.34,6.83,0]],[[134,0.5,0],[134,0.5,0],[134,0.5,0]],[[93,7,0],[93,7,0],[93,7,0]],[[61,18,0],[61,18,0],[61,18,0]]],\"isClosed\":false,\"strokeWidth\":1,\"strokeColor\":null,\"fillColor\":[0.984313725490196,0.9764705882352941,1,1],\"type\":5,\"geomType\":5}]}","{\"version\":0.1,\"id\":\"omufr11h\",\"fov\":45,\"zNear\":0.1,\"zFar\":100,\"viewDist\":5,\"webGL\":false,\"lightAmount\":0.3,\"children\":[{\"anchors\":[[[139,53.5,0],[139,53.5,0],[139,53.5,0]],[[138,118.5,0],[138,118.5,0],[138,118.5,0]],[[74.5,150,0],[74.5,150,0],[74.5,150,0]],[[11,122,0],[11,122,0],[11,122,0]],[[0.5,44,0],[0.5,44,0],[0.5,44,0]],[[41,0.5,0],[41,0.5,0],[41,0.5,0]],[[120,4,0],[120,4,0],[120,4,0]]],\"isClosed\":false,\"strokeWidth\":1,\"strokeColor\":[0,0,0,1],\"fillColor\":[1,1,1,1],\"type\":5,\"geomType\":5}]}","{\"version\":0.1,\"id\":\"8sws9j3j\",\"fov\":45,\"zNear\":0.1,\"zFar\":100,\"viewDist\":5,\"webGL\":false,\"lightAmount\":0.3,\"children\":[{\"anchors\":[[[5.5,0.5,0],[5.5,0.5,0],[5.5,0.5,0]],[[0.5,15.5,0],[0.5,15.5,0],[0.5,15.5,0]],[[27,16,0],[27,16,0],[27,16,0]],[[32,3,0],[32,3,0],[32,3,0]]],\"isClosed\":false,\"strokeWidth\":1,\"strokeColor\":[0,0,0,1],\"fillColor\":[0,0,0,1],\"type\":5,\"geomType\":5}]}","{\"version\":0.1,\"id\":\"uhuidvlw\",\"fov\":45,\"zNear\":0.1,\"zFar\":100,\"viewDist\":5,\"webGL\":false,\"lightAmount\":0.3,\"children\":[{\"anchors\":[[[0.5,3.5,0],[0.5,3.5,0],[0.5,3.5,0]],[[6.5,20.5,0],[6.5,20.5,0],[6.5,20.5,0]],[[17,19,0],[17,19,0],[17,19,0]],[[24,24,0],[24,24,0],[24,24,0]],[[26,8,0],[26,8,0],[26,8,0]],[[16,0.5,0],[16,0.5,0],[16,0.5,0]]],\"isClosed\":false,\"strokeWidth\":1,\"strokeColor\":[0,0,0,1],\"fillColor\":[0,0,0,1],\"type\":5,\"geomType\":5}]}"]}
</script>
<script data-gwd-canvas="runtime" type="text/javascript">
// Copyright 2013 Google Inc. All Rights Reserved.
(function(){var t=function(c,a){this.c=void 0!==c?c:0;this.d=void 0!==a?a:0};t.prototype.ceil=function(){this.c=Math.ceil(this.c);this.d=Math.ceil(this.d);return this};t.prototype.floor=function(){this.c=Math.floor(this.c);this.d=Math.floor(this.d);return this};window.addEventListener("load",function(){window.removeEventListener("load",x,!1);x()},!1);
var x=function(){for(var c,a,h=[],d=document.querySelectorAll('[type="text/x-serialization"][data-gwd-canvas="serialization"]'),m=d.length,g=0;g<m;g++)h.push(JSON.parse(d[g].textContent));d=h.length;for(m=0;m<d;m++)for(var g=h[m].data,n=document.body,f=g.length,r=0;r<f;r++){var b=JSON.parse(g[r]);if(b.children&&1===b.children.length&&(c=b.id)&&(c=n.querySelector("canvas[data-RDGE-id='"+c+"']"))){a=c;var e=b.children[0],b=a.getContext("2d");c=a.width;a=a.height;switch(e.type){case 1:var k=e.strokeWidth;
b.beginPath();var p=Math.ceil(k)-0.5;e.fillColor&&(b.fillStyle=y(b,e.fillColor,c,a,k,p),b.lineWidth=k,B(e,p,b,c,a),b.fill(),b.closePath());b.beginPath();p=Math.ceil(0.5*k)-0.5;e.strokeColor&&(b.strokeStyle=y(b,e.strokeColor,c,a,k,0),b.lineWidth=k,B(e,p,b,c,a),b.stroke(),b.closePath());break;case 2:var k=e.strokeWidth,p=e.innerRadius,s=e.strokeColor,e=e.fillColor,l=0.5*(c-k),q=0.5*(a-k),u=0.5*(p*c-k),D=0.5*(p*a-k),v=0.5*c,w=0.5*a,z=null!=e,A=null!=s&&0<k;z&&(b.fillStyle=y(b,e,c,a,k,k));A&&(b.strokeStyle=
y(b,s,c,a,k,k),b.lineWidth=k);0===p?(C(b,v,w,l,q,!0,!0),z&&b.fill(),A&&b.stroke()):(z&&(C(b,v,w,l,q,!0,!0),C(b,v,w,u,D,!1,!1),b.fill()),A&&(C(b,v,w,l,q,!0,!0),b.stroke(),C(b,v,w,u,D,!1,!0),b.stroke()));break;case 3:l=e.strokeColor;k=e.slope;p=e.xAdj;s=e.yAdj;b.beginPath();b.lineWidth=e.strokeWidth;if(l){b.strokeStyle=y(b,l,c,a,0,0);l=[];e=[];switch(k){case "vertical":l=[0.5*c,0];e=[0.5*c,a];break;case "horizontal":l=[0,0.5*a];e=[c,0.5*a];break;default:0<k?(l=[p,s],e=[c-p,a-s]):(l=[p,a-s],e=[c-p,s])}c=
new t(l[0],l[1]);a=new t(e[0],e[1]);b.moveTo(c.c,c.d);b.lineTo(a.c,a.d);b.stroke()}break;case 5:b.save();k=null!=e.fillColor;p=null!=e.strokeColor&&0<e.strokeWidth;b.lineCap="round";b.lineJoin="round";s=e.anchors.length;q=l=null;if(1<s){b.beginPath();l=e.anchors[0];b.moveTo(l[1][0],l[1][1]);for(u=1;u<s;u++)q=e.anchors[u],b.bezierCurveTo(l[2][0],l[2][1],q[0][0],q[0][1],q[1][0],q[1][1]),l=q;e.isClosed&&(q=e.anchors[0],b.bezierCurveTo(l[2][0],l[2][1],q[0][0],q[0][1],q[1][0],q[1][1]));k&&(b.fillStyle=
y(b,e.fillColor,c,a,e.strokeWidth,0),b.fill());p&&(b.lineWidth=e.strokeWidth,b.strokeStyle=y(b,e.strokeColor,c,a,e.strokeWidth,0),b.stroke())}b.restore()}}}},y=function(c,a,h,d,m,g){if(a.gradientMode){var n=0.5*h,f=0.5*d;c="radial"==a.gradientMode?c.createRadialGradient(n,f,0,n,f,Math.max(h-2*m,d-2*m)/2):c.createLinearGradient(g,f,h-g,f);a=a.color;h=a.length;for(d=0;d<h;d++)m=a[d].value,c.addColorStop(a[d].position/100,"rgba("+m.r+","+m.g+","+m.b+","+m.a+")");return c}return"rgba("+Math.floor(255*
a[0])+","+Math.floor(255*a[1])+","+Math.floor(255*a[2])+","+a[3]+")"},B=function(c,a,h,d,m){var g=0.5*d,n=0.5*m,f=[a,a],r=c.tlRadius,b=c.trRadius,e=c.blRadius;c=c.brRadius;g=g<n?g:n;r>g&&(r=g);e>g&&(e=g);c>g&&(c=g);b>g&&(b=g);g=d-a;n=m-a;0>=r&&0>=e&&0>=c&&0>=b?h.rect(f[0],f[1],d-2*a,m-2*a):(d=r-a,0>d&&(d=0),f[1]+=d,0.001>Math.abs(d)&&(f[1]=a),h.moveTo(f[0],f[1]),f=[a,n],d=e-a,0>d&&(d=0),f[1]-=d,h.lineTo(f[0],f[1]),0.001<d&&h.arcTo(a,n,a+d,n,e-a),f=[g,n],d=c-a,0>d&&(d=0),f[0]-=d,h.lineTo(f[0],f[1]),
0.001<d&&h.arcTo(g,n,g,n-d,c-a),f=[g,a],d=b-a,0>d&&(d=0),f[1]+=d,h.lineTo(f[0],f[1]),0.001<d&&h.arcTo(g,a,g-d,a,b-a),f=[a,a],d=r-a,0>d&&(d=0),f[0]+=d,h.lineTo(f[0],f[1]),0.001<d?h.arcTo(a,a,a,a+d,r-a):h.lineTo(a,2*a))},C=function(c,a,h,d,m,g,n){c.save();n&&c.beginPath();c.translate(a,h);c.scale(d,m);c.arc(0,0,1,0,2*Math.PI,g);c.restore()};})();
</script>
</head>
<body>
<div class="gwd-page-container">
<div id="page1" class="gwd-page-wrapper gwd-page-size" data-gwd-component-id="page1">
<div class="gwd-page-content gwd-page-size">
<img src="images/az.png" class="gwd-img-n05f gwd-gen-kl5dgwdanimation" id="hater">
<img src="images/az1.png" class="gwd-img-wazp gwd-gen-dk8xgwdanimation" id="utball">
<img src="images/az2.png" class="gwd-img-reu4 gwd-gen-b3kagwdanimation" id="utbal2">
<img src="images/az3.png" class="gwd-img-mzqc gwd-gen-oqjbgwdanimation" id="utball1">
<img src="images/az4.png" class="gwd-img-9g1e gwd-gen-7rzegwdanimation" id="ut">
<img src="images/az5.png" class="gwd-img-t3z4 gwd-gen-l1bcgwdanimation" id="utjobb">
<img src="images/smoke_2.png" class="gwd-img-fv73">
<canvas data-rdge-id="351z1n3z" width="796" height="154" class="gwd-canvas-p6gz gwd-gen-r5m9gwdanimation" id="felho"></canvas>
<canvas data-rdge-id="omufr11h" width="139" height="150" class="gwd-canvas-4ym2 gwd-gen-12chgwdanimation" id="feny1"></canvas>
<canvas data-rdge-id="8sws9j3j" width="32" height="16" class="gwd-canvas-z8ua gwd-gen-y9u4gwdanimation" id="jobb_ablak"></canvas>
<canvas data-rdge-id="uhuidvlw" width="26" height="24" class="gwd-canvas-x8hd gwd-gen-y77fgwdanimation" id="jobb_ablak2"></canvas>
<div class="gwd-div-5ywu gwd-div-8osc gwd-gen-zqidgwdanimation" id="jobb_csik"></div>
<div class="gwd-div-5ywu gwd-div-sgfv gwd-gen-jqqvgwdanimation" id="bal_csik"></div>
</div>
</div>
</div>
</body>
</html>
Sukhbir Kaur
cpbt...@gmail.com
Cheers,
Brandon
cpbt...@gmail.com
ellenw...@gmail.com
Jaz
We've answered your question here: https://groups.google.com/d/msg/gwdbeta/q1p-tUn1b2E/dP-A9ltV-BkJ:
thx!
jaz
meeti...@gmail.com
When uploading the zip file as a display ad to google adwords i get an error that one of the URL's incorrect. Now i assume its the url in the <script type="text/x-serialization" id="gwd-serialization"> section. I have appointed a URL for an image thats on our website database.
I hope someone can help me :(
The code:
<!DOCTYPE html>
<html>
<head data-gwd-animation-mode="quickMode">
<meta name="generator" content="Google Web Designer 1.0.6.0428">
<meta name="template" content="Banner 1.0.5">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
html, body {
width: 100%;
height: 100%;
margin: 0px;
}
.gwd-page-container {
width: 100%;
height: 100%;
position: relative;
}
.gwd-page-content {
-webkit-transform: perspective(1400px) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-webkit-transform-style: preserve-3d;
position: absolute;
background-image: url('http://www.meetinglinq.nl/wp-content/uploads/2014/07/testbalk.jpg');
background-color: transparent;
}
.gwd-page-wrapper {
position: absolute;
-webkit-transform: translateZ(0px);
background-color: rgb(255, 255, 255);
}
.gwd-page-size {
width: 728px;
height: 90px;
}
.gwd-div-bgbd {
position: absolute;
width: 726px;
height: 89px;
-webkit-transform-origin: 363px 44.5px 0px;
-webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
top: 0px;
left: 181px;
}
</style>
<script type="text/x-serialization" id="gwd-serialization">
{
"version": 1,
"content": {
"type": "rad.ad.RichMedia",
"properties": {
"environment": "@environment"
},
"children": [
"@page1"
]
},
"objects": {
"environment": {
"type": "rad.environment.DoubleClickStudio",
"properties": {
"isBanner": true
}
},
"page1": {
"type": "rad.ui.Page",
"decorates": true,
"properties": {
"width": "728px",
"height": "90px",
"name": "",
"expanded": false,
"introAnimationSequence": "@intropage1",
"isDefault": true
},
"children": [
"@gallery3d_1"
]
},
"gallery3d_1": {
"type": "rad.ui.Gallery3d",
"decorates": true,
"properties": {
"images": [
"http://www.meetinglinq.nl/wp-content/uploads/2014/07/Alles_1.jpg"
],
"frameWidth": 1000,
"frameHeight": 80,
"neighborRotationY": 38,
"neighborTranslationX": 20,
"neighborTranslationY": -8,
"neighborTranslationZ": -80,
"showReflection": true,
"startFrame": 1
}
},
"intropage1": {
"type": "rad.animation.CSSAnimation",
"properties": {
"cssClass": "gwd-gen-lr9v",
"elementCount": 1
}
}
}
}
</script>
</head>
<body>
<div class="gwd-page-container">
<div id="page1" class="gwd-page-wrapper gwd-page-size" data-gwd-component-id="page1">
<div class="gwd-page-content gwd-page-size">
<div id="gallery3d_1" data-gwd-component="rad.ui.Gallery3d" data-gwd-component-id="gallery3d_1" class="gwd-div-bgbd"></div>
Jaz
I think the issue may be the image, AdWords lists their policy as:
- All images used in HTML5 ads must be local images, not referenced images, and should be part of the assets that comprise the ZIP file.
Are you able to reference the image locally instead of pointing to the database?
thx
jaz
Jasmine Rogers
Program Manager, GWD
meeti...@gmail.com
Thank you for your response. Images are now local and in the zip file. Still i get an error saying: The file contains unsupported features. Make sure your file meets our policy.
Code now is:
<!DOCTYPE html>
<html>
<head data-gwd-animation-mode="quickMode">
<meta name="generator" content="Google Web Designer 1.0.6.0428">
<meta name="template" content="Banner 1.0.5">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
html, body {
width: 100%;
height: 100%;
margin: 0px;
}
.gwd-page-container {
position: relative;
width: 100%;
height: 100%;
}
.gwd-page-content {
background-color: transparent;
-webkit-transform: perspective(1400px) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-webkit-transform-style: preserve-3d;
position: absolute;
}
.gwd-page-wrapper {
background-color: rgb(255, 255, 255);
position: absolute;
-webkit-transform: translateZ(0px);
}
.gwd-page-size {
width: 728px;
height: 90px;
}
.gwd-div-308o {
position: absolute;
width: 715px;
height: 82px;
-webkit-transform-origin: 357.5px 41px 0px;
-webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
left: 185px;
top: 4px;
}
.gwd-img-kuu0 {
position: absolute;
left: 576px;
top: 40px;
}
.gwd-div-yg1k {
position: absolute;
color: rgb(0, 0, 0);
width: 117px;
height: 35px;
left: 530px;
top: 32px;
-webkit-transform-origin: 58.5px 17.5px 0px;
-webkit-transform: matrix3d(0.9999899222, -0.0044894792, 0, 0, 0.0044894792, 0.9999899222, 0, 0, 0, 0, 1, 0, 65.5, 1.5, 0, 1);
-webkit-transform-style: preserve-3d;
}
.gwd-img-hdn9 {
position: absolute;
left: -2257px;
top: -2544.8624581716726px;
}
.gwd-img-8u1l {
position: absolute;
width: 166px;
height: 89.8815789474px;
-webkit-transform-origin: 83px 45px 0px;
-webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
left: 3px;
top: 0px;
}
</style>
<script type="text/x-serialization" id="gwd-serialization">
{
"version": 1,
"content": {
"type": "rad.ad.RichMedia",
"properties": {
"environment": "@environment"
},
"children": [
"@page1"
]
},
"objects": {
"environment": {
"type": "rad.environment.DoubleClickStudio",
"properties": {
"isBanner": true
}
},
"page1": {
"type": "rad.ui.Page",
"decorates": true,
"properties": {
"width": "728px",
"height": "90px",
"isDefault": true
},
"children": [
"@gallery3d_1",
"@taparea_1"
],
"events": [
{
"handler": {
"target": "@environment",
"method": "exit",
"parameters": [
"call_to_action",
false,
"http://www.meetinglinq.nl/en/",
true
]
},
"target": "@taparea_1",
"type": "action"
}
]
},
"gallery3d_1": {
"type": "rad.ui.Gallery3d",
"decorates": true,
"properties": {
"images": [
"images/Alles_3.jpg"
],
"frameWidth": 700,
"frameHeight": 80,
"neighborRotationY": 38,
"neighborTranslationX": 20,
"neighborTranslationY": -8,
"neighborTranslationZ": -80,
"showReflection": false
}
},
"taparea_1": {
"type": "rad.ui.TapArea",
"decorates": true
}
}
}
</script>
</head>
<body>
<div class="gwd-page-container">
<div id="page1" class="gwd-page-wrapper gwd-page-size" data-gwd-component-id="page1">
<div class="gwd-page-content gwd-page-size">
<div id="gallery3d_1" data-gwd-component="rad.ui.Gallery3d" data-gwd-component-id="gallery3d_1" class="gwd-div-308o gwd-gen-4ul6gwdanimation gwd-gen-2o4lgwdanimation gwd-gen-8m92gwdanimation" style="background-image: url(filesystem:https://www.gstatic.com/persistent/cdn/components/3dgallery.png);background-image: url(filesystem:https://www.gstatic.com/persistent/cdn/components/3dgallery.png);"></div>
<img src="images/button-ml.png" class="gwd-img-kuu0">
<div id="taparea_1" data-gwd-component="rad.ui.TapArea" data-gwd-component-id="taparea_1" class="gwd-div-yg1k"></div>
<img src="images/slide-to-see-more_1.jpg" class="gwd-img-hdn9">
<img src="images/slide-to-see-more_2.jpg" class="gwd-img-8u1l">
Jaz
I noticed that you also have a 3D Gallery added, which is a feature AdWords does not support. Tap Area is fine to keep though. Please take a look at the HTML5 supported features to ensure your ad will not have any additional issues on upload. If you need anything more, please don't hesitate to write back!
AdWords HTML5 policy: https://support.google.com/adwordspolicy/answer/176108?hl=en
| HTML5 ads | |
|---|---|
| File type |
A ZIP file may contain any of the following file types:
|
| File size |
|
| Image size |
|
| Supported features | Important
|
|
|
