I've installed particle.js in my project and it works with the default effect, I have gone through this site http://vincentgarreau.com and found 5 effects: default, snow, NASA, Buddle and Nyan cat. My question is how can I use those effects in my project? I choose one and I downloaded the JSON config but I don't know how to add it to my project.
You just need to load the json file. The syntax would be something like this
<script>
particlesJS.load('particles-js', 'particles.json', function(){
console.log('particles.json loaded...');
});
</script>
Write the appropriate path if these files are located elsewhere. The 'particles.json' file will be your config file you downloaded from somewhere. You can even edit the particles.json file yourself to get your desired result.
This video by Traversy media is a great reference if you wish to dig deep into particle js and create your own desired effects.
Good luck!
https://www.youtube.com/watch?v=qK3cgD09Qf0&t=1567s
Related
as you see, the HTML content is not colorful, and it cannot autocomplete HTML tag
There are 2 ways to do that.
1) You could manually set the syntax to "Javascript React".
For that click on "Javascript" on the bottom right of your screen:
Then simply enter "react" and select it. After that you should have autocomplete for the html parts inside your render functions.
2) You can instruct VSCode to always open .js files as "javascriptreact". For that go to your settings and copy files.associations over to your local settings. Make sure it looks something like this and save:
"files.associations": {
"*.js": "javascriptreact"
}
Note on that one: This will always set the syntax to "javascriptreact" when you open .js files and might not always be what you want. A better solution would be to generally name react files as myfile.jsx. This way vscode will automatically set the syntax to "javascriptreact".
Hope this helps.
Save the file as .jsx ie (App.jsx) instead of .js
This is because you are saving the file as .js ie App.js.JavaScript files cannot understand HTML tags.
Another alternative is you can save in (.js) but your web pack should be configured in such a way that it should transpile it into .jsx.
For doing refer this - https://github.com/facebook/create-react-app
React understand javascript xml only.
First, I tried finding an option to prevent Swiffy from compressing/minifying all the data when doing an export to HTML5 from Adobe Flash Pro. But no dice.
Even if I was able to read the unminified Javascript that Swiffy exported, I don't think there would be a simple function call for the "clickTag".
It's likely defining the variable clickTag in the huge haystack of {index: #, type: #}, and then doing processing each operations to eventually call the window.open() method (or something similar).
This is how it currently outputs (minified)
Does anyone have any clue how Swiffy implements clickTag?
Or what would be the Javascript equivalent that does the same job?
Swiffy uses the core API of the environment where the ad is served. If it's a DoubleClick Rich Media ad, it does use Enabler.exit("url").
If you want to have a better control on your output file, I'd suggest having a look at Google Web Designer. The closest experience to flash development in the HTML5 - JS era.
Google instructions are here, for plain HTML5 (non-swiffy) click tags.
At the bottom of the file is a snippet of code like this:
<script>
var stage = new swiffy.Stage(document.getElementById('swiffycontainer'),
swiffyobject, {});
stage.start();
Add this right before stage.start(); to mimic previous flash behavior. Ensure you use the proper capitalization.
stage.setFlashVars("clickTAG=http://stackoverflow.com");
**Note: Ensure to use url encoding if there are parameters...doesn't seem to like it otherwise
I just started with Minko and trying to undestand this https://github.com/aerys/minko/blob/master/doc/tutorial/06-Loading_3D_files.md tutorial. I did some steps:
sceneManager->assets()->loader()
->queue(FIREAXE_D)
->queue(FIREAXE_N)
->queue(FIREAXE_S)
->queue(TEXTURE_FILENAME)
->queue("effect/Basic.effect")
->queue(OBJ_MODEL_FILENAME);
and now I am trying to use these three textures with my object and file .mtl -> material.
auto _ = sceneManager->assets()->loader()->complete()->connect([=](file::Loader::Ptr loader)
{
auto objModel = sceneManager->assets()->symbol(OBJ_MODEL_FILENAME);
objModel->component<Transform>()->matrix()->appendScale(0.01f);
objModel->component<Transform>()->matrix()->translation(-1.f, -1.f, 0.f);
objModel->component<Texture>()->set(sceneManager->assets()->texture(FIREAXE_D));
//objModel->addComponent(sceneManager->assets()->texture(FIREAXE_N));
//objModel->addComponent(sceneManager->assets()->texture(FIREAXE_S));
root->addChild(objModel);
});
This won't work and what about .mtl file? How to attach it to my object?
However tutorials are still to tiny and buggy it is better to look for examples but I cann't find any with texture loading for object right now.
This won't work and what about .mtl file? How to attach it to my object?
Your question is about loading a Collada (*.dae) file. Collada files don't have *.mtl files, *.obj files do.
Still, it works the same for any dependency of any file: they are automatically loaded if they can actually be found at the provided path/URI.
You can add include/search paths using the file::Options::includePaths() property, or customize how URI are resolved by using the file::Options::uriFunction(). Many other properties of the file::Options class will help you customizing how assets are loaded.
However tutorials are still to tiny and buggy
If you find bugs please open an issue on github.
it is better to look for examples but I cann't find any with texture loading for object right now.
The following example loads a Collada file along with animations and textures:
https://github.com/aerys/minko/tree/master/example/assimp
There are two elements(table and header) that I can not see when they have been generated in my code.I checked all the .js files, all the templates but there is nothing 'suspicious'.Can you tell me how could I trace the moment when the element has been generated and eventualy from which file?
I used the Fiddler2 to see the order that the things are being loaded and I can see all the .js files and .css files, I checked them all but nothing.
Sure - go to your dev tools, go to the console, and run something like this:
$("body").bind("DOMSubtreeModified", function() { debugger; });
You can monkey with the selector (also assumed jQuery was available) to get it down to the specific item you want. That should give you a stack trace as well.
Let us know if this works!
I am trying to embed a font in my Flash Builder 4.6 project, so far unsuccessful.
I searched around and found this fix, adding "-managers flash.fonts.AFEFontManager" to the Compiler, doesn't work. I've embedded tons of images to the same project, but I'm not sure what's going on with the embedding of fonts.
I get this error:
Multiple markers at this line:
-unable to build font 'Chinese Rocks Rg'
-exception during transcoding: Font for alias 'Chinese Rocks Rg' with plain weight and style was not found at: file:/E:/StarlingIntro - >Finished/src/../assets/textures/chinese_rocks_rg.otf
-Unable to transcode ../assets/textures/chinese_rocks_rg.otf.
For the following code:
[Embed(source="../assets/textures/chinese_rocks_rg.otf", fontName="Chinese Rocks Rg", fontWeight="normal", advancedAntiAliasing="true", embedAsCFF=false, mimeType = "application/x-font")]
public var ChineseRocks_FontClass:Class;
public var chineseRocks_textFromat:TextFormat = new TextFormat("Chinese Rocks Rg");
What do they mean was not found? It's the same path as everything else I've embedded. Does it mean that it's expecting a certain "style" from the .otf file? Wut?
Thanks for any info on this!
PS: it gives the same error for other fonts as well, for example MyriadWebPro.ttf.
[EDIT]
Okay, here's what's going on. I am using this embed code right now:
[Embed(source="chinese_rocks_rg.otf", //yes, it's in my src folder because I'm paranoid
fontName = "myChineseRocks",
mimeType = "application/x-font",
fontWeight="normal",
fontStyle="normal",
unicodeRange="englishRange",
advancedAntiAliasing="true"
)]//embedAsCFF="false"
I have commented out the embedAsCFF, because I tried it with the -managers=flash.fonts.AFEFontManager compiler parameter. None of the two work.
This is in Flash Builder 4.6, using Flex SDK 4.6.0. Now, if I switch to Flex SDK 3.6.0, the error seems to go away, but I can't use 3.6.0 since I'm using the Starling Stage3D framework.
Is it possible that stuff changed from 4.0 to 4.6, and now your article, Divillysausages, (which really illuminated me btw) doesn't apply to it?
[EDIT2]
I solved it! With the help of Divillysausages and his patience :).
Basically, I was completely stupid. I had a "#" and 2x" ` "s in the actual path to my project. I KNEW having those dumb folder names would screw my stuff up some day! And sure enough it did -with Java, but I moved Eclipse out of there a long time ago and forgot about it.
Anyway, I moved the flash project to a more friendly directory and included the embedAsCFF="false" and it worked.
Also, having -managers=flash.fonts.AFEFontManager in your compiler arguments or not, seems to not matter.
fontWeight="regular", doesn't exist. You're probably looking for fontWeight="normal" (or "bold", or "heavy")
Basically what your error is telling you that in the font you're trying to load, it couldn't find the weight "regular", so it can't be embedded.
I wrote this a while ago to explain font embedding, it might help: http://divillysausages.com/blog/as3_font_embedding_masterclass
Be sure you are not overwriting the default flex config file. If you need some config property append them in Additionnal compiler arguments : -load-config+=configFile.xml rather than -load-config configFile.xml It solve our trouble
I had the same issue embeding .otf font to starling project.
Resolved it by converting the otf file to ttf
Good luck