IAd producer and html5 canvas

I am familiar with producing iAds using JavaScript but have hit upon a problem when using the HTML place holder from the 'Dynamic Content' section.
I have set up the htmlView.html file with the following code:
<div><canvas width="1000" height="600" id="mywizzycanvas"></canvas>
<script>
var can = document.getElementById('mycanvas');
var ctx = can.getContext('2d');
</script>
</div>
and have then used sliders to draw to the canvas.
The iAd works perfectly when previewed in iAd Producer, it works perfectly when previewed in Safari, but when exported to the .wdgt format and placed in an iBook the sliders cease to work. I have tried exporting the iBook but still nothing. I would be very grateful for any help or assistance with this.

Many thanks for your reply patixa. Apologies for my incorrect typing of IDs, in my iAd code they do match.
I have managed to resolve the problem as follows:
All of my iAd content was originally on the Background layer. Placing the content on Page1 has resolved the problem.
I'm not certain as to why the project worked in iAd producer preview/Safari/Widget preview but not in iBooks but no matter, switching to Page 1 solves it completely.
I notice from a few of the problems people have posted that they have a similar situation and wonder if this might be something that would help them. I've not posted replies but wonder if someone more experienced might offer a view.
Many thanks again to patixa, your kindness is greatly appreciated.

Similar Messages

IAd Producer and iBooks widget help

Hello!
I'm trying to use iAd Producer to create a drawing widget for an iBooks project. So far, I've been able to customize the standard drawing object and it works flawlessly on the iAd Producer Preview and in Safari, but not on the iOS Simulator nor the iPad.
In the widget, there are 2 brush sizes available (small and large) and I'm trying to give visual feedback to the user, letting them know which one they selected. Initially I started with buttons but that didn't work because buttons don't have a style for on/off to let the user know that that button is selected.
I switched to radio buttons, which works great on the preview but not the actual device. Here's the code I'm using:
HTML:
<label class="brushFrame">
<input id="smallBrush" class="brush" type="radio" name="brush" value="small"><img src="assets/brush.png" />
</label>
<label class="brushFrame">
<input id="largeBrush" class="brush" type="radio" name="brush" value="large"><img src="assets/brush.png" />
</label>
CSS:
label.brushFrame > input.brush {
display:none;
label.brushFrame > input.brush + img {
cursor: pointer;
width: 50%;
height: auto;
position: relative;
z-index: 1;
transition: all 0.1s ease-in-out;
label.brushFrame > input.brush:checked + img {
opacity: 0.75 !important;
z-index: 10 !important;
Basically, the brush should become transparent when the user selects it and because it's a radio button, it will stay transparent until the user selects the other brush. The iOS Simulator and iPad are able to render all the CSS correctly, except for when the radio button is ":checked". Background: This is my first widget and I'm very comfortable with CSS but not JavaScript.
How can I make this work?

Many thanks for your reply patixa. Apologies for my incorrect typing of IDs, in my iAd code they do match.
I have managed to resolve the problem as follows:
All of my iAd content was originally on the Background layer. Placing the content on Page1 has resolved the problem.
I'm not certain as to why the project worked in iAd producer preview/Safari/Widget preview but not in iBooks but no matter, switching to Page 1 solves it completely.
I notice from a few of the problems people have posted that they have a similar situation and wonder if this might be something that would help them. I've not posted replies but wonder if someone more experienced might offer a view.
Many thanks again to patixa, your kindness is greatly appreciated.

I cannot get my add uploaded to iAd Workbench using iAd Producer

I am using version 4.2 of iAd Producer and trying upload my add to iAd Workbench.
I get the following error. Does anybody know how to resolve this error?

They are not all on iTunes, I copied some over from my old Droid device when I bought the Nano,. It was my understanding that there isn't a way to get those into iTunes. Does having initially setup the Nano on a Windows machine have anything to do wish this? I've switched to a Mac mini as the Windows machine is on life support. I never had issues downloading from the Windows pc.

Making variables global i iAd Producer

sorry if this is a really simple question. Still, I am stuck:
I would like to have widgets access other widget's variables. I would have thought, for instance, that it would be possible to declare a variable
var Utility = this.viewController.outlets.Utility;
in Global.js, refering to a widget declared in one of the standard auxiliary (.js) files.
I assume that there are more clever ways of doing this. I'm not new to programming, but I'm new to both iAd Producer and JavaScript.
Any and all pointers welcome.
Thank you,

For security reasons, each widget in an iBooks Author book can only access it's own content.
If you meant sharing across pages in a project, then Global.js is the place to store the variables. It's best to assume Global.js can NOT see anything on individual pages, so your idea of using "this.viewController…" likely won't work. Instead, define your Utility class in Global.js (or in another JavaScript file you added as an asset), and reference the objects therein directly from the code in your pages.
Does that help?

Cannot download iAd producer

I am signing in with my apple id after clicking: DOWNLOAD iAd Peoducer 5 now on this page: https://developer.apple.com/iad/iad-producer/ in order to download the iAd producer - and it is taking me to my account settings page and not to the download page.
no matter what i try - i can't get to the downloader
please help - thanks!
Seth

Did you try contacting Apple using the link in your post?

HTML5 Canvas: addChild and position

Hey Guys
I have an item on the stage called 'square1', I have added a symbol from the library and given it the name 'circle1'.
I wish to position circle1 at the exact location of square1, my question is - how would I go about doing that?
Thanks

Knowing JavaScript is going to be essential for you to use Canvas. If you really don't want to get your hands into the code you should do your best with the timeline.
If you're ready to take the canvas plunge then JavaScript has to become a tool for you. The second page of what I linked would show you that for almost every bit of ActionScript you might be used to, there's a translation over to JavaScript that's necessary. So every time you go to do something you're going to be right back here.
The best option just might be for you to take a look at EaselJS. There's lots of very simple demos that can get you started with HTML5/Canvas and will give you answers you want in Flash. Take a look:
CreateJS | A suite of Javascript libraries and tools designed for working with HTML5

Drag and drop iAd Producer

hi everyone.
Anyone can help me with iAd Producer...
I'm doing widgets for iBooks
I want to do drag and drop objects, and add some effects as possible.
Anyone know how it works?
Thanks a lot!

A friend (who is more of a JS jockey than I) created a similar project. Here's how he did it.
For each draggable object, he added three event handlers:
Touched Down
Touch Dragged Inside
Touched Up Inside
These can be added by selecting the object and changing the Inspector's INTERACTION > Events brick > + {event} > Execute JavaScript, or by using the menu, Code > Object Events > {event} > Execute JavaScript.
His code looked something like this:
// Define CLOSE_X_MIN, CLOSE_X_MAX, CLOSE_Y_MIN and CLOSE_Y_MAX to be
// "close enough" to the target drop zone.
this.onViewTouchDragInside = function (event) {
var p = iAd.Point.fromEventInElement(event, this.layer.parentElement);
p.x -= this.startTouchPoint.x;
p.y -= this.startTouchPoint.y;
p.x += this.startPosition.x;
p.y += this.startPosition.y;
this.position = p;
this.onViewTouchUpInside = function (event) {
object_pos = this.position
window.theposition = object_pos;
var x = object_pos.x;
var y = object_pos.y;
if ((x >= CLOSE_X_MIN && x <= CLOSE_X_MAX) && (y >= CLOSE_Y_MIN && y <= CLOSE_Y_MAX)) {
    // close enough, right answer
    x = ((CLOSE_X_MAX + CLOSE_X_MIN) / 2);
    y = ((CLOSE_Y_MAX + CLOSE_Y_MIN) / 2);
    var p = new iAd.Point(x,y);
    this.position = p;
this.onViewTouchDown = function (event) {
var p = iAd.Point.fromEventInElement(event, this.layer.parentElement);
this.startPosition = this.position.copy();
this.startTouchPoint = p;

Installed latest version of Flash CC and did not get HTML5 Canvas

Hello,
This weekend I installed Flash Professional CC on a new Mac running Mavericks. It is a new OS and the first time installing Flash CC on it. After the isntallation I ran the program and saw that I do not have the HTML5 Canvas options that came with the November release. I went to Flash --> Help --> Updates and ran the update tool. It told me that I have the latest version.
Does anyone have any suggestions?
Matthew

What is your Flash Pro version? (13.1.0.226 was the last released version) You should see an option for 'HTML5 Canvas' document on the Start page and New document dialog.

Flash Proffession CC 2014 HTML5 Canvas drag and drop not working

Hi,
I am making drag and drop in Flash professional CC 2014 using canvas and it is working fine on desktop but same when I am testing in Android tablet it is not working. Can any one please advise how to make drag and drop application from Flash CC 2014 which will work on both web/pc desktop HTML5 canvas and all android devices.
Thanks

I just discovered something. What I meant above is that I cannot drag and drop files from the "Media Browser" panel. Surely that should be possible. After all, that is how you browse your music files. If I first double click a file in the browser so that it opens in the "Files" panel, I can then drag and drop files from there. That is ridiculously tedious however because that opens the wave file and closes the "CD Layout" panel. I then have to reopen the "CD Layout" panel before I can drag and drop a file. I'm pretty sure you should be able to simply drag and drop from the Media Browser. Any comments from Adobe?

A puzzle I made in Adobe Flash on an html5 canvas only works in Firefox, and not in other browsers. What should I do?

I made a puzzle on a html5 canvas in Flash CC, and followed the exact steps of an online tutorial. The final product works in Firefox, but not in Chrome or Internet Explorer. What am I doing wrong?

Call up the Javascript Console in Chrome and see if it's showing error messages.
Also, you might try uploading it to a web server and viewing it from there (or turning Apache on locally). It may be a cross site security issue.

Flash Builder 4 and the HTML5 canvas tag

I see that in CS5 you will be able to import Flash animations into HTML5 Canvas code
http://www.readwriteweb.com/archives/flash_now_importable_to_hmtl_canvas.php
Is this a planned feature for Flash Builder?

Thanks Matt for the error message. Found a bug report for the issue with adobe. Turns out Flash Builder 4 will not support Flex 2 SDK
[https://bugs.adobe.com/jira/browse/FB-15688]
Which means that we can't compile within the IDE, but can compile outside using the command line. This will be adding yet another layer to the development process
Matt, any news on when Flex 3 will be supported in the SDK? With the release of Flex 4 i'd imagine it's coming up.

Safari doesn't load pages containing html5 canvas on iMac

Suddenly Safari either is very slow to load or doesn't load some pages at all.
I have tracked it down to be pages containing html5 canvas element.
This happens only on iMac and Macbook Air. It doesn't happen on iPad nor on Safari on a Pc. It will happen on the Mac computer both when the pages are out on the internet and when the pages ar locally stored. It's driving me absolutely mad!
I've tried emptying cache both through Safari menu and by removing Safari's Cache.db, I've reset Safari preferences, restarted, and changed DNS to Open DNS (though it seems strange it should be an issue since the problem also occurs when I run the site on localhost).
If I open the page directly entering the url in the adressbar it works fine, it is when I try to access it from a link on another page on the site it doesn't load. If I press reload it will load fine. The link from other pages can be either an html <a href="url"> tag or javascript window.location or window.location.href neither works. The weird thing is it worked fine until just yesterday. And it works fine on every other machine except the Macintoshes. WHY

Hi Carolyn,
Thanks for the quick reply. I've tried everything you wrote now, however the problem remains.
One thing I've noted though is that the page actually loads but it takes very very long time, and sometimes when the pages have been loaded the images doesn't look quite right until I hit the reload button.
I've been thinking about another thing, there are a lot of effects like round corner, shape and text shadow, can it be these that cause the problem? I still think it is very strange though that it all of a sudden stopped working and that running it on PC or iPad everything is just fine.
Another thing to add is that the computer is very new just got it like 2-3 weeks ago, and haven't hardly added anything except got Xcode, macVim, firefox and Filezilla.
Also just before the problem appeared I ran a page with javascript that had me caught in an endless loop of alerts. Got that fixed, but ever since that some pages won't load correclty...
Is there possibly anything else I can do to fix this?

How do I convert an HTML5 Canvas arc() to JavaFX Canvas arc()?

I wish to convert a statement from JavaScript used in an HTML5 Canvas such as:
ctx.arc(x, y, (rad+5)*factor, 0, Math.PI*2, true);
to the equivalent statement in JavaFX.
What would it look like?
For reference, in HTML5 Canvas the arc() method is defined as:
x
The x-coordinate of the center of the circle
Play it »
y
The y-coordinate of the center of the circle
Play it »
r
The radius of the circle
Play it »
sAngle
The starting angle, in radians (0 is at the 3 o'clock position of the arc's circle)
Play it »
eAngle
The ending angle, in radians
Play it »
counterclockwise
Optional. Specifies whether the drawing should be counterclockwise or clockwise. False=clockwise, true=counter-clockwise
but in JavaFX it is defined as:
public void arc(double centerX, double centerY, double radiusX, double radiusY, double startAngle, double length)
Adds path elements to the current path to make an arc that uses Euclidean degrees. This Euclidean orientation sweeps from East to North, then West, then South, then back to East.
Parameters:
centerX - the center x position of the arc.
centerY - the center y position of the arc.
radiusX - the x radius of the arc.
radiusY - the y radius of the arc.
startAngle - the starting angle of the arc in the range 0-360.0
length - the length of the baseline of the arc.
Could someone please show me what the JavaFX arc() statement would look like and explain how to convert between these two?
Thanks.

No conversion possible. Are you on a responsive project perhaps? Then
output is only HTML, mobile devices do not support Flash.

Is there any way to use video with the new Flash CC HTML5 Canvas?

I am a long time Flash user trying to determine if this new version of the program is something to add to the workflow again (after the last several years of not being able to use it) and the tutorials I have seen are not well written. Is there a way to use a video file within the animation, like with the AS2 and AS3 versions of Flash where I could insert a video clip into a symbol and animate the symbol while the video played.
What I need to know is what format of video file I should use and how to add it into the timeline since Flash does not seem to be allowing for any type of import for this.
Any Thoughts?
Thanks,
Brett

Ok, so there are limitations, are they written down somewhere? I have been looking for a list of do and do not functions and the ways to work around them. Are they in the documentation somewhere I haven't discovered?
Right now all I am looking to do is create Classic Tweens that animate movement and opacity so I can create a presentation with video that includes these elements. Is that level of functionality available in the HTML5 Canvas, or is that still on the drawing board?
Is there a specific name for what I am looking to do that would aid my search? HTML5 video is not enough since the answer has not been forthcoming in Google or on Adobe or Stack Overflow. I am starting to think that nobody has thought of this yet, or if they have they decided that it is not currently possible and skipped the part where the rest of us find out.
Any thoughts on making the connection to either doing this or finding out that it is just not possible yet would be very helpful.

How can I use WebGLview in the iBook widget template in iAd producer?

Recently I am trying to use iAd producer to create a iBook Author widget. What I need is to show a 3D .obj file in it. How can I do that? Is WebGL supported in the iBook Author template?

Per iAd Producer help (https://help.apple.com/iadproducer/mac/5.0/index.html?localePath=en.lproj#/iade7 39fa44):
Available in ad projects only.
It was noted during an iBooks Author / iAd Producer seminar I attended that iBooks had not enabled WebGL content, so I encourage you to request support from Apple:
http://www.apple.com/feedback/ibooks.html
Alternatively, iBooks Author can present .obj files natively in their own widget:
http://www.apple.com/ibooks-author/gallery.html#gallery-interactive-3d
Obviously, the presentation is limited to the object and not any of the other interesting things you might be able to do with HTML and a WebGL object.
Does that help?

IAd producer and html5 canvas

Similar Messages

Maybe you are looking for