Title : HOW TO MAKE A WEBSITE APP - HTML5, Android, iOS
link : HOW TO MAKE A WEBSITE APP - HTML5, Android, iOS
HOW TO MAKE A WEBSITE APP - HTML5, Android, iOS
Hello and welcome to another video I wanted to do a quick example on the "WEB OBJECT" the web object allows you to insert HTML into your games or apps it also allows you to insert JAVASCRIPT if you know any alright let's get started and to do that I am going to go to ADOBE PHOTOSHOP alright let me create a quick template for our.
for our example I am going to make something super super simple so we can use it as a background maybe that's a little too dark I think oops I selected the same color twice! and that's a little better let's insert some letter here let's call this one "HOME" "EXAMPLES" "ABOUT" and "CONTACT" alright, here is out basic website let's add a logo to this let's go to custom shapes let's insert something as a logo, here this looks cool and that looks cheese, let's make this.
there it goes, that looks a little better ok, this is for this example so let me copy this oops copy it and I am going to bring back to (Clickteam)Fusion let's insert a background and let's paste the.
the really terrible looking website image and we are going to lock this so let's right click on the play area and let's insert the "WEB OBJECT" place it over here make it a little bigger and let's go to.
The Sparckman website let's go to the forum and at the bottom you can find.
a section for art alright let's.
let's take this "The Matrix" picture and I am going to copy the address of this image let's go to Fusion back again and let's go to the "Event Editor" and at the start of the frame let's display the image let's load HTML and let's do the usual TAGS to insert an image in HTML you simply enter.
< IMG SRC= quotation quotation single quotes and here is the.
the address for the image, you can see that.
it is displaying the image now, one of the obvious advantages of this is if you happen to embed images like this.
in your game or application you don't actually have to update your game to change the image you could simply change the image on your website and this would change too you can see that this works not too bad except for these ugly scrolling bars alright let's fix that let's go to the event editor and let's edit this and.
you have to remember this behaves like HTML so let's set this to.
actually let me.
first.
resize this to.
width = 400 and the height to 200 you can see that this looks peaty already let's edit this.
Event here let's set the.
The width to.
400 and the height.
to.
200 let's try it out and that looks.
not too bad we still have the problem with the scrolling bars let's fix that let's enter a "BODY TAG" here <body scroll=no actually I forgot to.
To close the <body> let's close it and let's run it and you can see that our ugly scrolling bars are gone but we have this "MARGIN" problem let's fix that too whatever works in HTML works here, ok? let's go to.
let's type: TOPMARGIN equal zero and that gets rid of the top margin let's get rid of the left margin equal zero oops, I must to have misspelled that that time leftmarigin=0 and that works not too bad alright, the last thing we are going to do is.
we are going to change our image dynamically let's insert a new new object a.
editobox I'm going to make this a lot bigger and I am going to take out TABSTOP let's insert a button let's call the button "ok" let's go to the event editor and if the user clicks on the button then we get to call this action let's try it out I am going to press the button now it displays the image so let's make it so if the user enter a.
a URL here it is going to show in the webobject let's go to the event editor let's make a small modication let's take out the.
Adress and let's leave it all the way to SRC= I am going to close this with quotations and close this with quotations after the width and height I am going to enter a + sign and another + sign and in between these signs I am going to enter the content of the editbox alright now, if you run this and press the.
The button you are going to get this "image not found" icon and that's because we need an image alright, let's.
Find something here let's try "3D ROOM COVER" I am going to copy this address and.
let's.
paste it here and you can see that this works not too bad except for the width which need to adjust let's fix the gap we have there and I believe it's the right margin rightmargin=0 let's try it out get the image and we're still getting this.
white spot there let me edit this a little better.
and.
one thing we can do.
I probably.
can put a space here because we have a space here but we don't have one here let's try it out and that seems to get rid of the problem alright, thanks for watching, don't forget to SUBSCRIBE to the channel follow me on twitter and I will see you in the next video!.
Thus Article HOW TO MAKE A WEBSITE APP - HTML5, Android, iOS
You now read the article HOW TO MAKE A WEBSITE APP - HTML5, Android, iOS the link address http://svedda79.blogspot.com/2016/08/how-to-make-website-app-html5-android.html
0 Response to "HOW TO MAKE A WEBSITE APP - HTML5, Android, iOS"
Post a Comment