How do I use project files in Construct 3 ?

Hi folks,

I have read this blog of Ashley : scirra.com/blog/192/new-edi ... onstruct-3

Okey, it's cool, we can create and edit files but how I can use my files ?

Let's take for example the stylesheet file, I added this code for my button but doesn't work...

.myButton {
        background: red;
}
[/code:2o2h0ltw]

I have tried also with the ajax plugin, no result...

[b]There is an absolute path to access to our project files ?[/b]

Recently, I have bought the personal license of Construct 3 and I need to style my buttons like in Construct 2...

I'have searched a lot on the web, no answer for the moment.

Thank you for yout help

First off, no need to post multiple times the same topics in the forums (I'm talking about the two topics you posted in the C3 forums, now all duplicates are removed).

Once is enough and will gather the required information.

Project files are files embedded within your project. You can check this tutorial - https://www.scirra.com/tutorials/328/using-project-files-in-construct-2 - to have an exact idea of what they are and what they do. The tutorial is for C2 but still applies to Construct 3.

Now it seems that what you are looking to do is actually different. You are willing to modify the CSS display of a button.

That has nothing to do with project files. Or at least not just as adding a css file.

As you can see in the button manual article (still from C2 but still applies currently until C3 has its own documentation) the button has a "Set CSS style" action.

Use this action to apply the CSS style you want.

You can possibly still use project file, but the thing is you would read the content of the file and apply it to the various elements you want, using the Set CSS style as you go.

We're now entering text manipulation you can read about and find some examples in the How do I FAQ for C2.

Kyatric

Thank you for the answer.

The duplication of topic is not my mistake, when I have tried to post the first topic, I got error "You can't post now, you have posted recently" (something like this, because I have posted in C2 forum) so I waited about 1 hour or 2 and tried again.

I think the first topic was posted and the error was not considered by your scripts...

Sorry however

For use my custom stylesheet I use the Browser Plugin.

+ System: On start of layout
-> Browser: Execute javascript "
var nameFileCSS = 'myStyle.css';
var realUrlCSS = this.runtime.getProjectFileUrl(nameFileCSS );
var styleCSS = document.createElement('link');
styleCSS .rel = 'stylesheet';
styleCSS .href= realUrlCSS ; 
document.head.appendChild(styleCSS );"[/code:g41dfx38]
[b]myStyle.css[/b] is the file's name. 

[code:g41dfx38]var realUrlCSS = this.runtime.getProjectFileUrl(nameFileCSS );[/code:g41dfx38]
That gives you the real URL to request.

[code:g41dfx38]var styleCSS = document.createElement('link');
styleCSS .rel = 'stylesheet';
styleCSS .href= realUrlCSS ; 
document.head.appendChild(styleCSS );[/code:g41dfx38]
That append the stylesheet to the header.

For JS I use:

[code:g41dfx38]-> Browser: Execute javascript "
var nameScript = 'myJSfile.js';
var realUrl = this.runtime.getProjectFileUrl(nameScript );
var jsFile= document.createElement('script');
jsFile.src = realUrl; 
document.head.appendChild(jsFile);"[/code:g41dfx38]

Just for anyone else that needs this, the javascript snippet you need to insert in double quotes is as follows:

	"var nameFileCSS = 'yourfile.css';
	var realUrlCSS = this.runtime.getProjectFileUrl(nameFileCSS );
	var styleCSS = document.createElement('link');
	styleCSS.rel = 'stylesheet';
	styleCSS.href= realUrlCSS ;
	document.head.appendChild(styleCSS );"

Here is an example of integration that allows the use of any javascript within the Construct context:

1. The 'external.js' file is the 'file' folder of the Construct 3 project
2. On start of layout we valid that the JS file has not been loaded by verifying the value of our specific boolean variable. I used "ValerypopoffJS" addons to be able to add JS comparison condition
3. The 'external.js' file is added to the header of the index.html document. Note that we used "this.runtime.getProjectFileUrl(nameScript)" to get the real URL context
4. Then on touch of a button or other event we call call the external JS function with the Browser execute Javascript
5. The callback is set within the function as the 'return' would normally "c2_callFunction("CallBackRandomString", [text]);". It triggers the corresponding 'On' function defined in construct

That won't work if you minify the export, because the runtime method names will change.